More tips for designing user interfaces

Notes inspired by Refactoring UI

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

Alignment

• Center-alignment is great for short, independent blocks of text. If the text is longer than two or three lines, it will look better left aligned.
• If you have a table that includes numbers, right-align them.
• Whenever you justify text, enable hyphenation 'hypens: auto' to avoid awkward gaps between words. If a word doesn't fit at the end of the line, it'll be put on the next line and the spacing between the words above will increase so that there isn't a long gap at the end of the sentence. Enabling hypenation stops the word wrapping and instead hyphenates it so that it breaks mid-word onto the next line, and doesn't change the spacing between words.

Letter-spacing

• Some fonts are designed for headlines whilst other fonts are designed to be read well on small screen sizes like for mobile phones. Fonts designed for headlines usually have less space between letters. Whilst fonts designed for content text usually have more space between letters. So if you are using one or the other type of font, it's a good idea to adjust the letter spacing for either the content or headline.

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

• Dark blue: #03369E
• Medium blue: #507DD7
• Light blue: #9FB9ED

Shades of blue in hsl

• Dark blue: hsl(220, 95%, 34%)
• Medium blue: hsl(220, 65%, 61%)
• Light blue: hsl(220, 69%, 80%)

HSL

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

• Hue: A color's position on the color wheel - let's us identify two colors as blue even if they are not identical.
• Saturation: How vivid a color looks - how much grey it has in it. 0% grey, 100% no grey.
• Lightness: How close a color is to black or white: 0% is pure black, 100% is pure white.

Color pallettes

A good color pallette consists of:

• Greys: text, backgrounds, panels, form controls - most everything in an interface is grey. You want 8-10 shades to choose from.

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