Mood boarding for UI Design

What Is Mood boarding?

A mood board is a collection of images used to convey various styles and concepts in order to determine the ‘feel’ of a project. Whether the medium is film, photography, interior design, or software design, mood boarding is an interdisciplinary activity that’s useful in the early creative stages of many collaborative projects. This article will focus on how it can be used to generate creative assets for UI Design.

A mood board comprised of clip art for our Acorn Interactive site

When Is It Necessary?

Generally speaking, mood boarding mostly pertains to projects involving new branding or a brand refresh, where a brand or style guides don’t yet exist.

If there are any existing visual assets (logos, iconography, fonts, photography, brand or style guides, etc.) they should be sent to you (or your designer) ahead of time. What is staying vs. what can be updated should be discussed, not assumed, and clearly defined in the creative brief. This will inform the scope of work for generating any new design assets. If you’re setting out on a complete rebranding overhaul, for instance, and require all new assets from scratch, mood boarding from carte blanche is highly recommended.

If there are strict brand guidelines already in place, there will be much less need to develop the feel or mood of the project. However, if there are no web-specific brand guidelines to follow, you’ll still need to produce a style guide outlining elements such as colour palette, typography, buttons, forms, etc.

Mood boarding data visualization

What Should A Mood Board Focus On?

Whether conscious of it or not, mood boards get stakeholders thinking about the Elements and Principles of Art. And without going too far down that rabbit hole, here they are for the record:

Elements of Art:

  1. Color
  2. Form
  3. Line
  4. Shape
  5. Space
  6. Texture
  7. Value



Principles of Art:

  1. Balance
  2. Emphasis (Contrast)
  3. Gradation
  4. Movement
  5. Proportion
  6. Rhythm
  7. Unity
  8. Variety



No matter how artsy fartsy you care (not) to be, these elements and principles form the basis of how everyone feels about a given visual.

Trying To Inspire

This should be the least robotic stage of the process; it should conjure feeling and emotion. Software design and development is (and should be) a very rational process, filled with rules, limitations and requirements in order to set expectations and relay instructions to users and their computers. Mood boarding should be the opposite: the romance amongst the code.

Exploring textures and patterns

Mood boarding can be done concurrently with the early discovery phase. It can also last throughout the UX process, since collecting images and developing visual themes is still pretty abstract, and won’t distract from user flows and information architecture. It can also provide some ongoing inspiration for the client. Pinning down the soul of a project typically doesn’t happen overnight and mood boarding shouldn’t either. But once it’s time for hi-fi mockups, the project's visual identity should be clear.



Furthering Discovery With the Team and Client

Mood boarding helps to get to know everyone involved on a different level. It can shed light on the client, their response time and tone, their willingness to give feedback, the mood of what the product should be, their ability to express what they like/dislike about various images you propose. All these social cues can only help understand who you’re working with.

A typical mood boarding session (invisionapp.com)

It’s sometimes difficult to get an accurate reading of what a client is going for, so always start with a broad array of different visual content and aesthetic (see the Elements and Principles of Art listed above.) Encourage ample feedback. Refine your collection of imagery based on that feedback, weeding out the wrong mood and trying to pin down the right one.

If the client has a particular vibe they want to express and is willing to produce some imagery to kick things off, even better.

Assuming Makes an Ass of U and Me

Producing mood boards should be fun and collaborative. Don’t be afraid to come up with dozens of different ideas at first. Leave no rock unturned. Throw some spaghetti at the wall and see what sticks. Put it all out there only to trim back after reviewing, then refine, and finally expand on the things that match the right mood.

Assume nothing. I’m always amazed at how two different people can paint completely different pictures in their minds of the same idea. Multiply that by the number of stakeholders at the table.

Since collecting images is probably going to be the least labor-intensive step of the entire project, now is the time to start with all the options.