In this module we will examine different kinds of user interfaces, both on and off-screen, and the various ways in which people interact with them. Focusing on web and mobile interfaces, we will introduce UI design patterns, and guidelines for designing active interface elements. We will start designing our own UI elements, implementing these patterns and guidelines.
Learning outcomes
- Identify interactions styles
- Identify several common UI design patterns
- Design multiple states of active interface elements adhering to size and spacing guidelines for touch screens
Read/Watch
Button Design — UI component series
All you need to know about button design, one of the main interactive building blocks for creating a user interface.- by Taras Bakusevych.
Figma Tutorials
Video demo
Journal 1
- Choose one UI design pattern listed in the UI Design Pattern Library and find an example of its use on a website. Describe what design problem it solves for this website.
- Bring two additional examples of the use of this design pattern in other websites. Describe how the implementations of the pattern is different in all three websites. Include screenshots of your examples.
Assignment
More Reading & Resources
- What Are User Interface (UI) Design Patterns?
- A history of interfaces
- UI Design Pattern Library
- Material Design Interface Components
- Touch Targets on Touchscreens
- I studied buttons for 7 years and learned these 5 lessons about how and why people push them
- Design a Perfect Search Box
- Figma tutorials for beginners
