be_ixf;ym_202309 d_21; ct_50
Please enable JavaScript in browser settings for optimal use.
Go back to Documentation

Documentation: Elements of Cambrian’s Website Design

Cambrian’s new website has a genuinely unique and impactful design that will set your web experience apart from other higher-education institutions in Canada, and internationally.

Energy and youthfulness are paired with clean professionalism thanks to the use of daring diamond shaped elements in one of the simplest, cleanest layouts seen on a higher ed website.

Cambrian’s externally recognized brand is felt throughout the experience despite this drastic evolution in layout and geometry, thanks to a tightly controlled colour palette paired with photography of real Cambrian people and experiences. The limited base colour palette is essential to achieve the desired level of UX simplicity to help properly direct a user’s attention where it matters.

This creative approach is not only visually impactful, it also helps to achieve your site’s pre-determined goals and objectives, and this is why consistency is key when creating future content and elements for your website (and beyond!).

Colours

A demonstration of Cambrian's website colours including burgundy, dark grey, and white

A tightly controlled colour palette inspired by the current Cambrian College brand will help maintain a consistent experience, as well as overall simplicity and harmony. Limiting colours in this way will help keep the user’s focus in control by reducing the amount of visual information on screen. It also helps keep contrast levels in tune when considering website accessibility requirements.

Typeface

The Bambino typeface is used throughout Cambrian’s updated brand, and this is no exception for the website. Bambino is a premium typeface so it is important to consider it’s licensing and usage restrictions when using in new areas and/or products.

Geometry

A demonstration of geometry used throughout the Cambrian website. In this case, a diamond shape.

Sharp angles and geometry applied to key focus areas create a striking and dynamic experience. Consistent, controlled use of such elements throughout Cambrian’s brand areas can be beneficial in increasing recognition and strengthen the brand in general. Be selective when applying such styling though; overuse can add unwanted complexity and hinder the overall user experience.

Iconography

An example of the style of icons for use on the Cambrian website. In this case, a flat illustration of a light bulb.

Simple Iconography ensures an engaging, lively, and most importantly, intuitive browsing experience by drawing focus to key interface elements. Help users read the interface with more than words. Icons should be kept simple, flat, and employ a single colour to maintain colour harmony.

Photography

The site’s relative simplicity in layout and colours creates a great opportunity to make use of great photography to improve the overall experience. Images can help set the tone as well as to add visual depth to content and key headings. Using modules supplied in the CMS will help maintain consistency and ensure images are used to their fullest potential.

When selecting images, always remember that it should support your content and benefit the goals and objectives of a given page. Align photo selection with the energy and tone of Cambrian’s brand, with great human presence – focus on real people in actual Cambrian locations for a more authentic and believable experience; not to mention the influence on prospective students’ initial impressions and expectations surrounding the school.

Improving page content layouts and designs with shortcodes

Optimize various types of content through use of the supplied shortcodes. Here is a brief overview of key shortcodes that can help you optimize your content.

The Emphasis shortcode.

Help your users notice key statements by making use of the “emphasis” shortcode. This will allow snippets of content to stand out and drive user attention. Also, adding emphasised statements between paragraphs can break the monotony of long, text-heavy pages. Learn how to use the emphasis shortcode here.

Columns

Use of columns can help with situations where the use of long lists in content results in too much white space on the right side of the page. Split the list in question into two columns to balance out the content and deliver a more polished experience to visitors. More on the column shortcode.

Buttons

Remember to use the supplied button shortcode to emphasize important interactions and calls to action. This will give buttons enough attention to help them achieve their purpose. Be sure not to over-use buttons as they will lose their impoact when used in large numbers. One or two buttons will succede in driving focus by standing out on a standard content page (much more so than a simple text link). Learn how to use it here.