The Basics of Design

9th March 2019 | Comments Off on The Basics of Design

Note: this is almost entirely stolen from Laura Elizabeth’s brilliant design fundamentals course at https://designacademy.io/design-fundamentals/. This post is for my own notes so click the link and go through this course, I thoroughly recommend it.

The first reaction anyone has when they see a new website or a product is (rightly or wrongly) focused on the design. 

People trust good design. It makes a product or a service look legitimate

Laura Elizabeth, designacademy.io

Colour Theory

Try using websites which allow you to sort designs by colour like Dribbbleand Lapa.ninja to find colour schemes that you like or that fit the brand you’re working with.

Laura Elizabeth, designacademy.io

Tools:

  • https://www.lapa.ninja/
  • https://www.colourlovers.com
  • https://dribbble.com/colors/5c0e0a

You’ll like want:

  1. A main colour—big and bold. With plenty of white around it.
  2. A small accent colour for drawing attention.

Tip: less is more. If you remove the imagery and illustrations most websites and apps use a lot less colour than you would imagine.

Typography

Steer clear of web fonts and use Google Fonts or Typekit instead which have many free and low cost fonts.

Pick out 3 or 4 fonts that look really good together and use them in all of your projects. You the chrome extension WhatFont to quickly and easily see font details on any website (far easier than using Chrome Inspector.

Laura’s favourite “go to” fonts:

  • Open Sans – Probably the most universal font ever. Friendly and open, can be used anywhere.
  • Merriweather – Sophisticated yet ‘light’ font with tons of weights.
  • Roboto Slab – Not many weights on this one but it’s one of my favourite slab-serif fonts. 

Check list for good typogrpahy:

  1. Use fonts with many different weights (e.g. Light, Regular, Semibold, Bold , Italics) as they are more versatile
  2. Use a modular scale for sizes that are all proportional to one another, use a tool such as TypeScale to calculate these
  3. Adjust the default line height “A good rule of thumb is to keep your line height at 125% (or 1.25em) of the font size. So a 16px font would have a 20px line height.”
  4. Use different styles e.g. different weights, italics, block quotes, and subheadings, feature blocks and accent coloured headings

A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

Robert Bringhurst

Images

4 main types:

  1. Photography
  2. Illustration
  3. Icons
  4. Screenshots

Checklist for good imagery:

  1. Source high quality imagery
  2. Invest in at least one versatile icon set 
  3. Edit icons e.g. colour to match your brand 
  4. Don’t use icons to replace imagery 
  5. If you’re really stuck for imagery, go minimal

Key Takeaways

A few simple takeaways:

  1. A lack of space between elements is the number 1 issue Laura sees
  2. Check typography
  3. Check alignment

To be a good designer, you don’t need unique ideas

Laura Elizabeth
Posted in Uncategorised