User Interface Design April 16, 2019

• Color
• Microcopy
• User Interface

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

• Interface Writing: Code for Humans

Tools

• Paletton
• Adobe Color CC
• Contrast Checker for colors (more information on WebAIM’s similar Color Contrast Checker)

Ironhack Learning Platform

• Color
• User interface design principles
• User interface fundamentals
• Design systems
• Landing pages
• Forms & icons
• Designing multistate screens
• Lighting, shadows and consistency