Five More Principles Of Effective Web Design

Advertisement

Web design has significantly improved over the last years. It’s more user-friendly and more appealing today — and there is a good reason behind it: over the years we’ve found out that design with focus on usability and user experience is just more effective. Modern cut-edge design isn’t filled with loud happy talk and blinking advertisements. We’ve learnt to initiate the dialogue with visitors, involve them into discussions and gain their trust by addressing their needs and speaking with them honestly and directly.

Few weeks ago we’ve presented 10 Principles Of Effective Web Design1 — a comprehensive article about effective Web design and provided you with insights about how users actually think as well as with some examples of how effective designs can be achieved.

This article highlights 5 further 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 you might be interested in the following usability-related articles:

  • 10 Usability Nightmares2 showcases usability nightmares you should avoid when designing functional and usable web-sites,
  • 30 Usability Issues3 explains important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood.

1. Use An Effective Marketing Principle

In order to sell a product or a service you need to be able to effectively inititate the dialogue with random visitors of your site. Since your visitors have actually come to your site, they are willing to hear to you and learn what you have to offer. So how do you approach this potential clientele to maximize your earning at the end of the month?

Suggested by Strong in 1925, AIDA is the effective marketing model which describes a common list of events that are very often undergone when a person is selling a product or service:

  • A – Attention (Awareness): attract the attention of the customer.
  • I - Interest: raise customer interest by demonstrating features, advantages, and benefits.
  • D – Desire: convince customers that they want and desire the product or service and that it will satisfy their needs.
  • A – Action: lead customers towards taking action and/or purchasing.
  • Nowadays some have added another letter to form AIDA(S): S – Satisfaction – satisfy the customer so they become a repeat customer and give referrals to a product.

In this context customers should notice that AIDA is usually the way how potential buyers are tricked into buying products or services they actually don’t need. To gain users’ trust designers need to make sure that the site provides genuine information and there is no hidden context in which the content can be understood in a different way.

It’s also more effective to offer visitors concrete arguments, situations and ideas of how a product or a service can be used instead of bombarding them with loud and empty ad-slogans.

Traffik4

Consider the example presented above. traffik5 follows the AIDA principle. If the visitors expect some information about a Content Management System they expectation is immediately confirmed with a brief introduction at the top of the site. Thus, potential customers are attracted and remain on the site (Attraction, a). The interest is then raised by showcasing features and benefits of the product (Interest, i).

To communicate how the service will satisfy user’s needs the brown info-block at the right hand at the bottom of the page is used (Desire, d). Finally the users are guided to “Take the tour” and “Free 30 day trial” buttons which attempt to lead customers towards purchasing (Action, a).

A lot of other models are known in order to sell, e.g. the BOSCH-Formula (developed by Peter Hubert):

  • Be inquisitive, ask open questions
  • Offer solutions, talk about the endresult benefits for the customer
  • Stimulate the senses, let the customer test your product
  • Cross your sales, think of all the necessary accessories
  • Hit the closing point, sell when the customer is ready to buy.

2. Experiment With Few Colors

Dark body copy on white background and light body copy on black background are passive. Vibrant colors can help to highlight some specific elements of the site which you’d like to point users’ attention to.

However, you don’t need to use a vibrant palette to create an effective Web design. Sometimes it’s useful to pick a moderate number of colors and use them efficiently. Thus your visitors will immediately see what’s more important. It will also be easier for you to focus their attention on the most important areas of the site.

Sidebar6

Sidebarecreative.com7 uses only one dominant vibrant color — blue color stands for links, buttons and clickable elements. White stands for important information which summarizes the content of the current page. The rest is the content of the site with some light blueish hover effects. Excellent, modest and expressive use of colors. That’s effective.

8

Wilson Miner9 uses green, blue and pink. The dominating green color looks fresh and comforting. Blue stands for the links and pink for the hover effect. Notice the structure of the site. Although only few colors are actually used, one can immediately recognize clickable areas and detect the different sections of the site.

3. Strive For Balance

In Web design balance is important because it provides users with some sense of closure and gives the feeling of permanence and stability. Balanced designs are easier to digest and to understand, because they create a visual hierarchy which clearly displays what is more important on the web-site and what is less important.

Apple10
Source: The Elements of Design Applied to the Web11

Apple12‘s design is probably one of the best examples of the symmetrical (also called formal) balance. Single design elements have either very distinctive (above) or very similar (below) weight. They are placed on both sides of an imaginary vertical line on the page which goes through the middle of the user’s screen. The design is rather static and restful which makes it easier for the visitors to comprehend the information which is presented through it. Result: balance creates a simple visual harmony.

Why is Apple’s design so efficient? Because it’s user-centric and product-centric. The design of Apple’s site resembles a theatre stage where visitors are the audience and the product is the entertainer. Notice that the site presents only the product and nothing else. Apple manages to initiate the dialogue offering only most important options.

Signalfeuer13

