UI design

Design process

• Draw wireframe
• Implement wireframe
• Typography w/ lorem ipsum
• Grayscale
• Content/images
• Color
• Shoot for 45 to 75 characters/line

Whitespace

• If you want to make UI that looks designed, you need to add in a lot of breathing room. Sometimes a ridiculous amount. Start by doubling, and going down from there.
• Same for font sizes, element sizes, etc. Try blowing them up huge to see how they respond.

Text overlay

• Overlay the whole image with translucent black
• Text with a background
• Overlay the image w/ a dimmed and blurred text box
• Floor fade: subtly fade bottom of image to black

Typography

General guidelines

• Use em1.5 line height for small text, 1.1 for large text.
• Use 1em between paragraphs.
• Use serif for print, sans for monitor.
• Use #444 instead of black.

Make text pop and un-pop

• Font size (bigger or smaller)
• Color (greater contrast or lesser; bright colors draw the eye)
• Font weight (bolder or thinner)
• Capitalization (lowercase, UPPERCASE, and Title Case)
• Italicization
• Letter spacing
• Margins
• Maybe a bad idea:
  • Underline. Underline means links nowadays.
  • Text background color
  • Strikethrough