Visual Design and Branding


Style Guide

In the visual design phase of a project, the visual presentation or the "look" of the site is created. Applied to the skeleton defined in the interaction or information design phase, the visual design is the final piece of the user experience design process.

Visual design, as it pertains to the complete user experience design, is much more than just aesthetics. It should reinforce the structure of the information architecture, the layout of the information design, the interaction design concepts, and the desired brand identity. Decisions made during this phase will also be evaluated during user test sessions for their effectiveness.

The details of the visual design are usually outlined in a style guide that defines every aspect of the visual presentation including color palettes, typography usage, component design, layout systems and branding treatments. Application of the style guide establishes the visual consistency for all sections of a project and helps to create a unified user experience.

The visual design process includes:

  • Review and organize site objectives. User experience designers should always be reminded of the "why" involved in any project as defined in the site objectives and strategy. This information allows the comparison of these objectives against the user's perception. It is important to pay careful attention to the branding strategy during this phase.
  • Review wireframes created during the information/interaction design. The information and interaction design phases provided a series of wireframe layouts that should serves as the skeleton for the visual design.
  • Create visual design mockups. Using color, typography, contrast and visual consistency, the visual presentation should reinforce the user-based decisions established in all the previous phases. Mockups showing the final interface are created and evaluated at user tests for their effectiveness in establishing site objects and user needs.
  • Document visual design decisions in style guide. Through a series of design iterations, the final visual treatments will be outlined in a definitive style guide that will define the implementation of color palettes, typography usage, component design, layout systems and branding treatments.