More tips for designing user interfaces

03 Sep 2019

Notes inspired by Refactoring UI

This is a follow on post from tips for designing user interfaces.

Alignment

Letter-spacing

Working with color

Use HSL instead of Hex or RGB, because different shades of one color in hex or rgb look nothing alike. Whereas in hsl, it's obvious that these shades share a lot in common.

Shades of blue in hex

Shades of blue in hsl

HSL

The hsl values represent (in order) Hue, saturation and lightness.

Color pallettes

A good color pallette consists of:

At this point, I stopped reading and created my own color pallette styleguide, shown below.

color pallette following advice from the refactoring ui book