Create style boards to save time and quickly communicate ideas to your clients

 

This is a preview of a small lesson from the Process Masterclass


Backstory

Ever since I started freelancing full time I've been utilising mood boards and style boards to great effect. It has really helped streamline my processes with clients and set the expectations early on about the art direction. The best part is it allows me to explore multiple directions without having to commit too much time on each concept. Everything is as rough or as detailed as needed for each project so I can manage my time much better this way. 

When I’m really feeling a concept I’ll jam out the idea and see how far I can take it. Other times it is just a rough mock to get the general direction going. It’s this looseness and exploratory nature that can help us find the best results. It also helps us to involve the client more. They get to have their input early on in the process and get a higher sense of collaboration and ownership on the work. And if they prefer another direction no harm done because we haven’t invested too much time and it's all part of our process to keep iterating. 

Detailed examples

1. Mood boards are essentially a collection of references such as images or videos that capture the essence of the end result that we want. Whether that is a site, app, product or brand. It is the collection of little snippets that can be used to form the overall mood and art direction. Examples are images of typography, layout, colours, photography, interactions, design patterns and anything else that helps us communicate the overall vision. Think of it like pins on Pinterest. Overall it’s quite loose and doesn’t have to be too beautiful. It’s key purpose is to communicate the art direction and vision to the client.

Example I prepared for one of my lovely clients: Pixel Union. 

 

2. Style boards display the look and feel at a more detailed level than a mood board. The work is done is done manually and not references from existing sources. Some people like a more solid list of requirements for their style boards. But I prefer to work organically to see what works. So my style boards are never the same for any one project. Of course there are always the usual suspects such as colour, typography and imagery. But everything else is specific to the project. Such as interesting micro interactions, the little big ideas and sometimes the actual big ideas. 

Example prepared for one of my lovely clients: I am Film. You can see how loose everything is and the 2 different design directions. 

 

When to use a mood board or a style board

Mood boards are perfect when you need to communicate the visual direction in a broader sense. Just scoping out a general mood and feeling that can be conveyed through existing sources. 

Style boards however are perfect when you need to get more detailed and specific. When you are deeper in the design process and are looking to lock down a visual language. 

 

How to create a mood board

My mood boards are done in indesign, but you can use any tool of your choice.

[Step by step video is not yet available with this preview]

1. First step is to articulate your direction. You must also explain to the client your vision and why you are heading in this direction. How does it relate back to your discussions with them and their overall goals etc. Good follow ups I find are examples that the client have mentioned throughout the meetings or have personally sent through. 

Tip: When you liaise with clients over the phone, video call or email I find it’s better to be level with them and just speak in a conversational tone. However when writing documents keep a professional tone of voice, because it won’t be just your point of contact reading your documents. Multiple stakeholders will be involved in any given project and may view your documents without context and knowing who you are. So it’s best to be thorough and professional. 

2. Save images of all your references into a folder. I feature and scale the images that are most relevant to the project by size. And focus on cropping specific details that relate to the project.  

3. You can order this however you want. But I tend to go cover page, design patterns, layouts & interactions and then visual look and feel. And then export to pdf. 

4. Send off to client and then sit back and go grab a beer because you’re done! And if you are alcohol free go and grab your favourite beverage. 

 

How to create a styleboard

[Step by step video is not yet available with this preview]

I use photoshop for my style boards, but you can use any tool of your choice. 

1. The key is to think of our end product, then to break it down to a micro level. Which little components or interactions can you begin to sketch out and explore, so the client can easily understand the direction and give buy their in?

2. Once we identify these little components. Next is to open up photoshop and explore things like colour palette, typography, photography and any micro interactions.  Everything else is up to your discretion. Create a new artboard and play around with some base ideas. Bring in references and place them just above the artboards so you can bounce ideas. Then create a new artboard, bring those assets over and keep expanding and moving on to different directions. Over time you should have something that should feel like a visual brainstorm, like something below. 

3. Now you will tighten everything up and send over to the client the best bits from your visual brainstorm. Seperate the different directions that you’ve created for your client to review. I find that 2 solid directions is usually enough. But 3 loose directions also works. I’ll also sometimes send over screens via invision so they can be viewed on native devices too. And Hurrah! We’re done. 

Key take aways

  • If you are looking for detail and something specific use a style board
  • If you are looking for something more general use a mood board
  • Styleboards are quick and efficient ways to communicate ideas and art direction to the client
  • Styleboards allow a more collaborative approach with the client to build trust through involvement
  • Styleboards help you explore different visual directions and interactions easily
  • You may be slow to begin with. But the more mood boards and style boards you do the faster and easier it will be to create them. Much shorter than creating a full concept. 

 

Resource files

[Full resource files are not yet available with this preview] 

 

The full Process Masterclass will be available in 2016. I hope you have enjoyed this preview.