What Is a Mood Board In UX And UI Design? | Dodonut (2024)

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.

What Is a Mood Board In UX And UI Design? | Dodonut (1)

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.
What Is a Mood Board In UX And UI Design? | Dodonut (2)

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.

What Is a Mood Board In UX And UI Design? | Dodonut (3)


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.

What Is a Mood Board In UX And UI Design? | Dodonut (2024)


What Is a Mood Board In UX And UI Design? | Dodonut? ›

A mood board presents initial ideas and establishes a look and feel for a design project through a collage of photos, graphics, colors, shapes, textures, and typefaces. It visualizes the effects of brainstorming - the integral and initial part of the design process.

What is mood board in UX UI design? ›

A mood board is a collage of images, video frames, patterns, or text that convey a certain feeling at a glance. Mood boards are widely used in various applications of visual art including branding, graphics, fashion, cinema, industrial and interior design.

How do you explain a mood board? ›

A moodboard is a visual tool that helps you communicate your design concepts and ideas. It's a curated collection of images, materials, colour palettes, text, and other elements arranged to evoke a particular style or feeling.

What 5 elements must you include on a mood board? ›

There are five key elements you need to think about when creating your Mood Board:
  • Backgrounds & borders.
  • Colour & contract.
  • Text.
  • Content.
  • Layout.

What is the purpose of a mood board in poster design? ›

Mood boards are a way to convey the feeling about product you are about to make. Also to get inspiration for colour palette and shapes to use later. In other words, mood board is a collection of textures, images and text related to a design theme as a reference point.

What is a moodboard in Figma? ›

A mood board is a fun way to define your design direction, creating a physical or digital collage to share with others. Designers treat them like blank canvases, free spaces where they can collect and curate images, typography, colors, swatches, small objects, and other design inspiration.

What is a mood board and examples? ›

In short, a mood board is a collection of content to translate an idea or thought visually. A mood board sets a specific tone for anything. Whether you're building a new product, a campaign, or a brand, a mood board can communicate ideas using shared design references.

Why mood boards are important in interior design? ›

Mood boards are crucial in residential interior design and construction, helping express design visions and solidify client briefs. They are collages of images, words, textures, colors, and patterns that visually represent the desired aesthetic for a space.

What are the disadvantages of a moodboard? ›

The disadvantages of the moodboard
  • Moodboards only show one angle. All of the images on a moodboard are static and only provide one point of view. ...
  • Moodboards can't mimic lighting. ...
  • Moodboards lack realism.

How do you present a mood board effectively? ›

How do you organize and present your mood board to your clients or stakeholders?
  1. Choose a format.
  2. Select a theme.
  3. Arrange the elements.
  4. Add annotations.
  5. Prepare your presentation.
  6. Deliver your presentation. Be the first to add your personal experience.
  7. Here's what else to consider.
Apr 13, 2023

What are two purposes of a mood board? ›

Moodboards are a great way to brainstorm, get creative and begin to get an idea of what you want to achieve and where you want your design choices to go. At its core, a moodboard is simply an arrangement of images, text, and other design elements that reflect the desired style or concept of your project.

What is the difference between mood board and design board? ›

The mood board will be a great guide to work alongside in this stage, to help you stay focused on your goal for the space. While the design board will help you see how the actual items are fitting together visually.

How does an interior designer use a mood board when working with clients? ›

A mood board is a visual tool that helps you communicate your design ideas to your client. It can include images, colors, textures, fonts, and other elements that reflect the style, mood, and atmosphere of the project. Creating a mood board that matches your client's vision can be challenging, but also rewarding.

How do you make a moodboard on Figma? ›

Start by establishing the goal or topic of your moodboard. Collect a variety of visual inspiration including images, colors, typography, textures, and patterns. Be intentional about the elements you include in your moodboard. Keep designs simple, cohesive, and focused on the overall design direction.

What are the two types of mood board? ›

There are two types of ad mood boards: digital or physical. It's completely up to you and your working style to choose the one that best fits your marketing campaigns.

Top Articles
Latest Posts
Article information

Author: Dong Thiel

Last Updated:

Views: 6303

Rating: 4.9 / 5 (59 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Dong Thiel

Birthday: 2001-07-14

Address: 2865 Kasha Unions, West Corrinne, AK 05708-1071

Phone: +3512198379449

Job: Design Planner

Hobby: Graffiti, Foreign language learning, Gambling, Metalworking, Rowing, Sculling, Sewing

Introduction: My name is Dong Thiel, I am a brainy, happy, tasty, lively, splendid, talented, cooperative person who loves writing and wants to share my knowledge and understanding with you.