Basic design principles for developers

You already know this, you know what is a good design and what is a bad design. Trust your gut. But how do you trust your gut when you don’t know what it’s saying?

You’ve got to learn the rules

In this blog post we’re going to look at 4 design principles to help you try and understand what it is that makes some designs more pleasing to the eye. Obviously there are no hard and fast rules and you might find depending where you look that you find 7 principles, or 12… I think 4 is enough to get us started.

I wrote this talk for DrupalCamp London so used their website to show what a few simple changes can do to improve website.

Proximity

Purpose

To arrange content into a format that is easy to read at a glance.

Proximity — the space between items is just as important as the content

How

Arrange all the things that are the same together.

Drupal is great at helping to make sensible Information Architecture with the way nodes and the templating layer both work. So you’ve probably got that covered and I won’t go into this here.

The space between bits of different information is just as important.

Think of a cutlery drawer… when all the items are just chucked in, it’s messy and hard to find what you’re looking for. When they are separated with a divider and things are stored in the right slots it much easier to find what you need… and when that fork handle slips over towards the spoons, you mistake it for a spoon. every. time.

When the edge of something isn’t clearly defined with white space (white space doesn’t have to be white, just empty!) then they can blur into one item. This is very common when looking on mobile at websites and emails. Sometimes it’s hard to distinguish one card from the other.

Repetition

Purpose

To create familiarity and add visual interest

Repetition — consistency is key

How

Things that are the same should look the same

Limit your styles and be consistent between elements and pages of the site. You should use HMTL and CSS like its meant to be used, simply.

Unordered list styles all using the same bullet type is a obvious one but it’s easy to get selectoritis and make lists in Call to Actions have circles and in body text to be squares if you get over ambitions with what you can do.

There’s a difference between showing what you can do and doing what you need to do.

Tim Berners-Lee said “A [language] which uses fewer basic elements to achieve the same power is simpler” Design works the same way, simple designs usually are stronger than something that uses all the effectsstylestools that are available.

Atomic Design is the newest buzzword and PatternLab the newest tool to help you do this, but the fundamentals here are to break things down into simple components and change when/if required.

Nature is full of patterns and repetition because it’s mathematically beautiful.

Alignment

Purpose

To unify and organise

Alignment — calms the mind, makes the content flow

How

Alignment is simply lining up every element with the edge of another object.

It’s just like when we tidy up our home, put the kids toys back in the baskets and stand books on the bookshelf neatly.

A grid system helps here but it isn’t necessary and CSS Grid layouts are pretty much here.

There is also vertical alignment of things on a line to look out for. Icons next to text makes a difference if they are aligned vertically.

CSS is like playing Tetris… you’ve just got to get all the shapes to line up in a row and you’re winning.

Contrast

Purpose

To create interest and catch the eye

Contrast — things that are not the same shouldn’t be the same.

How

If two elements are not the same then make them different, very different

If two elements are similar but one is more important (e.g. sticky list items) make them different in one or two ways.

Contrast isn’t just about switching out colours or size, even though that is a good start.

Remember colour isn’t enough because of colour blindness and size isn’t important if you’re listening from a screen reader so an icon or a label to say why they are different is helpful.

Sometimes the contrast doesn’t have to be drastically different to make an impact. You don’t want Black and White designs and you don’t want 50 Shades of Grey either. There’s a happy place where you you’ve done just enough.

So remember Contrast, Repetition, Alignment and Proximity will make your websites look better. C.R.A.P is good.

Further reading: The Non-Designer’s Design Book by Robin Williams. This book focuses on print design but the design principles covered work on the web too.

First published on my blog 6th March 2017