Visual Design Pt2 – Colour, Typography, Spacing & Alignment


  • Colour is typically the hardest thing to master in user interface design [CITE]
  • Colours are used minimally to direct the attention to interactive places.
  • Cite apple’s direction of colour


Neutral Tones

Accent Colours

Colour Palette

  • Used in this project
  • – tool used
  • “Colour combinations and mood” [CITE Excerpt From: Mark Boulton. “A Practical Guide to Designing for]
  • Begin with grey
  • Meaning in Colour

Guidelines for Light UI

  1. The content should be lighter than the background. Objects in focus are usually better lit than the background.
  2. Don’t overuse colors. They really grab your attention. Use colors to give importance to buttons and highlighted states.
  3. Avoid average colors. 90-100% white is usually the best range.

This needs to be updated


  • Apple guidelines,
  • Hierarchy
    • Use italics, underline, bold, lists and colors to reinforce the hierarchy and interactions.
  • Type Scale – iOS
  • Apple system font – why I chose not to use it


  • Rules of third
  • Baseline grid
  • Use of grids

Spacing and Alignment

A general rule is to have a minimum padding or margin of 8pt. This creates enough breathing room, which makes the layout easier to scan and the text more readable. Also, UI elements should be aligned and texts should have the same baseline position.


  1. Boulton, M. (2009). A Practical Guide to Designing for the Web. Penarth: Mark Boulton Design Ltd.
  2. Apple Inc. (2013). iOS Human Interface Guidelines. Retrieved April 19, 2017, from ttps://
  3. To, M. (2016a). Design Code: Design iOS 10 apps with Sketch and Swift 3. Retrieved April 19, 2017, from
  4. To, M. (2016b). Learn Colors – How to work with colors. Retrieved April 19, 2017, from
  5. White, J. Z. (2016, June 7). Designing in color. Retrieved April 19, 2017, from


(To, 2016) (Apple, 2013) (To, 2016) (Boulton, 2009)