Print this worksheet: PDF iconTraining Worksheet - Visual Design

Training Worksheet: Visual Design

Tips and Resources to Help You Design Your Website

Visual design is the strategic use of images, colors, fonts, and other elements to enhance the content and function of your website. Consider the following when choosing visual elements:

  1. Choose images, fonts, and icons that are free to use under Creative Commons or other free use licenses.
  2. Choose visual elements that relate to your brand and logo - colors, fonts, and images should match or complement your brand style. Limit the number of colors to create consistency.
  3. Limit font styles to two on your site - one serif font and one sans serif. Make sure your fonts are clearly readable and legible. Users will read larger text first so highlight important information by increasing the font size.
  4. Consistency is important for a professional look to your website. If you are creating graphics with text, such as large sliders, use the same fonts that are used on your website.
    • If you have a row of similar elements, such as callouts or a mini slider, ensure that the images are all the same type, color, or style of icon.
    • The more consistency there is on your site, the easier it is for users to scan the page and focus on the content.
  5. The strategic use of white space on your site ensures that your site is readable and quickly scannable. White space creates balance to the page and allows users to concentrate on the content.
  6. The hierarchy of content on the page shows the importance of information. Hierarchy is shown by font size, colors, and placement on the page. The most important content is generally at the top of the page.

Resources for free images, fonts, and icons:

Compress Images

Compress Images

Tiny jpg: Smart JPEG and PNG Compression: Optimize your images with a perfect balance in quality and file size

https://tinyjpg.com/

https://tinypng.com/

Fonts

Fonts

Google Fonts: These open source fonts are published under licenses that allow you to use them on any website, personal or commercial.

https://fonts.google.com/

 

Font pairing:

Font Pair: Helps designers pair Google Fonts together

http://fontpair.co/

 

Icons

Icons

Google Material Design - Icons: All icons are licensed under Apache Licence Version 2.0. Attribution is not required but is appreciated.

https://google.github.io/material-design-icons/

Image Dimensions

Image Dimensions

Optimal image dimensions for use in your Stacks Website can be found in our User Manual under Images

Image Hosting & Gallery

Image Hosting & Gallery

Options for Image Hosting & Gallery can be found in our User Manual under Images

Resize Images

Resize Images

Free Online Image Resizers

PicResize http://www.picresize.com/

  • Crop images
  • Rotate images
  • Resize to custom width and height in pixels or percentage
  • Batch resize images
  • Define the output format and maximum file size

WebResizer http://webresizer.com/

  • Crop image
  • Rotate images
  • Resize width and height
  • Shows preview of the image
  • Bulk optimizer
  • Modify contrast and exposure

Rsizr http://www.resizr.com/

  • Need to download a Flash plugin
  • Crop image
  • Rotate an image
  • Resize height and width
  • Resize the image to a custom pixel size
  • Save as jpg or png file

Online Image Enlarger https://www.imageenlarger.com/

  • Free online tool
  • Upscale small images without losing quality or introducing distortion
  • Suitable for jpg. png. gif. bmp.

Stacks Collection

Stacks Collection

In the Stacks Collection, find a selection of free stock images that are formatted to the correct dimensions for specific Stacks elements:

Stock Photos

Stock Photos

Pexels: All photos are licensed under a Creative Commons Zero (CC0) licence. Attribution is not required for personal or commercial use.

https://www.pexels.com/

Unsplash: Gifted by the world’s most generous of photographers. All photos are licensed under an irrevocable non exclusive copyright licence.  Attribution is not required but is appreciated by the contributing photographers.

https://unsplash.com/

Pixabay: All contents are released under Creative Commons licence, which makes them safe to use without asking for permission or giving credit to the artist - even for commercial purposes. This site is recommended to find photos for corporate and medical markets.

https://pixabay.com/

Freerange: All images are licensed under Equalicense and can be used for commercial or personal websites. No attribution is required but attribution is appreciated.
This site is recommended for medical markets.

https://freerangestock.com/

CC Search: Find content you can share, use, and remix. Search here for content available under a creative commons licence.

https://search.creativecommons.org/

Visual Design

More information on Visual Design

Usability.gov is the leading resource for user experience (UX) best practices and guidelines, serving practitioners and students in the government and private sectors.  The site provides overviews of the user-centered design process  and various UX disciplines. It also covers the related information on methodology and tools for making digital content more usable and useful.
https://www.usability.gov/what-and-why/visual-design.html