Home » General Design Guidelines

General Design Guidelines

Best practices for building your website

When designing a website, you must always keep your main objectives as the top priority. Who is your audience? What are they looking to do? How will they navigate to your page? These questions will guide how you want to design that user journey. However, mapping that journey into a visually aesthetic page can be challenging. Below is a collection of tips to help you select and place your website modules, keep consistent with the global user experience and ensure your page is on brand.

  1. Only use one H1 title at the top of each page - Heading tags do more than change the font size, they aid screen readers in scanning website content. If they are improperly organized, this will confuse the content categorization for those using screen readers and therefore reduce our SEO results.
    • H2 = Secondary level headers
    • H3 = Third level headers

  2. Avoid stacking three (3) or four (4) column modules on top of each other - Ensure a balance of blocks, content, page length and width. If you are looking to use a three (3) column block, consider putting it on a full-width module. Keep in mind that the column modules stack on mobile devices, meaning that pages can get very long if multiple three (3) and four (4) column modules are used on a single page.

  3. Keep total number of modules per page to a maximum of seven (7) - This does not include the header/navigation/footer. While this is just an average estimate based on pages, and not a hard cap, it serves as a valuable resource for planning pages. If your module count per page is way above this total, consider creating a new page and organizing your content into more digestible points and specific topics.

  4. Less is more - Do not attempt to put all of your content on the home page. This creates a cluttered page and makes it hard to find the main points, especially on a mobile device. Look to simplify your content or break it into sections (or pages) for easier searching and readability.

  5. Use modules for their specific functional specifications - Do not attempt to customize the modules design or functionality. These were designed to have a consistent user experience from all our web properties. If there is functionality that is missing on the website, do not create it yourself. Instead contact us and we can look at building a new module. This will not only ensure consistency but also help other web managers who are requiring similar functionality.

  6. Use the grey backgrounds on any of the modules for a visual break - This background was designed to help group a few modules together or provide a visual break from copy. It should be used sparingly on pages and only for the above-mentioned purposes.

  7. Use the spacer module to gap content between other modules - Sometimes you want modules to be close because you are connecting together the different pieces of information. However when it is a new section, look to add a spacer (the same process as a module) to add some room between your modules for easy viewing and a division of ideas.

  8. Photography should reflect the brand - Aim to have your images showcase our institutional values of inspiring, welcoming/friendly, confident and ambitious. Avoid external infographics and stock photography. Not sure where to source photos? There is an image collection that is available to you and updated regularly.

  9. Design your content for easy scanning - As showcased on this page, the use of bold, spacing, lists, headings and icons can help direct you to exactly what you are searching for. Some other options for long-form content include anchor links or accordion modules.

  10. Banner dimensions - The dimensions of the original image you upload to your site can have a big impact on how it displays. For the home page banner, we recommend using images that are between 1642 and 362 pixels wide and 1366 and 362 pixels wide for Secondary pages. Images smaller or larger than the recommended pixels may appear blurry, cropped or pixelated when they stretch to fill the banner container.
    Other module image dimensions can be found in the Modules Library.
for more information

For more information or to get more detailed design specs for each module, including recommended character counts, image sizes and much more, visit the Module Library.