Visual Design

A great-looking layout has undeniable value, drawing visitors in and engaging them in the material. The design must also further the primary goals of the site’s visitors and service owners.

Find

Make Information Easier to Find

Create a Visual Hierarchy

  • Make good use of proper hierarchy and how the page is laid out.
  • Type sizes and line breaks should be determined based on how you'd like your audience to digest the message.
  • Use proper heading structure and styles to reinforce how content is related.
  • Use color as a tool to reinforce relative importance.

Use Standard Layouts

  • Standardized layouts help the user orient to a new page and reinforces mental models established by other sites.
  • Locations of navigation, main content, supporting content and alerts are easy to find, even on a new site.

Consume and Explore

Make Content Easy to Consume and Explore

Focus on Responsive Design

New websites are being created with responsive design in mind – making the page scalable and resizable for differently-sized screens, including mobile devices. It is important that mobile viewers have an equally designed experience on our websites.

Style Guides

Style guides aid in promoting clean and consistent user interfaces, branding, modular web development, and a more efficient design-development workflow.

Visual Cues

Help Users Complete Tasks by Balancing Simplicity with Visual Cues

Select Icons Carefully

A well-selected icon can reinforce or draw attention to an action. Icons should be "obvious" and not up for interpretation. In cases where icons are not globally used, accompany the icon with text.

Include Negative/White space

Using negative/white space allows the eye to rest before engaging with the content.

Branding

Promote Credibility and Brand Awareness

Use Proper Branding

All websites should be properly branded with the top blue ITS or brand banner. This makes it clear that the site is part of Information and Technology Services, as well as the University of Michigan. Proper branding makes navigating between ITS pages consistent for the viewer.

Selecting Pictures and Images

  • Use pertinent, compelling images to reinforce the text on the page. Where possible, use current, local (visibly U-M) images. If there are no images that are appropriate for the topic, leave the image out.
  • Size and crop images to focus only on relevant content. Edit out any distractions and simplify the image to make it easier for the audience to understand. Properly framed images can add to the impact of the content on a website.

Visual Design Resources