User Interface (UI) refers to the visual and interactive elements of a product that users directly interact with. It's the buttons, menus, forms, icons, colors, typography, and layout that make up what users see and click.
UI Components
Input Controls
- Buttons, text fields, checkboxes
- Radio buttons, dropdown lists
- Toggles, date pickers
Navigation
- Menus (hamburger, dropdown, mega)
- Breadcrumbs, tabs, pagination
- Search bars, links
Information Display
- Icons, images, progress bars
- Tooltips, notifications, modals
- Cards, lists, tables
Containers
- Headers, footers, sidebars
- Accordions, carousels
- Grids, cards
UI Design Principles
Visual Hierarchy
Guide users' attention to what's important. Use size, color, contrast, and spacing to indicate importance.
Consistency
Similar elements should look and behave similarly. Don't reinvent patterns. Use established conventions.
Feedback
Every action should have a visible response. Clicked buttons should acknowledge the click. Forms should confirm submission.
Simplicity
Remove everything that doesn't serve a purpose. Every element should earn its place on the screen.
Accessibility
Use sufficient color contrast, don't rely only on color to convey information, make interactive elements keyboard-accessible.
UI Design Systems
Modern UI is built with design systems, documented collections of reusable components:
- Material Design: Google's design system
- Fluent Design: Microsoft's system
- Human Interface Guidelines: Apple's standards
- Custom systems: Built for specific products
Tools for UI Design
- Figma: Collaborative, browser-based, industry standard
- Sketch: Mac-only, still popular
- Adobe XD: Adobe's UI design tool
- Framer: Design with real code