How To Design The Perfect List

Lists are a perfect way to display content and information in a very easy to scan, easy to read method. List are found on blogs to list posts, comments, and links. Lists are used on web pages within the content area as well as used as menus.

So what makes a list “good?” Is it the color? Spacing? Background? Style? In truth, it is a mixture of all of these things. Without one element, a list may suffer in terms of usability and aesthetics.

Lists are simple in their form – simply putting one excerpt or one line of text below another. If your lists become overly complicated or lose their simplicity, you will have lost the essence of the list and will lose your visitors’ interest as well. . . . .There are thousands of ways to customize a list using varying typographic elements, colors, spaces, images, icons and more.

There are plenty of examples given of various lists on various sites. The items he mentions are:

  • Color – can be used to help draw readers’ eyes to information that may be most relevant to them
  • Spacing –  The effective use of white space is also a critical element of a list when it comes to legibility, scannability, and down-right good looks.
  • Dividers – While white space can easily double as a divider, it never hurts to have some sort of visual element to help separate items in a list.
  • Typography – Typographic changes can make all of the difference in the world when it comes to being able to quickly and efficiently scan a list. Using a bold or bright title helps each list item stand out in a crowd.
  • Icons – The final element to take in consideration when designing your lists is the inclusion of icons or images with each list item. Icons can be aesthetically appealing, add visual cues to readers, and help distinguish each list item from one another.

You can read How To Design The Perfect List in its entirety with many examples of various lists on various sites and some sample code for lists.

You can see some of the techniques explained in the article in use on the left navigation menu at Expression Web Tutorials and Templates.

Additional Resources recommended include:

Speak Your Mind

*