One of the easiest ways to create a cohesive look for your website is by creating a style guide that lays out the details of how you’d like your site to look. A style guide is simply a document you create to record the colours, fonts and layout you want for your website.

When you have a style guide in place for your website, it doesn’t matter how many authors, editors or VA’s you have, your site will maintain its look and branding across all content.

I break style guides into four different sections.

1 – Colours & Whitespace

The colours you use on your website need to work together to form a cohesive look. Choose one main colour as your focus, and two to three accent colours that complement your main colour.

Using several high-octane, intense colours can be visually jarring and can literally give visitors a headache. There needs to be adequate white space for the eye to rest as you scroll down your page. The KISS principle applies here – Keep It Simple Sweetheart!

There are several tools you can use to pull your colour branding together such as https://design-seeds.com/ and https://paletton.com

Remember to also use your style guide for your social media accounts to maintain your branding across all your profiles.

2 – Typography

The fonts you choose for your heading and body text are another important part of your style guide. Pairing fonts can sometimes be a bit confusing, as there are so many options available.

It’s best to use fonts that complement each other and work together without being jarring for the reader. This usually means choosing a combination of a serif font and a sans serif font that don’t fight for the reader’s attention. You can use fonts in the same family, such as Lucida Serif and Lucida Sans, with different weights to differentiate them, or you can use fonts from different families who have similar shapes that will work together.

You can find some complementary font pairing help on sites such as https://typ.io/ and https://blog.typekit.com/2012/05/23/type-study-pairing-typefaces/

3 – Layout

Layout is the next item to tackle in your style guide. Here you will outline your preferences for how the different content modules on your pages will be used to highlight your products and services.

Layout also encompasses items such as padding and margins so you can achieve the whitespace breathability mentioned above.

Studies show that people scan their eyes across a website in either a Z or an F pattern. Keep this in mind when you are contemplating your layout options.

When I design a site, I create an initial home page layout, inside page layout and blog layout. I leave it for a day and then go back and see how I can simplify the layout to highlight the clients’ product/service.

4 – Image Sizes and Composition

Selecting a consistent size for images you are going to use in your posts or sliders does a couple of things.

First, it makes the thumbnails consistent for your blog page or anywhere you have a featured image set for the post or page. For your sliders, having the images all the same size will allow your theme to keep a consistent size and eliminate the problem of multiple images sizes resizing incorrectly and making your slider look “jumpy”.

Second, it helps achieve a coordinated look across your pages so your readers will know what to expect and will have a more pleasant user experience.

Consistency in using either graphics or photos also helps your site maintain a cohesive look. A mix of the two can also look great as long as the images and graphics work together in either colour or content.  I mainly use photos on my site, but chose graphics for each of my WordPress training modules to differentiate the type of content.

Creating a style guide need not be fancy. A simple text or word processor document is all you really need. If you work with a team, create an unpublished page on your current site outlining the details. If you use a project management tool, such as Basecamp, you can simply create a project with your details and share with your team.

Jill Skaling Chongva

Jill Chongva is a WordPress website designer, recent convert to the Divi Builder, Marketing & WordPress Virtual Assistant & Life Blogger who has been doing web design since 1999.

Her WordPress skills and marketing assistance help small business owners make the most of their message by creating consistent, cohesive branding that stands out.

Learn more at www.lusciouslime.com