Visual design: zero to eighty

Have you heard of the Pareto principle? It says that 80% of the results come from 20% of the effort. It’s true for visual design. You can get 80% of the way to good visual design with 20% of the knowledge.

I’m here to teach you the 20%. Let’s go.

Questions or comments about this course? Send me an email.

Guideline: You will see these guidelines throughout

These aren’t rules. They give you a quick start with sensible defaults. You can ignore them when you’re better at visual design. But you won’t find many designers who think these guidelines are bad ideas.

Start with an idea

Visual design should communicate something to the viewer beyond the content in it. A fashion brand website wants you to think “luxury”. A themepark wants you to think “fun”.

image

If you have an idea to communicate, you can ask “does this help communicate [idea]?” every time you make a design choice.

This is easier if you have content already. You can look at the content to see what kind of idea it already tries to communicate. Try to communicate the same idea in your visual design.

Guideline: Write some adjectives

Before you start, write down a list of adjectives you want the visual design to communicate. “Funny”, “serious”, “approachable”, “technical”, “luxurious”, “cheap”. Refer to those as you create your visual design. For every decision you make, ask “what would represent these adjectives best?”.

Typography

Typefaces

You should use high quality typefaces in your design. You don’t have to pay for them. Some free typefaces are good enough.

Guideline: Use typefaces from famous designers

Typefaces that come from well-known and respected designers are usually reliable.

A high quality typeface means that the text in your design looks better. Most websites are mostly text. Choosing a high quality typeface is one of the simplest ways to make the visual design better.

Different typefaces communicate different ideas. A sans-serif typeface usually feels more modern and approachable. A serif typeface usually feels more old-fashioned and formal. You should choose a typeface that supports the idea behind your design.

Guideline: Pair typefaces easily with a super family

Some typeface designers will design both a serif and sans-serif typeface that belong together. Source Sans Pro and Source Serif Pro are part of the same super family. If you use a super family like this it is very easy to pair typefaces. They were already designed to work well together.

image

Line length

The text in your design should be readable. Especially if it’s long, like in an article. Proper line length is one of the easiest ways to make sure the text is readable.

If your lines are too long, the reader’s eye travels further to find the start of the next line. It raises the chances that the reader will start on the wrong line by accident. Then they’ll have to find the correct line, which interrupts their reading.

If your lines are too short, the reader’s eye has to travel to the start of the next line more often. This is tiring. Annoying.

Guideline: Make lines 60–80 characters long on average

image

Line height

Line height works with line length to create readable text. If lines are too close together or too far apart they are harder to read.

Larger text should have a lower relative line height. Smaller text should have a higher relative line height.

Guideline: Use ~150% for body text and ~110% for large headings

Start with 150% for your default text size. If text feels dense or loose, raise or lower the line height by 10% at a time until it feels comfortable.

image

For large headings: if the descenders on one line and the ascenders on the next line touch, the line height is too low.

image

Type scales

Visual design looks and feels better if the elements relate to each other. This includes the different sizes of text in your design.

It’s easiest to base your type scale on mathematical progression. For example, your headings could be twice the size of your body text. You will probably need three to four different sizes of text in your design.

image

Most text is body text. Choose the size of your body text first.

Guideline: Use a size between 16 and 20px (pixels) for body text

Larger text is easier to read for more people, so if you can choose something larger like 20px.

Use larger differences in text size if you want your design to feel more exciting and energetic. Use smaller differences if you want it to feel more professional and calm.

Layout

Text alignment

A paragraph of lines can be aligned along their left edges, their middles, or their right edges. Left-aligned text is easier to read. Centred text might help in some layout situations, especially for small amounts of text. But it’s harder to read.

Guideline: Always left-align text

image

Spacing scales

Spacing scales are like type scales. The distances you put between all of the elements in your design—as well as the padding inside them—should be pulled from a spacing scale. This scale should be based on a mathematical progression.

You’ll probably need a default spacing amount and two or three spacing amounts above and below that.

image
image

Guideline: Use your body text line height as your default spacing amount

If your body text is 20px and your line height is 150%, then set your default amount of space to 150% of 20 which is 30px. The most common element in your design is usually a line of text. So if your spacing is based on this, everything will feel related.

Horizontal grids

A horizontal grid is a set of invisible columns that run from the top of your design to the bottom of your design.

Besides the columns themselves there are gutters, which are spaces between each pair of columns. Lastly there are margins, which are the empty spaces to the left and right of the horizontal grid where you don’t place content.

image

You use this grid to help with layout. All of your elements sit inside one or more of these columns. When content sits in more than one column it crosses the gutters in between.

image

Guideline: Use a 12 column grid and set the gutters to your default spacing size

