User Interface
The point of contact between the user and the technology.
Competencies
Explainers
-
The Figma Interface
Start using Figma with the basics.
-
Text and Shape Layers
Use text and a rectangle to make a button element.
-
Frames for UI Elements
Use a frame to create a button element.
-
Resizing with Auto Layout
Set the size of a button based on its contents.
-
Duplicate and Iterate
Duplicate elements to tweak them and compare options.
Lessons
-
Reusable Components
Make flexible and reusable components to speed up your design process, and make it easier to translate your designs into a component-based design system.
-
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.
-
Human Interface Guidelines
We’ll focus on Apple’s Human Interface Guidelines for iOS (phones and tablets) for now, with an emphasis on the navigation models in iOS.
-
Inspiration and Aspiration
In this lesson, we will explore a few different topics in order to stretch your UI skills.
-
Material Design
We’ll focus on how Google’s Material Design system works on Android devices (primarily phones) and explore the primary navigation model.
Resources
-
Human Interface Guidelines ∞
-
Material Design ∞
-
7 Rules for Creating Gorgeous UI ∞
-
10 Usability Heuristics for User Interface Design ∞
-
Interface Writing: Code for Humans ∞
-
Iterative UI Design ∞
-
Material Theme Editor ∞
-
Microcopy: Tiny Words With A Huge UX Impact ∞
-
Typography for User Interfaces ∞
-
UI vs Print ∞
-
7 Rules for Creating Gorgeous UI – Part 2 ∞