Every web designer has their own special methods. Some like sketching ideas by hands, other dive right into working prototypes for hit-or-miss analysis. A lot of these are stylistic preferences — some people like working with their hands, some like immediate digital results. But some methods work on universal levels. Some methods, like the mood board and the style tile, can help every eCommerce design project.

Insideology Mood Board
Source: Insideology Mood Board. Creative Commons.

These two techniques are effective for one main reason: mood boards and style tiles make the abstract parts of the design process more comprehensive. Intangible design concepts such as atmosphere, tone, central themes, and emotional responses are often the most difficult elements to grasp as a designer — and even more difficult to communicate to your team. Even if you know what you want, how can you explain that feeling to your coworkers?

Using a mood board and/or style tile helps immeasurably, and in ways that more conventional design techniques can’t compete with. In this article, we talk about the best practices for applying mood boards and style tiles, and why they’re a practical secret to eCommerce design.

The Mood Board

To start with the basics, a mood board is a sort of collage of images or general visuals to convey the target mood of the project. It’s a creative prop, so the rules are open for interpretation; you can use whatever images inspire you.

For example, if you’re designing an eCommerce store for a new line of activewear, your mood board might be filled with photos of young people running, close-ups of sweating, and large-print words like “no pain, no gain,” or singular themes like “energy.”


Source: Me Plus Molly Mood Board. Creative Commons.

The mood board is far from a new idea, and you can use it across all kinds of creative industries, especially fashion, interior design, and graphic design. These, along with web design, are all fields in which certain abstract moods and themes need to be pinned down in concrete terms. Quantifying such abstracts is often useful in the early stages of the design process, when the creative goals are still up in the air.

Advantages

While mood boards are a traditional concept, today they seem to be unfamiliar among most designers and agencies. That’s a shame, because their benefits are still relevant, perhaps now even more than ever, making the practice a bit of an eCommerce secret. Here’s a shortlist of the advantages mood boards:

  • Allows proper organization as well as prioritization of concepts
  • Enables clear communication of ideas with team members so everyone is on the same page
  • Enhances brainstorming by having a definitive visual stimulus to focus on
  • The process of creating a mood board helps designers with critical thinking about what, exactly, the best emotional responses of the project should be.
  • Choosing which visuals to use may inspire new ideas as you browse options.

As we mentioned above, the process for creating a mood board is open to interpretation, so feel free to experiment with what feels right for you. If you get stuck, or simply want an outline to jump off from, follow the best practices below.

Best Practices

First, you should know that your mood board can be either physical or digital. Physical mood boards are great because you can hang them in a common room so that everyone can see them regularly throughout the project — and they’re especially useful as a centerpiece to brainstorming sessions. Plus, the act of making the mood board is a collaborative activity in and of itself, encouraging the team to think as one unit while their hands are busy physically cutting and pasting images. On the downside, there’s only one copy of a physical mood board, which limits its availability.

Alternatively, a digital mood board can be duplicated and shared with ease so that everyone has access to it. Digital mood boards are also easier and faster to create, if you’re working under a tight deadline. Sites like Niice facilitate the process with interfaces specifically designed for creating a mood board. Of course, you don’t get team-building benefits as typically only one person builds a digital mood board… plus there’s something to be said for having a physical picture hanging in the common area to center everyone’s thoughts. Still, you could always print out the digital mood board and put it up.

Regarding location, we recommend conference rooms or break rooms, communal places where employees gather together often.


Source: Ambesa Winter Collection Mood Board. Creative Commons.

Aspects to consider

When making a mood board, you’ll want to consider the following aspects of the project:

  • General Mood: What emotion do you want your eCommerce site to convey to the shopper? Excitement over buying a product they’ll love? Hope over how the product will improve their life? Relief over cost or convenience of shopping online? More to the point… how can you show this emotion visually? Part of the benefit of making a mood board is searching to see how other designers did it before you. Try to find examples that successfully convey the same tone. Include any images that make you feel the way you want your site to make the visitors feel. Use images personal to you if they help.
  • Color Palette: Getting into more concrete details, mood boards are ideal for testing and solidifying your site’s color schemes. Be sure to prioritize colors appropriately, in other words, use the primary color most, use highlight colors as highlights, use the screen background color as the mood board background, etc.
  • Typography: This is another important concrete detail to hammer out early in the mood board phase. Choose a typography for any textual elements you add to the mood board  — font, color, style, and even size.
  • Visual Style: Explore the parameters of your visual style. Will you use white backgrounds for your product pictures, or feature the product in a real context? For the fashion industry, will you show your model’s faces, or crop the photo at the eyes? Include these small details in the images you choose for your mood board to ingrain them in the heads of your team members early on.
  • Use of Empty Space: The spacing between the elements on your mood board can also signify the treatment of empty space for your site. Minimalist sites will want to put ample space between the pieces of the mood board, while busier sites can compact a greater number of smaller images together.
