How to create a style guide for your blog

How to create a style guide for your blog

Did you ever notice that most magazines use the same fonts, colors, page layouts and design elements in every issue? They have what’s called a Style Guide, which dictates an over-all look and feel for the magazine. The photos and text change, but the details stay the same. This is why when you open Bust, you know it’s Bust and when you open Vogue, you know it’s Vogue.

XOSarah.com: How to create a style guide for your blog

Here’s how to create a style guide for your website…

Choose an image style

Will your images be square? Have rounded corners? What filters will you use? My photos are either rectangle or a circle and I use Pioneer Woman’s Seventies action (at about 50% opacity) or Valencia in Instagram.

Pick your fonts

Choose a few fonts and stick with specific sizes & font weights throughout your entire blog. This means your sidebar, pages, posts and photos should all use the same set of fonts. On my blog I use Open Sans for titles, Habibi for text and The Only Exception for details.

Create templates for sidebar items, posts titles and photo captions

Once I’ve nailed down a style that matches my current design, I create a template in Photoshop. It’s much easier to just drag in the new photo than try to remember what size fonts I used every time.

XOSarah.com: How to create a style guide for your blog

Add the details

Bust Magazine ends every article with a B and many bloggers add a hand-written signature to the end of each post. On my blog I use straight lines to divide text, bold coral boxes for important information and 8px white lines to separate photos.

Blogs with consistent style

Breanna Rose uses photo collages with color & pattern blocks, small titles on photos, pastels & lighter tones / Ciera Design uses short photos with bold text for titles, text in bright boxes, uppercase section headers, teal + chartreuse + orange / Alex Beadon uses bold titles on self portraits and one of four colors for each post /  Honest Fare uses the same layout + green background for each recipe and photos almost always taken from over head.

Related Posts Plugin for WordPress, Blogger...
dashed-line
dashed-line

Comments

  1. says

    This is such great advice! I’ve just started a-fresh and have been really conscious of creating my own ‘style’. I think I’m happy so far!

    I do love your Nerd Party posts!

    ~ Alex @Forrest Mush
    xo

  2. says

    Great post! In the past, I used whatever fonts, styles, etc. I was liking at the time. Now I’ve definitely narrowed it down to specific fonts and styles. There’s still some tweaking going on, but overall I’d say I’m trying to stay consistent!

  3. says

    I also love your nerd posts! Now you have to help us (as in me) make a photo template! Next nerd post by chance??? Can I bribe you to make it your next nerd post?!?! Hahaha!

    • says

      Next nerd post is scheduled for tomorrow :) But I will add photo templates to my editorial calendar. What program are you using to edit photos?

    • says

      Hey Mercedes – Building templates can turn into a long explanation. It’s a little too complicated for a post, so I have it on my list to release as an ebook :)

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>