¶¡ÏãÔ°AV

MENU

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

see column control component

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

See cropping images

TIP: 

Use preset aspect ratios for each cropped image

  • Make sure column layouts are not too narrow for reading the content. 

see stacking screen sizes

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 

see applying margin and padding classes

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. 

see different screen sizes

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) 

see Heading styles

Organize information

  • Separate content into coloured sections or outlined boxes to highlighted important information 

see coloured boxes & outlines

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.

See images