SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

What Is a Mood Board and How Do You Make One?

July 9, 2020 by Clarence

If you’ve had something designed, you’ve probably encountered a mood board. So what is a mood board, exactly? Mood boards are an important tool for creatives. It is a visual tool that not only helps designers create an “outline” for their designs, but it also helps them communicate their ideas to their clients.

Sometimes, communicating one’s ideas verbally can be quite difficult, which is why showing a visual representation of your ideas can be of great help. A mood board consists of different elements. It is a collage that contains images, texts, and colors – anything that can provide inspiration.

Purpose of Mood Boards

Image Credit: Behance

Now that we know what a mood board is, what purpose does it serve? Besides providing inspiration, mood boards are also a great jumping off point when you start designing. By creating one, you are already in the process of your design and refining it. It will also help set the mood of your design. Do you want it colorful? Monotone? Or filled with dark colors? It is already helping you set a color palette for your design. Moreover, if you’re doing a design for a client, mood boards are a great way to know if you and your client are on the same page. It lessens the time needed for revisions and mistakes since mood boards help finalize your designs.

Mood boards are not only there to build your design. They also help in ensuring that your branding is integrated into the design. There’s no point in creating a good design if your brand identity is inconsistent. Another thing to love mood boards is that you will always have a constant reminder of your design. Without it, you may forget one or two elements needed and these visual tools can help prevent that.

Career skills to jumpstart your future.

How do you make one?

There are two ways to create a mood board: create a physical mood board or go digital. The old school way of doing things is creating a physical mood board. These are usually illustration boards or foam boards with visual aids pasted on them. The visual aids such as images, colors, and texts are taken from magazines, newspapers, books, or even printed off the web.

On the other hand, digital mood boards can just be done on your computer. You can create one on Photoshop, or use the numerous mood board programs you can find on the web. Making one is much easier as everything can already be sourced on the internet. You can put images, fonts, website samples, patterns, digitally-manipulated images, and more. In fact, digital mood boards are actually much better if you’re designing a website.

Where can you make one?

There are a lot of mood board makers available online. For example, Pinterest is a great mood board maker, especially if you’re new to creating one. Pinterest is a popular website that tons of people use. Users curate their own pinboards with the images also coming from other users, and the images on these pinboards can also be used to make your own pinboard. Another great thing Pinterest is that the images are in a collection, users can easily just search for the categories they have in mind.

Sampleboard is another great website to make your mood boards. It’s a digital creation tool that even lets you upload your own images. Moreover, you can also easily organize your project files and even share them on social media, or import them as documents. The mood boards created on this site are not only professional-looking, but are also easily shareable with your clients through social media.

Image Credit: Milanote

For those who need constant communication with their clients, Milanote is also a great tool to use. It is a mood board creation program that helps you brainstorm with other people as well. Milanote lets you save images from the web, upload your own images, and even have their own library with over 500,000 free images. However, images are not the only thing you can add. Fonts, videos, GIFS, color swatches, and other design files can be used on your mood board with just a drag and drop. Its brainstorming feature comes in with their built-in commenting and sharing feature. This makes getting feedbacks from your clients, and collaborations with your team so much easier.

Another favorite mood board creation tool of ours is inVision Boards. Just like Milanote, it is also a great creation tool for collaborative works or for client feedbacks. It is a program that helps you organize your images, texts, and color swatches to effectively present your ideas to your clients. Another feature we love on inVision Boards is their comment sketching feature. Your client or even your teammates can sketch or draw on a specific element on your mood board to comment on. Another great thing  about inVision is that their creation tool is not only limited to mood boards. Users can also create brand boards, presentations, and galleries – all visual tools that are very helpful in illustrating your ideas.

Mood Boards in Web Design

Image Credit: Dribbble 

Mood boards are very helpful in web designing – especially digital mood boards. Digital mood board creators already have mood board templates that users can use – or you can also customize one for yourself. There are actually mood board templates that almost look like website mock-ups. With this, not only is it easier for your client to visualize your design, but it also helps keep you on track with what you had in mind.

Grid-based images are the standard template for mood boards. While these are also great, they cannot really effectively communicate a web design’s feel. There are mood board templates that help you recreate a websites look. With this kind of template, you can effectively show images, but also fonts and color swatches you’d want to use for the web design.

You might also enjoy:

50 Shades of Urban Decay – Color Inspiration Showcase

Filed Under: Design, Tools Tagged With: design tips, mood board

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022