You are here

50 Tips for Web Design

Printer-friendly versionPDF version

Thank you to Kathy Murphy, Vermont's Chief Marketing Office, for sharing her top tips for designing a usable, accessible website. For other resources see the Internet Basics for Web Design resource page.

When we think about the design and development of websites, we often focus upon graphic design, backend development and semantic markup that is coded and combined into the finished website.

The user experience design is often overlooked. For some, it’s intangible, naturally vague and difficult to understand. However, detailing the experience you want the user to have on the website and making this user experience comprehendible is crucial to the design process.

It is very tempting to skip over the experience design and straight to image selection, overall coloration, font choice, etc. Yet, absence of a clearly defined business process, or hierarchy of information to be conveyed, the result can be a website that’s disjointed, difficult to navigate, and counterproductive to the outcomes the user expects from time spent your website.

Effective website design enables the user to focus upon the content, and conduct the transaction or accomplish their task efficiently. Minimalist website design caters specifically and solely to its mission of effective communication and focuses upon:

  • Subject: What’s the most important thing on the web page? Is it effectively keeping the user engaged and focused?
  • Usability: What things burden the user experience? What missing elements can enhance user-friendliness?
  • Balance: Does the web page have the appropriate visual hierarchy and do the key components have appropriate visual weight?

The following eight important reminders will get you going in the right direction, but you're the one who knows your customers (or should) so the finer points of personalization and "character" are up to you.

1. The importance of focus. You need to think like your visitors do. This is key to your site's success. Your customers simply want to find what they need, make the payment, locate a resource, etc. and get back to real life. If you can make their lives a bit simpler and easier, they'll reward you for it. If, on the other hand, you make their lives more complicated, they'll "surf away" and stay away.

2. The importance of understanding the medium. You are not creating a slideshow, a YouTube video, a TV commercial or a PowerPoint presentation. You are building a website. You need to provide easy, simple, clear navigation on every page, since you never know how people will link to your site and what they will see first. Visitors to your site, no matter how hard you try, will not always go where you would like them to go, or do what you want them to do. Remember that, and give them a few tools to move around the site, like a sitemap and/or internal search engine.

3. The importance of non-aggression. Most Internet users, especially experienced ones, like to stay in control of their movements. Research suggest that your first-time visitors are "hunting," not "deciding," so do not make unnecessary demands for clicking, scrolling, resizing windows or anything else. Neither should you put up any roadblocks that will slow down their hunting, like time-consuming "Flash and splash screens."

4. The importance of reduced load times. Tied into #3 is the notion of your site's real and perceived "speed." Carefully consider each page element and make each one earn its place, based on functionality, not "wow" value. Keep graphic file sizes small and do whatever else you need to do to have a fast-loading, easy to use site.

5. The importance of customer needs. Define all the kinds of people you expect to visit your site and consider what they'll be looking for. Ensure that the navigation design helps the greatest number of people to find the most popular items in the least amount of time. Don't "bury" essential information so that visitors have to dig down two or three levels to find it.

6. The importance of simplicity. Flash is powerful tool, especially helpful in demonstrating things that are difficult to describe in words, but it is so pathetically overused that it has turned people off. It can be a huge distraction, too, since animation and bright (moving) colors are exceptionally hard for our eyes to ignore even when our brains want to.

7. The importance of proportionality. Although Javascript is used on some sites to display all the links to the other pages, there is really no reason to do this when simple, straightforward, low-overhead HTML works fine. When you employ a "new, improved" or more complex means of doing something - anything - you have to take into account browser compatibilities, possible bugs and user resistance. Don't use more technology than it takes to accomplish something cleanly, clearly and consistently, particularly with users new to the web.

8. The importance of avoiding surprises. You should use the expected, usual and standard placements for expected, usual and standard site elements. Site navigation is not something you want to be too creative with, as it needs to be immediately understandable and usable. Such consistency across the web is actually a good thing, as it tends to make people's lives a bit easier when they feel they are in "familiar territory." Generally speaking, your various website components should look and work as people think they're supposed to.

Therefore, rather than get caught up in profound design metaphors or using your bandwidth to display every possible website trick and/or treat, you should focus on making your site into a solution for your customers. Make it easy for them to do what they need to do and then get on with their lives. Perhaps the most important thing you can give a site visitor, then, is respect and appreciation.

Need more ideas? While website design is moving fast and furiously forward, when new users to the web are the primary audience, consider the following tried and true tips and everyday design practices to improve your visitors experience with your website:

  1. Clicking on the logo should take you to the home page of your website
  2. Your logo/site title should be positioned in the top left of the page
  3. Duplicate your main navigational links in the page footer with links to additional, but less prominent pages
  4. Keep your navigation positioning consistent from page to page
  5. Don’t open links in a new tab/window, except PDF’s and embedded documents
  6. Highlight your current location in your navigation bar
  7. Use reasonable sized fonts (12px or larger)
  8. Make sure font sizes are flexible (Use em’s or %, not px)
  9. Sans-serif fonts are easier to read at small sizes
  10. Serif fonts are easier to read at large sizes
  11. Center your layout on the screen
  12. Use a page width appropriate for your audience (Older people use lower resolutions, tech saavy people use higher resolutions)
  13. Use white space to logically group related items on the page
  14. Use font sizes, colors and styles to prioritize content
  15. Use 1.4 or 1.5em line height
  16. Use line lengths of 45 – 60 characters, the same as a paperback book
  17. Link to related content within the context of your page content
  18. Make sure your links change color/style when visited
  19. Always underline links, except some navigational cases
  20. Do not make important parts of the website look like an advertisement
  21. Use pull quotes to highlight important content in a lengthy article
  22. Text should be concise and scannable
  23. Use dark gray text instead of black text on a white background
  24. Break long pages into multiple pages
  25. Do not use all uppercase words, word shape helps word recognition
  26. Divide text into sections and use sub headlines to make content more easily scanned
  27. Keep a consistent layout, colors and typography throughout the whole site
  28. Print friendly automatically with print style sheets
  29. Use buttons to submit forms (Some images which look like buttons are ok)
  30. Don’t disguise or over-style inputs
  31. Don’t redesign standard UI elements, like scrollbars (this means you, flash people!)
  32. Use breadcrumb navigation for hierarchical content
  33. Search results page should reiterate the phrase you searched for
  34. Do call your homepage “home” – not “welcome,” “front page,” “your organization name” or anything else
  35. Use short and easy to read URL’s
  36. Give links to other content on your site related to their current page
  37. Optimize images for fast downloading
  38. Publish new content regularly, don’t “set it and forget it"
  39. Test in all browsers and OS’s, and different versions – IE, Firefox, Safari, Opera and Chrome
  40. Listen to your users and let them dictate changes (user centered design)
  41. Avoid using jargon in page copy unless absolutely necessary
  42. Keep forms short, only ask for what you absolutely need
  43. Encourage conversation around your content.  Comments, forums, etc…
  44. Include a text only sitemap
  45. Use the title attribute on links to add more context
  46. Never use “click here” as the text on a link
  47. Write in a inverted pyramid style
  48. Create friendly 404 pages which help people find content
  49. Create incentive to come back later
  50. Connect information via hyperlinks, don’t force navigational channels