![Web Design Standards vs. Website Best Practices: Our Review of 500 Sites [NEW RESEARCH]](https://www.orbitmedia.com/wp-content/uploads/2015/08/design-2-600x300.jpg "Web Design Standards vs. Website Best Practices: Our Review of 500 Sites [NEW RESEARCH]")
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.
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.
On the web, moodboards often serve two purposes:
Here are recent moodboards we created for the chicagomusic.org project. Click to enlarge.
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.
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.
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/
By signing up you agree to our Privacy Policy.
setting the mood is one of the key aspects of using more percent of our brain, especially on art work, music, graphics, video, and all the related ones, but as always we need to make sure it don’t look weird when a customer walks in and see the different lights.Don,http://www.stgweb.com
Thanks Nick. You are fortunate to have a team of designers and a structure in place to make those kinds of presentations and have those types of conversations. Alas, since I am the sole designer in a university history center, I am not in that position, which makes it infinitely harder to do what I would consider effective design.
We try our best to set expectations at the outset of our process. It starts with our strategists at the early stages of client development and follows its way through to the teams.
For any client it is very important to start this orientation very early. We send them articles like the one above to read. We show examples in the sales process on how a particular moodboard turned into the design and we bring our design team to the table very early so a strong relationship can be formed. Our creative team presents all our designs to clients. We do our best to focus a clients energy on understanding the concept and purpose of a moodboard to get them in the right mindset.
For our presentations we make agendas focused on the hi-level creative goals of the project and explain what type of feedback we are looking for. We set the stage for how the client should react and what they need to pay attention to. Focusing them on things that are important and stress not to jump ahead as more details will be figured out when we apply said mood to the wireframes.
We have had our share of confused folks over the years and from those experiences we learned what to target and how best to focus our presentations. We are still learning! I would encourage a constant conversation with your team about what went well, what did not, how those things can be tweaked to make the process/presentations better. It’s always an evolving process. Hope this answers your question!
What specific advice can you give for how to contextualize these when presented to a client with very little exposure to designers? I’ve been finding a lot of clients I work with at my day job don’t get what they are or how they can give useful feedback. This is especially the case when they are presented via a project manager. What do you say to clients about the mood boards and what questions do you ask them?
Thanks Nick, this has been a really helpful post that I show all my clients now! I think moodboards are a crucial stepping stone between wireframes and the home page design.
Great explanation and working examples! Thx for sharing Nick
@barrettoms thanks. No problem! Glad you found the post helpful.