Related posts:  How to Improve Your Content Marketing with Google Analytics eCommerce

Materials

The materials you use in your mood board are up to you, (unless you’re creating a digital mood board, in which case you’re confined to what you have on the computer). For inspiration, consider these options:

  • Magazine & Newspaper Clippings
  • Personal Photos
  • Sketches and Illustrations (either drawn in-house or clipped)
  • Color Swatches
  • Words or Phrases that Embody Tone
  • SEO Keyword Phrases
  • News Articles Related to Topics
  • Charts, Diagrams, Figures, and/or Statistics
  • Actual Trinkets and Charms

The organization of the mood board elements also varies between “soft” and “hard,” depending on your project’s needs.

Kellyn Walker Mood Board
Source: Kellyn Walker // Graphic Designer, via Christina De Smet, Pinterest

Soft mood boards are more “fun,” more creative, and less structured, like Kellyn Walker’s above. Image placement is loose, often in a way that’s pleasing to look at, with a smooth visual flow. Soft mood boards are for more emotional and abstract goals; they present the feeling of site just by looking at them, but don’t do much for practical details.

Abbie Mayo Mood Board
Source: Abbie Mayo, via Dapper Fox Design, Pinterest

On the other end of the spectrum are hard mood boards. These create refinement and structure, and display the important need-to-know information clearly. Hard mood boards are great reference sources, showing the difficult-to-remember facts, such as color codes, at a glance. See how, in the Abbie Mayo example above, the designers give finalized samples of how navigational buttons, social media icons, and the brand logo are supposed to look.

Hard mood boards are quite pragmatic as reference guides, but can be restrictive when it comes to communicating the actual mood.

Style Tiles

Style tiles are a specialized variation of the mood board created by Samantha Warren that hone in on the logistics of web design and communicating with stakeholders. Essentially, style tiles are highly focused, rigidly organized, hard mood boards. Best of all, they deal less with the abstract concepts, and instead target actual site details, especially laying out all the visual elements to get a taste of how the final site will look.

Style Tile 1Source: Style Tiles. Samantha Warren.

Unlike mood boards, style tiles have a defined structure. You can even build yours off a downloadable template. Because each section shows a visual sample of how the element will look on the finished site, this makes style tiles a perfect intermediary aid to communicate ideas to stakeholders before diving head-first into the actual design.

Best Practices

Warren’s original style tile template has sections with visual samples of these areas:

  • Headline
  • Subheaders
  • Body Text
  • Text Links
  • Call-to-Action Buttons
  • Color Palette
  • Image Patterns
  • Words to Describe Mood

Style Tile 2Source: Style Tiles. Samantha Warren.

Notice how, for the headline and subheader, the specific typography data is given. Alternatively, it’s just as easy to add the color codes or other data that could be helpful to have on hand.

Style tiles are often a communication tool between stakeholders and designers. As such, Warren outlines her 4-step process for creating them around the stakeholder’s input:

  1. “Listen”: Start off the process by holding a meeting with the stakeholder and determining exactly what kind of style and mood they’re going for. This involves asking the right questions or even creating a survey for them to fill out.
  2. “Interpret”: Warren suggests creating a list of adjectives to define the project based on the feedback from the initial stakeholder meeting.
  3. “Define a Visual Language”: Using the list of adjectives, you’re now able to actually create the style tile. This step is where all the actual work comes in, when you decide the actual typography, color scheme, and other visual elements. Warren recommends creating multiple style tiles to showcase different options.
  4. “Iterate”: Discuss the style tiles with the stakeholders to see if your design choices satisfied their requirements. Most likely, they’ll want to combine options from multiple style tiles.

Style tiles are a specialized form of mood boards. They don’t have all the creative benefits of the more broad mood board, but they are far more effective at communicating specifics with stakeholders. Define your project’s needs before deciding between a style tile and a traditional mood board — or simply opt to do both.

Takeaway

Do you have any experience with mood boards or style tiles? Can you recommend any personal methods? Share your opinions in the comments section now.