Design for the web involves much more than simply styling what has been prototyped with images, colors and fonts. It is also more than selecting a fashionable template that fits with current visual web trends. Design is a process that continues to build upon decisions made in the prototype, focusing on how the visual presentation reinforces the purpose of the website while also clearly communicating the character of the brand. Beginning with a discovery stage that combines the personas created in planning with other critical information, like existing brand standards and marketing campaigns, positioning documentation, and other feedback we gather, the design phase then proceeds with the creation of mood boards and lastly, the template-specific layouts.
Website Mood Boards
Creating mood boards for the web is like visual prototyping. Like traditional mood boards, web mood boards compile inspirational elements, color palette, typography and texture in a context that emulates the screen but is not page-template-specific.
At this stage in the design process, it is more important to make bigger-picture design decisions than to consider how specific pages of the website will look, down to the pixel. In other words, mood boards establish a site's look and feel in the same way that a brand standards document specifies how a brand is represented in various contexts. Rather than including the actual layout of a products list page, it will specify which type styles, sizes and edge treatment of images, and other details, such as buttons and spacing, are used in lists throughout the site. Once the mood boards are approved, the design of site page templates is a much more efficient process since the more personal issues that tend to stall design decision making have already been made.
Because the mood board is not concerned with specific page template layouts, it can be developed concurrently with the prototype. This keeps design-related discussions from interfering with the prototyping process, but also engages the client in design thinking early in the process. Being able to see the look and feel take shape this early is often encouraging and motivating to the client--a good thing since maintaining pace is critical to keeping the design phase on schedule and budget.
The Narrowing Funnel of Decision-Making
Like any other design process, foundational decisions support and enable other, more detail-oriented decisions. Since the mood board has already worked out the valuable thinking that goes into the design, the subsequent articulation of that design can be a much more streamlined process. Beginning with the basic arrangement of elements within the layout, decisions in this phase should become more narrow and focused, ending with less consequential issues, like what particular stock image is used in a promotional area far down the page.
Violating this funnel can be quite costly. If the entire color scheme is called into question several weeks into the design of page layouts, or even after the mood board has been approved, the entire team would have to consider the cost (in time and resources) of going back to the start of the process. Something so foundational will naturally have a broad, sweeping impact upon other design decisions, which, in and of themselves, are less significant.
In this example (click image to enlarge), 3 versions of the homepage we designed for Tracks & Trails are represented. At first glance, all three look quite similar. However, first revision contains changes in proportion, specific type styles and icons used, the location of the global navigation, and the logo. In the final version, the size of the "vacation types" box changed, as did some of the specific images used in promotional content areas.
Before the layout design process is complete, it's important to do one last review to make sure there are no remaining inconsistencies with the prototype, that the correct fonts are embedded, and that any stock imagery used has been accounted for and purchased. Once the design is approved, the designer can pass them (ideally, in layered and labeled Photoshop documents) on to the developer to apply to the site, which should already be in progress.