Finishing Touches

Everything I know about colour and typography came from a course I did years ago called The Better Branding Course by Caroline Kelso Zook.

Typography

Unless you know what you’re doing, stick to two typefaces:

  1. Your display type is for your H1’s, they should look great large.
  2. The body type must be legible at small sizes.

Pick one typeface to capture the tone you want (delicate, masculine, friendly, modern, etc). The other should provide enough variation to provide contrast between the two, but they should be similar enough that it’s not jarring.

Only if the pairing feels unfinished should you add a third typeface to bridge the gap.

This type is for your byline, the H2, this should pair well with your display. It helps if it looks good in all caps because it usually ends up on buttons and in the navigation.

Typography is subtle but it’s important to get right because most of what you see on a screen is type. Type is in the content, the navigation, it’s on buttons, in the headings, it’s everywhere.

The other thing I have learned is to stay away from pure blacks and whites. A dark grey typeface will always look better than black on white.

Colour

Leave colour till last.

Using contrast instead of colour keeps things accessible to people who are colour blind.

Designing in greyscale lets you add colour with a purpose.

The simplest strategy for an effective colour scheme is to only use one colour.

A monochromatic colour scheme gives you lots of shades within a single hue.

Single colour schemes are the hardest to mess up and the easiest to understand.

Images

I try and keep photography and the use of graphic elements to a minimum. Not because of some minimalist ideal, but because of load times. The faster a page loads, the quicker someone can use it. When I do work with photography and images I try and follow the 7 Rules for Creating Gorgeous UI.