justinmind

Inspiring mood board examples

App and website moood board examples and creators

Not sure how to present your UI design ideas? Check out these mood board examples to see how to capture an idea in seconds

Ever been able to picture something but not put it into words? Trouble getting the client to see inside your creative brain? No problem, Justinmind prototyping tool is here to help with some mood boards examples!

Create your mood board in minutes with Justinmind – it’s free.
Download Free

In this post, we’ll look at how you can save your own and everyone else’s time by putting together a quick mood board instead of giving hour-long presentations. We’ve also thrown in some great inspiration and some of the best mood board creators online. Tap into that right hemisphere today!

What is a mood board?

Graphic designers, industrial designers and interior designers often use mood boards to convince clients of the look and style they’re going for. However, UI designers can also use them. Just because it’s a digital product they’re designing, doesn’t mean that they can’t use mood boards to demonstrate their design concepts.

Designers often use mood boards because they manage to go beyond mere words. After all, like the old saying goes: “a picture tells a thousand words”. Mood boards help you instantly communicate the idea and inspiration behind your future design. You can present mood boards to the following types of people:

  • Clients
  • Stakeholders
  • Product teams
  • Design teams

The great thing about mood boards is that, apart from being purely creative pursuits, they also have a legitimate business. They help show where you got your inspiration for the aesthetics. From a marketing standpoint, they help you focus more closely on your user personas: their lifestyles, likes, hobbies, jobs etc.

For this reason, mood boards are generally made up of and demonstrate the following:

  • Color palette
  • Patterns
  • Fonts
  • Images
  • Shapes
  • Graphics
Note: when creating your mood board, it’s generally more freestyle. You're not determining the visual hierarchy, layout or final content of your UI design.

10 best website mood board examples

1. Terracotta

This terracotta mood board example on Behance is a great illustration for an ecommerce website to encapsulate the brand and feel.

website mood board examples - Terracotta

This moodboard uses a collage of images showing modern interior decor against a salmon background, along with some playful fonts, in addition to a few random UI elements to give it the feel of a website.

To find the right font, you have to experiment a little. Here are our favorite Google fonts for websites!

2. Energetic style tile

This style tile mood board example posted by Mat from Denver on Webflow is a brilliant style tile that can be used as inspiration to convey not just the fonts, color scheme and imagery of a website, but also the emotion.

website mood board examples - style tile

In this mood board example, the images help give sense to the color of the elements in the UI and some of the different fonts spell out the words that these colors are thought to invoke, such as high energy, passion, as well as qualities such as clean and responsible.

3. Organic market

Close Market is a website mood board example by Abdus on Dribbble that is supposed to convey the color palette, font, spacing and imagery for the website of an organic food store. And he does that rather well with beige-brown, green and graduated black color squares that match the color tones of the chard in the photo.

website mood board examples - organic market

He also conveys the idea of a clean interface with the use of copious white space between the elements, that also creates a clean look, as if to reflect clean living. This shows that website mood boards don’t merely need to be a collage of elements and images: you can also use white space design as one of those artistic elements!

4. Graphic Designer Portfolio

Nicolas J. Engler created a brilliant mood board example for a graphic designer portfolio and posted it on Dribbble. It gives the perfect idea for the playful, creative theme and arty theme of the online portfolio.

Website mood board examples - Graphic Designer Portfolio

It shows the color palette, the alphabet of the intended font, as well as the images that help add a playful touch to the pastel color scheme.

Why not check out our post on the secrets behind making the perfect UX design portfolio? You’ll also find a free UX portfolio template inside!

5. Fit and Free Portfolio

Ladybossstudio.com presents an elegant mood board example that perfectly demonstrates the look for a sophisticated fashion blog, clothing, furniture or ecommerce store.

Website mood board examples - Fit and Free Portfolio

The patterns that will be used for the website UI are clearly demonstrated by the images of upholstery patterns; there are floral patterns both in these as well as actual flowers in the images. Fonts as well as the social media buttons are also demonstrated in this mood board example.

6. Rose gold sophistication

This Dellarose brand mood board example, put together by kidsroomsets.top, was done so in an attempt to find a color to match a turgid green marble floor, presumably that of a shop. In the end, it was done quite well, combining with bronze to give the effect of rose gold and shades of beige, pastel green, grey and black.

Website mood board examples - Rose gold sophistication

Even the social media buttons are rose colored. But this mood board example doesn’t just leave it there, however: it also plays around with shapes to give the angular affect of crystals.

7. Modern Gold Branding Board

A great example of a Canva mood board, also found on ladybosststudio.com, helps perfectly illustrate a UI with the sea as a recurring theme.

Website mood board examples - modern gold branding with colors and patterns

The images of a pre-stormy sky above turquoise waters and smooth pebbles help the designer devise a complementary color palette, along with angular hexagonal patterns as a cross between the straight lines of a horizon and the angular edges of the pebbles.

8. Aesthetic cohesion

We dig this minimalist mood board example devised by Chris Plosaj because of the simplicity it conveys, in addition to the “cohesive aesthetic”. It shows a lot of detail about the style of a website’s UI design, without going all Jackson Pollock on it.

Website mood board examples - Aesthetic cohesion

