User Interface Design August 30, 2018

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