Mood Boarding Methods for Web Designers

Mood Boarding Methods for Web Designers

You may have the experience of diving headfirst into a web design project, only to get overwhelmed by the design possibilities. There are steps in the design process to implement to cut down on the unknown and this is usually in the form of a mood board.

You may have already heard of a mood board, but aren’t too sure how it could truly benefit you or cut down on the overall time spent designing – after all, mood boards take time to complete, themselves.

In this article I will discuss the benefits of using a mood board for a web design project as well as the methods commonly used in creating them.

Collage Mood Board 2
Image credit: applesandorange

Why Mood Board?

It’s extremely useful in establishing the visual and aesthetic feel of a site. A mood board not only gives you inspiration in going forward with a project, but also is an effective time-saver and necessary component in the creative process. By creating one, you can tackle many issues early on that you would otherwise encounter later on in the creative process.

Imagine spending hours in Photoshop creating a layout filled with a lot of texture and style, only to have the client not prefer that design solution.

Mood boards can prevent unnecessary frustrations as the result of not having a clear creative direction and may cut the overall time spent on a project in half as a result of careful planning. They also give the client tangible evidence of a ‘research phase’ that they may not understand otherwise, and gets them involved early on.

A mood board helps:

  • Translate a concept where words may fail
  • Create a picture in the clients head early on and let them see exactly what you’re planning and how their site is shaping up before you even start properly designing.
  • Cut down on time spent revising due to miscommunication
  • Establish the theme of the website (i.e. Soft or hard? Clean or grungy?)

Mood Board 3
Image credit: align

What Should I Include?

The first step in realizing what needs to go on your mood board is choosing the style that fits the project best. While there are many different ways to present a mood board, the direction you choose will be based on the time allotted, personal work habits and most importantly your client’s personality. The following are just a few elements that generally should be on a mood board.

Image credit: Maquina


  • Wireframes
  • Not too much detail
  • Black/White/Grayscale only
  • Homepage
  • One or two subsequent pages


Create a couple of color schemes based on client preferences or your own. A great site for creating color schemes based on themes is Kuler.

Image credit: Kuler


Include notes on why you like a particular website and how you feel it can be best integrated into the design of their website. Include reasons why the look will suit them.

Inspiration Mood Board
Image credit: Obox-design


Find some textures, real or hand-drawn, that you feel fit in with the overall theme of the site.

Image credit: Rocketgenius


At this stage you can either use photography the client has supplied, or use stock photography to portray the overall theme of the site.

Nature Mood Board


Depending on the time you have and the scope of the work, it may be beneficial to make more than one mood board, focusing on one style for each. Before you start, come up with a list of adjectives to describe a particular board. A certain mood board can be designed around various adjectives such as:

  • Dark, glossy, slick, modern, edgy, hard, aggressive
  • Soft, muted, round, layered, elegant, realistic
  • Colorful, rough, sketchy, bright, illustration

In doing so, you create a wide variety of styles for the client to chose from.

Physical or Digital?

Mood boards can be created in both digital and physical spaces and there are advantages to both. For instance, a digital mood board can be created quicker, however, physical objects tend to have a higher impact on people because of the more complete palette of sensations physical mood boards offer, in contrast with the black & white or color-prints of a digital mood board.

Mood boards 2.0

This virtual mood boarding tool is useful for collecting inspiration by clipping and pasting. It’s a website, desktop, and mobile app that allows you to gather your thoughts through note-taking, capturing images from webpages and your camera, and even writing handwritten notes.


Another useful virtual mood boarding site is Sampleboard. Simply upload images and organize them into project files to be stored online and use the web editor to easily pull together design trends and color schemes. Mood boards can be shared on Twitter and Facebook, or integrated into your own documents and presentations in one easy click.


Geared towards Interior Designers, Olioboard is an easy and intuitive application for creating digital mood boards. It is also a community of creative thinkers coming together to share inspiration and offer feedback.


Discover style and trends around the world at Polyvore. It’s one of the web’s largest tastemaker communities with 6.5 million monthly visitors.


iPad Moodboard Creator
Moodboard is the bestselling app for creating mood and inspiration boards on your iPad. Each board is a blank canvas for organizing the things that inspire you. Add photos, text, color swatches, and special elements to your boards, then share them with friends and colleagues, anywhere, anytime.

iPad Mood Board


  • Can be synced with desktop, iPhone, and iPad apps for collecting inspiration wherever you are.
  • Ideal for the designer who has a loose deadline and the time to collect images on the go.

If you prefer a more formal approach that captures all the details that will go into the design, a refined template may be the best bet. It’s here where you can delve deeper into the design details, incorporating color palettes, font treatments, button styles, and photography.

Mood Board Architecture


  • Helps your client focus on the details and featured elements.
  • Multiple templates can be developed, each focusing on a separate theme to get the most out of the process.
  • It’s best to start the creation of a template-based mood board by choosing adjectives to describe each one. These words can be referred to as you pull items together. For instance:
    • Dark, glossy, slick, modern, edgy, hard, aggressive
    • Soft, muted, round, layered, elegant, realistic
    • Colorful, rough, sketchy, bright, illustration

Loose Collage
A loose collage is beneficial for those who aren’t too obsessed with details and wish to create the overall impression of the site in as free a way as possible. If you’re a big picture thinker this mood boarding method may be for you.

Collage Mood Board


  • Can be thrown together relatively quickly and doesn’t force you to make decisions about smaller details like colors and fonts.
  • Grab inspiration from wherever – whether it’s a book or images found online.

Moleskines are another practical way of showing your intent. In addition to doodling and note taking you can also use them for collecting various scraps, images, doodles, and notes.

Moleskine Mood Board


  • Like a loose collage, they can be as free flowing or organic as you want them to be.
  • Multiple pages allow for a convenient way to keep your inspiration all in one book.
  • The portability (and reasonable size) allows you to take your inspiration on the go.



If you often have a hard time initially in the design process, creating a mood board through any of the methods mentioned here can take some of that initial frustration away. It’s through creating these mood boards that experimentation is delegated to the beginning to the process, laying a solid foundation for the rest of the web design process.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.