Dim the lights. Light some candles. Pour a glass of wine. Put on some Steve Winwood softly in the background. Are you in the mood? We are.
In all seriousness, here at Orbit we like to set the mood before jumping into the full website design. How do we set the mood, you ask? Well, we do it through our design process step called the moodboard. Sounds sexy doesn’t it? However you feel (pun intended) about designing for the web, our experience breaking the process up into iterative steps works wonders for project success.
What is a Moodboard?
Moodboards can be, but are not limited to, a collage of colors, typefaces, images, textures, and design elements that evoke reaction visually. Using moodboards, one can quickly present multiple creative directions and elicit helpful user feedback without having gone too far along in your project. Moodboards are just one of many web design techniques that we use at Orbit.
What Does a Moodboard Mean on the Web?
On the web, moodboards often serve two purposes:
- The first is the obvious: getting the team closer to the execution of the creative work, which is a pretty common use of this step not only in web, but in full campaigns, interior design projects, and print design projects.
- Moodboards can also serve as design guides for folks who design “in browser” and/or are “working responsively” (both of these methods are another article for another time).
Here are recent moodboards we created for the chicagomusic.org project. Click to enlarge.
Why is a Moodboard Effective?
The main impact a moodboard has when used as a client-facing tool, is that it directs a conversation visually. Words like clean, minimal, textured, grungy, hopeful, bright, innovative, and smart carry plenty of meanings and are interpreted by designers, clients, account folks, or project managers very differently. What one sees as minimal another may see as unfinished. The use of the moodboard orients a design conversation around tangible elements without going too far in a process or spending too much budget heading down the wrong path.
How Does This Philosophy Translate to a Website Design?
Oftentimes, this can be a hurdle for folks who have a hard time envisioning how these more abstract elements can fully make up their website, website navigation, house, campaign, etc. This is where designing for the medium comes into play. If you are creating a moodboard for a web project, make sure it contains elements that relate to the web. Including elements such as button styles, header styles, image styles, link styles, and icon styles within an overall feel will help a client understand how their website will eventually look when applied to an interface.
Projects range in terms of scale and complexity, so there is no one-size-fits-all solution. Some moodboards may require more or less design elements in order to successfully communicate the creative direction. As the lead creative person working on the project, it is your responsibility to help the client see your vision through detailed and focused presentations. These things won’t sell themselves.
Screen cap of the homepage design for chicagomusic.org. Click to enlarge or visit the site.
Should You Always Create a Moodboard?
In our experience, we almost always create a moodboard, even if the project goals seem so straightforward you could jump right into designing the interface. We recommend doing several versions so everyone feels confident that we are on the same page and understands the stylistic plan for the website.
In certain cases that involve fast deadlines, budget constraints, or highly directed brand guidelines, there may not be the opportunity or need to create one. However, it usually it saves time vs. wasting time making design changes in the end. Orbit has used moodboards as an integral step of our process for the past three years, and we are confident it has made a marked improvement in our business.
If you’re jumping into your next project, consider trying this methodology out in some fashion. Does anyone else do a similar process? Had similar success? We would love to hear it in the comments below.
Some additional reading on this for you!
http://badassideas.com/style-tiles-as-a-web-design-process-tool/
http://uxdesign.smashingmagazine.com/2012/02/06/collaging-getting-answers-questions-you-dont-know-ask/
