Nerd Party: 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.
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.
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
Click here for more Nerd Party posts
01.17.13 in nerd party
Sarah, I love this advice! I was wondering if you could elaborate more on making a template?
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 :)
Pingback: Weekly Wrap Up #19 | The Barn
Pingback: February in Review | Ciera Design | Brand Identity + Graphic Design
Sarah! Thank you so much for mentioning my blog in this post!!!
Ooh I love these tips! You’re so right that having everything figured out ahead of time can really help define your style and keep it consistent every time! :)
I think I’m finally getting a style down. This post was quite helpful, although I wish I would have found it sooner!
Pingback: Friday Links 2/1/13 | EEF Etcetera
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!
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?
Pingback: Weekend Links #2 | Arlunydd Design
Pingback: Weekly Wrap Up #19 | Lyss Barn
I’ve been trying to create a style guide for my blog for a while now. Thank you for this post it’ll help me get started.
<3__Jessica
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!
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