Color Systems
Exploration is key to creating beautiful user interfaces. We don’t see design in our mind, we perceive it with our eyes, and interact with it with our hands. Until a possibility is down on paper or screen, it’s not a possibility you’ve considered. Give yourself as many possibilities to choose from as you can.
Learning Objectives
- establish a basic color palette with a primary color and a bank of neutral colors
- check for appropriate contrast between text and background colors
- design user interface elements using a layered approach
- use symbols in Sketch to make reusable UI components
- translate a low-fidelity sketch/wireframe into a high-fidelity UI mockup
- identify appropriate user interface elements for given user tasks
- describe what microcopy is and its role in interface design
Resources
- 7 Rules for Creating Gorgeous UI (Part 1) and Part 2 by Erik Kennedy
- Dribbble
- Explore colors with Dribbble color search
- Microcopy: Tiny Words With A Huge UX Impact by Nick Babich
Further Reading
Tools
- Paletton
- Adobe Color CC
- Contrast Checker for colors (more information on WebAIM’s similar Color Contrast Checker)
See Also
Competencies
- Visual Design Amount of Design Variations
- Visual Design Color Palette
- Visual Design Quality of Design Variations
- Visual Design Style Tile
- Visual Design Usage of Color Palette
- Interaction Design Forms
- Interaction Design Interface controls
- Interaction Design Micro-interactions
- Writing Micro-copy
Explainers
Lessons
- Designing in Sketch
- Human Interface Guidelines
- Inspiration and Aspiration
- Material Design
- Reusable Components
- Writing for Interfaces
Resources
Articles
- Interface Writing: Code for Humans
- Microcopy: Tiny Words With A Huge UX Impact
- 7 Rules for Creating Gorgeous UI
- 10 Usability Heuristics for User Interface Design
- 7 Rules for Creating Gorgeous UI – Part 2
- Lessons From Swiss Style Graphic Design
- Typography for User Interfaces
- UI vs Print
Tools
- Adobe Color
- ColorBox
- Dribbble Colors
- Color Contrast Checker
- Contrast Checker
- Material Theme Editor
- Paletton
- Stark