Signalfeuer.info14 uses an asymmetrical (informal) balance which allows for the more dynamic use of white space (and this is probably the main advantage of asymmetrical balance). The left block is smaller than the right one, however the site offers a very strong balance by using an impressive and balanced grid. Also the choice of colors is quite impressive.

According to the article Principles of Design15, “asymmetrical balance may be unequal in position and intensity. To create asymmetrical balance, there must be an increase in intensity to compensate for the change in position. Intensity can be increased by changing size, shape, or tone. For a particular job, the designer might choose to position the elements to one side of the picture plane. The white space opposing must then act as a counter-balancing force.”

Avalonstar16

This is exactly what has been done on Avalonstar.com17. Notice the different shapes of blocks and “hanging” heading of the blocks. White space functions as a counter-balancing force to the content presented on the right.

Grid-based approach18 can be helpful or even necessary for achieving balanced design layouts.

4. Strive For Clarity

Independently of the design approach, the clarity of both layout and presented information should be given one of the highest priorities in the design process. If there is any chance of misunderstandings and ambiguious titles make sure to get rid of them or specifiy explicitly what is meant. Being more specific is usually better than being less specific.

To achieve clarity you don’t need to make use of “standard” design layouts or basic templates. Risk design experiments if you want to, but keep the clear visual hierarchy and structure of the site’s content in mind. The more organized your categories are, the easier it will be for your visitors to find their path through your site.

Hovie19

Hovie.com20 displays an unusual yet very clear design solution. The site consists of five blocks; the first one stands for the main menu which appears when the site is loaded. Sub-menu appears when some section in the main menu is selected.

The current position is displayed by arrows next to the selected option in the navigation menu. In the content area a brief description and the caption of the images displayed above is presented. The design is consistent throughout all pages. Is there any possibilty to somehow misunderstand the design? Not really. That’s simple, clear and effective.

Astheria21

Another example: Astheria.com22 focuses on white space and has a balanced grid-based design solution. Although the design is rather subtle and uses only one appealing color, you can see immediately where you are now and what options are available. Power of typography at its best. Unfortunately, the site doesn’t display which links have already been visited (Update: Kyle Meyer has added :visited-state now).

5. Address Your Users’ Needs

As web-developer you have the primary task to comfort your visitors, addressing their needs and providing them with sufficient clues for seamless and intuitive navigation. However, to achieve this you need more than just considering an average profile of your users and stick to the decision he/she will be happy with.

To maximize your exposure you have to consider various types and profiles of your visitors. You need to identify major groups and offer each group the functionality its members would be comfortable with. That doesn’t mean that you need to create multiple versions of your web-site; it rather means that you can integrate multiple levels of user interaction in one single design layout.

For instance, according to Shneiderman’s principles of User Interface Design, it’s important to enable frequent users to use shortcuts — to increase the pace of interaction use abbreviations, special keys, hidden commands etc.

Fffound.com23

Ffffound.com24 offers both usual navigation and a Javascript-based keyboard navigation. This functionality is not directly seen to newbies who can browse through the site in a usual manner. Advanced users, however, are able to navigate more efficiently. Of course, you need to make it explicit and clear how to use any advanced functionality and what benefits it offers.

Another possibilities would be bookmarklets, toolbars or some specific tools such as e.g. Flickr uploader. Offering these tools you’ll offer your users easier ways to use your service and they’ll have no need to search for alternatives.

Conclusion

Effective Web design doesn’t have to be colorful and pretty — it needs to be clear and intuitive. Make sure you help your visitors to understand the benefits of your web-site and offer them an easy way to explore and use your site.

Symmetrical and asymmetrical balance can be helpful in achieving a solid and clear design solution and thus provide a foundation for rich user interaction. To maximize your exposure, consider different types of users and offer them multiple levels of user interaction which would bring them back to your site.

