When creating an online business, having a cohesive brand and style guide is an absolute must. Why? A style guide gives your brand a comprehensive direction and helps guide your future marketing and development efforts so that everyone on your team is on the same page.
Here, we break down key points to keep in mind when creating an agency-grade style guide.
Before You Begin
Before creating your style guide, you will need to decide on a few crucial elements. Choosing your brand's voice, color scheme, and the balance between company goals and customer satisfaction will set you up for style guide success.
Voice: First, you need to know the kind of voice you want your business to have in the industry. A style guide is meant to communicate the brand. Is your brand's voice professional, reliable, and authoritative? Or, is it casual, witty, and friendly? Our creative writers help answer these kinds of questions to convey your brand more thoroughly in a style guide.
Colors: As an agency, our clients usually approach us with a few main colors they want to use in their style guide. From there, we use a hue or saturation that is either popular or complementary in order to develop a complete color scheme. We end up utilizing cornerstone colors that our clients really want, along with 3 to 5 more complementary colors that we suggest.
Balance: In general, EYEMAGINE’s designers follow the 20/80 rule: our style guides are 20% what the client wants to express and 80% what their audience will enjoy. This is determined based on the industry and what’s in vogue, with the aim being to one-up any competition that's out there with a personal, unique twist.
The Process of Creating a Style Guide
Here, we will explain the process of creating a cohesive and comprehensive style guide using our client, Design Essentials, as an example. Design Essentials offers healthy hair styling solutions for women of any hair type.
When approaching the Design Essentials style guide, it was important to begin with a tactical strategy in mind.
Our aim was to focus on their typical buyer persona's everyday life. The main buyer persona for Design Essentials is a busy woman who desires to look polished and presentable but has little time to do her hair. We wanted the overall look and feel of the style guide to speak effectively to this specific individual.
We decided on two colorful words that set up the overall theme of the guide: life and style.
This is the opening image that we used for the style guide. The model is not only dressed like our target persona would be, but she also portrays herself as a strong and confident woman - two main characteristics that serve as primary identifiers for the persona.
We also established the typography for the guide, deciding on the use of handwritten headlines for a more human and personal touch.
Next, we have the Look and Feel section of the style guide.
This section of the guide essentially shows what you would expect to see in a magazine ad for Design Essentials. It is the main standard for what their advertising is going to look like, providing a general guide for them to follow with future campaigns.
In this part of the style guide, we are simply establishing font, layout, and typography without establishing a name or label. Again, we have a hand-written, large display font that is laid out unevenly to show freedom of expression. We also made sure to establish a clear difference between the display font and the paragraph font in respect to sizes.
Frequently, designers make the display font about the same size as the paragraph font, but this makes it more difficult to capture the reader’s attention or draw their eye to any relevant CTAs. We wanted to avoid this problem, so we used the fonts and layout to effectively draw the reader's attention to any and all relevant sections of the page.
The following section of the style guide is the Color Story.
With this piece we had a sense of direction, since the client expressed their desire to include the colors green, purple, and gold. That said, we still had to refine their vision.
The shade of green that they were using, for example, was a much more olive green with yellow undertones, which conflicted with the rest of the look they were going for.
Our designers then worked to find another version of the color that had more life and looked more complementary against the purple.
For the layout tones, we wanted to make “whitespace” the primary background tone. We wanted to use white, blank backgrounds to our advantage in order to allow for a clean design and to make the accent colors pop.
Finally, our style guide included an example product layout and an example photo direction so that the client could have a clear sense of how this style guide would actually translate onto their website and product pages.
Overall, a style guide can be seen as an instruction manual without words, something that allows the client or business to visualize and easily understand the brand voice and the direction it's headed. From there, they can successfully build out their website, landing pages, marketing campaigns, etc., with a clear vision and an effective stylistic direction.
