See all Insights

The Use of Mood Boards in the Web Design Process

A useful strategy for communicating website plans with your in-house team or client is to separate the discussions about information design from those about visual design. This is helpful for both seasoned professionals and web neophytes.

In the previous section, we looked at information design, commonly referred to as a site’s information architecture. A site’s information design is composed of the pages on the site, the navigation systems that connect all the pages, and the elements that are on each page.

Using mood boards is a pre-design planning phase for a site’s visual design, much like grayscreen prototyping is a pre-programming planning phase for a site’s information design. Communicating with your clients about their website’s design can be difficult because they rarely understand design for the web and, therefore, do not know how to talk about it. It is easy for a client to take a position on which pages the site needs to have, what the form fields on the contact page are, and what calls to action should be on the product pages. However, when you start asking them about fonts, patterns, and imagery, things can get a little dangerous. At best, they clam up and offer you very little. At worst, they tell you that the boss loves comic sans and bright orange.

Your clients hire you because they know they cannot and should not design the website themselves. They need you to guide them through the design process. What they need, more than anything, is for you to clearly communicate with them about their site’s design so that they can understand what you are doing, why you are doing it, and provide you with useful feedback along the way.
Jumping right into home and sub page designs is too much of a leap for most clients, even though it seems like the obvious thing to do. When you jump right into page design decisions, the client often wants to talk about the things with which they are familiar, and they go back to talking about non-visual elements, such as page names, navigation, and the like. Ideally, you will have already gone through a thorough information design planning stage with the grayscreen prototype. Now, you need to focus the conversation on the visual design, and mood boards are just the thing.

Mood boards deal only with the visual design elements. In the mood board example above, you can see that mood boards look sort of like a web page in their basic dimensions and proportions, but beyond the logo, there are no typical web page features—no navigation, no links, and not even set text. Instead, mood boards focus on the fonts, imagery, color palettes, and textures for the website. Each of these elements are defined by name on the mood board itself. By doing this, you force the conversation to focus on these elements alone, and you give the client the terms to use to discuss them you.In terms of process, I recommend posting two to three distinct mood boards, working with the client to choose one direction, and then going through another round or two of revisions against the chosen direction.

If the design directive provided by the client is distinct and there is little room for creativity or inspiration, this pre-design planning stage might be overkill. Otherwise, I would not give up mood boards for anything.

A Note of the Web Design Process

The project should have momentum by the time you get to the point of creating home and sub page design comps. If you follow the process described in the past two sections, you will have a detailed, clickable, and approved prototype that clearly defines the site’s information design, and you will have approved mood boards that define the basic components of the site’s visual design.

By following these two steps, you create little chance for miscommunication or surprise in your discussions with your client about the design and functionality of the site. The client should not be blown away by your home page and sub page comps. They are simply the next logical step in an iterative and calculated progression of communication about the website you are creating. This does not mean that your designs will not be impressive, it simply means that it is unlikely that the client will be shocked at any point in the process.
I know that this is going to be a downer for quite a few designers. The moment when they reveal their design can be a thrilling one. That is, as long as the client responds favorably. However, the truth is, clients generally do not like surprises, and they are ill-equipped to deal with them. As a result, these types of “reveals” can often end with both the designer and client leaving the meeting with more questions (and frustration) than they had when they arrived.

I offer a different reveal as an alternative, and we have seen time and again through our experience in working with agencies that thisoneisalotmoregratifying.Asopposedtohavingtheclimaxof the project occur when the designs are revealed (usually in an early stage of the project), what if it happens when a site goes live and is a profitable piece of work that the client loves, the agency loves, and prospects flock to? That sort of reveal is much more appropriate and gratifying. If you follow this process, it is also something that can be achieved with predictable and repeatable success, unlike the way a design reveal may be received.

This post is an excerpt from my book, “
A Website That Works.”


Related Posts