- Engage C&M
- Brand
- Campus Communications
- Media & News
- Social
- Web
- Events Calendar
Design Principles
The first step to designing your site is to consider a layout which best suits your content and its hierarchy. See basic homepage for homepage design and layout.
Columns
- Use the column control component to space out content and create various layouts of one, two, three, and four columns
TIP:
Instead of placing new content within the same column, align content by placing each section into separate individual columns.
- Crop images to be the same ratio to maintain a unified look across columns
TIP:
Use preset aspect ratios for each cropped image
- Make sure column layouts are not too narrow for reading the content.
Tip:
Use stacking classes on smaller screens to fix columns that are too narrow for tablet and mobile screens
Ruled Lines
- Divide content with horizontal rule component to break up sections of content (see horizontal rule)
Tip:
- Use the thick line to divide different content (class: "ruled")
- Use the thin line to separate related content (class: "ruled-thin")
- For ruled lines with more space also include margins (class: "margin-top margin-bottom")
Use White Space
- Create more white space around elements to improve readability and create a clean look
Tip:
- use margins and paddings, sometimes with ruled lines to add white space
Mobile Testing
- Always consider what your page layout will look like on tablet and mobile devices.
TIP:
You can adjust the order of your content from left to right for desktop and top to bottom on mobile.
Consider heading heirarchy
- The hierarchy of your information should be reflected in the heading styles from largest to smallest (ex. H1, H2, H3, H4, and H5)
Organize information
- Separate content into coloured sections or outlined boxes to highlighted important information
Tip:
- Be consistent in the content type. (ie. all important information in red block, contact info in outline)
Use Images & Banners
- Add images for more information about your content
- Add banner images at the top of your pages to enhance your content.
