How to use colors and exploration to create high fidelity prototypes
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)