10 Principles Of Effective Web Design


Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

Please notice that

This article has been translated to Hebrew4.

Principles Of Effective Web Design

In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior.

How do users think?

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.

  • Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it.
  • Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.

    Users don’t read, they scan. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process.

  • Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives. [JN / DWU]
  • Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient. [video6]


    Both pictures show: sequential reading flow doesn’t work in the Web. Right screenshot on the image at the bottom describes the scan path of a given page.

  • Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.”
  • Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open links in new browser windows.

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.


Let’s take a look at an example. Beyondis.co.uk10 claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern11, these three statements would be the first elements users will see on the page once it is loaded.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.


ExpressionEngine13 uses the very same structure like Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options to try the service and download the free version.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.

2. Don’t squander users’ patience

In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states14, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.


Stikkit16 is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.


Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.

3. Manage to focus users’ attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.


Humanized.com18 perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less question marks visitors have, the better sense of orientation they have and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.

4. Strive for feature exposure

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.


Dibusoft.com20 combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.

5. Make use of effective writing

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.


Eleven2.com22 gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

An optimal solution for effective writing is to

  • use short and concise phrases (come to the point as quickly as possible),
  • use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
  • use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

6. Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.


Crcbus24 provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even icons manage to communicate the information clearly. Once the icons are hovered, additional information is provided.

From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.


Finch26 clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.

7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.


White space is good. Cameron.io28 uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.

8. Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states three fundamental principles29 involved in the use of the so-called “visible language” — the content users see on a screen.

  • Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
  • Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.
  • Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox30 for more information)

BabelFish in use: Amazon.com in Russian.

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish32) and provide your usability testers with a task to find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.

10. Test early, test often

This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).

