Scribd
Upload
28 views22 pages

UIUX Basics

The document provides an overview of UI/UX basics, focusing on user experience principles such as user-centered design, intuitive interfaces, efficiency, enjoyable experiences, accessibility, and consistency. It outlines a design process that includes empathizing with users, defining their needs, and ideating solutions, while also mentioning tools like Adobe and Figma. Examples of design evolution are illustrated through comparisons of old and new Gmail and Apple web pages.

Uploaded by

adthunderwind007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views22 pages

UIUX Basics

The document provides an overview of UI/UX basics, focusing on user experience principles such as user-centered design, intuitive interfaces, efficiency, enjoyable experiences, accessibility, and consistency. It outlines a design process that includes empathizing with users, defining their needs, and ideating solutions, while also mentioning tools like Adobe and Figma. Examples of design evolution are illustrated through comparisons of old and new Gmail and Apple web pages.

Uploaded by

adthunderwind007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

UIUX Basics

By Kaustubh More
Agenda

• Introduction
• Principles of UX Design
• Design Process
• Tools
• Examples
User Experience (UX)

User Experience (UX) refers to the feeling users


experience when using a product, like a website, app, or
any tech gadget. It’s not just about how it looks. It’s also
about how easy and enjoyable it is to use.
Principles of UX
Is there a need to follow principles
Principles of Effective UX
• Focus on User
• Intuitive Interface
• Efficiency
• Enjoyable Experience
• Accessibility
• Consistency
Focus on User

• User-Centered Approach: Always prioritize the user’s


needs, goals, and expectations. Understand their pain
points and motivations.
• User Research: Conduct interviews, surveys, and
usability tests to gather insights. Create user personas
to represent different user types.
• Empathy: Put yourself in the user’s shoes. What would
make their experience better?
Intuitive Interface

• Clarity and Consistency: Design interfaces that are easy


to understand. Use familiar patterns and conventions.
• Navigation: Organize content logically. Clear menus,
buttons, and labels guide users seamlessly.
• Feedback: Provide immediate feedback for user actions
(e.g., button clicks, form submissions).
Efficiency

• Streamlined Processes: Minimize steps required to


achieve a task. Remove unnecessary friction.
• Shortcuts: Offer keyboard shortcuts or gestures for
power users.
• Load Times: Optimize loading times to keep users
engaged.
Enjoyable Experience

• Emotional Design: Consider aesthetics, color, and


typography. A visually pleasing design evokes positive
emotions.
• Micro-Interactions: Small animations or transitions (like
a heart icon changing color when clicked) add delight.
• Surprise and Delight: Unexpected positive moments
enhance the overall experience.
Accessibility

• Inclusivity: Design for all users, regardless of abilities.


Consider visual impairments, motor skills, and cognitive
differences.
• Alt Text: Provide descriptive alt text for images. Ensure
screen readers can interpret content.
• Color Contrast: Maintain good contrast for readability.
Consistency

• Design Patterns: Stick to established design patterns.


Consistency reduces cognitive load.
• UI Elements: Buttons, icons, and forms should behave
consistently throughout the product.
• Design Systems: Create a design system with reusable
components.
Design Process
So there is a Process?
Design Process

• Empathize: Research your users’ needs to gain


an empathic understanding of the problem you
are trying to solve.
• Define: State your users’ needs and problems
clearly.
• Ideate: Challenge assumptions and create a wide
range of ideas for potential solutions.
Tools
What tools can be used?
Adobe
Sketch Ilutrastor

Adobe Figma
XD
Examples
Ohhh I See….
Google Gmail Login Page

OLD Gmail NEW Gmail


Sign IN Sign IN
Apple Webpage

OLD Apple NEW Apple


Design Design
Bonus

You might also like