- About
- Submit
- Tools
- Guides
- Equity, Diversity and Inclusion guide
- Multimedia Consent Guide
- Formal studio portraits
- SFU News
- Brand guide
- Communication strategy
- Editorial style guide
- Media guide
- Project management
- Self-recorded video
- Social media
- Website content guide
- Website project guide
- Website Design Guide
- What makes a good story?
- URL request guidelines
- Blog
- C&M staff
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.
