As a business, your website is essentially an online storefront for your products and/or services. It represents who you are and is used by customers to determine whether your experience and values align with what they’re searching for. This is why establishing clearly defined, comprehensive style guides is so important for success. It contains a set of rules for visual elements, content creation, key messaging and more, ensuring you’re presenting a consistent message that reflects your brand’s intentions.
What is a style guide?
Think of the style guide as the user manual to your website. It determines everything, from the written content to the visual imagery, line spacing, elements and more. If there is a decision to be made about your website from a design or editorial perspective, your style guide will hold all the answers. It’s your one-stop book that you will rely on day in and day out for years to come. It covers absolutely everything related to your website, leaving no stone unturned (or element in question).
While this might sound daunting – it is a big job to put together – it will streamline processes moving forward. From website design through to content creation and even marketing materials, your style guide will ensure consistency and that your brand is represented as intended across the entire website.
Why you need one
Building an entire website is no easy task. And the job doesn’t end on completion. Websites are constantly updated with new information, blog posts, pages, services and more as your business develops and grows.
A style guide ensures the process is seamless each step of the way. Starting with the initial building of the website, it plays a critical role in the development ensuring consistency throughout, no matter how many pages the site is, or how many professionals you have working on it at a time. A UX designer can use the guide to inform all decisions moving forward, saving time and resources in this early development stage, while editorial can continue with content creation following the same guidelines.
As your business grows and your website needs updating, the style guide continues to offer consistency in the process. It takes away the need for lengthy consultations or approval periods, with everything needed already in place.
Brand Guidelines vs Style Guide
As an established business, there’s a high chance you already have brand guidelines in place. While this is a great starting point, they aren’t sufficient when it comes to web development.
Brand guidelines will address everything in your business, from your choice in logo through to print marketing materials and more. Websites are an entirely different ballpark.
The type of elements used differ greatly to traditional media, along with language, content digestion, your target audience and more. With this in mind, it’s vitally important to produce a completely separate guide that stems off your brand guidelines, but specifically and comprehensively focuses on the website.
Benefits of creating your own style guide
Consistency
Red text on one page, blue on another. Curvy font style or capslock. Large images centered, or small left-aligned pictures. All these inconsistencies are enough to turn even the most eager potential customer away from your website. It shows that as a business, you lack professionalism and attention to detail, while making it hard for your customers to navigate your website and find what they’re looking for.
With a website style guide in place, you can ensure that all visual and written elements across your website are consistent, no matter how many different parties you have working on it at once. This consistency continues once the website is live and you’re updating it down the track, with a style guide allowing no room for error.
Speed
Decision-making is a much faster process when you have comprehensive guides in place dictating exactly how everything will look and sound. From the creation of your website, through to the continual updates and maintenance once it’s live. All the decisions are already made and reflected in your style guide, making it much faster to make changes or hand over to a new employee or contractor.
Brand recognition
Creating a consistent style across all your platforms, from traditional media, through to social media, and your own website, increases brand recognition. With consistency across a variety of different platforms, along with the individual pages of your website, you are effectively marketing your business and creating a memorable experience for your potential customers.
Marketing
You can build on your style guide into other areas of the business. With clear, comprehensive details in place, it’s easy to work it into other areas, including marketing. Use the same design elements and tone of voice chosen for the website to spill over into any online marketing you undertake – the same online principles apply, making the crossover relevant and easy.
1. Study your target audience
Knowing exactly who your target audience is, determines a huge part of this process. It’s important to sit down and work out exactly who will be visiting the website. Unsurprisingly, you may find your website target audience is vastly different to those who come into your physical store/office space. Who are you targeting and why?
Once you work this out, it will help determine other elements along the way. Each step of the process you will find yourself asking questions, such as:
- Are they the type of people who prefer formal or relaxed language?
- Do they rely heavily on visuals or text?
- What icons will stand out?
- How big does the font need to be?
- Does the typography reflect their image of your brand?
Have a clearly defined target audience you can refer back to each step of the process.
2. Define your logo
There’s a good chance your brand has more than one logo: the full logo, one with a watermark, text only, visual only, colour version, black and white, large version, or possibly a smaller version. This is common!
When it comes to your website, you need to determine what logo should be used under what circumstances. When making this decision you need to consider the background colours and how it stands out on the website.
An entire section of your style guide should be dedicated to the logo, as it is a huge part of building business recognition and something you need to get right from the get-go.
3. Choose a colour palette
Equally as important is the colours you choose to use across the website. With a set of brand colours determined, it’s easy for developers to jump in and know exactly what they need at any stage of the project.
Start with primary colours, choosing up to about three, then add on secondary and neutral colours to the palette.
It’s important to make sure any colours you already have established in your brand guidelines do work for the web. If you add to or build on these colours, test the different combinations until you are happy with the chosen colours. Remember, if you spend the time to do this once, correctly, it can be used time and time again in the future to create consistency and save time.
4. Create typography rules
Along with colour, typography is another essential for your website. There’s plenty to consider when it comes to choosing the right font, heading sizes and more.
You want to make sure it’s consistent across the website, with rules in place for when a heading should be used, when a subheading comes into it, or when it’s just paragraph text.
It’s vitally important to ensure the font is nice and easy to read. While curvy font can seem to be a visually ‘pretty’ option, it’s hard to read and digest, so your message will get lost.
5. Set layout and spacing rules
These rules will determine exactly how your website is structured. If you have main layouts on your website, such as services pages, blog page, etc., it helps to mock-up a basic template that can be replicated as your website grows. It gives you the ideal starting point to build from, ensuring consistency across the website.
6. Choose buttons and icons
These buttons and icons are an important part of your website and often act as an ideal call to action to get your audience to take the next step with your business.
They need to look good, reflect your brand, and be consistent across your website.
What colour will they be? What font will be used? What words will be included? Will they drop down? Are they animated?
All these should be set out in your style guide.
7. Define guidelines for visual elements
You’ve heard the saying that a picture can tell 1,000 words. It stands to reason that imagery is an extremely important part of your website when you’re looking to get a message across as effectively as possible.
Of course, using the wrong image can be equally detrimental. This is why it’s important to have guidelines in place. Consider the tone for your images: light and airy, or moody and mysterious? Do you want them displayed big, or accompanying text? Will you be using filters across your images? Are there specific photoshopping or image size requirements to consider?
It helps to include imagery examples that will help guide anyone looking in the right direction for future images to the website.
8. Develop your brand’s voice
Finally, the content on your website is just as important as the visual elements. If you already have a brand writing guide, then you can build off this for the website. Again, your audience for traditional media vs online may be very different, which means your tone and language preferences can change drastically. It’s important to have two separate guides.
You can build on this guide as you go. As new questions arise, note them down, creating an easy-access document that can be referred back to anytime new content is written for the website.
Ready to get started?
If you’re ready to dive into a website style guide, then there’s no time like the present! OSKY is on hand each step of the process to help you make these all-important decisions upfront, to streamline the website building process. If you have any questions, simply get in contact with us today.
