Introduction to UI/UX Design

Agenda

• What is UI Design?
• What is UX Design?
• Key Differences between UI and UX
• Importance of UI/UX in Product Development
• Course Overview and Expectations

What is UI Design?

Definition: User Interface (UI) design focuses on the visual aspects of a product's interface-the look and feel, presentation, and interactivity.

Key Components:

• Visual Design (colors, typography, imagery)
• Interactive Elements (buttons, icons)
• Branding and Style Guidelines

UI Design Examples

A mobile app with intuitive navigation and appealing visuals or A website with consistent branding and interactive elements.

Best Practices:

• Consistency in design elements
• Clarity and simplicity
• Visual hierarchy to guide user attention

What is UX Design?

Definition: User Experience (UX) design is about enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.

Key Components:

• User Research and Personas
• Information Architecture
• User Flows and Journey Mapping

Best Practices:

• Empathizing with users
• Iterative testing and feedback
• Clear and logical navigation paths

UX Design Examples

An e-commerce website with a smooth checkout process or A ride-sharing app that efficiently connects drivers and riders.

UI vs. UX - Key Differences

Analogy: UI is the bridge's surface and materials; UX is the feeling of crossing the bridge.

UI Focuses On	UX Focuses On
Visual interface	Overall experience
Aesthetics and style	Functionality and usability
Presentation of content	Solving user problems

Importance of UI/UX

Impact on User Engagement:

• Increases user satisfaction and loyalty
• Enhances accessibility for diverse users

Best Practices:

• Prioritize user needs
• Continuously gather user feedback
• Stay updated with design trends

Statistics:

88% of users are less likely to return to a website after a bad experience.

Course Overview

Program Structure:

24 lessons (Weekly 1-hour sessions)

Key Objectives:

• Master design principles
• Hands-on experience with Figma
• Build a portfolio with mini-projects
• Capstone project with a local NGO

Expectations and Tools

Student Expectations:

• Active participation
• Completion of assignments and projects
• Collaboration with peers

Tools Required:

• Figma account setup
• Access to internet-enabled devices