How To Design The Perfect List

Posted on 19. Jan, 2009 by Brian in Web Design

Lists are a beautiful way to display content and information in a very easy to scan, easy to read method. Lists are found on most blogs to list posts, comments, tags, or links. In this post we will be exploring the modern practices of lists as an element of web design and I will be showing you how to design better lists to add to the overall design of your site.

What Is A “Good” List?

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.

I find that looking at lists in their best form is the most efficient way to get inspired, get ideas, and start thinking about how you want your lists to look. There are thousands of ways to customize a list using varying typographic elements, colors, spaces, images, icons and more. Let’s take a look at some well designed lists:

Showcase: Lists In Modern Web Design

MGFN

This list is very simple in style and form, but gains its uniqueness from the fact that it rests transparent against the background of the site.

Readernaut

Readernaut’s list works because not only is it clean, spaced, and legible, but it also provides additional information about each list item (in this case, the number of entries a person will find when they click a link).

Version App

Version App maximizes on the ’simple’ look of a list – a bright title and a one sentence descriptor. This list is great because of the integration of icons to help visitors visually navigate through the site.

The Cosmic Machine

This list is very similar to Version App’s in that it uses a bright title, descriptor, and icons. The difference is in the layout and the background upon which the list rests.

Name Birdie

Name Birdie’s list is more of an instruction area to help people get started in using the site. The list uses large numbers to help people follow the pages in the order they are designated. Large, bright icons also add to the aesthetic appeal of this list.

Concentric Studio

Concentric Studio really made their lists fun to use by adding an ‘up-and-down’ scroll feature. This, combined with large thumbnails for each list item, makes browsing their links easier than ever.

FOWA

The Future Of Web Apps offers an introductory paragraph to the list above the links to help explain what the links below mean and where they will lead.

Barack Obama

Obama uses his list to gain support on various social networks such as Facebook and Myspace. Using white icons that color over on-hover, the list makes it very clear where each link will go to when clicked.

All Top

All Top wastes no space with their content-oriented list. This works to help people find the right link in the shortest amount of time possible.

Miles Dowsett

Bright titles with descriptions, combined with white space separation and the inclusion of star-icons on each list item makes this list very versatile and usable.

Bellingham Real Estate

Very simple, very clean, and very readable, Bellingham goes for a 2.0 look by utilizing subtle gradients and bevels to add depth and structure to the list.

You The Designer

Just one of the few lists we’ve seen thus far that use underlined links, You The Designer uses bright, contrasting colors to help set their list apart.

Pen And Think

Pen and Think highlights their links with a nice background to add contrast. Coupled with descriptors and category tags, this list is very content-heavy without sacrificing legibility or scannability.

Real Mac Software

One of the most visually attractive lists I have seen to this day, Real Mac Software uses beautiful and elegant icons to help illustrate the idea behind each list item. Added with simple typography and bright links, this list is incredibly easy to use.

Oak Tree Creative

The combination of subtle dividers and the clever use of white space makes this a clean, easy to read, and visually appealing list.

Parkview Baptist

The ability to scroll horizontally between different dates to load different lists makes this element of Parkview Baptist’s website really stand out from the crowd.

Salient

The top of Salient’s list uses subtle tabs to fit the most amount of content into the smallest space on the site possible. Add in dividers and small icons for visual cues of each list item and this list is not only pretty, but very usable as well.

Fetch App

Combining all of the elements used in most of the previous lists, bold titles, descriptions, dividers, icons, and the use of white space, makes Fetch Apps’ list beautiful, usable and readable.

Gabbo

Gabbo uses beautiful hover effects on their list to make navigation easy and elegant for users.

Wal Mart And Unions

This is unique in that it uses bright boxes around list items at the top to highlight the most important items, while less-important items have a normal background with bright text.

UTK

UTK effectively uses white space and typographic subtleties (bolding and italicizing) to create an easy-to-scan, easy-to-read list.

Squawk Design

To maximize readability of a white text list on a dark background, Squawk Design effectively uses the combination of icons, bold headlines, and more subtle descriptions to create a great list.

Bright Box

Bright Box alternates the background color of every other link in the list to create great visual separation and to make each list item discernible from one another.

Bilet

With beautiful hovers on each list item, Bilet is able to make it easy for visitors to know which link they are reading about and where each link will take them. This is essential to maximize click-throughs and conversions.

Apple

What would an inspiration post be without some Apple love? Apple brilliantly uses ‘iphone app icons’ to help illustrate how each link will be related. This is genius in helping iPhone customers learn how to use each app in the iPhone: clicking on each item in the list in the same way they would tap the app icon on the device itself.

The Big Noob

A beautiful typographic mixture of serif and sans-serif fonts, mixed with the effective use of white space, and topped off with beautiful hover effects, The Big Noob really nails this list on the head when it comes to looks and usability.

Book Tagger

Book Tagger’s list is unique in that it serves the purpose of displaying the different tags being used on the site. Each list item varies in color and size based on the amount of times the tag has been used in each article.

Elliot Jay Stocks

