UX vs UI: What's the Difference?
User Experience (UX)
The overall experience a user has when interacting with a product or service.
- • How easy is it to use?
- • Does it solve the user's problem?
- • How does it make the user feel?
- • Is the journey logical and intuitive?
User Interface (UI)
The visual elements and interactive components users interact with.
- • Colors, fonts, and icons
- • Buttons, forms, and menus
- • Layout and spacing
- • Visual consistency
Analogy: If a product were a restaurant, UX would be the entire dining experience (service, ambiance, food quality), while UI would be the menu design, table setting, and decor.
Understanding User Needs
Good design starts with understanding who you're designing for and what they need.
Research Methods
- Interviews - Ask users directly about their needs and frustrations
- Surveys - Collect data from many users at once
- Observations - Watch how users currently solve problems
- Competitor Analysis - Learn from existing solutions
User Personas
A persona is a fictional character representing a typical user. It includes demographics, goals, frustrations, and behaviors.
Design Briefs and Constraints
A design brief documents what you're creating and why. It includes:
- Problem Statement - What problem are you solving?
- Target Users - Who will use this solution?
- Requirements - What must the solution do?
- Constraints - What are the limitations? (time, budget, technology)
- Success Criteria - How will you know if it works?
The Design Process
Empathize
Define
Ideate
Prototype
Test
- Empathize - Understand your users through research
- Define - Clearly state the problem to solve
- Ideate - Brainstorm possible solutions
- Prototype - Build a testable model
- Test - Get feedback and iterate
Wireframing
A wireframe is a simple, low-fidelity sketch of a page layout. It focuses on structure, not visual design.
Wireframe Elements
- Boxes for images and content areas
- Lines for text (no actual words needed)
- Simple shapes for buttons and navigation
- Labels to explain each element
Fidelity Levels
- Low-fidelity - Quick sketches, hand-drawn or basic digital
- Mid-fidelity - More detail, shows layout and hierarchy
- High-fidelity - Detailed, includes colors and real content
Prototyping
A prototype is an interactive model that simulates the final product. Users can click through and test the experience.
Prototyping Tools
- Figma (free, browser-based)
- Adobe XD
- Canva
- Paper prototypes (low-tech but effective!)
Evaluation
Test your design against your success criteria:
- Does it solve the original problem?
- Is it easy to use?
- Does it meet user needs?
- What feedback did testers give?
- What could be improved?
Design Principles
- Contrast - Make important elements stand out
- Alignment - Create visual order and connection
- Repetition - Consistent styles build recognition
- Proximity - Group related items together
- Hierarchy - Show what's most important
Key Terminology
- UX - User Experience, the overall feel of using a product
- UI - User Interface, the visual and interactive elements
- Wireframe - Low-fidelity layout sketch
- Prototype - Interactive model for testing
- Persona - Fictional user representing target audience
- Iteration - Improving through repeated cycles