12 divides into two sets of six columns, four sets of three columns, and three sets of four columns. This is useful because it means you have lots of options when you lay out your content.

If you set your gutter size to your default spacing size, you’ll get the right horizontal space between content.

Alignment

When one element lines up with another they feel like they’re related. It’s also neater.

image

If you can, align anything that should feel related. If you use a horizontal grid, you get horizontal alignment for free: the left and right edges of elements should already be aligned. You should only have to worry about vertical alignment. The top edge, middle, or bottom edge of elements should align when possible.

Guideline: Align text based on its bounding box

Text doesn’t have many straight edges to align things with. Design software puts a “bounding box” around text. You’ll see it when you select the text. Align other elements with the edges of the bounding box, not the text itself.

image

Guideline: Align text of different sizes by their baselines

image

Guideline: Put content inside a visible container to make alignment easier

Some content isn’t easy to align. You can make this easier if you put the content inside a subtle visible container. Then you can align the containers.

image

Grouping

This is also called proximity. If elements are visually grouped they appear related. Importantly they also need to be further away from other elements they’re not related to.

image

Grouping is important because users won’t be as confused about what elements belong together. They’ll understand the interface faster.

Guideline: Nested groups should be closer together than their parent groups

You might need to nest groups of things. The more nested groups are, the closer they should be. It’ll be easier to tell they’re a group within a group.

Guideline: Visible containers around element groups should be subtle. The focus is on the content, not the container.

image

Visual hierarchy

Visual hierarchy shows the order of importance of your content. It is not necessarily the order the viewer sees them. Visual hierarchy is important because users can understand how content is arranged more quickly.

Elements higher up the hierarchy should be emphasised. Make them bigger or heavier or brighter. Users will look for these if they want to scan through the design to find what they need.

Elements lower down the hierarchy should be de-emphasised. Make them smaller or softer or lighter. You don’t need to emphasise the higher elements as much if you also de-emphasise the lower elements.

image

Guideline: Use as few hierarchy levels as possible

The less levels your visual hierarchy has, the simpler you can make the design. You won’t need to come up with as many ways to make each level look different from the next.

Colour

Colour palettes

Colour is very subjective. This section is mostly guidelines.

Colours mean things. But each colour usually means lots of things. Look up what colours mean. Choose colours that help communicate the idea.

Guideline: Steal colour palettes from real designs

It’s hard to create a good colour palette. Find colour palettes you like in real designs and use those instead. Don’t use colour palettes from a colour palette website. They’re created because they look nice, not because they’re useful for visual design.

Guideline: Use 60%, 30%, 10% proportions for your palette

Pick a neutral colour and use it in roughly 60% of your design. This is often white or black. Pick a main colour and use it in 30% of your design. Something ordinary like blue. Pick a third accent colour and use it for the last 10%. This will be something bright and eye-catching, when you need the user’s attention. The main and accent colours should have an obvious brightness difference. That way they won’t clash.

If you need more colours you can split the three percentages in half and choose another colour for that same purpose.

image

Guideline: The less colour you use, the more impact it has

You don‘t need a lot of colour in your design. It might even be better if you use less. Use white, black, and one or two colours at most. Colour is hard. Don’t make it harder for yourself.

Guideline: Don’t use pure black, and avoid pure white

Pure black is #000000 in hex. It doesn’t look natural because we never see pure black in reality. Make it a little brighter. Only a little. Avoid pure white (#FFFFFF) because it’s too bright. Make it a little darker. Only a little.

HSB colour system

HSB stands for Hue, Saturation, and Brightness. It’s a colour system like Hex and RGB. But it’s easier for humans to understand.

Hue is the colour. Green is a hue. Red is a hue. In HSB the hue is a wheel with 360 degrees of colour from 0 (red) to 360 (red again).

Saturation is how much of the colour is added. 100% saturation means it’s the most colourful it can be. 10% saturation will be only slightly colourful.

Brightness is how light or dark the colour is. 100% brightness is as light as it can get and 0% is as dark as it can get.

This colour system is useful because you can adjust the hue, saturation, or brightness without changing the other two. If you want three colours that are all the same saturation, you can just leave that setting as it is, and the change just the other two. Hex and RGB don’t let you do this.

Guideline: Lower saturation and raise brightness for a soft, friendly colour. Raise saturation and lower brightness for a professional colour. Lower both for a natural, earthy colour. Raise both for a primary, childish colour.

image

Graphics

Graphics are pre-made visual elements like icons, illustrations, and photos.

Use icons, illustrations, and photos from the same sources. If your icons are from different sources, for example, they won’t feel like they belong together.

Add icons to text, like for a button label, if you need to reinforce the meaning. It also looks better.

Guideline: Don’t use only icons unless you don’t have the space

It may look cooler, but it makes your design harder to understand.