Some important points to keep in mind:

  • according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.
  • testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.
  • usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.
  • according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.



  1. 1 http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/
  2. 2 http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/
  3. 3 http://www.smashingmagazine.com/wp-rss.php
  4. 4 http://d-webs.com/lhe/apage/27944.php
  5. 5 http://www.useit.com/alertbox/reading_pattern.html
  6. 6 http://www.etre.com/usability/eyetracking/showme/
  7. 7 http://searchengineland.com/070413-121955.php
  8. 8 http://blog.eyetools.net/eyetools_research/4_community_of_learning/index.html
  9. 9 http://www.beyondis.co.uk/
  10. 10 http://www.beyondis.co.uk/
  11. 11 http://www.useit.com/alertbox/reading_pattern.html
  12. 12 http://expressionengine.com/
  13. 13 http://expressionengine.com/
  14. 14 http://www.thinkvitamin.com/training/webapps/web-app-form-design/
  15. 15 http://www.stikkit.com/signup
  16. 16 http://www.stikkit.com/signup
  17. 17 http://www.humanized.com/
  18. 18 http://www.humanized.com/
  19. 19 http://dibusoft.com/
  20. 20 http://dibusoft.com/
  21. 21 http://www.eleven2.com/
  22. 22 http://www.eleven2.com/
  23. 23 http://crcbus.mattiaviviani.net/
  24. 24 http://crcbus.mattiaviviani.net/
  25. 25 http://getfinch.com/
  26. 26 http://getfinch.com/
  27. 27 http://cameron.io/
  28. 28 http://cameron.io/
  29. 29 http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
  30. 30 http://www.useit.com/alertbox/
  31. 31 http://babelfish.yahoo.com
  32. 32 http://babelfish.yahoo.com
  33. 33 http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
  34. 34 http://nibis.ni.schule.de/~lepke/homepage/webdesign/webdesign.html
  35. 35 http://www.macgregor.net/speaking/digitaleve/UID.swf
  36. 36 http://www.usability.gov/pdfs/guidelines.html
  37. 37 http://www.sylvantech.com/~talin/projects/ui_design.html

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

  1. 1

    Great post, many useful tips in here.

  2. 52

    Beautiful stuff. Your articles are all starry in my Google Reader ;)

  3. 103

    Richard Francis Kay

    February 1, 2008 3:19 am

    Good to point this out! Especially ”cos it’s tempting to create websites “flooded” by design. The websites nowadays are really appealing, but they lean more towards an experience. And that’s not the main point, if you are searching/browsing. Websites should be serving the main goal: giving information. Design shouldn’t cover it up. And therefore should be used effectively – usability and focus are key – design is in a supporting role (depending ofcourse – or just only make a sitemap without any design – just fonts – or is that design too?) :-P

  4. 154

    I like this article, some very valid pointers, which, if followed can result in a well ‘designed’ project.

    I also like the Supermarket’s comments from a ‘creative’ point of view….a messy unpredictable palette of ideas can always be good, to push the boundaries – but this articles lays foundations to ensure that however creative you feel, your user’s will still be able to easily use the machine you build.

  5. 205

    great article for web designers… thanks…

  6. 256

    Good principles in theory, but in real situations where the customer satisfaction is the goal of the design, some of this principles are not used.

  7. 307

    Nice Article. Every web designer/developer must know this.

  8. 358

    “Web users are inpatient and insist on instant gratification. ” Goes along with “Web gurus don’t edit themselves well.” Unless you meant to say that patients in the hospital want instant gratification while those on outpatient status are content to wait.

  9. 409

    Thanks, the heat maps are really interesting, and useful tip about the F pattern, as for printed stuff a typical scan is a Z.

  10. 460

    Great post! =]

  11. 511

    Another poignant article — thanks! Regarding Principle #1, Steve Krug’s book is fantastic, and I strongly recommend reading it… “Don’t Make Me Think”

  12. 562

    Really good article even if some of the points can be discussed… Really good sum-up for great designs!

  13. 613

    “f you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution”Good article, but I disagree with the above statement. Whitespace could be used to separate two design segments for sites with minimal content, but for sites with an abundant amount of content, lines are better because lines are visual cues of separation. Having whitespace to separate segments is like throwing a pile of clothes in a room. It just looks disorganized. Look at http://www.nytimes.com Can you imagine this site without lines?

  14. 664

    Great article as always.

  15. 715

    This is a great summery. I also recommend “Designing Web Usability” and “Don’t make me think”. I guess your post is a great summary of boths books.

  16. 766

    Always a pleasure to read your articles, thanx for the amazing contributions to the web community.

  17. 817

    ThanX for this Article … it`s very useful for web designers. I`m new in this area of web design and I had really need this. Thank YOU Again

  18. 868

    Nice article. Good fundamentals matched with great grafix, who would have thought that could work?
    Thanks, bookmarked!

  19. 919

    Another great article. I wish I could convince all of the departments at my office that insist on being on the homepage of this.

    To add on to this article, there are 5 things that I would consider are essential to a website;

    1. Site logo – distinguishing feature across all pages of the site. Seems like a no-brainer, but you’d be suprised
    2. Search Function – some users are search heavy, others are scanners. In addition, check your internal search just as you would with your external search. It will do wonders for your conversion rate.
    3. Sections – Permanent navigation that corresponds and links to the main sections of your site. Navigation should be consistent and prevelent on all pages of your site.
    4. Utilities – Utilities are those critical elements to a web site’s functionality that don’t necessarily add to the site’s content or sections. Examples include sitemap, about us, contact us and help.
    5.Home Button and “You are Here” indicators – let the user know where they are in relation to the rest of the site. If they feel they are getting in over their head they will usually just leave.

    Good work again,


  20. 970

    Great post. I wish I could brand the points on the behinds of a couple of clients I’ve had.

    My only small quibble is with the statement, “the best site design is a pure text”.

    This of course is not true and is easy enough to demonstrate. There are design elements that go beyond “pure text” and people expect and require them. Indeed, it’s be strange if they didn’t.

  21. 1021

    Vitaly Friedman & Sven Lennartz

    February 2, 2008 3:33 am

    @Leo Klein: it wasn’t meant to sound like this. What it means is that in the best case users who are searching for information would like to see the contet with exactly the kind of data they’re looking for. Not more, not less. But, of course, there is no such thing as “best site design” or something similar.

  22. 1072

    The comments about the white space are a great reference, I don’t think they are used enough. Check out A List Apart for another good white space article.

  23. 1123

    I really appreciate the point of keeping things simple. Often clients want to slam as much content as humanly possible into every space of their pages. This is aggravating and most people do not wish to see this when visiting a website. Well spaced thoughtful layouts are always the best idea. Make use of your users screen real estate regardless of what resolution their at. Cluttered websites definitely aid to fickle traffic.

  24. 1174

    First of all, the website shouldn’t be displayed in a narrow column. This page layout is awful and makes the article painful to read…

  25. 1225

    your article remembering me with a book with the title “Dont Make me Think!” (author: Steve Kurg)

  26. 1276

    Good guidelines with great examples! Will sure keep them in mind when designing my next website.

  27. 1327

    taxa inmatriculare

    February 4, 2008 12:51 am

    Great stuff, article #7 sounds very interesting, good work guys!

  28. 1378

    Great! Usability in a Nutshell.
    Rock on!

  29. 1429

    Great post … I love the heat maps!

    But when you say “Don’t be afraid of white space” I hope you’re not recommending people use only the left-most 20% of their page for content .. (bit like this page looks to me at the moment). Can’t you make your main content area a bit wider?

  30. 1480

    The first sentence is a bit off I think. Via good visual design you get good usability.

  31. 1531

    Vitaly Friedman & Sven Lennartz

    February 4, 2008 8:07 am

    @Owen Cutajar: we use a fluid layout. The layout will expand if the window size is bigger. You have the full freedom to see the site as you wish as it dynamically fits to the size of your browser window.

  32. 1582


    I conducted a survey not so long ago (1500+ respondents) and about 80% said they want external links and documents (PDF, Word docs) open in a pop-up window, so they don’t go back to a page they were on through 10 “back” clicks.

    Should I follow design advise on this page or what my users are asking?

  33. 1633

    I have to agree that the layout of Smashing seems to be unpleasant now, the right hand column is way too dominant. It takes at least 50% of the screen at my normal browser window size.
    Have you changed layouts?

    I am forced to fullsize my browser window up to 1280×1024 before it becomes less unpleasant. At 1024×768 it must be unbearable.

    I am actually considering writing my own custom CSS just so I can look at your site without wincing. I have already had to adblock your sponsors to try and balance the page up a bit.

  34. 1684

    Oh man I hate the 50/50 layout of Smashing magazine.

    sure I could re-size my browser up to fill my whole screen in an attempt to get the right balance, but that still isn’t enough. I have to drag the browser window across two screens before the layout looks right. By that I mean , the right column is between 30% and 25% of the window width. 50% – 45% is ugly as hell.

    Please, please, please reduce the width of your right column, it dominates the actual content.

    I commented on this earlier but that one vanished .

  35. 1735

    Good post, but I disagree with “If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution.” A line is a visual cue for separation. Using whitespace to separate segments with very little content is ok (still better to use a line), but not using a line to separate segments with abundant amount of content is like looking at a pile of clothes in my room. Can you imagine nytimes.com without lines?

  36. 1786

    Dont make me think!!!!
    this is the great book for a good web design!

    very nice summary.

  37. 1837

    Regarding comment number 13 and 9 “’Conventions are our friends’
    Here, Here, for mediocrity!” Conventions (“a collection of accepted knowledge”), a noun, are not the same thing as conventional (“unimaginative and conformist”), an adjective. It’s what the conventions are applied to that dictates whether the end result is mediocrity.

  38. 1888

    I liked point number 5 and I will have to consider changing one of my sites as a result.

    Thanks a lot.

  39. 1939

    siddharth from rapfodet

    February 6, 2008 9:49 am

    Like the first point very much.

    User will go to some other site for sure if the interface is not user friendly.

    Thanks for the great article buddy.

  40. 1990

    Hehe, I feel like people at my work should read this list over and over again every morning before they start doing anything! Thanks for gr8 article.

  41. 2041

    This was by far the best article smashing magazine added in 2008, anyways, we also need to think the lives of the millions of graphic artists who survive because of the web as a medium. What I feel is the new trend is to make those Graphic artists get out of the web.

    CSS started the trend and 3/4th of the people who were doing web sites have gone out of the same because of the big learning curve…

  42. 2092

    awesome article. :)

  43. 2143

    David Jacques-Louis

    February 9, 2008 1:53 pm

    It’s all here, amazing.

  44. 2194

    Great article, I always try to apply these principles – if only clients always agreed ;)

  45. 2245

    Excellent article as always. =]. Great help.

  46. 2296

    Ditto, great tips!

  47. 2347

    @Vitaly Friedman & Sven Lennartz
    still it doesn’t change the fact that in each window resolution you have the right side of the page full white with no content

  48. 2398

    Good intro. Would be great to see more detailed article as well.

  49. 2449

    Really very good article…. going to help me alot…. to make my websites more popular

  50. 2500

    Thanks this will help me!


↑ Back to top