About UI/UX

1. UI/UX Design - Introduction &
Foundations
TY BCA - Semester V
Presented by: [Your Name]

2. Lecture Objectives
• Break the ice with real-world app experiences
• Understand the basic difference between UI
and UX
• Learn about the evolution of UI design
• Explore key UI design principles
• Engage in sketch activity

3. Icebreaker - Favorite Apps
• Prompt: What is your favorite app or website
and why?
• Examples: Instagram, Zomato, WhatsApp,
Netflix
• Ask: What do you like about it? The look? Ease
of use? Speed?

4. What is UI?
• UI = User Interface
• Focuses on visual elements: buttons, colors,
icons, layout
• Goal: Make the interface visually appealing
and usable

5. What is UX?
• UX = User Experience
• Focuses on usability, interaction, and how
users feel
• Goal: Ensure smooth and meaningful
interaction

6. UI vs UX - Quick Comparison
• UI: Visual design | UX: User journey
• UI: Fonts, colors, icons | UX: Research,
personas, testing
• UI Tools: Figma, Adobe XD | UX Tools: Surveys,
Interviews

7. Roles in UI/UX Design
• UX Designer
• UI Designer
• UX Researcher
• Interaction Designer
• Information Architect

8. Evolution of UI Design
• 1980s: Apple GUI
• 1990s: Websites
• 2000s: Mobile Apps
• 2010s: Responsive design
• 2020s: AR/VR, Voice UI

9. Interface Conventions
• Buttons (OK, Cancel, Submit)
• Menus (Hamburger, Nav bars)
• Icons (Home, Search)
• Feedback (Loaders, Tooltips)

10. UI Design Principles
• Clarity
• Consistency
• Feedback
• Efficiency
• Aesthetic
• Error prevention

11. Activity: Sketch a Login UI
• Instructions: Paper + pen
• Sketch a login screen with:
• - App name/logo
• - Username & password fields
• - Login & forgot password buttons
• 5–10 minutes

12. Homework
• Choose any app you use daily
• List: 3 things you like in its UI
• List: 2 things that could be improved in UX
• Be ready to discuss in next class

13. What’s Next?
• Foundations of UI Design
• - Interface elements
• - Active vs passive elements
• - Visual hierarchy & structure
• Tools we’ll explore: Figma, Adobe XD

14. Thank You!
• Any questions?
• See you next class!
• [Your Contact Info]