design-for-developers

Simple design tips for developers

---

Alignment

Try and ensure that items on the page line up. Aligning vertically and horizontally is the simplest way to improve a UI.

Spacing

Try and use the same spacing throughout.

Rhythm

Set a base font size and use a line height 1.5x

example:

html, body {
    font-size: 16px;
    line-height: 1.5rem;
}

CSS Box Model

the box model you want

*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
 }

Fonts

Use a single font. Choose a profressional font.

Colours

Start with black and white. Add colour later - and then only as necessary.

Avoid the default web palette colours.

• A nicer color palette for the web
• solarized
• flat design colors
• flat ui colors

CSS resets

Use normalize to set base styles.

Guides

• GDS great advice on many areas of design / dev / writing
• (North)[https://github.com/Snugug/north]