Visual Design Pt2 – Colour, Typography, Spacing & Alignment

Colour

  • 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

Contrast

Neutral Tones

Accent Colours

Colour Palette

  • Used in this project
  • https://coolors.co/ – 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

Typography

  • 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

Layout

  • 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.

References

  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://developer.apple.com/ios/human-interface-guidelines
  3. To, M. (2016a). Design Code: Design iOS 10 apps with Sketch and Swift 3. Retrieved April 19, 2017, from http://designcode.io
  4. To, M. (2016b). Learn Colors – How to work with colors. Retrieved April 19, 2017, from https://designcode.io/iosdesign-colors
  5. White, J. Z. (2016, June 7). Designing in color. Retrieved April 19, 2017, from https://medium.freecodecamp.com/designing-in-color-abd358660a7b#.9l3wajpkh?utm_source=DesignCode

Citations

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

Advertisements