skip to Main Content

Moodboards and Style Tiles
The beginning creative stages of a Web design project are not unlike other creative projects. They involve understanding the goals of the client, understanding the audience and creating a vision for how those two ideas can meet — and of course, how the designer can express creativity and originality in the process.

One way to start the creative process and to be sure you’re not being over influenced by the wireframes or what Web sites a “supposed” to look like is to simply start gathering visual samples that relate to the project you’re working on. These samples, or swipe, can come from anywhere, sites like are a great place to start, but you can also pull from physical magazines and catalogs. You’re looking for the following elements, as they relate to the product or service you’re creating a site for:
Imagery: Finding the right imagery style for a project is as important as writing the right headline.
Iconography: Sometimes a digital project will dictate that iconography be chosen to represent items or areas of a site.
Color: Having a color theme for a project is important for providing visual unity and setting a tone or mood.
Texture: Often overlooked, texture can bring a concept to life and add a richness that sets a design apart.
Typography: Type plays a critical role in any design and should therefore be carefully
considered in relation to the other design elements.

Start by grab as many appealing samples of these elements as you can find. Then begin arranging them in cohesive groups. Telling a story is a big part of this exercise, but simply grouping elements based on the story they tell isn’t enough, there must be visual unity. Once you have a visual story with several images, colors, texture and typography codify them onto what is known as a moodboard.

Moodboards help you and the client understand the overall look of a site without getting bogged down with the details

Moodboards help you and the client understand the overall look of a site without getting bogged down with the details of navigation or other details of a Web site. The loose feel lets the client use their imagination with a little help from you, of course. Most of all, a moodboard is meant to garner an emotional response from the client — “I love it!”

This idea isn’t at all specific to Web design — logo designers like Joe Duffy (and others) has been employing this technique for years as a selling tool. Fashion designer and interior designers as well create moodboards prior to committing to designing the details of a project. In addition to helping your client understand your vision for a site, a moodboard can also help you brief your team and focus their energy in a particular creative direction. In either case — briefing or presenting — the purpose of a moodboard is to be shown early. The items of a moodboard, while illustrative, should be very easy to change if the client hates it.

The format of your moodboard is up to you. They can be printed or onscreen, but should fit comfortably within your presentation to the client, as well as what you think the client might respond best to.

There are a wide variety of tools one can use to create moodboards, aside from
InDesign, Illustrator or Photoshop. Some tools include:

After presenting and gaining approval on a Moodboard, the client might require a greater level of detail before moving forward with the design. For this Web designers create what is known as style tiles. Style tiles provided a higher level of detail to the visual story, but still fall short of an actual layout of a Web page.

As the name implies, style tiles go beyond simply showing an array of elements, they depict specific styles that might be applied to the design elements. For example a style tile might show a stroke or shadowing effect around photography, they could show how dimension might be used or how specific type treatments like headlines or body copy might appear. Information architecture, moodboards, style tiles are all a means of building the experience that is right for a particular target user, and they help designers avoid falling into the cookie cutter generic design style that is seen all over the Web. The colors, photos, textures, type, etc. that have been established with the moodboards and style tiles are the foundation for the user’s experience.

Back To Top