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, 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 simplified 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

We use the UW brand color palette for all HEX and RGB color values.

Color contrast

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

WCAG 2.1 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 UW Fonts for content on our site.

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:

Photographs of people require written consent.
All images on our site must have alt tags to meet accessibility requirements
UW image assets and HFS internal photography are used, along with stock imagery–when needed
Only use images if there’s a real user need and avoid unnecessary decoration

Illustrations: are used sparingly due to ADA compliance

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
Data should be displayed as live type

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