When it comes to designing text-only lists, designers sometimes struggle to make them not look plain. Since there are no graphics to help with the aesthetics, it’s essential to use colours/shades, spacing/padding and typography to bring out the beauty of simple lists.


First, let’s take a look at an example of a plain looking list.


White backgrounds can be very bright and it brings out the starkness in an already bare design.

By adding some background colour, we can “mute” the brightness, decreasing the sharp contrast between text and background and create a more subtle look.



Right now, nothing really stands out and there is very little distinction between titles and subtitles.
Adding some colours or simply making titles bolder can help distinguish them.

02_01 02_02

For ease of reading (or scanning) purposes, we can take the difference between the title and subtitle further by making changes to typography in terms of size and type.

03_01 03_02


Lastly, by adding some spacing between the list items and reducing the spacing between title and subtitle for each item, we are able to create a visual divide making it easier to scan the list.

04_01 04_02

There you go, few simple steps give your lists a little more character.
Feel free to experiment with different colours and font types.

This article has 1 comments

  1. Pingback: Beautifying Text-Only Lists | The Sage 42 Blog

Leave a Reply