This article will quickly run you through some of the greatest issues with design for web and hopefully give you something to think about when you start your next web design.

1. Remember you have very little time on your hands

I read somewhere that average page visit throughout the entire internet is only 4 seconds. That doesn’t give you enough time to make an impression on the user and get him engaged with your site. That means that you have to be as precise as possible in explaining what the site you are designing is all about. If it takes more than few seconds for user to figure out what the website is all about, he will loose interest and browse away…

2. Remember that user scan the web

When you walk into the room you don’t see every single face there. First you only notice shapes of people and stuff that are inside. You scan the room. Then you move on to something that grabs the attention. Similar thing happens with first visit to the website. Users scan it first. This is the point where you need to guide user wherever you want him to go. It can be a login button, learn more button, conversion form, blog post…

3. Up-left corner of the web site is most visible

This is well known fact. The main reason for this is that people read books and articles that way (starting from up left corner) plus the early web sites and applications were designed that way. We often put logo in top left corner, and that is a good thing. But think about adding another element or two up there to make it more prominent (login link, search from, slogan…)

4. Learn about F pattern

Some eye-tracking case studies proves that users scan the web in a shape of a letter F. Top area gets scanned all the way, middle area half way through and lower area gets scanned only on the left side. Just something to think about when you’re having doubts on where to put content blocks in your designs.

5. Learn what users ignore

Users are ad-blind. They learned to ignore banner ads or text ads. Avoid designing anything that looks like an ad. Also, users ignore large blocks of text. Nobody has the time (actually I would say patience!) to read great blocks of text just to get an idea of what the page is about.

6. Text vs graphics

One interesting fact. Text grabs more attention than any cool graphic! If you want to deliver a message to your reader I suggest using a large slogan instead of cool header image…

7. Grab attention with design elements

Good elements for grabbing attention are text slogans, call to action buttons (usually using bright colors), various 1-2-3 steps list or lists in general…

If you’re writing a long article one of the most important things are headings. Headings grab attention like nothing else. Use the headings properly, explain the user what the article is about in just those few simple steps.

8. Text Formatting

Text has more chance of being read when it’s formatted properly. Don’t be afraid to use many paragraphs, bold and italic text blocks, blockquotes, underlined or upper-case text… Anything that makes your text block more visually attractive. Of course, you need to use formatting to emphasize important words or sentences and guide your reader through the article.

9. Use clean graphics

I already mentioned that users are ad blind. When you use graphics in your design make sure that they’re not too busy, messy and non-understandable. Many people will find it hard to look at the image that is too busy or colorful. Graphics needs to be clean and non-confusing.

What you can use to grab attention with graphics are people faces, especially when eyes on the photo are looking at the user. Also you can use eyes on the photo to “point” users to a certain direction.

10. Use whitespace

Use whitespace to give some element more visibility. If a certain element is too close to margins or other elements the things will be confusing and messy. Give it some “air to breathe”. This especially applies to text blocks.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (36 Comments)

1. Mladen
   November 12, 2009

   Nice article ! Very useful and educational...

2. E
   November 12, 2009

   Good tips! Something my boss really should be aware of.

3. Armine
   November 12, 2009

   I really enjoyed reading it, and have found it useful, thanks! :)

4. ThunderZeaL
   November 12, 2009

   very nice list ! there are totally usefull and right tips.

5. Andy Walpole
   November 12, 2009

   One interesting fact. Text grabs more attention than any cool graphic! If you want to deliver a message to your reader I suggest using a large slogan instead of cool header image... hmm... not sure about this What evidence is there for this?

6. cssglobe
   November 12, 2009

   @Andy: This is one eye track study but there are more (http://www.poynterextra.org/et/i.htm) Quote from the page: "Where do eyes go initially after firing up the first screenful of online news? To text, most likely. Not to photos or graphics, as you might expect."

7. ted@tedgoas.com
   November 12, 2009

   Great article Alen... and you've practiced what you preach (I scanned most of this article. Successfully!). Interested fact about how text grabs attention over graphics... any more info on this?

8. Zokxx
   November 12, 2009

   Excellent and concised tips!

9. Chameleon
   November 12, 2009

   Very nice! Great tips!

10. Design Informer
    November 12, 2009

    Thank you for this article. Number 10 is my favorite. Whitespace!

11. Richelle
    November 12, 2009

    Great artcile! #10 very important but often so overlooked as we carry on in this information age with too much info to get across! #4 very interesting but makes total sense!

12. Jason Lander
    November 13, 2009

    Great tips. I've never heard of the F pattern studies. Good stuff.

13. scott
    November 13, 2009

    very basic and very awesome. Thanks for the reminder.

14. Rocky
    November 14, 2009

    nice tips. i like this article

15. TechThem
    November 15, 2009

    Thanks for the tips... Really nice tips, Specially 3, 6 and 10 All of them were good but this one are always on my list.

16. Mr.JOSE
    November 15, 2009

    Very nice tip buddy! Thankzz!!

17. Marcin Szewczyk
    November 16, 2009

    We know! But we still forget...:) Thx

18. Rahul - Web Guru
    November 16, 2009

    Great tips for design and development of websites. Thanks a ton

19. Ferdinand
    November 16, 2009

    Hey man... really great article, thanks for tips!!

20. David Emery
    November 16, 2009

    Very nice tips, in a nutshell - thanks!

21. ArjayM
    November 17, 2009

    Gosh. This is nice. Thanks for sharing this.

22. wholesalereviews
    November 18, 2009

    Thanks for the tips, Your a star. Now time to put to the test

23. james marnley
    November 18, 2009

    Thanks for the tip. I will follow through and use them . thanks

24. hans
    November 18, 2009

    thanks for the tipps, i'll show this my boss and i hope he understands ...

25. Eli
    November 24, 2009

    Certainly a good read, but with your first point you should back it up with a link to some research, or at least say something other than "I read something somewhere..."

26. Oliver
    November 25, 2009

    Great article and good tips. Going to bookmark this post because it's a good refresher and the tips are helpful. Thank for sharing these.

27. Michael Martin
    November 27, 2009

    Nice tips! It was good to see less commonly discussed ones like the F pattern being mentioned :D

28. Dhirendra
    November 27, 2009

    Nice Post !! Thanks for the tips.

29. cssglobefan
    November 29, 2009

    Great post! Thank you master Zen

30. Raisins
    November 30, 2009

    I think the information presented will be useful to many people a lot.

31. dr john
    December 1, 2009

    Excellent! I knew many of these tips, but there were a couple that were new to me, and a couple that had slipped my mind recently. Keep up the good work. PS I pointed out your item 5 to prove to a client with a silly idea that I wasn't the only one who said if it looks like an ad it gets ignored.

32. Jon Crim
    December 4, 2009

    CSS is a constant learning process...you can never have too many tips!

33. Ziggy
    December 6, 2009

    Thanks for the very insightful article. Thanks for the great tips on the upper left corner.

34. v-render
    December 7, 2009

    that was real awesome post. all ten points were just perfect to follow. They are not just to talk but they also imply in your website. :) cool post thanks

35. Kim H
    December 8, 2009

    I really ought to be practicing some of these =/ I tend to get too wordy in my posts myself - large. blocks. of. text. I've learned, though, that some <span> formatting really helps.

36. Jon Crim
    December 10, 2009

    Ahhh...short and sweet, but best off all helpful. #1 super important!

Sorry, the comment form is closed at this time.