Presentation is everything. In a world where you have a few moments to grab the attention of customers, you want to make the best impression possible. One tool that can help is a style guide.
What is a style guide? 💅
A style guide is a document you write which outlines the stylistic choices your brand uses across various formats. For online stores and websites, this includes fonts, colors, imagery, buttons, and icons. It also includes communication styles like voice and tone.
Why should you have one? 🤔
Consistency is the name of the game, and your website should use consistent styles. Aside from being more pleasing to the eye, it also reduces the load on the human brain so visitors can actually digest what they see faster. A style guide ensures that any design choices you make on your website follow the same rules.
A style guide is also useful outside of your website. The same styles can be used in print media, email marketing, and more.
So, how do I make a style guide? 📜
First things first, your style guide will need to work within the confines of what you can do with your website builder. With Square Online, for example, you choose two fonts and a primary and secondary color in your design options. Other builders or custom-built websites may have different choices. For the purposes of this guide, we’ll assume that you’re using Square Online.
Choose Fonts. 🔠
In general, you want to use only two fonts on your website: a title font and a font for everything else. These fonts should complement each other. If one font is more intricate or busy, choose that for titles and choose a more simplistic font for general use. Square Online will use both fonts in appropriate places and adapt automatically for different sizes.
Choose Two Colors. 🌈
Like fonts, two is the magic number for your color palette. A primary color is used for many elements of the site, and a secondary color is used when something other than the primary is needed. Does your brand make heavy use of a particular color? Try that as your primary or secondary and choose another color that contrasts well with it.
Tip: Adobe provides a color wheel you can use to find complementary colors. It also displays a hex code you can copy and use in Square Online.
Voice and Tone 📣
Consistency in copy will make sure that any written communication feels authentic and on-brand. Is your brand youthful and funny or personable and homey? Provide examples in your guide to help show that. Compare these two examples which say the same thing but in different voices:
|
“Our handcrafted socks were knitted by sasquatches and colored by rainbow lasers from Neptune.”
|
“Our colorful handmade socks were crafted by our family for yours.”
|
Both statements tell someone that the socks are colorful and handmade, but they do it in vastly different ways.
Tip: Try writing out a list of adjectives and phrases that come to mind when you think of your business (a thesaurus can be a big help). You can refer to these when writing copy for your site.
Icons and Imagery 🌌
With any kind of image - be it image backgrounds, product images, or icons - think about what you are trying to convey to your customers. Consider what it is they will think or feel when they see it. Once you know this, you can consistently use imagery that presents a unified (and therefore on-brand) message.
Tip: Consider also how you process and present your imagery. Do you use effects on your image? Decide what effects and processing fit your style and document it.
Conclusion 🎉
This is by no means an exhaustive list of what should be in your style guide. Every business is unique, and every style guide is unique. There may be aspects of your style that you want to document separately, so get creative! A style guide isn’t meant to box you in but show the way to a well-made website.
…
Thoughts or concerns? Reply and share them below!
Adam
Seller Community, Platform
