King’s Ultimate Guide to Blog Design Perfection

Each year brings us new trends be it fash­ion, films, web design of blog­ging. I am not a pro­fes­sional designer or any­thing – just a curi­ous stu­dent of life who spends hours look­ing at great blog designs and tak­ing notes of what pleases me about it.

I do have quite a stack of notes on design, and for the longest time have I been itch­ing to put most of those notes into a fully devel­oped arti­cle. I have quite a bit to say, so I hope you enjoy my guide to cre­at­ing a mem­o­rable blog design.

First things first: It all comes down to User Experience

UX or User Expe­ri­ence is the need of the hours. Blo­gus­sion is a blog about blog­ging and there are thou­sands of oth­ers who are in the same exact niche. Some may be even bet­ter. But why in the world am I stuck here?  – It’s experience.

Design is not just about hav­ing a fancy pants web­site – it’s about cre­at­ing a well crafted user experience.

What Can You Do?

UX is too broad a topic to be cov­ered in just a sin­gle post. In fact, it needs a blog of it’s own. But here is my all time favourite tip: Talk to your read­ers (or scan your site ana­lytic data) to find out what users are look­ing for and make it eas­ier for them to find it. Cre­ate bridges, not barriers.

Some Sites with Awe­some UX

• Apple
• 37 Signals
• Twit­ter
• Don’t Click it!

Mobile Brows­ing on the uprise

As smart phones are grow­ing ever more pop­u­lar, it is impor­tant for us to get our blogs ready for a mobile audi­ence. How well does your blog per­form on a screen as small as that of an iPhone or a BlackBerry?

Your blog is acces­si­ble from just about any phone made within the last cou­ple of years. Mobile inter­net brows­ing is ris­ing, and with new devices such as Apple’s iPad pos­si­bly devel­op­ing even more mobile trends — you have a lot to think about when it comes to your mobile audience.

What Can You Do?

It doesn’t hurt to pre­pare early. The best thing you can do for your blog and your mobile audi­ence now is to try to cre­ate a sep­a­rate design that will be loaded only for your mobile users.

The rea­son why you would want to do that is because a blog design that was made on your 20″ iMac will not look so hot on your 4″ iPhone. If you use Word­Press, you should look into either WP Mobile Edi­tion or WP Touch, which will cre­ate great look­ing mobile themes for your blog with­out any effort on your part.

Great Mobile Sites

• Yahoo! Mobile
• Face­book Mobile
• CNET

The Grid Sandwich

Gird based design con­tinue to rise. Now, if you are wise and are using the The­sis theme for Word­Press, chances are your site is already work­ing on a grid and you don’t have to worry too much (unless you have done some major cus­tomiz­ing and messed it all up).

But for the rest of best – con­sider tak­ing the time to set your blog up on a grid system.

If you are using free themes, take a screen shot and work on changes in CSS. Don’t lose sight of your goal – clear visual hier­ar­chy is what we are try­ing to achieve with girds and ease of visual flow of design ele­ments follow.

Good uses of grid systems

• Sec­ond & Park
• Satsu
• Edge­point Church
• Zachary Pul­man

Bold Type­face

Another rea­son to be fan of Alex, it’s like he knew what was com­ing, is because of the bold type­faces he has through­out a lot of his work. Bold type­face cre­ates empha­sis, and you want to put that empha­sis into the area of your design that is the most impor­tant: your blog headlines.

Overus­ing this tech­nique (as in mak­ing every text area on your blog bold) can cre­ate a lot of con­fu­sion and some pretty ugly typog­ra­phy. That is why, again, we save bold for the more impor­tant areas of the blog — the logo, and the main headlines.

What Can You Do?

Go edit your CSS files and use com­bi­na­tions of font sizes, bold and non-bold type­faces to cre­ate a clear visual hierarchy.

Sites Using Bold Type­faces effectively

• Free­lance Switch
• Edge­point Church
• Mike Poss

White Space

We love the sound of it! As a stu­dent of Bud­dhism and par­tic­u­larly Zen, I know how impor­tant it is for mind. Look at the text on your blog – that’s mind. Now look at the empty space with sin­gle colour – that’s pure mind! Err… white space. White space is like breathe of fresh air and is just freak­ing awesome.

What Can You Do?

Give your design some space! Hon­estly, I wouldn’t rec­om­mend you get­ting your hands dirty on this one unless you know what you’re doing. Believe it or not, sim­ple themes that rely more on white space than any­thing else can often be very com­pli­cated to cre­ate (if you’re doing it the right way).

Sites with Breath of Fresh Air (White Space)

• Zen Habits
• Design View ( Parental Warn­ing: Con­tains Awe­some Design Lessons)
• Google Well…

The Oppor­tuneur

Return of the Colours

As if they ever really went any­where, right? Why not try to mix things up a bit and use dif­fer­ent color schemes in your design? I’m not say­ing you should go out and design to match the rain­bow — but pick col­ors peo­ple wouldn’t nor­mally expect.

Just take Blo­gus­sion for exam­ple. Did you know that, from a mar­ket­ing stand­point, Blo­gus­sion has the absolute worst colours in its design? Black, gray and red. These are actu­ally quite depress­ing colours, and when com­bined — pretty ter­ri­ble for brand­ing. Yet, the design was so well received by the com­mu­nity that it went up for sale, and is a design loved by many.

It doesn’t hurt to try and do some­thing dif­fer­ent, because you may just come out with some­thing that is truly remarkable.

What Can You Do?

