UI design
Designs the part of a digital product that the person sees and operates: screens, controls, text and states. UX covers the whole experience; UI, the surface where it happens.
What it deals with
The interface is the only part of the system the person sees and handles. If they can’t tell what each element is, what they can do with it or what just happened, the product fails even if it works inside.
Principles
Visual hierarchy
Size, contrast, position and grouping say what to look at first and what belongs together; for example, a single primary button per screen.
Consistency
Things that look alike work the same across the product. A design system gathers the components and rules that make this happen.
Visible signals
Each element shows what can be done with it and where: a button looks pressable and a field, editable.
Feedback and states
Every action shows what happened, and every screen has its states planned: empty, loading, error and complete.
Depending on distance
A watch screen is read up close, a car screen at a glance, and a TV from across the room with the remote’s arrow keys.
Applications in design
Use it like this
Design every state of each screen: empty, loading, error and complete.
Avoid
Inventing a new control for something people already know how to use, or giving two things that work the same a different look.
Don’t fall for it
What looks good on your large screen may fail on a phone, with enlarged text or using only the keyboard.
Especialidades
Mobile app design
Designs apps for the phone: small screens, fingers, and use in a hurry and on the move.
Models and concepts
- ConceptResponsive designOne website that adapts to any screen size, from phone to computer.
- ModelMicrointeractionsSmall single-task moments, such as flipping a switch, designed piece by piece.
Methods and tools
- ArtifactMockupHow a screen will look, with real colors, type, images and text, but without interaction.
- ArtifactDesign systemThe set of shared components, rules, and criteria a team uses to build its interfaces.
- ArtifactWireframeThe outline of a screen in boxes and lines, without final colors or images.
Connections
Builds on
- Human-computer interaction (HCI), Field
- Affordance, Concept
- Aesthetic-usability effect, Concept
- Nielsen’s usability heuristics, Model
- Calm technology, Concept
- Usability, Concept
- Cognitive psychology, Field
- Von Restorff effect, Concept
- Fitts’s law, Concept
- Hick’s law, Concept
- Gestalt principles of perceptual organization, Theory
- Progressive disclosure, Concept
- WCAG guidelines, Model
Related to
Authors and works
- 1987
Ben Shneiderman
Proposed eight golden rules for interface design, such as consistency, informative feedback and the ability to undo actions.
- 1987
Apple
Published the interface guidelines for the Macintosh desktop, with principles such as consistency, immediate feedback and recognition rather than recall.
- 1989
Jeff Johnson and others
Explained how the Xerox Star brought together the desktop with icons, direct manipulation and the same commands for every kind of document.
- 1995
Kevin Mullet and Darrell Sano
Brought graphic design techniques to the screen: grouping, aligning, contrasting and ordering elements by importance.
- 2013
Don Norman
Explained how signifiers and feedback make an object understandable.
- 2016
Brad Frost
Proposed building interfaces as a system of parts, from the smallest elements up to complete pages.
Sources
Original sources
- Shneiderman, B. (1987). Designing the user interface: Strategies for effective human-computer interaction. Addison-Wesley.
- Apple Computer (1987). Human interface guidelines: The Apple desktop interface. Addison-Wesley.
- Mullet, K., & Sano, D. (1995). Designing visual interfaces: Communication oriented techniques. SunSoft Press / Prentice Hall.
- Norman, D. A. (2013). The design of everyday things (Rev. and expanded ed.). Basic Books.
- Frost, B. (2016). Atomic design. Self-published. View source: Frost, B. (2016)
- Google (2025). Navigation on TV. In Android TV design guidelines. Android Developers. View source: Google (2025)
Academic reviews
- Johnson, J., Roberts, T. L., Verplank, W., Smith, D. C., Irby, C. H., Beard, M., & Mackey, K. (1989). The Xerox Star: A retrospective. Computer, 22(9). View source: Johnson, J., Roberts, T. L., Verplank, W., Smith, D. C., Irby, C. H., Beard, M., & Mackey, K. (1989)
- Myers, B. A. (1998). A brief history of human-computer interaction technology. Interactions, 5(2), 44–54. View source: Myers, B. A. (1998)
- Cesar, P., & Chorianopoulos, K. (2009). The evolution of TV systems, content, and users toward interactivity. Foundations and Trends in Human-Computer Interaction, 2(4), 279–373. View source: Cesar, P., & Chorianopoulos, K. (2009)
Last reviewed: