Design: Lists of Distinction

Posted on October 31, 2018 at 11:37 am Written by

Do you need to list some points? I bet you do. Are they short? Are they long? Maybe they’re short with a little description each. Or maybe you think bulleted lists could be way cooler. In this second post of the Crafty Hacks series I have just the thing for you. Some of you may recall my first post, where we made gorgeous image-based buttons. This time I’m using pure blocks for my designs.

Can’t I just use built-in bulleted lists?

Absolutely. It’ll be quick and easy and pleasantly indented. The sort of list your mother would approve of.

So this new method could be described as… sexy?

Well no. We’re banging away on computers here people. Nothing we do should be described as sexy. But it is quite cool, or whatever the kids say these days. And at the end of the day, we’re just going to make a good-looking block and duplicate it, so it’s simple to do.

Get on with it then, I have other unsexy things to accomplish today

Right. For the purposes of this example, I’m going to assume you have 3 items to list. 3 is a good number for things in a list. It’s enough to need listing (just) but nobody is going to fall asleep reading it.

How to make beautiful lists:

Choose a dropzone in which to make your list
drop a 1 Column Layout Block in
drop a Padding block in the layout block
drop a Text block in the Padding block
Duplicate the Text Block
Colour the Padding Block
Colour both text blocks
Increase the size of the font in the top Text Block
Write in your title and description
Duplicate the outer Padding Block (ie the list item) twice
Save the list block

My little list ended up looking like this:
My list example

Pro tips

You can make the block as complicated or simple as you like. For instance, by adding another Padding Block with a subtly different colour for the heading to sit on.

I hope you enjoyed this post as much as I enjoyed making it. Please let me know in the comments if you’d like to know something specific or if you’re stuck in any part of the process.

Follow Tom Scott on Twitter

Tom Scott

Digital Designer & UI Architect at NewZapp
@destaids

Get the latest Email Marketing updates & insights