Take a look at the colour scheme of your blog and decide if it has an overused color scheme, or if it is some­thing that can stand out amongst oth­ers. If you don’t see any­thing amaz­ing, why not try and find some­thing a lit­tle more dif­fer­ent and unique?

Colour­ful Sites

• Emo­tions Live
• Veerle’s Blog
• Global One­ness Project
• Fam­ily Vaca­tion Sur­vival Guide

The ‘Sim­plify’ Jinx

The sim­plify jinx has hit many sites – includ­ing Mash­able. There is a dif­fer­ence between ugly and sim­ple. So get it right.

If you’ve noticed, even Google has sim­pler home page. Well, until you start dig­ging deeper and notice how clut­tered some of their other pages are.

What Can You Do?

Write down five things that you want your users to see on your site that you think they will value the most. Don’t be greedy – five. Now, go to your site. Keep those five things in front, above the fold (the area of your site that is vis­i­ble before any scrolling is required).

Sites with Sim­ple & Effec­tive Design

• Zen Habits
• Asnio
• Mash­able
• Twit­ter

Plea­sure of “Use Me”

Does your site say “read me,” “watch me” or “explore me?” The basic under­ly­ing prin­ci­ple is – “use me”. And here is my promise: I will not use your site if it doesn’t pleases me to use it.

Let me explain. If your site takes ages to load after I click a link, if you keep stuff­ing ads in every cor­ner, if you have annoy­ing sign-up forms then I am not return­ing. No mat­ter who you are (bet­ter be care­ful Mash­able, I’m talk­ing to you).

What Can You Do?

Remove dis­trac­tions, annoy­ing pop-ups and screen block­ers; opti­mize your site so it is as fast as pos­si­ble. Get­ting a bet­ter web host can is a good idea if your blog loads slow on a reg­u­lar basis.

Think in terms of users: If I like your site. I will look for your newslet­ter, your prod­ucts, and your affil­i­ate links. Your respon­si­bil­ity is not blind me with obtru­sive ads about them. Just make sure that when I am look­ing, I find it in an obvi­ous place.

If you are good enough and don’t have a newslet­ter – I will ask you to start one. But never will I — the loyal, pay­ing, filthy rich, advo­cate reader– respond to your inter­fer­ence with my deci­sion and style to surf a site.

Tip: Align your design to match your users actions, and no one else. Remem­ber, they are a “user” and if they can’t use it – you will be a loser!

Sites That’ll Please You

• YouTube
• Google
• Con­cave Scream
• Face­book

Shake­speare of JavaScript

This is the magic word that scares many peo­ple off into the bushes! With so many excel­lent JavaScript/jQuery resources avail­able, it’s almost a crime not to use them in your design.

There are so many dif­fer­ent kinds of scripts out there that can sim­plify con­tent. Slid­ers, rota­tors, ran­dom gen­er­a­tors — take your pick.

What Can You Do?

Ask your­self a ques­tion: Is that JavaScripct you are using bring­ing peace to your user? No? Throw it away! Can you cre­ate more peace using JavaScript? Use it. Cre­ate peace, not war. We’ve had enough of war – so don’t fight your user.

Tip: Test for grace­ful degra­da­tion of JavaScript on mul­ti­ple browser. It again depends on your end-user. Most peo­ple keep JavaScript active any­ways, so this shouldn’t be much of a worry on your end.

Effec­tive Usage of JavaScript

• TeuxDeux Sign-up and use it to expe­ri­ence awesomeness.
• Face­book Comments
• Word­Press Backend

The New Web Standards

CSS 3 & HTML 5

Why does this always hap­pen? Every time we have new tech­nol­ogy, we use it for the fun of it. And later we always decide to use if nec­es­sary. Go out – every one is using text-shadows and rounded cor­ners even when they don’t need it. CSS3 is to save us – not to stuff us.

Do you really need that text shadow on title of every blog post? Why not keep it for some rare cases where you want to drive atten­tion to a link or something?

Again, don’t depend of CSS3 or HTML 5 to serve your site in usable for­mat. IE is still behind in the race of tech­nol­ogy as usual and still ahead in race of mar­ket share – and it doesn’t sup­port CSS3.

@font-face

It is the lat­est buzz. This new tech­nol­ogy will bring us more fonts to play with. But use it with cau­tion – not all browsers will embrace it. Cufon is still the best text-replacement and if you are a Word­Press user – they have a plug-in for you.

Tip: Use JavaScript to ren­der HTML 5 and CSS3 cor­rectly in older browsers.

Some more Tips for Bloggers:

• If you haven’t already – learn the basics of HTML and CSS. It will serve you well.
• Use design to express not to impress – peo­ple who get impressed by those who want to impress have short atten­tion span and are no use for us bloggers.
• Once in a week, write an awe­some post and design it with heart – tak­ing inspi­ra­tion from Print Design.
• Social Media: Make it eas­ier for peo­ple to talk about you. Can they update their sta­tus about you from your site? Can they leave a com­ment, invite their friends or email the arti­cle? How easy and obvi­ous is it for them to use?

Self­less Shame Pro­mo­tion (Self Invented Pun)

As I said, I am not a pro designer but I know a thing or two about it. So if you are a reg­u­lar reader of Blo­gus­sion (I’d know if you lie) you can have my eyes look into your site and give you some free advice on improve­ments. It’s just free advice.

Here is what you have to do:

1. Just one thing you have to do – join Blogussion’s fan page on face­book (if you are not already there). You can even post links to your arti­cles on our wall!
2. And ask for advice in your com­ment. You can be impo­lite for a change.

What’s your favorite design tip?

I shared with you mine, now I am inter­ested in what your best blog design tips are. How could you improve my very long list?

Go to top