A lot of sites on the web just don’t look good.  I mean sure… many of them have nice designs, some even clean designs, but the thing that’s miss­ing from many sites, the thing that I believe would help them most, is focus­ing on the typog­ra­phy, (how the text is dis­played on the blog)  the lay­out (how the ele­ments on your page flow together) and how best to com­bine them.

This is the first of a three part series which will focus on design and typog­ra­phy ideas for your blog.  This arti­cle is going to show­case three sites I use for inspi­ra­tion, and I’ll present my key take-away’s from each site and how you can start imple­ment­ing them today.

Part two is going to really focus on the imple­men­ta­tion so be sure to con­tinue with the series…

Sim­plic­ity Meets Beauty, Zenhabits.net

 

ZenHabits.net which is ran by Leo Babauta is a shin­ing exam­ple of how sim­ple design and clean typog­ra­phy can take your site very far.

The beauty of zen­hab­its resides in its inherit sim­plic­ity.  The design is clean, every­thing has pur­pose, and because of that it works (on many levels).

My big take away from zenhabits:

“Show­case only the best / most impor­tant and get rid of the rest, focus on the message”.

When you have 10 mil­lion ban­ner ads + com­pet­ing graph­ics / adsense ads, you can’t really focus on any­thing.  On zen­hab­its you have a dom­i­nant visual ele­ment, clean text, bold head­line and the site allows you to move on.

I took major inspi­ra­tion from zen­hab­its when I designed Enlight­ened Web­Mas­tery.  I wanted a sim­ple site, that focused mostly on the mes­sage, reduc­ing noise, and improv­ing the mes­sage exponentially.

Zen­hab­its was proof that such a site could not only exist, but thrive vibrantly.  The goal being: “focus on your read­ers and help them get what they need”.

 

High Con­trast, Like a Rolling Stone

 

RollingStone.com is a per­fect exam­ple of using con­trast to improve your site.  Note the blacks, whites, greys, and red.

The power of Rolling Stone’s web­site is the lay­out.  Every­thing is designed like it would be in a mag­a­zine.  The col­ors are hot, raw, and appeal both to young and older crowds.  The text is clearly read­able and leads your eye from area to area.  This is an expertly crafted design, take note and imple­ment it today.

Big take away from Rolling Stone:

“Lay­out is impor­tant, draw your read­ers where you want them to go, and show­case what’s hot”.

RollingStone.com shows exactly how the use of con­trast in design and typog­ra­phy helps improve read­abil­ity.  The site is expertly crafted, most every image fea­tures a human face (which is impor­tant in mar­ket­ing), and the color design / lay­out is con­sis­tent through­out the site (they are doing many things that are beyond the scope of this arti­cle, but note most every­thing here has a dis­tinct purpose).

 

Dom­i­nant Images Are Wired For Success

 

First, ignore the huge amount of ads (dis­tract­ing isn’t it?), the for­mula here is a sound one.

1. Catchy head­line that’s some­what large
2. Dom­i­nant visual image to draw you in
3. Nice clean text fol­lowed by a link for more.

Short, sim­ple, and effec­tive.  (This is an easy to use for­mula to increase your sites appeal through layout).

It may be hard to take­away much from this exam­ple (due to all the ads), so let me show you another exam­ple of a post from Wired.com (with­out the ads).

Big take away from Wired.com:

“Inter­est­ing dom­i­nant visual ele­ment com­bined with quick to read teaser text equals high read­abil­ity + high scanability”.

Wired.com shows how using an entic­ing dom­i­nant image can affect your design and where typog­ra­phy fits in.  The first exam­ple dis­plays the prob­lem with hav­ing a lot of ads… com­pared to these other sites it is a bit much…

Another take away could be reduce the clut­ter and clean up your own site.

 

Take These Ideas And Use Them Today…

 

In part one of this series we went over sev­eral dif­fer­ent web­sites, and went over why and how typog­ra­phy is impor­tant.  I shared my big insights and take­aways from vis­it­ing the sites and showed what’s pos­si­ble and where we can go.  The next step for you to do is envi­sion how adding some of these aspects and design ideas to your site can improve it.

Think about how your site would look if it incor­po­rated just one of these ideas.  Later on through­out this series we will be work­ing on exactly how to do this and so much more.

I’d love to hear your com­ments, thoughts, opin­ions or what­ever on the topic of clean design, lay­outs and effec­tive use of typog­ra­phy.  Just leave a com­ment down below.

Talk Soon