Quick Summary
UI focuses on visual design and aesthetics while UX focuses on overall user experience, usability, and satisfaction.
UI/UX Design encompasses two distinct but related disciplines. UI (User Interface) focuses on the visual elements users interact with, while UX (User Experience) focuses on the overall experience and satisfaction users have with a product.
UI vs UX
| Aspect | UI Design | UX Design |
|---|---|---|
| Focus | Visual appearance | Overall experience |
| Concerned with | Colors, typography, layout | User flow, usability, research |
| Tools | Figma, Sketch, Adobe XD | Wireframing, prototyping, testing |
| Output | Visual designs, mockups | User flows, wireframes, personas |
UI Design Elements
- Color schemes and palettes
- Typography and fonts
- Buttons and interactive elements
- Icons and imagery
- Spacing and layout (grid systems)
- Visual hierarchy
UX Design Process
- Research: User interviews, surveys, competitive analysis
- Personas: Create user profiles
- Information Architecture: Organize content structure
- Wireframing: Low-fidelity layouts
- Prototyping: Interactive mockups
- Testing: Usability testing with real users
- Iteration: Refine based on feedback
Popular Design Tools
- Figma: Collaborative interface design (industry standard)
- Sketch: macOS design tool
- Adobe XD: Adobe prototyping tool
- Framer: Advanced prototyping
- Miro: Collaborative whiteboarding
Design Systems
- Component libraries
- Style guides
- Pattern libraries
- Design tokens
- Examples: Material Design, Ant Design, Chakra UI
Key Points
- UI is visual, UX is experience
- Figma is industry standard
- UX involves research and testing
- Design systems ensure consistency
- Both essential for product success
- Collaborative process with developers