Mood boards: before, during, and after the design process

Before I was a product designer, I was an art student—with actual pencils and paints and clay.

In the process of getting my idea out of my head and into the real world, I’d often rely on photo reference, a giant collage of images collected to help me visualize the art and style I’m about to create.

As I started to enter the design world, I noticed something: teams and startups were doing the same thing in the form of mood boards and style tiles.

“Collecting design references is hugely important in a collaborative creative process.”

Whatever you want to call it, the process of researching and collecting design references is hugely important in a collaborative creative process.

A mood board is a collection of like-minded design examples, organized and presented to accomplish a task, and I use them for just about everything. Mood boards can set the tone of a project, guide a large team during the design process, and assist new designers joining or working with an unfamiliar brand.

And lately I’m not just using mood boards before a project kicks off, I’m using them during and after my design process is complete. For those who have never tried it (or even if you have), here’s a quick look at my mood board workflow.

Before design kicks off

Before I ever fire up Sketch or Photoshop, I start scouring the web for inspiration. Based on the brief and my own digestion of the goals and tone of the project, I start collecting anything and everything that evokes the mood I’d like to see in my design.

“Mood boards can set the tone of a project.”

I collect photos, snaps of design (web, app, print—any source is fair game), color swatches, and typefaces specimens. During this R&D, I’m not just looking for things that are pretty, but for bits and pieces that might help me accomplish my project goals.

As you collect bits and pieces for your mood board, take time to study each example for what works, and why you think it works. Is there a reason that background image is so effective? What qualities made you want to click that converting button?

Mood boarding is even better with a team—get a big group of folks collecting to a shared area, leaving comments and collaborating on each new piece of inspiration. Deciding on a general look and feel direction in a group can be really difficult, so best to get it out of the way before the first big design review.

During the design process

With a tight and agreed-upon mood board in place, you’ve got a handy tool available for constant use during the design process. It’s like a style map you can go back and study any time you get lost along the way.

During my design process, I study mood boards and design reference material much in the same way I do wireframes. While wireframes help direct my grid and user flow, a mood board helps direct my creativity with imagery, color, and reference.

It’s also a great tool for onboarding new designers and team members—and even non-designers!). Understanding a style choice is so much easier when you can see the underlying influences at work.

“A mood board is most helpful when it’s kept up to date.”

I’ve hopped on and off dozens of teams over the years, and while my onboarding has always included a packet full of paperwork, very rarely am I ever introduced into the design system in play. That seems goofy.

Using a mood board to drive design decisions for you team is a low-friction way to keep all designers on the same page. Does that new landing page really fit well within our running mood across our product? The mood board will tell you.

After launch, in public

Over time, your product and its design system might take on a mood of it’s own. That’s a good thing, but it means it might be time to make a new mood board, one made up of your brand’s design, style, and underlying principles.

Like any documentation, a mood board is most helpful when it’s kept up to date. If you notice a large, broad shift in your design language (or even a tiny tweak to your logo) should be reflected in your mood boards.

Unlike a pre-launch mood board, which is filled with photos and design inspiration from others, a brand board can be used to share logos, source files, and original photography. While this is super handy for an internal team, it gets even more important when the public hops into the pool.

“Mood boards can help avoid surprises surrounding the design process.”

If you’re working with a large, open project (or even a closed, popular one), get ready for well-meaning folks to start knocking on your door, asking for brand files. Having a central location and an agreed-upon set of rules (or even what type of source files you’ll offer) ready to go can make that process so much smoother.

When in doubt, look to the board

Ask any creative worker: a totally blank page can be overwhelming. Being dropped into an assignment with zero framing and big expectations is a recipe for disaster.

Mood boards and collaborative collecting are the perfect way to put a project’s goals and expectations in perspective. They can help avoid surprises surrounding the design process, which are very rarely a good thing.