Skip to main content

Visual Design

Guiding Principle

The guiding principle for the design of our website: it must be useful and engaging. A useful website means it is easy to use and it provides the information our users need. The usability of a website is determined through testing. Testing informs the design of the site in the same way it informs what content we provide.

Usability clears the way for a good experience by eliminating unnecessary distractions, but a great experience comes from something more—an awareness of why our audience cares. Engagement goes beyond “ease of use” by creating a desire to use our site. The design of our website is functional and emotional.

Guiding Concepts

Friendly, welcoming, helpful and engaging

Design Objectives

Organize elements such as typography, grids, space, scale, color and imagery to create hierarchy, meaning, and focus that immerse the user in the experience

Economize by including only the elements that are most important for communication, a simplifed and visually organized interface works well with our responsive framework

Clarity comes from creating a clear path to the goal, avoid ambiguity, the most important elements should be easily perceived

Elegance The experience of the site should be deeply satisfying to the mind—shapes, colors, layout and functionality

Visual Elements

Our brand elements are part of our personality. The foundation of the HFS site design are UW brand elements (Boundless W, fonts and colors).

Color Palette

Use the UW brand color palette. Hex colors shown, plus black and white.

UW-color-palette-hex.jpg

Color contrast

WCAG 2.0 requires that the foreground and background colors have a 4:5:1 contrast ratio at Level AA.

WCAG 2.0 also requires (at Level A) that color not be used as the sole method of conveying content or distinguishing visual elements.

Fonts

Carefully crafted typography is essential to facilitating communication. We use one font throughout the site—Open Sans in Light and Bold. Open Sans is simple and easy to read and a UW brand font designed specifically for the web.

  • Headings: Open Sans Light, use initial caps; do not make headings bold
  • Body copy: Open Sans Light, left aligned
  • Links: within body copy should be purple and underlined

All of the above are built into the template styles.

Photography and Illustrations

Photographs and illustrations on our site make it feel welcoming, friendly and engaging. The following standards apply to all images used on our site, whether published on the site as part of an HTML page, or contained within a publication hosted on the site.

Photography guidelines:

  1. Photos should be created by, or on behalf of, HFS so we own the copyright 
  2. Photographs of people require written consent. 
  3. All images on our site must have alt tags to meet accessibility requirements
  4. Only use images if there’s a real user need, avoid uncessary decoration

If images are needed they should be landscape and use the following aspect ratios

  • 3:1 Landing page heros
  • 4:3 When images are placed in 2, 3, or 4 columns and slide shows

Photo-ratios.jpg

Photoshop templates are available on the ComMar server.

Illustrations: create illustrations without a background so they float on the white page background or inside an infographic widget which use tinted backgrounds. Save illustrations as .svg files.

Illus-gray-white.jpg

Use Alt Text

The alt tag is the most basic form of image description, and it should be included on all images. The language will depend on the purpose of the image:

  • If it’s a creative photo or supports a story, describe the image in detail in a brief caption.
  • If the image is serving a specific function, describe what’s inside the image in detail. People who don’t see the image should come away with the same information as if they had.
  • If you’re sharing a chart or graph, include the data in the alt text so people have all the important information.

Buttons

Buttons can be purple or gold. Purple is generally used for undergrad content, gold for grad student content.

Button text: Should be short and describe the destination where the button is taking the user.

Button alignment: Align buttons to the left edge of your text, in the user’s line of sight.