Item request has been placed! ×
Item request cannot be made. ×
Print this worksheet: Training 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:
- Choose images, fonts, and icons that are free to use under Creative Commons or other free use licenses.
- 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.
- 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.
- 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.
- 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.
- 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:
Free Online Image Resizers
- 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
- Crop image
- Rotate images
- Resize width and height
- Shows preview of the image
- Bulk optimizer
- Modify contrast and exposure
- 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.
Pexels: All photos are licensed under a Creative Commons Zero (CC0) licence. Attribution is not required for personal or commercial use.
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.
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.
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.
CC Search: Find content you can share, use, and remix. Search here for content available under a creative commons licence.
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.