Mood boards and Style guides in UX Design (2024)

What is a mood board?

Mood board is a collection of textures and images, are used as a way to convey the feeling about a product you are about to make. They are used to get inspiration for colour palette, layout and shapes in the design you're working on.

Having a mood board is important so as to get the general idea of the design you’re working on. And working on a mood board with a client helps you as a designer to poke in the client’s mind and see what their vision is towards their design.

Style guide

This is a set of items that define a consistent aesthetic/theme for the entire design. It defines the visual branding of the design and serves as a reference for the project.

Having a style guide is important since it helps us keep a more consistent design across different mediums.

Style guides greater transparency and organization of elements, which are being used by the designer, and it also helps for other designers to pick up where you left off with the help of the style guide

Things to include in your style guide

  • Color palettes - (primary and secondary colors) to be applied to ui elements such as font, call to action buttons, links, active states of interactive elements

  • Iconography - the types of icons to be used and the styling of the icons

  • Typography - The font family to be used. Font sizes for page titles, various levels of subheadings, and paragraphs. Clearly distinguish these elements using font size, weight, and color.

  • Ui elements - showing the active, inactive or disabled states as well as their various sizes

Importance of creating a mood board before designing

They help to establish the basics. Mood boards help to establish all of the baselines that will eventually go into a style guide: color palettes, typography, layout, image treatments. Mood Boards also help a designer to organise their thoughts in a specific direction that the design is heading to.

What to include in your mood board?

Color schemes of the designEvery color has its own meaning that it conveys and the differences in tones and hues of the color can determine the emotions that a particular color can invoke. Including the color schemes in the mood boards shows the choice of color palettes that relate to the brand.

Imagery usedWhat types of imagery is to be used? Is it leaning towards illustrations or more towards photography based representations? How dense are the images? Are they filled with multiple subjects or is it a minimalist approach?

TypographyLike color, typography also has the ability to tell stories. What’s your client’s story? What message are they trying to convey? Is it fun? Is it classy? Is it professionalism? When presenting typography, be sure to present different variations of type — from thick to thin, serif to san serif.

Figma - this is a tool used by most designers. Figma is available to use in browsers and has a desktop application. As a designer you can import images and texts from various sources on a board to create a mood board for your design.

Canva - this is a design platform available online that has a collection of professionally made templates and media library for images, illustrations and more design elements. You can then start customizing the ones you like best to fit your project perfectly using easy drag and drop to create your mood board.

Behance - this is a . It has a collection of design and pictures that you can search and add to your mood board. Behance boards allows you to add images and even projects in your mood board and even add collaborators

Pinterest - this platform allows you to create a board where you can add all your inspiration. You can pin (bookmark) all the images related to a specific theme in one board

Difference between Mood board and Style guide

Style Guide is used as a reference point for the entire design so as to ensure consistency of the design elements. Mood board is used to organise the inspiration for the design and capture the mood or feel of what the design should look like.

The mood board is created before the style guide is created.

Hopefully you've understood more about mood boards and style guides. Feel free to comment on anything

References

https://www.uxmatters.com/mt/archives/2019/11/creating-a-ux-design-style-guide.php uxplanet.org/creating-better-moodboards-for..

Mood boards and Style guides in UX Design (2024)

FAQs

What is a mood board in UX 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.

What is the difference between a mood board and a style guide? ›

In essence, while a style guide is the concrete set of rules that govern your brand's identity, a mood board is the abstract foundation that inspires it. Together, they contribute to a comprehensive visual strategy that keeps your brand's appeal consistent, fresh, and engaging.

What is style mood board? ›

In short a style mood-board is a collection of images that encapsulate your overall style in a quick, easy and digestible way (which is just how we work – to make your style life simpler)

What is a style scape vs moodboard? ›

A moodboard is simply a collection of 'stuff' for inspirational purposes. A stylescape is more carefully curated, modified and designed (to some part) in line with the brief.

What is the difference between a moodboard and a lookbook? ›

A Mood-board is design direction for one project. It differs from a look-book in that look-books comprise of multiple ideas which may or may not be unified under a theme.

What is the main purpose of 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 is the difference between a mood board and a style frame? ›

Mood boards generally just scratch the surface of what your animation is going to look like while style frames are where you actually start designing your animation elements. At VMG Studios, we typically deliver two unique style frame designs to a client based on feedback from the mood boards.

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.

How do designers use mood boards? ›

Moodboards are a collage of images, videos, fonts and colors. They're used to communicate a visual direction, reflect a style or convey a mood. A lot of creative industries use them to communicate various things including: Conceptualization: Visualize and explore creative ideas.

What is the difference between style and mood? ›

When an author writes, he or she uses a style appropriate to the purpose of the text, but also uses language in a way that sets him or her apart. Tone is the author's attitude toward the subject and mood is the feeling the work invokes in the reader.

What is the difference between mood board and style tile? ›

“With a style tile we ensure that we do not base our choices on taste, but on user needs and business goals.” Mood boards are too vague and mock-ups too specific. A style tile provides the right balance.

What is the disadvantage of moodboard? ›

Moodboards lack realism. By piecing together static images from different sources, the interior designer is unable to bring all of the elements together to make the space feel realistic. Continuity can be a problem and cause the customer's imagination to run wild.

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.

What does a professional moodboard look like? ›

Mood boards are often about picturing a concept. The mood board should contain elements that will show the look and feel of your idea. Add images, files, and any other material or content that helps you deliver your vision and pitch your project.

What is a mood board for set design? ›

Think of a mood board as your project's visual direction. It's a curated collection of images, colors, textures, fonts, and other elements that capture the vibe you're going for. For video creators, it provides a quick sense of the style and tone of the film you want to create.

What is the difference between a mood board and a sample board? ›

A mood board uses images, a sample board concentrates on materials and color. A sample board describes a content and sticks to the facts whereas a mood board expresses the context representing an atmosphere.

What is the difference between a mood board and a collage? ›

A mood board (inspiration board) is essentially an amalgamation of ideas, a digital (or physical) collage of concepts, whereas a photo collage is an assemblage of several images to create a whole new form for artistic expression.

Top Articles
Latest Posts
Article information

Author: Dan Stracke

Last Updated:

Views: 6304

Rating: 4.2 / 5 (43 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Dan Stracke

Birthday: 1992-08-25

Address: 2253 Brown Springs, East Alla, OH 38634-0309

Phone: +398735162064

Job: Investor Government Associate

Hobby: Shopping, LARPing, Scrapbooking, Surfing, Slacklining, Dance, Glassblowing

Introduction: My name is Dan Stracke, I am a homely, gleaming, glamorous, inquisitive, homely, gorgeous, light person who loves writing and wants to share my knowledge and understanding with you.