The third generation of our mood boards takes some cues from its predecessor but the entire board is a collage of visual elements. I still liked the loose layout, but the collage had to go and the keyhole sketch was too close to a page layout and defeated the idea of a mood board somewhat. “Where will this collage be on our website?” “Why is there a picture of a violin in the collage? We manufacture servers.” The 2.0 versions of our mood boards lasted through a handful of projects before I realized I needed to rethink the format again. The focal point of these new boards was the large collage of inspirational images they also included more detailed page thumbnails below the collage.Īlthough I was pleased with the more conceptual nature of these boards, the image collage was causing some confusion with our clients. I realized that I preferred the loose and more conceptual nature of the sandbox documents and decided to clean them up a bit and present them as the final mood boards. I would take the portions that I liked from the sandbox document and shoehorn them into the smaller mood board template.

It was much larger (about 1200 x 900 pixels) than the mood board template I was presenting to the client. I had been using a separate Photoshop document as a visual “sandbox” to collect bits and pieces and experiment with different textures, colors and imagery. It took a while to convince our clients that the mood boards didn’t represent a particular page of their site but were more like swatch boards that an interior designer would use to gather ideas and inspiration before redecorating a room.Ībout a year later, I decided to change the format of our mood boards. The template was very structured, with clearly defined areas for type treatments, a color palette, source imagery and a keyhole sketch where some of the elements from the board would be combined.

When we first starting creating mood boards in 2009, I used a template that had been developed by and made available for download. Since mood boards don’t rely on a site’s structure, I don’t have to wait for a prototype or wireframe to be completed before I can start the design phase. This allows the client to focus just on the look and feel of the site, quickly form a first impression and ask themselves, “Is this how we want to represent ourselves on the web?” Mood boards can be put together quickly and it’s easier to eliminate ideas that don’t match the client’s taste or personality and develop the ones that do. A board may contain some elements from the site, such as an email call out box or bio abstract, but no single page template from the site is represented. Mood boards are visual “sketches” that contain elements of the site (type, color, textures, imagery). A more general template such as a product detail page or newsletter detail page will contain more of the common elements of a site and is a better choice to begin the page layout phase.ģ) When you start with page layouts, a lot of time is spent up front working out small details of the site’s form and structure when that time could be spent exploring different looks based on client input collected in the discovery phase. It’s too soon in the design process to be addressing information architecture, specific user interface issues or site functionality.Ģ) Secondly, a website’s home page is usually too unique from the rest of page templates to truly represent the site. This was a flawed model for several reasons.ġ) Starting with fully developed page layouts forces the client to focus on more than just the visual design.

Prior to integrating mood boards into our design process, we would begin by showing the client 2-3 versions of a fully realized page layout, usually the home page.

Web design mood board sketch template