Visual Design
Processing Request
Print this worksheet: 
Visual Design
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:
Compress Images
Compress Images
Tiny jpg: Smart JPEG and PNG Compression: Optimize your images with a perfect balance in quality and file size
Fonts
Fonts
Google Fonts: These open source fonts are published under licenses that allow you to use them on any website, personal or commercial.
Font pairing:
Font Pair: Helps designers pair Google Fonts together
Icons
Icons
Google Material Design - Icons: All icons are licensed under Apache Licence Version 2.0. Attribution is not required but is appreciated.
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
PicsArt https://picsart.com/image-upscale
- Upscale Images
- Increase the resolution of images
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
CC Search: Find content you can share, use, and remix. Search here for content available under a creative commons licence.
https://search.creativecommons.org/
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.
Pexels: All photos are licensed under a Creative Commons Zero (CC0) licence. Attribution is not required for personal or commercial use.
PikWizard: Over 100,000 free images and videos on the site, with 20,000 of those exclusive to us. We are also adding new images and videos to our library daily and our ultimate goal is to get to more than 1 million images and videos.
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.
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.
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