Mood Boards: a Traditional Design Technique Adapted for the Responsive Era
In a responsive, content-first design it is important that you build a flexible system of design elements rather than designing static pages. Before you can start designing screens, you will have to plan that system. Mood boards are a suitable foundation for this purpose. As you will see, high-level conceptual mood boards can lead to concrete applications.
Before the breakthrough of mobile Internet, the world of a digital designer was much simpler. Websites were viewed on large screens with a minimum of 1024 by 768 pixels. This fact meant that designers didn't have to think too much about the canvas, the design area, at their disposal. However, with the advent of smartphones and tablets this certainty has disappeared. Now screens can be big, small, wide, or long, and in many cases screens can be rotated. So, how can a designer make sure that any website visitor has a consistent experience regardless of the device they use? And where do you start with your design if you don't have a fixed design area to work with?
Good Old Mood Boards
A mood board is a very good way to communicate ideas and concepts and to put them on paper for the very first time. Mood boards can help you to explore style directions, without concerning yourself about functionality, content, or precise layout at this early stage. They help you to visualize your ideas. Next to conveying a mood, mood boards can also act as an impetus to think about typography, color, or photography. Because mood boards are independent of technical structure, they work well as a basis for the design of responsive websites. In the concept and sketch stage of the design you can get a feel for the overall style. At a later stage you will be able to translate that into concrete applications. So, your mood board sets a benchmark, serving as inspiration or a reference at a later stage in the design process.
Where to Start
Every design starts with a good story, and that can only be found by asking the right questions. What do you want to convey with your website? What look or feel do you want to convey? What is the purpose and function of the website? Who is the target audience? The answers to these questions will give you several keywords that can act as a starting point for your mood board. Do be creative in thinking about keywords; don't just choose the most obvious ones. That you immediately think of the word "green" for a website about organic food, for example, may be logical, but it won't lead you to surprising insights. It may be interesting to look at words or combinations of words that don't immediately seem to fit together. Take interesting words are try to find images that fit with them. A good place to start is Google's Image Search, Flickr, or Pinterest. But a stack of old magazines can also yield interesting ideas or images. The right images will give the words an extra layer of meaning, making it clear what exactly you mean to say with them.
3 Types of Mood Boards
The main purpose of a mood board is to convey a mood through image, but sometimes text is also used. To achieve that goal pretty much everything goes, whether it is a collage of different images, a strong image with one word, or perhaps a collection of YouTube videos, as long as it is clear what you are trying to convey. There is no fixed formula by which you have to work. In fact, the way you design the mood board is an important part of the story. Mood boards can be used during the design process in several ways. You can use it as a concept board to explore essence and mood, you can use it as a design board, to map the transition from mood to design, or you can use it as a style board to track to process from design to interface elements.
The concept board is the classic approach to mood boards. A concept board consists of fashion-like collages. It explores the general feeling that a website should give its visitors. What do the words in the briefing really mean? What consequences do they have for the design? The concept board is the most free of the three types of boards. It could simply be one image with a word, but it could also be a busy collage of images. As long as it inspires and tells the story, all is acceptable. If you have to present your mood board to colleagues or clients, however, it is very important to think about your audience. Your audience needs to get the message quickly. A concept board is more than a random grouping of things. Keep your eyes on your goal, and ask yourself if this board tells the story that you want to bring across. And be rigorous; kill your darlings! Even though you may have found a fantastic image, if it adds nothing to the story, it doesn't belong on your mood board.
The design board is a first translation of the ideas that are visualized in your concept board. By nailing down concrete decisions on things, such as typography, color, or other design elements, the contours of your visual language will start to take shape. Which fonts will fit best? What color palette will you use? Are there any graphic elements that can be used? Because the design board has a close link with the concept board, the two are often presented together. A good design board will clarify the concept board. Similarly, a good concept board gives additional depth to a design board. With design boards you can quickly explore a number of different directions.
The style board is the further development of your design board. Here, you take the elements of your design board, and you continue to work them out, down to the nitty-gritty of the design. By grouping design and interface elements, such as headers, body copy, buttons and icons, together you can show a clear picture of the design you have in mind. When you work on a responsive design, it is especially important that you don't design screens. You need to develop a design system. By using a style board you can create this system out of separate components and design elements.
Where to Go from Here
Seen together with the interaction design, or IxD, and your content plan, mood boards form the basis for the further design of the responsive website. Now you can start to work out the different content elements of the site, taking into account, of course, the context in which the content will be placed.
Your style board is actually the first step towards developing a style guide, in which you describe the application of the visual language on the various components. The translation to screen design can be done in several ways. A popular one is to use the components to fashion quick mock-ups in Fireworks or Photoshop. Together with the interaction design they form a good basis for a developer to work from. In short, mood boards in general, but especially design and style boards, are a good reference point for design decisions to be made later on.