↑ Back to topShare on Twitter

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 and loves solving complex problems in large companies. Get in touch.

  1. 1

    Awesome design. Looks great. Thank you, Smashing Magazine.

    0
  2. 2

    Hey there, thanks for the links to Astheria. I’m miffed that I missed the visited link styling! I’ve added it now. Thanks again for the feature. :)

    0
  3. 3

    Great article, thanks for the interesting read. They are all things I will take into account when making a design.

    0
  4. 4

    Great break down, I use most of these practices in my web design. I wasn’t aware of the AIDA acronym. I’ve always used the Keep It Simple Stupid. My main focus is on User Interface, Simplicity, Color, and Grid layout. I try to use the Golden Ratio and everything in 3 rule, but it’s not always possible.

    Thanks for the wonderful posts, keep it up.

    0
  5. 5

    Very useful. I’ve always used the CRAP acronym. Contrast, Repetition, Attention, Proximity.

    0
  6. 6

    I believe the full acronym is FCRAP. Focal Point is often left off but I find it to be one of the most important aspects.

    0
  7. 7

    A nice article, but I always feel like this kind of article could benefit from some “how NOT to” to contrast with the rest of the content. Seeing something done poorly, with an explanation of why it’s poor is almost always more instructive, in my opinion.

    0
  8. 8

    Felicitaciones, muy interesante articulo, es un gran material que hay que tomar en cuenta a la hora de comenzar un nuevo diseño.

    0
  9. 9

    Thanks for the mention of Traffik! All of us at Level9 Design appreciate your review.

    0
  10. 10

    I really owe you guys a few beers. I at Avalonstar and we at Sidebar really appreciate the mention. :D

    0
  11. 11

    day by day this site is becoming AWESOME!!!!!!

    0
  12. 12

    …Smashing’s been awesome from the get-go. Period. :-)

    0
  13. 13

    I really like this post because it brings up some principals that don’t get heard all the time. One trick that I just learned in establishing balance is to flip your design upside down (either in Photoshop or take a screenshot and flip it). Practical and revealing.

    0
  14. 14

    Great tip Dustin. I’ve always flipped typography upside down to look for kerning issues, but I’ll have to keep that in mind for future site designs.

    0
  15. 15

    RedesignYourBiz.com

    April 24, 2008 11:09 pm

    Thanks a lot for the amazing points… this will surely help me in my web designing business.

    thanks again.

    0
  16. 16

    Cool… thanks …

    0
  17. 17

    Inspiring post with some great advice and ideas. Many thanks for posting.

    0
  18. 18

    great article!

    just got the thought, is AIDA today the marketing principle for the web?

    0
  19. 19

    informative article… thanks..

    0
  20. 20

    Great article.

    Also great to see some of Ed Hann’s work in there

    Inspirational fella.

    Ed’s website

    0
  21. 21

    Excellent article.. descriptive and useful

    0
  22. 22

    Vitaly Friedman & Sven Lennartz

    April 25, 2008 4:37 am

    @Zoe: yes, AIDA is still being applied. Both in real-life and in the Web.

    0
  23. 23

    I have done my best by landing here. The stuff on web design is fantastic.

    0
  24. 24

    Wow great advice.. I do absolutely agree with your conclusion! thanks.

    0
  25. 25

    AIDA is a powerful tool that we use to describe the impact of Web2.0 on web design. The old sites just got Attention. Well designed sites with WEB2.0 functionality brings people through the process to action. Our philosophy of building tool for advanced web design at Bitrix is founded on this.

    0
  26. 26

    great post :)

    keep em coming!

    1
  27. 27

    Easily Amused, Inc.

    April 26, 2008 9:47 am

    Great Article!

    Coming from a print-design background, I need all the info I can get when designing for the web.
    But that’s the best part about it – the web is the ultimate marrage of aesthetics, usability and functionality.
    This article makes some great points, and interestingly enough with the way they poing out key points on a website, that translates over to print desing.
    I believe the idea is since people read from lefft to right, it’s always better to design key information or points in a Z pattern.

    - James C.
    Easily Amused, Inc.

    0
  28. 28

    The Traffic site is pretty much a partner/rebranding of the original software developers site (www.businesscatalyst.com) and (www.goodbarry.com). You should feature their sites.

    0
  29. 29

    I like this article very much!
    Thank you for all information, Smashing Magazine!!!
    I live your unburdened and useful articles about webdesign!
    Excellent!

    0
  30. 30

    I have done my best by landing here. The stuff on…

    0
  31. 31

    This article is very useful, I always focus on usability and good desing

    0
  32. 32

    Nice article and very good examples.

    0
  33. 33

    Yes your five ways to really good to make your site looking user friendly your tips really helpful for making a site user-friendly.

    0
  34. 34

    very interesting !

    0
  35. 35

    hello all, i am a student developing an internet website, still in the “drawing board phase”, do share if you have any interesting ideas on effective content approach and design.. thank you =)

    0
  36. 36

    I like Yo site ;]

    0
  37. 37

    Nice Article

    1
  38. 38

    I started to suck a little less anyway. ,

    0
  39. 39

    This is nearly always an unpleasant surprise, which is why if you are going to a market, it’s best to take with you only the amount of money you’re willing to spend. ,

    0
  40. 40

    Muhammad El-Nabawy

    July 19, 2010 11:58 am

    I have to Admit that without your brilliant work, My site would have been suck :) , especially because I’m a beginner.

    Thanks Smashing Magazine :)

    0
  41. 42

    Very nice site!

    0
  42. 43

    Very nice site!

    0
  43. 44

    Hooray for SM!!

    0
  44. 45

    Very nice site!

    0
  45. 47

    Very nice site!

    0
  46. 48

    Pretty interesting subject, thank you for putting up.

    0
  47. 49

    Heya fantastic posting , Thanks for giving this information

    0
  48. 50

    I wanna thank the author for these great tipps. I will try to use this for the design of my new project :)

    0
  49. 51

    Good post for new comers in the desiging field. great work dude keep the work up..

    0
  50. 52

    Sometimes though it is difficult to apply those principles in practice…in theory they look easy.
    In practice though becomes hard especially in the case where you many elements in a page and try to apply the principles above to all of them

    0

↑ Back to top