Home > UI Design and Prototyping > 9 mood board examples that’ll inspire you to create your own
Need inspiration for your next mood board? You're in the right place. Here are 10 mood board examples to get you started

Get inspired to make your own mood board and communicate your visual designs with these 9 awesome examples

Need to create a mood board but your well of inspiration has dried up? No worries. Justinmind is here to help.

We’ve scoured the design community’s favorite internet hotspots (OK, so Dribbble and Behance) to gather a collection of 9 inspiring mood board examples that will inspire you to make your own.

You’ve got everything from colors and fonts to icons and patterns to feast your eyes on. Next time you need to rustle up a mood board for a client (or just for fun!), you won’t be lost.


Create your own mood board with ease. Download Justinmind free.

Download free


What is a mood board?

A mood board is a way for people to communicate ideas in a visual way. They are collages of text, imagery and samples of objects in a composition. Often words fail us when we’re trying to capture imaginations and explain our ideas.

A visual on the other hand can pack a punch. They can express an idea much faster than words. Using a mood board is a great way to show your vision to would-be stakeholders, colleagues and, well, your Pinterest followers. 

Why are mood boards useful?

Mood boards are useful because they save you time trying to communicate your the style and personality of a website or design.

Why waste time on an hour-long presentation when you could go through your mood board in less than 20 minutes? It’ll tell your audience more in less time.

They can be used when trying to get buy-in from stakeholders as a UX design tool. They share the direction and exploration you want to take. A good mood board will take audiences on that journey.

A mood board can be good for reducing costs, too. By understanding the vision and direction both client and designer are looking for the same end result.

A UI designer can use a mood board to help everyone understand:

  1. Color palettes
  2. Fonts
  3. Icons
  4. Patterns
  5. Contrast
  6. White space

It’s important to mention that a mood board is not a tool for understanding visual hierarchy, final content or interactivity.

These mood boards can evolve into a style guide. Just like prototyping can save you money by building something before being coded, a mood board can be used to test and understand a style before investing in it fully.

UI designers can rely on style tiles in their visual design process. A style tile establishes a direct connection with interface elements without defining a layout.

Style tiles are an alternative to mood boards (although, some people do use the terms interchangeably). Style tiles mirror cascading stylesheets, making them more apt for web and interface design.

9 examples of mood board designs

Now let’s take a look at some well-crafted mood board. There’s a mix here. Some are strictly mood boards, others are more like style tiles. But they’re all doing the same thing: communicating visual design.

Yo Portfolio – Element Collage by Andrew Spencer

 

 

Andrew’s mood board contains typography uses, icons, UI colors and button states. All presented in an easy to understand way with ample white space.

 

Landing.jobs: Reinventing the Tech Jobs Marketplace by Pedro Moreira da Silva

Landing.jobs gets two treatments. Mood boards are great for exploring different styles and that’s what Pedro’s done with his.

Style Tiles: Construction Website by Laura Merriman

Laura really captivates the construction mood with her board. The colors are well-matched and the imagery really sells the concept.

 

UI Mood board by Benjamin Hobbs

Benjamin’s created a UI mood board whcih includes inspiration images, colors and potential UI component styles.

Coronado Mall Mood Board  by Pradeep Kumar

Pradeep has layed out the color palette and typography choices really well in this mood board for a shopping ball.

Website Mood Board by Shawn Metz

ui-element-collage-sparkbox

Ten Forward Style Styiles by Jared Christman

Jared’s got a great mixture of imagery, color choice and UI components in his mood board.

Bank Midwest by Pamela Porto

Another awesome treatment but this time for a bank. Pamela’s covered all possible bases with this style tile and is definitely worth looking at if you want to see something comprehensive.

4 tools to make your own mood board

If you want to start making your own mood board, there are a number of tools you can use.

Pinterest

Pinterest needs no introduction. It is the go-to place on the internet if you need inspiration for absolutely anything. All your pins can be sorted into collections for ultimate organization. 

Justinmind

If you’re making a design system, need to update your styles or UI components then Justinmind has you covered. It’s full of pre-made widgets that you can customize for full control and there’s easy sharing capabilities to get everyone on board with your vision.

Evernote

Evernote has add-ons that make finding, collecting and organizing images, colors and inspiration for your design super straightforward. All from your browser, too.

Go Moodboard

Quickly create beautiful with Go Moodboard. You don’t need an account to get started and use one of their many templates to get you going.

Conclusion

A mood board, style tile or preliminary style guide can be a useful tool for guiding the UI design process. It’s worth noting that these artefacts are not set in stone and can be changed as the project develops.

Use your mood board to share your vision, get stakeholder buy-in and create a cohesive visual design.

download_free

Steven is the web editor at Justinmind