8 Tips for Shaping Product Aesthetics with UI Mood Boards

Creating Moodboards for Perfecting Product Aesthetics min

Mood boards are a compilation of illustrations, newspaper cutouts, images or pieces of text put together on a physical or digital board. The purpose of a mood board is to make everyone agree on the creative direction of a project. You can use it for any creative endeavour, and it’s immensely useful in product design. Let’s see do’s and dont’s of UI moodboards.

Keep everyone on the same page, collaborate easily, and make sure you’re meeting your design goals. Try UXPin for free and find out how it streamlines prototyping, user testing, and design handoff. Sign up for a 14-day free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What are mood boards?

A mood board is a visual tool that designers use to capture ideas and communicate them to each other. They can ‘pin’ various visual scraps, illustrations, or fonts to see if they work with one another and help build a unique style for the product. Since they support conceptual work, designers usually create them before proceeding with later stages of UI design, such as mockups

As a result, all stakeholders can get a rough idea of how the product might look and feel. 

Mood boards can either be physical or digital, depending on what tools designers prefers to use. However, most people today use the latter as they’re more accessible, easy to work on collaboratively, and more affordable in the long run. We discuss this in further detail next.

Physical vs digital mood boards

So, what do designers take into account while choosing between the two? It mostly comes down to their preferences and project goals. From a technical standpoint, how do these two mood board types differ? 

Physical mood boards involve the use of tangible materials. Such assets include pages from magazines, various types of paper, fabric swatches, and other ‘tangible’ elements.

Some designers may prefer the tactile and immersive experience of physical mood boards. They can be particularly useful when collaborating in person, as well as when you need to feel the texture of what you’re designing.

If the entire design team is based in-house, it’s easy to use physical boards in on-site brainstorming sessions and to apply real-time adjustments. The downside is that creating physical mood boards is more time-consuming. It can also be more costly, since they require printed materials.

Digital mood boards, on the other hand, involve compiling several elements into a digital collage. One of the more distinct types are UI mood boards, which let designers work on digital product interfaces.

Among others, these online boards can feature color palettes, typography samples, and screenshots from inspiring websites or apps. They offer several benefits over physical ones. Two of them stand out the most – convenience and flexibility. 


To sum up, if you’re working on a UI, digital mood boards will likely be the best option. They make it easy to share your concepts not only with fellow design team members, but also developers and other project stakeholders.

When choosing between the two, consider all factors. These may include the size of the product development team, project requirements, budget, and whether you cooperate with others entirely on-site or remotely.

How to Integrate Mood Boards in Your Design Process

To make the most of your mood board, you have to effectively integrate it into your design process. Here is how you can use it for a couple of purposes.

For exploratory purposes, when you’re working on a new feature 

When creating a product, mood boards can serve as a starting point for gathering inspiration and exploring different design directions. Irrespective whether you’re a solo designer or part of a team.

By curating a collection of diverse visuals, color palettes, typography samples, videos, and other design elements, designers can ignite their creativity and explore various possibilities before deciding on a specific aesthetic. Better yet, mood boards can help you spot any potential issues, well before you work on your wireframes. 

For example, say that you’re thinking of using a highly-decorative, serif font. After adding it onto your website mood board, you realize that it wouldn’t be consistent with the remaining elements of the design. Or, that serif type could be challenging to read on smaller screens.

To figure out product branding

You can use brand mood boards to ensure that your design ideas are on-brand. For instance, if you are creating a mobile app for a fashion company, a mood board could include photos from the catwalk, vibrant color palettes, and sleek typography. You could experiment with layout from traditional fashion magazines to see if they would work for your project.

image 1

Or, if you are working on a website for a meditation platform, you might want to create a UI mood board consisting of serene nature images, soft color palettes, and minimalistic font.

As you can see, having those elements on the mood board can set the tone for the entire design. It ensures that it’s appealing to the target audience and evokes the right emotions. In fact, studies show that 94% of consumers are likely to recommend a brand with which they are emotionally engaged.

Boosting understanding and collaboration across the product design team

Though indirectly, mood boards serve as an effective communication tool. Particularly, if there are multiple stakeholders involved in the product ideation stage, including your clients.

Sharing the mood board ahead of any brainstorming sessions lets everyone take note of how the current design direction makes them feel. If anyone on your team believes that part of your board doesn’t fit the style, they can share their opinion, and come up with an alternative solution.

Such feedback can influence the direction of the entire project.

Maximizing UI Mood Board’s Potential – Do’s & Don’ts

As mentioned earlier, mood boards can be a great tool in the design process, but you need to know how to use them to get the best results. Here are some do’s and don’ts that you can follow to make the most out of your mood boards. 

Clearly define your goals

Before adding any elements to your mood board, set clear goals and objectives for your design project.

  • Why are you designing the website or app?
  • Who is your target audience and why would they use a product like yours?
  • What message do you want to convey?

You should also consider any project requirements or limitations you’re aware of. Also worth noting? Having clear objectives will make it easier to choose the best UI mood board template for your project, if you don’t want to start from scratch. 

Diversify your sources of inspiration

Whether you’re creating a digital or physical product, you don’t have to reinvent the wheel. Seek inspiration from various sources, even those that don’t seem to be connected to an industry like yours.

Peruse various websites, magazines, art, and nature. Opening yourself up to more diverse sources means exceeding assumptions and boosting your creativity.

Continuously reference your mood board

The main goal of your app or website mood board is to inspire and remind your team of the core narrative, or their vision, that they must consider when making certain design choices.

Encourage everyone on the team to refer back to the mood board when in doubt, as a guiding reference.

Don’t get attached to your initial concepts

Despite being a source of inspiration and direction, mood boards are not meant to be static. You should look at your mood board as a living document

image 2

It should evolve alongside your design and new information on your target audience.

Don’t overcrowd the mood board

Even though mood boards are meant to inspire and guide design teams, it is crucial to keep them simple and well-organized. So, you should resist the temptation to include every interesting piece of design you come across.

Overcrowding the brand mood board can lead to visual clutter and confusion as to which elements take precedence over others. You should only include the most impactful and relevant design elements that align with your goals and convey your desired message.

UI mood boards – the perfect tool for design ideation

As we’ve demonstrated in this piece, UI mood boards enable designers to create digital products that are not only aesthetic, but also trigger the right emotional response. They’re a true source of inspiration for designers, particularly in the first stages of the  design process. 

Not to mention they create a common understanding between design and software teams, clients, and other project stakeholders, early on in the product development process.

Increase transparency and understanding between designers and other people on the team. Use one of the most collaborative prototyping tools out there. Sign up for a free UXPin trial.

Build prototypes that are as interactive as the end product. Try UXPin

by UXPin on 5th June, 2023

UXPin is a web-based design collaboration tool. We’re pleased to share our knowledge here.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you