Making designs work for you

What is the first thing that catches your eye when you land up on a page? The text? Maybe second. The page title? Close. It's something that's so natural and background-ish, that you've probably never consciously paid attention to it. And that is the mark of the success of the developer. Yes, I'm talking about the design of a web page. If you sit in awe of how a page looks, 9/10 chances are you won't pay much attention to the content, and something else will strike you, distracting you away from it. It's happened to me tons of times, whenever I land up on a beautiful looking page! I see something, then I run off to figure out how it was done. By the time I get it, I've already forgotten what I went to that page originally for. You see? The purpose of the page was defeated.

So! How do you design a page that will keep visitors on it, and make them focus on the content? I'm glad you asked!

Why candy? Why not eye-lollipops?

The first thing you have to understand is that the more flashy, the more distracting. Sure, it's really nice to put up a few things that look beautiful and attractive. Like a really nice background wallpaper, or a shiny widget here and there, maybe a cool little script! But the keyword is few. Never over do something that you can do without in the first place. Analyse the function of something (a graphic/content element), and see if it's dispensable. If it is, don't add more than one of it, in case you really want one.

Your design should divert attention to your content, not away from it, as I said before. So any element you add, should compliment the content. If it's a flashy object, put it as close to the content as you can, so that there takes place what I like to call, an attention flow or transfer. That's when the eyes gently pass from one thing to the object close to it. It's pretty easy to achieve, and I'm sure you've faced it sometimes too. It's time to use that on your viewers.

Realise which spots viewers see first.There are many tutorials on the web which help you pinpoint the 'hotspots'. A few resources to start with are Eyetracker, Web Page Hotspots and Eye tracking. This is important, since you'll want to place maximum content in those places. One good strategy would be to use attention catchers to maintain the flow of attention. This will give you the pleasure of using your eye-candies, and not compromising on viewer attention. It's the perfect ploy! :D And it works to maintain that continuity in your page, and will cause people to read everything and then move onto other things.

Use nice and strong colours to highlight important parts of the content. It doesn't matter if it might break the attention. That's what you're trying to do. Take them out of the monotony of reading simple content, by giving them something related, but not expected! And make sure their attention goes towards it :) It's a tried and tested method.

Simplicity goes well too! You can actually make things as simple as possible, in which case your text will definitely stand out and will immediately catch the viewer's attention. The perfect example for this is Daring Fireball. His site is a beautiful dark gray, with light coloured text on it. No frills attached. Your attention goes straight to the content, and stays with it! If you don't get besotted by the look, you can call it a near perfect design! :)

You must have your greens

Alas, there is no real substitute to good and proper content. But lack of good content can be covered up for to a little amount by coming up with an eye pleasing design, since it'll make viewers stay that much longer, and hence (hopefully) cause them to see something they like. Don't try to substitute for lack of content with good design though, that is sure to fail.

Happy designing! :)

---

Update: This is 'not' something that you should do. I am sure you don't need to be told that :P I found this off Digg.