The Corey Story

Being that one of my passions in technology lies with design, I figured I would start giving some design tips I follow when making sites. This entry will discuss how I list items within an unordered list on a web page. First off, if you are listing items that are part of a procedure, you want to use an identifier that clearly demonstrates there is a progression from 1 to 2 or from A to B. Other than that, I concentrate on listing items using a disc, circle or square. The decision between these three items for me is very important. You want to make sure you capture the style of your site with how you list items. For instance, if your site has a very rigid structure and very pointed edges and corners, make sure you use the square property for the list-style-type. If a site has more rounded edges and corners, I generally like seeing a circle or disc method used for listing items. Depending on the use of colors on your site, the difference between the disc and circle is whether it should be solid or empty. This is solely based on perception of the site. If you have very light colors and a lot of white space, the solid disc will more prominently display on the site and will add a little bit of color to it. Take a look at some examples:

• Item 1
• Item 2
• Item 3

To me the disc example above accentuates the list better than having an open circle on the light background, such as below:

• Item 1
• Item 2
• Item 3

A site with vibrant color usage and little white space would most likely benefit from an open circle, as it would be easier on the eyes for readers and users. Take a look at the following:

• Item 1
• Item 2
• Item 3

The filled circle appears too bulky. If you use the circle property for list-style type however, you get a list that displays much better on a dark background.

• Item 1
• Item 2
• Item 3

To me, the open circle is much more appealing on this display. Overall, when using lists, you want to make sure you accentuate the list, but make it appear natural for the people using your site. Cheers!

[ratings]

This entry was posted on Thursday, January 31st, 2008 at 6:21 am and is filed under Design, Tech. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.