How to Create a Mood Board

Gapsy Studio
7 min readDec 14, 2021

--

Moodboard is a word that we have heard very often lately, and it is used not only in design. Mood boards are popular in architecture, photography, media, and more. The mood board design conveys how the designer imagines the project at the very beginning of its inception. It often happens that the client is ultimately not happy with the design of the website or mobile application, although the team spent a lot of time and effort on it. That is why the mood board was invented. It is a kind of preview of the future design of the project. It helps to present and coordinate with the client the visual components of your project.

In this article, we have put together a few tips for creating the perfect mood board for your project to allow your inner creative genius to replicate your creativity on a great mood board.

What is a mood board in the design and why do you need it?

Moodboard (sometimes also called inspiration boards) is a kind of preview of the future design. It helps to present and coordinate the client with the visual components of the future project:

  • Photos or illustrations
  • Color schemes
  • Fonts
  • Material textures
  • Slogans or headlines
  • Logos of the customer’s company or promoted product
  • Icons, buttons, patterns
what is mood board in web design

In general, you need to include all graphic materials that will adequately clarify the project’s spirit and mood. All elements are collected in a collage form on one board.

What should not be in the mood board design?

Long phrases

Remember that a mood board is more of a visual format. Do not confuse clients and colleagues with unreadable texts and unnecessary details.

Incompatible elements

Your task is to show a complete harmonious picture, not chaos. Therefore, choose the style and colors of all elements carefully.

Complex and non-obvious associations

Remember that you are choosing images for the customer and his specific project. Try to take what is 100% relevant to the topic and be apparent to both the client and most people.

Frequently used images

The fact that images should be understandable does not mean that you need to select the most prominent and stereotypical photos. Be creative when searching.

Moodboards make it possible to show the customer what impression your design will make in an accessible and concise manner. And if this is what your client imagined, then you will be ready to quickly start further work, having a clear plan in front of your eyes.

Would you like to know how to create a useful dashboard for your project? Then we suggest you read our article on top tips for dashboard design.

A step-by-step guide on how to create a useful mood board

When you want to build a mood board for the future web or app UI UX design, it is essential to decide whether it will be physical or digital. We offer you tips for creating the perfect mood board, both physical and digital.

Physical mood board

This is a board in the real world. It takes a board to which all the future project contents are glued and visualized as it will look in the future.

How to make a physical mood board?

1) choose images and materials

Look for images and materials that convey the brand’s emotions and project and convey its identity: courage, strength, leadership, energy, serenity, playfulness or seriousness, simplicity or sophistication, audacity, or calmness. Sort what you have collected and start narrowing down your choices by choosing only the most necessary and suitable ones.

how to make images and materials for mood board

2) follow the consistency

Be persistent. Whenever you want to add an image or text, think about whether it precisely refers to this brand and whether it is aimed. Whether everything you want to add will be interesting to your target audience, or it may be superfluous. Never be in a hurry to choose.

how to make a visual consistency for mood board

3) use visual metaphors

When you see a picture of the melting Earth, you instantly think about global warming. A house located on open palms evokes thoughts of security and tranquility, and a light bulb is associated with a brilliant idea, a moment of “enlightenment.” These are all examples of visual metaphors.

how to make a visual metaphor for mood board

A visual metaphor is an image that symbolizes a complex or shows a relationship between two concepts that are usually not related to each other. Such images grab the audience’s attention and present ideas convincingly.

4) choose words

Consider using words or inspirational quotes that would be effective in describing your brand or project. The more accurate and catchy the description is, the better!

how to make a mood board using needed words

5) patterns and shapes

Patterns create visual energy and movement, while organic forms and shapes that occur in nature reflect tranquility. Consider incorporating them into your physical mood board.

how to make patterns and shapes for mood board

Digital mood boards

Digital mood boards are a solution for those who are comfortable doing everything digitally. You visualize your project on the Internet, where there are many cool applications for this with many cool advantages. Digital mood board making is an alternative solution to physical mood boards. It is much more convenient because they make it easy to include images that you have seen on the Internet or objects that you have digitally photographed.

How to create a digital mood board?

Use special programs such as:

  • Pinterest: Pinterest is a popular online service that allows you to grab images from message boards that have been selected by others. What’s great about Pinterest is that collections are already organized for you, making it easy to find and choose images you like.
how to make a mood board with Pinterest
  • Moodstream: Provided to you by friends at Getty Images, Moodstream allows you to customize your image searches with helpers for idea generation and mood boards. Detailed filters such as orientation, location, picture style will enable you to narrow down your choices and reduce the time it takes to filter out images you are not interested in.
  • Mood Board and Moodboard Lite: Moodboard helps you organize, create, and publish multi-user collaborative mood boards. Handy tools let you edit photos, export to pdf and png, and manage multiple boards. Moodboard Lite is a free version that offers all the same handy tools as the paid version but limited to only one board.

Of course, our company welcomes digital mood boards more as it is a much more convenient and modern way. Thanks to the mood boards made in electronic form, we can approve projects and create them in the future all over the world, which is challenging to do with physical mood boards. In the digital version of mood boards, among other things, you can make adjustments much faster, which makes creating a project faster and more convenient.

Wrapping up

Mood Boards are a handy tool. It not only allows the designer to reveal all their creative possibilities but also helps to convey ideas to the client accurately. And the mutual understanding between the client and the design team makes it very easy to work on projects.

We “collect” future web design or mobile app design piece by piece and understand in advance how to realize a dream project thanks to mood boards!

We hope this article has clarified a little, and now you better understand what a mood board is and the ways to create it.

Suppose you want to create a modern project that meets all standards and is aimed at your target audience. In that case, we will be happy to cooperate with you because our designers have many successful projects and satisfied customers on their accounts. You can look at our projects on Dribbble and get acquainted in more detail with the services that we provide, to make sure that we can handle any of your wishes in the field of design.

Originally published at https://gapsystudio.com

--

--

Gapsy Studio
Gapsy Studio

Written by Gapsy Studio

Gapsy Studio is one of the leading UI/UX agencies. We focus on: mobile and web design and development, branding and animation.