A mood board defines the look and feel of a product before jumping to the UI/UX design tools and designing all the final interface screens. Personally, I find it to be the most interesting step of the design process. Whether you call it “industrial mood board”, “graphic design mood board ”, “product design mood board” or any other variation, the steps to create one are simple, engaging and liberating, no matter the medium.
In practice, a mood board is composed of individual images, gifs or even video and other elements (if they add value to what you want to communicate) collected and curated from a previous, wider, research.
This research can be done through online galleries and archives, but if you have the time, try to go offline and visit museums, libraries, and municipal archives. Alternatively, you can just go outside and get inspired, as Gaudi did before building the Sagrada Familia.
The visual references on the mood board have to share something in common and fit a certain style, tone, voice and feelings. Usually, existing art and design works are used for the mood board, but you can also make use of original pieces. It's up to you what to explore in each case.
The most common graphic elements in mood boards for digital products are colors, fonts, typefaces, photography, illustration, geometric forms, layouts & grids, presented on surfaces like UI screens, packages, flyers, posters, and newspapers.
But you can step outside the box.
The coolest mood board example I know is the one presented below. It’s by the designer Tobias Van Schneider for a handmade shoe!
If you present visual elements outside of your industry it's easier to drive the conversation to the look & feel of the product and not to specific details concerning UI screens.
At a high level, a mood board is basically a map or a relational system, which is a very useful creative exercise to communicate a message.
Each mood board layout has to expose relations of complementarity between different objects in order to build a solid idea or concept.
"By bringing together completely different plans, they can regain a meaning that they did not have alone. Ultimately, the plan means nothing in itself, since the meaning will only stabilize in the relation/association with other images. The film does not reproduce reality, it creates its reality."
— Lev Kuleshov (about the Kuleshov Effect)
There are different models of representation, such as atlas, diagrams, visual maps, storyboards, etc. Also, it can be based on different values of comparison, complementarity, opposition/collision, drift, and on essayistic, fictional, documental, and historical principles.
In the field of visual arts, the Atlas Mnemosyne, made by Aby Warburg between 1924 and 1929, is an incredible reference of what a relational system can be. He changed the way we understand images, art, and, in particular, the unconscious memory.
"When we arrange different images or different objects — playing cards, for example — on a table, we are free to constantly modify their configuration. We can make piles or constellations. We can discover new analogies, new trajectories of thought. By modifying the order, we can arrange things so that images take positions. A table is not made for definitively classifying, for exhaustively making an inventory, or for cataloging once and for all – as in a dictionary, an archive or an encyclopedia – but instead for gathering segments, or parceling out the world, while respecting its multiplicity and its heterogeneity — and for giving legibility to the underlying relations."
— Georges Didi-Huberman (2011), “Atlas – How to carry the world on One's back”
Relational systems are also a common practice in the field of Investigation and Espionage. The industry of Movies and TV Shows have been showing it to us so well, as the examples below turn evident, just to mention a few:
It's not just that, the time dedicated to the mood board helps you to be a better designer and to have a more balanced work-life.
In agencies or studios, where people work on different projects at the same time and with constant deadlines, you can easily become anxious or bored. Especially if you get stuck looking at a blank screen.
The mood board is the paid break that we all need.
It gives you time to clear off your mind, slow the frenetic rhythm down, get updated and enjoy the journey of discovering new art and design works.
Otherwise, you would only be reproducing frameworks and recycling the same stylistic approaches from project to project, since it's faster, cheaper, and safer.
But not everything is a bed of roses. Sometimes, when the mood board appeals to a more abstract interpretation, it's tricky for some clients to talk about and recognise its usefulness. They don't understand why they are seeing a Michelangelo sculpture when you are talking about digital products. And that is fair, as no one will make the same interpretation of that image.
As UI/UX designers, it's our role to present the deliverable in a way that the client can understand. Make them comment on the mood board and watch their reactions to have insights and feedback about the look&feel of the product they pretend.
Share your visual references, your culture, your stories, but also be open to learn and listen. At the end of the day, it's that sharing experience that really matters.
Once the mood board gets approved, you already have a creative roadmap to help you make better design decisions in the GUI (Graphic User Interface) phase.
Don't work hard. Hire experienced UI/UX design professionals that can shorten your time to market and improve user adoption right from day one. Talk to us!
Found this article useful? You might like these ones too!
I'm finding inspiration in cultural references to channel them through design. It's also a cliche, but that's what bios are all about.
People who read this post, also found these interesting:
