Introduction to UI
and UX Design
UNDERSTANDING THE DIFFERENCE BETWEEN UI AND
UX
What is UI/UX Design?
• UI (User Interface) Design: Focuses on the visual
aspects of an application, including layout, colors,
typography, and interactive elements.
• UX (User Experience) Design: Focuses on the
overall experience of the user, ensuring usability,
accessibility, and satisfaction when interacting with
the product.
By-SUGANYA,AP/CSA
User Interface (UI) Design
• Deals with the look and feel of the product.
• Involves visual design, branding, and interactivity.
• Example: Buttons, icons, color schemes,
typography.
By-SUGANYA,AP/CSA
User Experience (UX) Design
Deals with the overall experience of the user.
Focuses on usability, navigation, and accessibility.
Example: Ease of completing a task, flow of
interactions, logical structure.
The term “User Experience” was coined by Don
Norman in the 1990s.
By-SUGANYA,AP/CSA
UI DESIGN-EXAMPLE
Introduction to UI and UX Design
1. What is UI (User Interface) Design)?
UI is about the visual layer of a product that the user interacts
with.
Focus: Look and Feel → buttons, colors, typography, icons,
layout.
Goal: Make the interaction intuitive, aesthetic, and consistent.
🔹 Real-time Example:
Spotify App: The green “Play” button, playlists layout, and
progress bar are part of the UI.
ATM Machine Screen: The touch buttons, text size, and card
insert symbols are UI.
By-SUGANYA,AP/CSA
UX-DESIGN -EXAMPLE
What is UX (User Experience) Design)?
UX is about the overall journey and satisfaction a user
gets while using the product.
Focus: Usability, Accessibility, and Flow.
Goal: Make the interaction useful, smooth, and
enjoyable.
🔹 Real-time Example:
Uber: Easy to book a cab in just 2–3 steps, real-time
tracking, fare estimate → good UX.
Amazon: 1-click ordering, personalized
recommendations, smooth checkout → strong UX.
By-SUGANYA,AP/CSA
Key Differences Between UI
and UX
• UI is about how the product looks, UX is about how
it works.
• UI deals with design elements, UX deals with the
overall journey.
• Good UI attracts users, good UX retains them.
• UI focuses on aesthetics, UX focuses on problem-
solving.
By-SUGANYA,AP/CSA
Difference Between UI and UX
UI AND UX DIFFERENCES
UI (User UX (User
Aspect
Interface) Experience)
Visual design & Overall journey &
Focus
interaction usability
Make it
Make it
Goal functional &
attractive
satisfying
Login button Ease of logging
Example
style in without errors
Designer creates Researcher
Role buttons, icons, maps user flow,
screens tests usability
By-SUGANYA,AP/CSA
Real-time Case Study
Examples
✅ Good UI/UX Example
Google Search:
Minimal UI (single search bar, clean layout).
Excellent UX (fast results, auto-suggestions).
❌ Bad UI/UX Example
Old Government Websites:
UI: Outdated, too much text, poor color contrast.
UX: Confusing navigation, difficult to find services.
By-SUGANYA,AP/CSA
Key Differences Between UI and UX
By-SUGANYA,AP/CSA
Why UI and UX are Important
Attracts and retains users.
Increases business conversion rates.
Builds trust and brand value.
Ensures accessibility for everyone.
UI = What users see.
UX = What users feel.
Together, they define the success of any digital product.
By-SUGANYA,AP/CSA
Conclusion
• UI and UX are interconnected but distinct.
• Both are essential for successful product design.
• UI enhances Design, UX ensures usability.
• Together, they create meaningful user-centered
experiences.
By-SUGANYA,AP/CSA
Quiz: Introduction to UI & UX
Design
Multiple Choice Questions (MCQs)
Which of the following best defines User Interface
(UI)?
a) The emotions and satisfaction a user feels while
using a product
b) The look and feel, visual elements, and
interactive components of a product
c) The backend code that powers an application
d) The research and strategy behind product
development
By-SUGANYA,AP/CSA
ANSWER:
Which of the following best defines User Interface
(UI)?
Answer: b) The look and feel, visual elements, and
interactive components of a product
By-SUGANYA,AP/CSA
Quiz: Introduction to UI & UX
Design
Which of the following best defines User Experience
(UX)?
a) The graphical layout of an application
b) The process of improving accessibility, usability, and
satisfaction of a user’s interaction with a product
c) The choice of colors, fonts, and icons
d) The physical design of the hardware
By-SUGANYA,AP/CSA
ANSWER
Which of the following best defines User Experience
(UX)?
Answer: b) The process of improving accessibility,
usability, and satisfaction of a user’s interaction with a
product
By-SUGANYA,AP/CSA
Quiz: Introduction to UI & UX
Design
Who is often called the person who coined the term
“User Experience (UX)”?
a) Steve Jobs
b) Don Norman
c) Bill Gates
d) Jakob Nielsen
By-SUGANYA,AP/CSA
ANSWER:
Who is often called the person who coined the term
“User Experience (UX)”?
Answer: b) Don Norman
By-SUGANYA,AP/CSA
Quiz: Introduction to UI & UX
Design
UI design mainly deals with:
a) Wireframing and journey mapping
b) Typography, colors, buttons, and layout design
c) Market research and personas
d) Backend development
By-SUGANYA,AP/CSA
ANSWERS:
UI design mainly deals with:
Answer: b) Typography, colors, buttons, and layout
design
By-SUGANYA,AP/CSA
Quiz: Introduction to UI & UX
Design
A well-designed UX focuses primarily on:
a) User satisfaction and ease of use
b) Attractive colors and animations
c) Adding as many features as possible
d) Writing efficient backend code
By-SUGANYA,AP/CSA
Answers:
A well-designed UX focuses primarily on:
Answer: a) User satisfaction and ease of use
By-SUGANYA,AP/CSA