Building a Blog You Love: Design Essentials

{This is the second installment in my series Building a Blog You Love. See Part 1 here.}

When new visitors land on the home page of your blog, the first thing they’re greeted with is your design. The way your blog looks – the header, the colour scheme, the fonts, the imagery and the other design elements – immediately evoke an emotional response and tell a story about what it is you do. More often than not, before a reader even starts on your insightful, carefully strung-together words, they’ll have an idea whether your blog is for them.

We all know the blogosphere is well and truly soaked with inspiration. Millions of sites jostle daily for attention and while, of course, quality content is hugely important (because what’s the point otherwise?), in my opinion, having a functional, aesthetically appealing design is right up there too.

You don’t have to spend a fortune having your online home professionally designed within an inch of its life (in fact, plain, simple layouts that let the content ‘breathe’ are all kinds of awesome) but with the abundance of great templates and free fonts floating around the web these days, I definitely think it’s easier than ever to create something beautiful. Something that doesn’t look like this. (Hello, brain explosion!).

How did the In Spaces Between layout come about?

When I started this blog I knew what I wanted it to look design-wise (soft colours, plenty of white space) but being not-so-fancy on the coding side of things, I had no idea how to make that happen.  I didn’t want to spend too much on my blog from the outset in case this blogging caper wasn’t for me, so I end up creating the logo myself along with a mock-up of the layout Photoshop and had a developer do the back-end for me.

After almost 18 months online, however, I’ve decided to freshen things up around here and will be investing in a redesign for my site in early 2013 – implementing the bejesus out of everything I’ve learnt along the way. Seriously can’t wait!

Let’s start at the beginning – the essential elements. I recently chatted with the lovely Ana Degenaar from Blog Milk, who has generously shared her wisdom on everything you need for a killer blog, as well as her thoughts on design costs.

To make it super easy to save all the information from this series, another design whiz friend of mine, Sian from Fresh by Sian, kindly whipped up the below graphic for you to Pin to Pinterest or save to file (download high res version). Winner.

Ana says:

+ A good and complete blog makeover goes anywhere from $500 – $900. When I say complete I mean your designer will do the graphics, the coding and any additional work to ensure your blog functions properly.

+ Coding alone costs approximately $300 – $500.

+ Branding packages that include logos, business cards and the whole shebang cost around $1500 – $2000.

Now that the basics are covered, I want to share a few design and functionality-related tips and tricks I’ve discovered myself, so read on:

Or at least give it some thought. I can’t count how many times I’ve given up after trying to leave a comment under a post, oh, 10 or more times. Think how many other readers may be doing the same.

PS: this will make you giggle.

 

In the same vein as the above, if you want a reader to take action in any way once they visit your site – signing up for your mailing list, purchasing your product, liking your Facebook page, following you on Twitter or booking your services – make it easy for them to do so. Put the most important information front and centre, smack bang in their line of sight.

Want more people on your list? Place your opt-in box the top of your sidebar, in your header (like this or this), in your About section or at the bottom of your posts (aim for at least 2 out of 4 here).

Want more Facebook fans? Consider using a Facebook Like Box so readers can join your Facebook tribe without even leaving your blog.

{Hot tip: If you have a reasonable following on Facebook, this is also great ‘social proof,’ showing a first-time visitor that people are digging your content.}

Want people to share your posts? Use a plugin like ShareThis and ask people to share.

{Hot tip: It’s all in The Ask. Don’t be shy – there are people who are hanging for your words, so help close the gap by getting your existing fans to spread the love using those tiny buttons with oh-so-much-power.}

Want people to buy your eBook or visit your Etsy store? Place a button/ logo/ graphic of the cover where they can see it.

Extra tidbits:

1 // At the end of your posts, keep The Ask to one or two things – eg: ‘I’d love you to leave a comment and share with your friends!’ – to ensure you’re not overwhelming your readers.

2 // When I compile my Blogs to Bookmark posts each week, I include the Twitter handle of the bloggers when I share the link on Twitter. I often struggle to find the social icons on a blog, only to discover them buried in a random area of the site, so remember that visibility is key.

 

{Opt-in box examples: 1. In Spaces Between; 2. Marie Forleo; 3. Social Triggers}

Want me to let you in on a little a secret? This is something I learnt from Derek Halpern from Social Triggers through the B-School training – add the words “It’s FREE” (or some variation of that) where you want people to subscribe to your updates. You’ll see it in action above. Simple and powerful.

If you’re interested, Derek also has some fantastic information on using Feature Boxes for building your email list.

When it comes to the type or the fonts you use throughout your site, you can stick to the defaults (Arial, Verdana et al) or alternatively, trawl through the Google Webfonts site for a plethora of font-y options.

Check these posts out for inspiration:

+ The Best 20 Webfonts

+ Jo from August Empress shares her favourite webfonts.

+ The Top Notch Type series curated by Eva Black for Emma Dime is a veritable goldmine.

 

Colour, glorious colour (or color if you’re a U.S. of A baby!) See the infographic below for some brilliant insights on the emotions different colour schemes elicit.

When you’re going through the design process, be sure that there is enough contrast between the background colour of your site and the colour you use for the text. I’ve found myself squinting to read light grey text on a white background many a time (and I have no problems with my eyesight). Font size is also important for readability.

Aaaaaand, that’s a wrap! Congrats on making it to the end.

If you have any questions, please ask away my loves. If you’re feeling share-y, I’d love you to spread the cheer on Facebook and Twitter using the buttons below (thank you so much). x

Images: Jessica Comingore | Emma Dime | BobolingPrint Media Center

14 Comments to “Building a Blog You Love: Design Essentials”

  1. Fabulous post Rach!! Goodness me this is helpful for us newbie bloggers.

    Totally going to reread this a few times, am in the midst of a redesign myself :)

    xx

  2. Hi Rach just a little note to say thank you for all of the amazing blog tips, they are so well written and presented so beautifully – such a pleasure to read and feed the creativity and planning!! xx

  3. thank you so much for sharing all this info! I am in the beginning stages of re-designing my blog and am doing as much research as I can before I really delve into it!

Leave a Reply