Moodboards: Summoning a Feeling

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Why moodboards are integral to the design process</p></div></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">When all else fails, designers have one last recourse bordering on the supernatural. The project is stuck, the draft is a mess, the elements don’t mesh together. Rather than panicking, our savvy designer traces their steps and puts their fingers on a board that lets them talk to spirits. Spirits of designers who had already solved similar tasks in the yesteryears. Our perceptive designer scrolls back up to the moodboard for the project and quickly finds all the answers.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Creating a moodboard is a fundamental step in the project workflow. This step is often discarded, but it’s essential for a good project, and thus, it should never be skipped. A good moodboard sets up the look and the feel of the final result and allows us to refine the details. Throughout this article, we’ll be showcasing some of the moodboards that we had made for our previous projects.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Setting the mood right: what’s a moodboard and why do they matter</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">A fascinating technique and a significant visual tool, a wall of inspiration and color. Or, to put it simply, a moodboard is a loose collection of images all aiming to evoke a certain mood. When you look at a well-put-together moodboard, you don’t have to read into it, you get the right feeling. A moodboard is far off a prototype, it doesn’t have anything set in stone, but at the early stages, it helps us visualize what the final result could look like. And yet more importantly, what the final result could feel like.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Why does the mood matter so much? The right mood is what keeps your brand positioning together. People rarely remember the exact visuals and the playful, layered taglines. When we think of IKEA, we don’t remember one particular thing: while we might think of desks with silly names and the quirky to-do instructions, we firstly think of cleanliness and coziness. Putting together a moodboard at the beginning of a project is what helps to achieve this coherency, this consistency in the final result.</p></div></div></div>

<div class="p-lr mt-104 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">This is a calm and airy moodboard for one of our projects. It’s peaceful, reserved, rarely using color. You can lose yourself in this peaceful off-white. It’s serene. It’s weightless.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Pulling from the ether: how a moodboard is made</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Once we had already done the thorough research and fully know the product, its features, what makes it unique and its competitors, then we dare to enter the spiritual journey for the right ambiance, for a certain feel, for the right mood. We gather seemingly random images off the internet, that might not even be directly related to the product, but are connected in some way. At this stage, it’s important to not look at design materials: we’re not looking at posters or websites, only photography. It’s so that we don’t get stuck in already made decisions, that we might find new answers. We get a massive pull of images that we cluster by colors, and then take a closer look: what do they have in common? what emotions do they bring up? does it fit the product? They came together until the answer is found, and everything unnecessary is thrown out.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Only then can we look at posters and websites and put together more exact, precise visual references. Once there is a solid foundation, only then we can look at the proper solutions for the tasks at hand. It’s important to go around grabbing references off Awwwards and Behance only after we have a solid and somewhat abstract foundation, so as to not get stuck in these visual references and see them only as potential options, instead of seemingly involuntarily being guided to them as the only possible end results. And the exact visual references serve a secondary, communicative purpose: coupled with a foresighted moodboard, the designer can easily relay their vision back to the manager and the client, and anyone else involved in the process.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">The moodboard and the visual references for the same project. For this youthful project, we needed to bring energy and excitement. Acidic colors and bold contrasts show motion, drive, make you feel alive</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Methodic divination: the conceptual board</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">However, a feeling isn’t everything. Some pretty colours and touchy feelings can go a long way, but they’re not enough. They need context. Our every project hinges on a metaphor for the product, on some concept that showcases the product and makes it memorable. A website shouldn’t just look appealing and feel good, to be memorable it needs something more behind it, an idea. For each project, we create three possible concepts, and to get into the right mindset for each of them, we put together conceptual boards.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">These don’t have to look anything alike: they can come in all styles, in all colors, in any possible shape or form. It matters that they all reveal the same idea. While nothing is ever new (let us not wander into prophesying over the journeys of eternal return and such), any idea could be represented in a number of ways that is only limited by business goals at hand and the designer’s imagination. But that idea has to be clearly defined first.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">The conceptual board for the Under Different Angle concept. The idea for this product is that it lets you take a look at familiar things from a new angle, from a new perspective. It needed to be playful, so that’s why we don’t have the iconic poster for Hitchcock’s Vertigo here</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Receiving messages: how to use a moodboard</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">“Well met... Heed my tidings ye graphic artisan... What this web scroll really needs is for the first letter of each paragraph to be absolutely humongous... The bigger the better, just absolutely ridiculous proportions...”</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Well thank you, scribe-who-spent-most-of-his-lifetime-drawing-stupid-looking-cats, but we only grabbed some medieval illustrations for a romantic, in the literal sense, mood. Once the voices are heard, they need to be translated into our material realm and then be used properly. The first thing is the color scheme: the moodboard isn’t to be followed to the letter, but it’s a great starting point. We see the accents, we see the combinations, and we see what they’re trying to do. Then we can take a closer look at what specific techniques are used, and weigh them against our concept. The visuals don’t exist in an abstract, they need to reveal the idea behind the project. There’s no design for design’s sake.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">In short:</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><div><ul role="list"><li class="h4-style">Right off the start, the possibility of blank page fear is non-existent, we already know where to go;</li><li class="h4-style">Everyone involved is on the same page — it’s nowhere near the level of a dedicated brandbook, but for a work-in-progress a moodboard serves as a sufficient guideline for everyone involved;</li><li class="h4-style">If the project calls for photos, we already know near exactly what the photos should look like;</li><li class="h4-style">Figuring out the right color scheme takes much less time than it would have;</li><li class="h4-style">Creative block is highly unlikely with this rich inspiration source ready at hand;</li><li class="h4-style">Moodboard helps with details — for example, if we don’t know whether in web the buttons should be sharp or round, well, we just take a look at the moodboard and see whether the elements used are sharp or not;</li><li class="h4-style">And finally, when the project is near done, we put the result next to the moodboard — if they match, the spirits were successfully channeled.</li></ul></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">Part of a moodboard next to the final website. A bullseye moodboard can even bleed into the concept — we were so enamored with the Japanese wood-working technique Kumiko that it dictated the design direction for the whole project</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Outro</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">A mood might seem like something intangible and ephemeral. Something that fully invites a discussion that might even touch upon spirits and messages, and ask superficially lofty questions on how we perceive things. But every good designer is at least a touch familiar with behavioral psychology (through osmosis at the very least), we already know how we react to different colors, to different shapes, how we can effectively mix everything together. Getting to the right mood is just the question of a systemic approach with only some creative flight to it.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Talking about moods and feelings invites a certain degree of eccentricity. Nonetheless, moodboarding isn’t just some flashy trick and an excuse for a designer to scroll Pinterest or Instagram for a few hours instead of getting something done. A good moodboard informs the direction of the whole project and greatly prevents the design workflow from derailing. Spending some extra time at the beginning of the project on a good moodboard imperceptibly yields results that are, for the lack of a better word, are simply amazing.</p></div></div></div>

Moodboards: Summoning a Feeling

You might also like