What is a mood board in UX and UI design?
Mood boards are collages of visual inspirations that are to influence further work on the project. They are typically used in creative fields such as fashion, interior design, graphic design, and advertising to explore and communicate a project's desired aesthetic or visual direction. Mood boards can be used to create brand designs, product designs, and pretty much any other type of design.
The UI design mood board represents the aesthetic and emotional tone that a designer wants to convey through a user interface. It is the most volatile result of a product development effort, as it contains inspirations (rather than ultimate design solutions) that designers can use in subsequent stages of work on a website or application.
A mood board sets the path for finding new inspirations and facilitates generating ideas and collecting reference materials. It is crucial to remember that the final product may differ entirely from what designers included in the finished board.
Usually, moodboard creation is a part of Define or Ideate stage in the design thinking process, and it precedes the phase of initial design and mockups in UI design.
In the context of user experience design, they are beneficial for their ability to depict the emotions and impressions of future product users.
A good mood board includes:
- Images – photos, graphics, logos, illustrations, videos, doodles, gifs, and sketches. It's more about ideation and conceptualization rather than the precise presentation of the graphic layer.
- Color palette – provides an opportunity to delve into the range of hues within the product design.
- Words – key descriptive phrases, alternative product names, terminology, or words that should appear in the texts on the website or application microcopy. They can allow designers to draw inspiration from unexpected sources, set the right direction and create a tone of voice for the product.
- Typography – fonts' visual presentation can support the message conveyed by words. Selecting an appropriate font has the potential to significantly influence your brand's identity, as well as enhance the legibility and attractiveness of your text.
- Textures – in the context of digital products, textures encompass elements such as screen backdrop, buttons, text boxes, and callouts, etc. Incorporating textures contributes to the overall aesthetic of your design, adding depth and uniqueness to make your product more memorable and distinctive.
- UI elements – a mood board may contain examples of UI components such as buttons, icons, and other assets that illustrate the intended visual style.
- Benchmarks – it is useful to keep track of what the market has to offer. Images of competitors' products in a mood board help avoid reinventing the wheel. On the other hand, they can help you develop a more creative, innovative approach to the product.
Why create a digital mood board? Benefits.
Mood boards are temporary by definition, and the inspirations and ideas they contain may or may not be incorporated into the final design. Despite this, the creation of mood boards offers a very proactive start to the design work and allows you to determine the direction for further work.
The main advantages of using mood boards in the design process are:
- Mood boards speak louder than words. Visuals have a powerful impact and can communicate ideas more effectively than words alone.
- Establishing a direction. Creating a mood board allows all stakeholders in a project, such as product owners, to understand the designer's concept and provides a common ground for discussion. Therefore, a mood board becomes a valuable tool for aligning perspectives and fostering productive collaboration.
- Consistency. Brainstorming can yield an overwhelming number of ideas that may not align with one another. A mood board helps assess if they match or clash and make informed decisions about which ideas to embrace to create a harmonious and compelling design.
- Controlled creativity. The collage-like nature of a mood board fosters a sense of playfulness and encourages the unleashing of boundless imagination. Moreover, it serves as a valuable tool for exploring unconventional aesthetic concepts. This process stage allows for experimenting and initiating vibrant discussions regarding the desired aesthetic direction.
- Cost-effectiveness. Creating mood boards is quick, relatively low-effort, and therefore cheap. Moreover, thanks to visually aligning stakeholders' expectations early on, they help prevent misunderstandings, streamline the design process, and reduce the likelihood of concept changes, extensive revisions, and costly amendments.
Good practices in creating mood boards for digital products
1. Research
Before embarking on the creation of a moodboard, conducting thorough UX research is of utmost importance. This crucial step gives a deep understanding of the target audience, helps gather valuable insights into their needs, preferences, and behaviors, and what the client wants to achieve with the new digital product.
If the project is associated with a specific brand identity, review its branding guidelines and visual identity, including color palette, typography, logo usage, and overall tone and feel. It ensures that your design aligns with the brand's personality and values. Additionally, interviewing with a client allows for gathering visual references, inspirations, and insights into the desired emotions the product should evoke. During the interview, it is beneficial to take note of words and phrases that can be incorporated into the mood board.
Analyze current UI/UX design trends relevant to the target audience. Explore products, websites, and social media platforms to identify emerging styles, color schemes, typography choices, and interaction patterns. Analyzing competitors' applications or websites helps designers define their strengths, weaknesses, and design approaches to differentiate your own work.
2. Choosing the right tool
There are two ways to create mood boards. You can create a physical collage by hand on a whiteboard using glue, pins, or other adhesive methods. Physical mood boards are tangible, which makes them ideal for in-person presentations and collaborative sessions, and they can evoke a strong emotional response.
On the other hand, you may create a digital mood board using graphic design software like Photoshop or specialized online platforms such as Miro, FigJam, InVision Freehand, or Mural. Digital mood boards offer advantages such as ease of sharing and collaboration, as they can be electronically distributed to team members or clients. They also allow for flexibility in terms of revising and rearranging elements and incorporating multimedia components like videos. Digital moodboard can be created and accessed from anywhere with an internet connection, making them convenient for remote work scenarios.
3. Mood selection
A comprehensive mood board goes beyond defining the aesthetics of UI elements and encompassing the main concepts of the project. It also communicates the vibe of the product and how it influences users' moods.
You can compile a list of words that capture the desired mood, explore synonyms, and select 4-5 words that best represent it to serve as a foundation for mood board creation. This can also help in determining the tone of voice of the product.
4. Gathering materials
Curate a collection of different resources relevant to the mood you want to evoke, such as images, illustrations, videos, patterns, or text. Sources can include anything, like Google Image Search, stock photography, social media, services like Pinterest or Behance, and magazines or books. You can also think outside the box by finding inspiration from the physical world. Avoid conflicting images by sticking to a specific theme and vibe. If you have multiple distinct visual concepts, create separate mood boards instead of combining them. While you can include competitor product images, remember that mood boards primarily focus on visuals rather than specific features to prevent premature fixation on outcomes.
5. Composition
A well-designed mood board should feature a distinct visual hierarchy. Determine the significance of each asset and prioritize those that best capture the desired mood. Emphasize key elements by making them larger or positioning them in the center of the board. Group similar elements together to enhance readability and navigation. Use white space to create a clear separation between the items to achieve an organized and visually pleasing layout.
Conclusion
Mood boards are a powerful tool for collecting diverse visual assets, exploring them, and allowing everyone involved in the project to understand the design's overall look, feel, and tone. In UI/UX design, they are essential for ensuring the final product meets the needs of the target audience and client, as they foster a shared creative vision, encourage collaboration among team members, guide them throughout the design process, and help them achieve goals.
Mood boards can help UI/UX designers in a number of ways. However, the most important is that they allow to create a shared vision at the beginning of the project. With them, designers can identify problems with their designs before moving on to the more detailed work of creating the UI. This saves time and resources and ensures that clients and users are presented with a design that meets their needs and stays consistent with their goals and expectations.
