Styleboards: Saving time, money, and headaches during web design

Most businesses these days are familiar with the branding process; they either have experience working with a design agency in the past, or have a rough understanding of the process. However, when it comes to web design and development, it is often a different story. The fact is, there are many different barriers to a successful project for both designer and client.

A major barrier between design agency and client is successfully communicating the vision for a website. It can be challenging for some designers to put into words their ideas and thoughts. Even the most skilled communicators’ abilities do not guarantee that their clients will draw the same vision in their brains based on the description. For example, I had an interesting conversation a few years ago with a hair stylist. He mentioned that often a customer comes to the salon with an idea of what they want done, which they verbally communicate. The stylist has to interpret what they requested and then transform this understanding into the physical end result – the haircut & styling. He mentioned that a lot of the potential for error can be avoided if the person brings in a picture of what they are looking for as it eliminates the risk of the stylist misunderstanding what the customer wants.

A haircut is a lot harder to redo than a website if you get it wrong the first time, but the point is that we are trying to minimize the amount of time spent redoing design work. Styleboards are that essential ‘bridge’ between what the design agency is thinking and getting the consensus and buy-in from the client. For the client, it eliminates any big reveal or surprises further down the road. Styleboards ensure you are not being presented beautifully polished design mockups of a complete website, only to discover that they are not what you thought you had asked for.

So what are styleboards? Styleboards examine the graphic side of a project and are a key part of the branding process online. They do not replace the other important parts of a web design process, like content creation or user experience analysis, which happen in conjunction with styleboards. Styleboards start with language and exploring the basics of graphic design. It’s about exploring line, colour, shape, form, pattern, texture, space, unity, harmony, balance, rhythm, contrast, emphasis, etc, all with the purpose of gaining approval on a particular visual direction from the client.

Styleboards are different than moodboards that a designer would traditionally use to support an identity design project. Even effective moodboards are too vague to visualize what the website interface may actually look like.

Styleboards take a cue from theme boards that architects and interior designers create. They share their early concepts in swatch boards and sample tiles.

This provides an opportunity to not only invite collaboration from clients but also to receive approval on initial direction. Even if none of the actual concept ends up in the final website design layout, it’s a way to engage client conversation and understand the right direction before moving forward.

Before starting a Styleboard we need to partake in a thorough discovery process to get to core understanding about the purpose of the website, who it is intended for, what it must communicate, etc. Beyond business metrics and objectives for the website, we need to also ask the client questions about the feeling they hope to convey with their website. Some people don’t like talking about fluffy topics like emotions and feelings, but this is what branding is all about—an emotional connection to a product or service.  We must ask the right questions and listen carefully to extract the language the client uses to describe their desired brand identity and web experience.

Now that we have all this information, what do we do with it? We start by analyzing the answers from the client questions, prioritizing, and organizing key concept words into two or three groups that we then use as themes to explore preliminary design and communicate these ideas.

Let’s review an example for a recent website Industrial Brand designed (as part of an entire rebrand) for Francl Architecture. The three themes of influence that we explored were:

• Human
• Minimal
• Technical

From here, we start to visualize how to represent the chosen words with colour, line weight, texture, imagery and and other design elements. Language can mean many things, so test and clarify what these words mean to your client by producing simple image boards. For example, below is an image board showing four different styles for ‘minimal’. By showing these to the client early on we were able to understand their interpretation and desire of how ‘minimal’ should be visually represented.

Here are the Styleboards we created for Francl Architecture based on the three groups defined earlier.

Designers often dislike it when clients say, “Can I have the colour of logo option one, the mark from option two and the typeface from option three”. But with website Styleboards, this is the whole purpose: for the client to be able to clearly communicate what they are thinking and visualizing. With this kind of feedback and understanding, we can produce a Hybrid Styleboard which will act as the foundation for all further design. Since this is a major milestone in the process, the Hybrid Styleboard is signed and approved by the client.

Thus far in the process, the client has been involved, consulted, listened to, and challenged when needed. This is great for building trust, loyalty and a better end product.

Now that we have the approved Styleboard, we apply it to the final wireframes. For efficiency and time/cost savings, wireframes (or clickable prototypes) are developed in parallel with Styleboards since tasks inform each other. Also, Styleboards help clients connect more easily with the wireframes without getting distracted by the “what ifs” of possible aesthetics, letting them focus on content, structure and user experience.

The client does not want surprises at any stage of the website creation process. When presenting the UI design comps (the way it will look and feel), past client reactions like ‘WOW’ (good or bad) are now positively replaced with comments like ‘Well, it looks like the wireframe and styleboard and we loved and approved those, so all is good here”.

Look at the natural and logical transition from the Francl Architecture approved Hybrid Styleboard, the wireframe and then both coming together into the final UI design comps.

At the end of the day, the key advantages of Styleboards are:

• Explores emotions as UI design component

• Clarifies visual language options early in process

• Builds client consensus early and often

• Allows client collaboration and greater insight into process

• Provides approval stage to validate choices

• Mitigates risk, and removes surprises from project

• Builds trust

• Allows wireframing/prototyping & visual exploration in parallel with less stress

Avoid surprises with your next website project. Question your designer on the use of Styleboards.

NOTE: We are grateful to Samantha Warren for positively influencing us in the use of Styleboards.