UI/UX Design
Mr. Zohaib Ahmed Dahri
What is UI/UX
1. User Interface (UI)
User Interface (UI) is the visual part of a product that people see and interact with, like
buttons, menus, icons, colors, and layouts, making the design easy and attractive to use.
What is User Interface (UI) Design
In User Interface (UI) Design We Focus on Following Key Elements:
• Color Theory
• Typography
• Layout & Grids
• Iconography
• Visual Hierarchy
• Responsive Design
What is User Interface (UI) Design
1. Layout & Grids
Layout & Grids organize visual elements on a screen using rows and columns, ensuring
balance, alignment, and consistency for better readability and usability.
What is User Interface (UI) Design
2. Iconography
Iconography is the use of simple, meaningful symbols or icons in design to represent
actions, ideas, or content, improving clarity, navigation, and user understanding.
What is User Interface (UI) Design
3. Visual Hierarchy
Visual Hierarchy is the arrangement of design elements that shows importance, guiding the
viewer’s eye to what matters most first.
Web-View
App-View
What is User Interface (UI) Design
4. Responsive Design
Responsive Design is an approach where a website or app automatically adjusts its layout
and elements to fit different screen sizes, ensuring usability on mobile, tablet, and desktop.
Examples:
WhatsApp
YouTube
Facebook
Mobile View
Desktop View
What is User Experience (UX) Design
User Experience (UX) Design is the process of creating products that deliver meaningful, easy, and
enjoyable experiences by focusing on usability, accessibility, and the overall journey of the user.
In User Experience Design we Focus on following Key Elements:
• User Research
• Wireframing
• Prototyping
• Information Architecture
• User Flows
• Usability Testing
• Accessibility
What is User Experience (UX) Design
1. User Research
User Research is the process of studying users’ needs, behaviors, and challenges to design
better, user-friendly products that solve real problems effectively.
Examples: UX Research Process
Amazon
InDirve
Facebook
WhatsApp
What is User Experience (UX) Design
2. Wireframing
Wireframing is the process of creating a simple, low-detail sketch or blueprint of a website
or app layout to plan structure, content placement, and functionality before actual design..
What is User Experience (UX) Design
3. Prototyping
Prototyping is the process of building an interactive model of a website or app that simulates real user
interactions, helping test design, usability, and flow before final development.
What is User Experience (UX) Design
4. Information Architecture
Information Architecture (IA) is the practice of organizing, structuring, and labeling content
in a clear, logical way so users can easily navigate and find what they need.
Examples:
Amazon: Categories like Electronics, Fashion,
Books for easy browsing.
What is User Experience (UX) Design
5. User Flows
User Flows show the steps a user takes to finish a task in an app or website, from start to
end, helping make the experience easy and smooth..
Example
E-Commerce Platform like Amazon or Daraz
Homepage → Product → Add to Cart → Checkout → Payment → Order Done
What is User Experience (UX) Design
6. Usability Testing
Usability Testing is checking how easy and user-friendly a product (website, app, software)
is by observing real users performing tasks. It finds problems and improves experience.
What is User Experience (UX) Design
6. Accessibility
Accessibility means designing products (websites, apps, software) so everyone, including
people with disabilities, can use them easily and effectively.
Examples
Screen Reader Support: Text is read aloud for visually impaired
users.
Keyboard Navigation: Users can navigate without a mouse.
Closed Captions: For videos and audio content.