9 mood board examples that’ll inspire you to create your own
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.
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:
- Color palettes
- Fonts
- Icons
- Patterns
- Contrast
- 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
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 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.
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 has add-ons that make finding, collecting and organizing images, colors and inspiration for your design super straightforward. All from your browser, too.
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.
