Images, icons and files

Copy is only a part of how users get information from your website. Images, icons, graphics and files convey additional, at-a-glance messages that are crucial for cohesive and scannable content.  

Images have a huge impact on your site’s look and feel and can convey a lot of information to the user. Follow our guidelines below to optimize the visuals on your pages.

General dos:

  • Choose clear, well-lit images that are properly color balanced
  • Use photos that are similar in style and color temperature to maintain a consistent look across your site
  • Crop images to keep people’s faces / heads in the top part of the photo, with enough head space
  • Use images to break up larger chunks of copy
  • If you’re using AEM, always upload your images to the DAM (AEM’s digital asset manager)

General don’ts:

  • Do not add a frame/border around your images
  • Do not add text to images / photos to maintain proper accessibility and readability of text on the site (instead include the text above or below the image or use an image overlay style in AEM)
  • When cropping images, make sure not to skew the size by stretching part of the photo to a particular size, otherwise the image will seem blurry, and may appear squashed or stretched
  • Do not add special effects or photo filters to your images, as these are not within the SFU brand look and feel
  • If you’re using AEM, never upload images directly to the page as it will slow down your page load time

Banners:

  • Full width banners should be at least 1200px wide to be high resolution, but not larger than 2000px or the images will be too large and increase page loading times
  • Banner images should be the same size on each page to maintain consistency across all your pages
  • Banners should have a short height so there is more room for content below

Carousels:

  • Images should all be the same size/ratio, so the carousel will not jump around to accommodate different sized images
  • Images placed side by side in multiple columns (including overlay styles placed side by side) should be the same sizes otherwise they may not stack correctly, or sit on the page correctly
  • For overlay styles crop or choose photos where text will not be overlay on top of faces, or a lot of detail

News/events lists:

  • Images should be no bigger than 600px for faster loading and cropped to 3:2 ratio