Web Design Essentials: Mood Boards

Photo by anthony shkraba at pexels.com

Have you ever looked at a website or app and consciously asked yourself how it makes you feel? We tend to do this for our physical spaces – think interior design – but not so often for our digital spaces even though it’s known that emotions impact user behavior. You should design your website to evoke the emotions that you want users to have, ones that make them have a positive opinion of your brand or content, and that motivate them to take actions you desire.

I’ve previously posted about how to analyze the user experience (UX) and user interface (UI) elements of a website for their emotional effect on a user. As I approach the visual design phase of my redesign project for Scratch Baking’s website it’s time to start deciding how the site should feel. It’s time to create a mood board.

What are Mood Boards?

Mood boards are physical or digital collages of images, icons, typography, colors, patterns, textures, and other design elements that together speak to the intended mood you want to set with your visual design. If you’ve ever used Pinterest to plan a party, an outfit, or a DIY project, then you’ve essentially created a mood board.

As the video above explains, there are different techniques for mood boarding. A strict mood board is when you categorize the elements on your mood board into sections to make it more presentational. A messy mood board is closer to an artistic collage with everything tightly spaced.

The third technique is a style tile which splits the difference between the first 2 techniques a little by laying out the contents of your mood board to suggest the layout of a web page or other interface you are designing for. A style tile, though, should not be viewed as a literal representation of the layout design you are planning to use.

In choosing what to include on your mood board you should consider insights you gained about your users during the initial research phase of your project. This can help you key in on some core emotions that drive them or that they desire. You can then choose 2-5 emotions to focus on in your mood board and the resulting design of your site.

You can tap into a tool such as your personas to create mood statements that can help with your mood board. Mood statements are short statements that define how your user should feel interacting with your site and are constructed using the structure pictured below.

Photo courtesy Paola Ascanio via UX Collective

You could also gain understanding of your users’ emotional state from journey maps. Different emotions may dominate at different stages of interaction which may mean you need to include content in your mood board that addresses these different emotions. You can then draw more from these pieces of content for the pages or sections of your site that users interact with more at certain stages of their journey.

For example, making a purchase may make users anxious so design for a purchasing pathway may need to be more streamlined to try and relax the user.

However you decide to approach your mood board it’s important to keep its content focused because it has a practical purpose. It’s meant to communicate a clear picture of your design direction.

Moods boards are used to:

  • Create definition for your project. What are you trying to do with your website? What kind of experience do you want to offer? What visual language do you want to speak?
  • Find inspiration. By encouraging you to look at a wide range of different sources, you are able to discover new and exciting design ideas that can improve your site’s user experience.
  • Give guidance. When you run into problems or are unsure if your decisions later in the design process are consistent with your project’s direction, you can use a mood board as a reference point for these situations.

Mood Board Example

For my redesign of Scratch Baking’s website, I created the above mood board using more of a messy technique. I focused on the emotions of happiness, excitement, enjoyment, and warmth because that’s what is often associated with eating baked goods. The brand itself is also very friendly, enthusiastic, and has a sense of humor in its voice, which is how I was inspired to include images such as the egg one and the cake knife with the saying on it.

I looked at the brand’s existing product photography and included a few of their images in my mood board because these are good quality and are likely in some form to be included in the site. Plus, they are a great source of color and texture inspiration as well. Food photography is vital to food sales so to design a website for a business in the food industry and not consider that users eat with their eyes would be a big miss.

The brand’s logo is also on my mood board because it has a very specific font which offers a fun, quirky feeling wherever it is placed. I know any fonts I choose for the site will have to work with this logo font and that unless Scratch were to decide to rebrand, this logo will have to be present in my design, probably in a prominent spot.

Identifying and solving design problems like this is one of the advantages of creating a mood board. For example, I was inspired to include a couple of circles in my mood board that reflected the mixture of angular and rounded shapes in the logo’s butter and egg icons. This, combined with color inspiration drawn from the logo, created more coordination between the feeling of the logo and the overall feeling of my mood board.

Finding Direction

As I went through this process, I began to see a cohesive visual direction for my website design start to materialize as I got closer to my finished board. This cohesive direction is what you should come away with after creating a mood board and should help to guide you throughout the rest of the design process to make your website feel the way you want.

MORE IN THE WEB DESIGN ESSENTIALS SERIES


References

Ascanio, P. (2019, April 10). A UX guide to to designing better mood boards. UX Collective. Retrieved from https://uxdesign.cc/a-mood-board-strategy-for-cohesive-visual-design-5620dec3fed7

How to create a beautiful mood board. Canva. Retrieved from https://www.canva.com/learn/make-a-mood-board/

Morgan, A. (2019, April 5). What is a mood board and its role in our web design process. New Media Campaigns. Retrieved from https://www.newmediacampaigns.com/blog/what-is-a-mood-board-and-our-web-design-process

Sharp, E. (2013, October 17). How a web design mood board impacts user experience design. ProtoFuse. Retrieved from https://www.protofuse.com/blog/details/how-web-design-mood-board-impacts-ux/

Tran, T. H. (2019, September 30). 10 mood board to inspire your UX designs. InVision. Retrieved from https://www.invisionapp.com/inside-design/mood-board-examples/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s