Elliot’s site uses transparency to create a unique feel to the site. Each list item is widely spaced and uses dividers to add visual separation. With a transparent, green hover on each list, this is beautiful and user-friendly.

How You Can Make Beautiful Lists Too

Each list above is unique and beautiful in their own unique way, but the real question is how can you create your own lists for your own site with your own style? If you took time to read the descriptions of each list, you will certainly have noticed very similar elements found in each list:

Color

A great example of the use of color in lists comes from Wal Mart’s union list. They use a bright and bold background to highlight the most important items in the list, while less-important items are nested below in a prominent, but not as noticeable location.

This example shows how color can be used in lists as more than just an aesthetic element – instead they can be used to help draw readers’ eyes to information that may be most relevant to them. Conversely, the lack of color can also be used to draw attention to a list hidden amongst bright backgrounds and busy content.

See Colour Pixel:

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. Sure, in some cases, the lack of white space just works. However, consider this the exception, not the rule.

By spacing out the different items of a list, it becomes easier to read, easier to understand, and is certainly less of an eye-sore. For ideas of what spacing works, see a couple examples below:

Web Design Ledger

PSD Tuts

How To Make Your Lists

CSS is a great way to space out your lists. Use the following code in your CSS to help space out the items in a list. Adjust the margin size according to your own preferences:

ul {
list-style: circle;
}

ul li {
margin-top: 15px;
margin-bottom: 15px;
}

This CSS code will add a 15 pixel margin to the top and bottom of each item in your list. For more on styling lists with CSS, take a look at the list style property.

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. This can be achieved by a simple dotted line, a solid line, or an image. Borders are easy to create using CSS:

ul {
list-style: circle;
}

ul li {
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #000;
}

This code will create a one pixel, solid black border 5 pixels below each item in your list. For more tips and tricks on creating borders with CSS, take a look at the CSS border property.

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.

A few great examples are PSD Tuts and Squawk Design.

The following are a couple more examples. Take care to notice how easy it is to discern where a new list item starts based simply on typographic differences.

Abduzeedo

The 9513

Again, with a little bit of HTML and some CSS styling, this is very simple to do. Take a look:

The HTML

<ul>
<li>
<a href=#>Link 1</a>
Description goes here
<li>
<a href=#>Link 1</a>
Description goes here
<li>
<a href=#>Link 1</a>
Description goes here
</ul>

The CSS

ul {
list-style: circle;
}

ul li {
margin-top: 15px;
margin-bottom: 15px;
}

ul li a {
padding-bottom: 5px;
color: #313131;
font-weight: bold;
}

ul li p {
padding-top: 5px;
color: #7a7a7a;
}

Mine looks like this:

Link 1
Description goes here

Link 1
Description goes here

Link 1
Description goes here

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. Adding icons is surprisingly simple, again, using the power of CSS.

To add a nice check mark next to each item in my list, I simply need to add the following CSS:

ul {
list-style: none;
}

ul li {
margin-top: 15px;
margin-bottom: 15px;
padding-left: 30px;
background: url(images/check.png) no-repeat 0pt 3px;

/* You will need to upload your own ‘check.png’ file for this to work */
}

ul li a {
padding-bottom: 5px;
color: #313131;
font-weight: bold;
}

ul li p {
padding-top: 5px;
color: #7a7a7a;
}

Mine looks like this:

Link 1
Description goes here

Link 1
Description goes here

Link 1
Description goes here

The above is a very simplified version. Of course there are ways to play with embedding icons, moving them around, and getting them to interact more with the list. For now, however, the basics should give you an idea of how to proceed in a way that’s best for you and your site.

@Twitter

When writing this post, I consulted a couple of my Twitter followers to get their opinions on the use of lists in modern web design. I posed the question, “What is the most critical portion of an unordered list? Spacing? Color? Typography? Other?” Here is what they said:

@zgordon – Padding and then creative use of background images.

@Corey Freeman – For me? pullet point icon

@Aaron Is Here – Spacing – If the spacing is problematic the <ul> will not look like a <ul> . I wonder how twitter will d isplay the <ul> code.

@Build Internet – I’d say spacing, with a close second to typography.

@Chris Coyier – Depends on the context entirely? All of the above.

@Arbenting – I would say spacing. Color, type ect can really enhance a ul but the spacing is what really sets it apart.

@Chris Barnett – In my opinion spacing is the most important. Followed by typography.

@Mike Van Hoenselaar – The semantics have to be right to use ul/li. Furthermore I would say that spacing is most useful. Especially on the left.

@Jimmy Gleason – Spacing and the bullet point style/image.

@Chris Spooner – For standard ULs I’d say spacing, when using a CSS reset you need to restyle the indentation and line height for readability.

@ZSquared – I think the spacing has a major impact on how well the list will present itself. That goes for the whole page layout – IMHO.

@Sour Apple Media – Spacing.

@Ryan Downie – Spacing, you need to separate the list’s content from surrounded content.

After reading through these responses, you will notice that spacing is the most mentioned element of a good list. Be sure to keep your lists spaced and separated from your content for maximum impact.