This board keeps it real and on-point, which may be good, depending on who you’re presenting to. Here the basics are communicated: minimalist imagery, colors and fonts.

9. Rustic shades

Alubiadesign have pinned a nice rustic mood board example by natural desert landscapes. What we like is the huge focus on a soft color palette and minimalist design based on the sparsity of deserts.

Mood board examples - rustic desert

We also dig the way they use their mood board to experiment with different branding logos and fonts. This would be a great idea for initiating a discussion in a presentation and getting input from team members and stakeholders.

10. The female entrepreneur

Kate, a designer with a blog called kurlycreative.com shows off a sophisticated, feminine mood board example with a color palette for a website that’s aimed at female entrepreneurs.

Website mood board examples - The female entrepreneur

What we particularly like about this mood board example is the way the designer uses it as an opportunity to really experiment with the aesthetics of shapes, fonts and the full range of the chosen color scheme.

5 best app mood board examples

1. Commuter app

Alliwalk.com features a great iOS app mood board example that’s centered around the idea of helping commuters escape from the drudgery of being stuck on public transport for longer than they care to be.

Website mood board examples - commuter app with colors and photos

One aspect about this app mood board example that stands out is that the elements and fonts are based around an iOS update. The chosen color palette also matches that of the selected images which are based around public transport.

2. Earthy trip planner

This trip planning app mood board example compiled by Kiowa Alumno and shared on Dribbble stands out by powerfully conveying the style and personality of the app, but with surprising restraint and simplicity.

App mood board examples - Earthy trip planner

There are only a few but wisely selected colors in the scheme and the fonts are limited. The general shapes and outlines that will be present in the app are indicated in the background patterns.

3. Pastel dating app

Sharada Krishnamurthy shares a dating app mood board example and what we immediately fell in love with is the wonderfully compiled pastel color scheme.

App mood board examples - Pastel dating app

It helps to add a calming effect to the design, while also showing off the app’s potential personality with the element styles and fonts.

4. Data pattern exploration

This UI pattern mood board by Simon Phillips and his team is a slightly more developed mood board example with less experimentation with colors and patterns (although a color scheme is present) and more focus on trying out different types of UI patterns, components and elements.

Website mood board examples - data patterns, numbers and colors

Their task was to find a way to show different variations of data visualization for an analytical app.

5. Vibrant shoe app

Joanna Katsifaraki on Dribbble offers up something a little different by not only providing a colorful app mood board example, but also the mockup of her Shoe App. we’re treated to a collage of bold colors and striking imagery, all of which cleverly manage to be captured with the app interface.

Website mood board examples - vibrant sports clothing app with bold colors

We chose to include this mood board example on the list because it shows the natural progression from mood board to app.

5 best mood board creators

1. Canva

What designer hasn’t heard of Canva? Canva lets you throw together business cards, presentations and even resumes and make it look like it took you hours. And of course, the same is also true when using it as a mood board creator!

Mood board creator - Canva

With thousands of images and assets available in their repository, as well as template layouts and the ability to upload your own images, putting together a website mood board in Canva is hassle-free!

  • Pricing: choose from Free, Pro ($10 monthly) and Enterprise ($30 monthly)

2. Pinterest

For a quick and easy mood board creator, head to Pinterest. It has everything you need to throw together an eye-grabbing, thought-provoking montage to get your clients thinking about your design angle.

Mood board creator - Pinterest

Search through their database to find the perfect assortment of color palettes and striking imagery!

  • Pricing: free

3. Niice

With Niice you can create a nice and private space for your collection of images. You’ll be able to drag and drop to start instantly compiling a choreography of complementary photos and vector images.

Mood board creator - Niice

However, one feature that sets this mood board creator apart from the rest is the Chrome extension that allows you to grab any images you discover while browsing through the web.

  • Pricing: free

4. Milanote

What we like about the Milanote moodboard creator is that, apart from the fact you can run it on any web browser, you can use as many different levels of hierarchy and layers to create your website moodboards.

Mood board creator - Milanote

It’s also a great tool for collaboration – you can share your moodboard remotely with whoever you like, while receiving comments and feedback!

  • Pricing: Free and Professional ($10 monthly)

5. Sampleboard

Sampleboard is a moodboard creator with a user-friendly interface that lets you sign up to a creative community to get inspiration, much the same way as Pinterest.

Mood board creator - Sampleboard

You can share any website moodboards you design with the Sampleboard on social media while also being able to import them into documents and presentations. What we like about Sampleboard is that you can share your mood boards in just a click!

  • Pricing: get a free trial, then $12 per month

The takeaway

Mood boards can help you convey the concept of a UI’s intended graphic design much more easily and eloquently than words can. They can help show how you intend to incorporate all the abstract qualities pertinent to a website or app’s branding, such as:

  • Look
  • Feel
  • Emotion
  • Personality

Lastly, a mood board isn’t just useful for getting your design ideas and inspiration across to others. It can also serve as a style guide for you and anyone else working on the project to make sure the result is true to the original idea.

Communicating UI design ideas isn’t easy. Mood boards project your creativity in a visual way, letting you get back to what you do best: designing. They also serve as a useful style guide as you work. Here are some great examples and tools for your next brainstorming session!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast