Using style boards in the design process
In marketing / advertising / design it’s not at all uncommon to find people working with mood boards. For those who aren’t familiar with the term, a mood board is a collage of all kinds of images, that basically serves the purpose of inspiration and style determination. For example, in the early stages of product or brand creation a mood board helps determine what feel the product or brand should be associated with.
Mood boards can help getting everyone on the same page. Because they’re used in an early stage of product/brand development you’re able to tackle possible discrepancies in ideas amongst those involved in the actual development. That’s why, for the last couple of our clients we’ve been putting together style boards, our own version of a mood board.
Difference between mood board vs. style boards
The main difference between a regular mood board and the style boards we use is the level of detail we use. Our style boards contain actual existing designs (mostly by other designers, e.g. off of Dribbble.com) whereas a mood board often exists of abstract images that convey an emotion. Also, the style boards we use made on the computer. In other words, we don’t actually made physical boards.
Why use style boards?
The reason we started integrating style boards in our design process might sound familiar to other designers. We found that it’s often easier for clients to actually see and ‘feel’ an intended visual style than to have to described it in words. When you talk about style, there’s a possibility your association with a certain word to describe a style differs from the client’s association with that same word.
Debriefing
When a prospect/client briefs you about the project he or she will most likely also use words to describe the intended style of the final product. By making a style board you’re able to show you’ve clearly understood the briefing. However, if you have doubts whether the client’s idea of the right style matches the product, it allows you to show how you think it could also be done.
Accompanying wireframes
Style boards also serve as a nice anchor for style just like how wireframes serve as an anchor point for layout and composition. As a matter of fact, using both wireframes and style boards is a golden combo as they complement each other very well. Also, just like for wireframes it enables you to refer to the style board as the style anchor point when the client gives feedback which aims to a different style direction.
Things to take into account
We advise every designer to work with style boards. It’s a great way to start of a project and getting yourself and your client on the same page when it comes to the style. Here are some things to take into account when making a style board that you’re going to show client:
- make sure the client understands you’re not going to actually replicate the images you use on the style board and that they serve merely as a style direction
- consider using 400x300px images as a default size if you’re going to use Dribbble shots often
- create a psd template to quickly make new style boards for new projectss
- keep in mind that the less images you use, the less nuanced the style board will be (the client will be more likely to think you’re going to replicate the images instead of being inspired by them)
- if you use other designer’s images, make sure the client knows these aren’t your designs
- pay attention to the way you present the styleboard
In the example style board in this blog post, we used Dribbble shots by the following talented designers:
