SlideShare a Scribd company logo
INTRO TO
UX DESIGN
By Rasheed O.Salem
UX/UI Designer
Engineering Bachelor
Degree
Rasheed O.Salem
UX/UI Designer
Color blind
Google UX Design
professional certificate
No code solutions
TOPICS TO COVER
What is UX
Design?
UX vs UI
Design
Psychology
behind UX Design
Design tips to
follow
01 02
03 04
What is UX Design
01
UX Design
Is how a user interacts with and experiences a
product, system or service.
It includes a person's perceptions of utility, ease of
use, and efficiency.
Bad user experience
Real life bad UX
Real life bad UX
UX Design in digital products
Demand for UX Design is on the rise
Probably you enrolled in this workshop to either consider studying or working in UX
design , good news is UX design is a rapidly changing field with a projected 10-
year growth rate of 15%.
User experience careers
Responsibilities of an entry-level UX
designer
As an entry-level UX designer, you’ll have a lot of exciting opportunities to gain
experience. When you first start out, you’ll probably take on a lot of different roles
and responsibilities.
Specialist and generalist designers
As you get further along in your career, you can choose to specialize in a certain
area of UX design or keep your skill set more broad.
Specialist designers
A specialist dives deep into one type of UX design, like interaction, visual, or
motion design, and becomes an expert. Specialist UX designers are more
common at large companies that have a lot of designers, like Google.
Some of the benefits of becoming a specialist include:
- Focusing on one type of design that you enjoy more than others.
- Gaining deep knowledge of one type of design.
- Becoming well-known in the industry for your expertise in a particular type of
design.
Generalist designers
A generalist has a broad number of responsibilities. A majority of UX design jobs
are generalist positions, especially at companies with fewer UX designers.
Typically, entry-level UX designers work in generalist roles, and some people
choose to stay in generalist design roles for their entire careers.
There are a lot of benefits to being a generalist UX designer, like:
- Expanding your skills in many different types of UX work.
- Trying a variety of responsibilities and finding an area of UX that you’re
especially passionate about.
- Keeping your job feeling fresh and new, while doing a variety of tasks.
T-shaped designers
A T-shaped designer is a specialist who also
has a lot of capabilities in other areas.
● T-shaped designers are great to have on
your team, since they come with the
benefits of both specialists and generalists.
Think like a designer:
Design thinking process
As a UX designer your job is to fight for
User’s interest
You have the responsibility to defend the user’s interest and unify the business
goals and the user’s satisfaction.
Top UX design tools
Figma Sketch Adobe XD
These are three top tools in the industry and you can’t go wrong with learning
any of them.
Let’s jump to figma
Figma
Discussing wireframes and prototypes
UX vs UI
UX design is the whole, and UI design is a part of UX design
02
Ux design ensures the
user’s interactions with a
product will be the most
pleasing and useful.
Ex. an app overall ease of use.
It’s more about the look
and feel, UI design makes
sure the product is visually
laid out to create the most
effective user experience.
Ex. an app visual style and
typography style.
User Experience
Design
User Interface
Design
i/o extended: Intro to <UX> Design
UX is a great direction for people who
love continuous learning, lots of
collaboration and have
passion for user-oriented
experiences.
Type of person
If you feel more into fascinating users
with intuitive and beautifully designed
interfaces, consider focusing on UI.
More
interested in
this
Remember
UX and UI are both two sides of the
same coin they go hand in hand to
achieve the goal of user satisfaction.
UX psychology
UX law and principles
03
User experience design has
its roots in behavioral
psychology and it is a
blueprint of a human being's
interaction with a machine
Famous UX laws & principles
Isolation Effect Hick’s Law Fitts’s Law
www.lawsofux.com
1- Isolation Effect
Also known as Von Restorff effect, predicts that when multiple similar objects are
present, the one that differs from the rest is most likely to be remembered.
Most memorable
Which rectangle do you think easier to
recall after leaving this slide?
Distinctive features can be like colors
Shapes
And Size
For example, if a person examines a shopping list with one item
highlighted in bright green, he or she will be more likely to remember
the highlighted item than any of the others.
How to implement it
1- Make important information or key actions visually distinctive.
2- If many elements are competing for user’s attention
None of them will stand out.
Practical example
Make the favorable option more distinctive to meet the
user & the business goals
2- Hick’s law
The time it takes to make a decision increases with the number
of choices.
Psychologist
William Edmund Hick
We assume that the more choices
The better the experience But it’s
actually paralyzing
Too many options = delay in reaction
Until apple came with a user centered
design
Foucing on the primary actions
You may think providing too many
options is for the user
But in fact too many options lead to a bad experience
Which one feel easier?
3- fitts’s law
The time to acquire a target is a function of the distance to and size of
the target.
psychologist Paul Fitts
As targets gets smaller and further
away, it takes longer to acquire.
How to implement it
1- Touch targets should be large enough for users to accurately
select them.
2- Touch targets should be placed in areas of an interface that
allow them to be easily acquired.
This law directly affects the user experience
when designing buttons, for example, larger
ones, especially on mobile devices that are
tactile, reaching the conclusion that with
smaller buttons it is more difficult to interact.
Keep the main CTA big and close to the
thumb
i/o extended: Intro to <UX> Design
Keep in mind ease of reach when
creating your layout.
Tips & hints
04
1- Always look for design inspirations.
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
2- Don’t use more than 3 fonts in a design
3- Keep in mind the Z-pattern
The user scans the page from top left
to top right and then travels diagonally
to bottom left while reading to make a
decision and eventually the user should
be ready to decide by the time they
reach to bottom left.
Decision would be either take an action or leave the
page or maybe read more details to decide.
CREDITS: This presentation template was created by Slidesgo,
including icons by Flaticon, and infographics & images by Freepik
THANKS
Do you have any questions?
@rasheedosalem
REFERENCES
● Lawsofux.com
● UX collective medium.com
● digitalsynopsis.com/design/ux-design-laws/

More Related Content

What's hot

UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
Matin Maleki
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
Nardia Infotech
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
Nicolas Demange
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
Digital Snack
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
Shrutee Aneja
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
UX and UI
UX and UIUX and UI
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
Babajide Aroyewun
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
Sooraj P R
 
Ux design process
Ux design processUx design process
Ux design process
Prateek Agrawal
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
Inova LLC
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
GDSCUniversitasMatan
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
Vibloo
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
Aciron Consulting
 
Intro to UX: Enterprise UX
Intro to UX: Enterprise UXIntro to UX: Enterprise UX
Intro to UX: Enterprise UX
Bart Van Hecke
 

What's hot (20)

UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
UX and UI
UX and UIUX and UI
UX and UI
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
Ux design process
Ux design processUx design process
Ux design process
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
Intro to UX: Enterprise UX
Intro to UX: Enterprise UXIntro to UX: Enterprise UX
Intro to UX: Enterprise UX
 

Similar to i/o extended: Intro to <UX> Design

UI.docx
UI.docxUI.docx
UI.docx
UI.docxUI.docx
UX Design - Lecture # 1.pptx
UX Design - Lecture # 1.pptxUX Design - Lecture # 1.pptx
UX Design - Lecture # 1.pptx
Zaid227349
 
Ui design by mhm
Ui design by mhmUi design by mhm
Ui design by mhm
Md Mosharof Hosen
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
topseowebmaster
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
topseowebmaster
 
Best Practices in UX Design
Best Practices in UX DesignBest Practices in UX Design
Best Practices in UX Design
Manish Thangavelu
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
Muhammad Ishfaq Ch ✔
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
mbrosset
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
paulodavila
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
DariaPersell
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patterns
KevinHao14
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
Lewis Lin 🦊
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014
Akhil Kumar
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
Jessie Doan
 
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Fonz Morris
 
Xovex e book, ux & ui
Xovex e book, ux & uiXovex e book, ux & ui
Xovex e book, ux & ui
Shishir Gupta
 
LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS?
LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS? LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS?
LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS?
Kathleen Milbier
 
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Everett McKay
 
FINAL NL-UX-WPPR_1_18_15
FINAL NL-UX-WPPR_1_18_15FINAL NL-UX-WPPR_1_18_15
FINAL NL-UX-WPPR_1_18_15
Wim Bertram ?
 

Similar to i/o extended: Intro to <UX> Design (20)

UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
UX Design - Lecture # 1.pptx
UX Design - Lecture # 1.pptxUX Design - Lecture # 1.pptx
UX Design - Lecture # 1.pptx
 
Ui design by mhm
Ui design by mhmUi design by mhm
Ui design by mhm
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
 
Best Practices in UX Design
Best Practices in UX DesignBest Practices in UX Design
Best Practices in UX Design
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patterns
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
 
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
 
Xovex e book, ux & ui
Xovex e book, ux & uiXovex e book, ux & ui
Xovex e book, ux & ui
 
LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS?
LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS? LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS?
LOOKING FOR A UX DESIGNER? BUT STILL WONDERING WHAT UX IS?
 
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
 
FINAL NL-UX-WPPR_1_18_15
FINAL NL-UX-WPPR_1_18_15FINAL NL-UX-WPPR_1_18_15
FINAL NL-UX-WPPR_1_18_15
 

More from GDGKuwaitGoogleDevel

معسكر أساسيات البرمجة في لغة بايثون.pdf
معسكر أساسيات البرمجة في لغة بايثون.pdfمعسكر أساسيات البرمجة في لغة بايثون.pdf
معسكر أساسيات البرمجة في لغة بايثون.pdf
GDGKuwaitGoogleDevel
 
#Code2 create c++ for beginners
#Code2 create  c++ for beginners #Code2 create  c++ for beginners
#Code2 create c++ for beginners
GDGKuwaitGoogleDevel
 
#Code2Create:: Introduction to App Development in Flutter with Dart
#Code2Create:: Introduction to App Development in Flutter with Dart#Code2Create:: Introduction to App Development in Flutter with Dart
#Code2Create:: Introduction to App Development in Flutter with Dart
GDGKuwaitGoogleDevel
 
#Code2Create: Python Basics
#Code2Create: Python Basics#Code2Create: Python Basics
#Code2Create: Python Basics
GDGKuwaitGoogleDevel
 
Building arcade game using python workshop
 Building arcade game using python workshop Building arcade game using python workshop
Building arcade game using python workshop
GDGKuwaitGoogleDevel
 
Wordpress website development workshop by Seham Abdlnaeem
Wordpress website development workshop by Seham AbdlnaeemWordpress website development workshop by Seham Abdlnaeem
Wordpress website development workshop by Seham Abdlnaeem
GDGKuwaitGoogleDevel
 
WTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMeraj
WTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMerajWTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMeraj
WTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMeraj
GDGKuwaitGoogleDevel
 
GDG Kuwait - Modern android development
GDG Kuwait - Modern android developmentGDG Kuwait - Modern android development
GDG Kuwait - Modern android development
GDGKuwaitGoogleDevel
 
DevFest Kuwait 2020 - Building (Progressive) Web Apps
DevFest Kuwait 2020 - Building (Progressive) Web AppsDevFest Kuwait 2020 - Building (Progressive) Web Apps
DevFest Kuwait 2020 - Building (Progressive) Web Apps
GDGKuwaitGoogleDevel
 
DevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google Cloud
DevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google CloudDevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google Cloud
DevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google Cloud
GDGKuwaitGoogleDevel
 
DevFest Kuwait 2020 - GDG Kuwait
DevFest Kuwait 2020 - GDG KuwaitDevFest Kuwait 2020 - GDG Kuwait
DevFest Kuwait 2020 - GDG Kuwait
GDGKuwaitGoogleDevel
 

More from GDGKuwaitGoogleDevel (11)

معسكر أساسيات البرمجة في لغة بايثون.pdf
معسكر أساسيات البرمجة في لغة بايثون.pdfمعسكر أساسيات البرمجة في لغة بايثون.pdf
معسكر أساسيات البرمجة في لغة بايثون.pdf
 
#Code2 create c++ for beginners
#Code2 create  c++ for beginners #Code2 create  c++ for beginners
#Code2 create c++ for beginners
 
#Code2Create:: Introduction to App Development in Flutter with Dart
#Code2Create:: Introduction to App Development in Flutter with Dart#Code2Create:: Introduction to App Development in Flutter with Dart
#Code2Create:: Introduction to App Development in Flutter with Dart
 
#Code2Create: Python Basics
#Code2Create: Python Basics#Code2Create: Python Basics
#Code2Create: Python Basics
 
Building arcade game using python workshop
 Building arcade game using python workshop Building arcade game using python workshop
Building arcade game using python workshop
 
Wordpress website development workshop by Seham Abdlnaeem
Wordpress website development workshop by Seham AbdlnaeemWordpress website development workshop by Seham Abdlnaeem
Wordpress website development workshop by Seham Abdlnaeem
 
WTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMeraj
WTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMerajWTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMeraj
WTM/IWD 202: Introduction to digital accessibility by Dr. Zainab AlMeraj
 
GDG Kuwait - Modern android development
GDG Kuwait - Modern android developmentGDG Kuwait - Modern android development
GDG Kuwait - Modern android development
 
DevFest Kuwait 2020 - Building (Progressive) Web Apps
DevFest Kuwait 2020 - Building (Progressive) Web AppsDevFest Kuwait 2020 - Building (Progressive) Web Apps
DevFest Kuwait 2020 - Building (Progressive) Web Apps
 
DevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google Cloud
DevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google CloudDevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google Cloud
DevFest Kuwait 2020- Cloud Study Jam: Kubernetes on Google Cloud
 
DevFest Kuwait 2020 - GDG Kuwait
DevFest Kuwait 2020 - GDG KuwaitDevFest Kuwait 2020 - GDG Kuwait
DevFest Kuwait 2020 - GDG Kuwait
 

Recently uploaded

Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 

Recently uploaded (20)

Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 

i/o extended: Intro to <UX> Design

  • 1. INTRO TO UX DESIGN By Rasheed O.Salem UX/UI Designer
  • 2. Engineering Bachelor Degree Rasheed O.Salem UX/UI Designer Color blind Google UX Design professional certificate No code solutions
  • 3. TOPICS TO COVER What is UX Design? UX vs UI Design Psychology behind UX Design Design tips to follow 01 02 03 04
  • 4. What is UX Design 01
  • 5. UX Design Is how a user interacts with and experiences a product, system or service. It includes a person's perceptions of utility, ease of use, and efficiency.
  • 9. UX Design in digital products
  • 10. Demand for UX Design is on the rise Probably you enrolled in this workshop to either consider studying or working in UX design , good news is UX design is a rapidly changing field with a projected 10- year growth rate of 15%.
  • 12. Responsibilities of an entry-level UX designer As an entry-level UX designer, you’ll have a lot of exciting opportunities to gain experience. When you first start out, you’ll probably take on a lot of different roles and responsibilities.
  • 13. Specialist and generalist designers As you get further along in your career, you can choose to specialize in a certain area of UX design or keep your skill set more broad.
  • 14. Specialist designers A specialist dives deep into one type of UX design, like interaction, visual, or motion design, and becomes an expert. Specialist UX designers are more common at large companies that have a lot of designers, like Google. Some of the benefits of becoming a specialist include: - Focusing on one type of design that you enjoy more than others. - Gaining deep knowledge of one type of design. - Becoming well-known in the industry for your expertise in a particular type of design.
  • 15. Generalist designers A generalist has a broad number of responsibilities. A majority of UX design jobs are generalist positions, especially at companies with fewer UX designers. Typically, entry-level UX designers work in generalist roles, and some people choose to stay in generalist design roles for their entire careers. There are a lot of benefits to being a generalist UX designer, like: - Expanding your skills in many different types of UX work. - Trying a variety of responsibilities and finding an area of UX that you’re especially passionate about. - Keeping your job feeling fresh and new, while doing a variety of tasks.
  • 16. T-shaped designers A T-shaped designer is a specialist who also has a lot of capabilities in other areas. ● T-shaped designers are great to have on your team, since they come with the benefits of both specialists and generalists.
  • 17. Think like a designer: Design thinking process
  • 18. As a UX designer your job is to fight for User’s interest You have the responsibility to defend the user’s interest and unify the business goals and the user’s satisfaction.
  • 19. Top UX design tools Figma Sketch Adobe XD These are three top tools in the industry and you can’t go wrong with learning any of them.
  • 20. Let’s jump to figma Figma Discussing wireframes and prototypes
  • 21. UX vs UI UX design is the whole, and UI design is a part of UX design 02
  • 22. Ux design ensures the user’s interactions with a product will be the most pleasing and useful. Ex. an app overall ease of use. It’s more about the look and feel, UI design makes sure the product is visually laid out to create the most effective user experience. Ex. an app visual style and typography style. User Experience Design User Interface Design
  • 24. UX is a great direction for people who love continuous learning, lots of collaboration and have passion for user-oriented experiences. Type of person
  • 25. If you feel more into fascinating users with intuitive and beautifully designed interfaces, consider focusing on UI. More interested in this
  • 26. Remember UX and UI are both two sides of the same coin they go hand in hand to achieve the goal of user satisfaction.
  • 27. UX psychology UX law and principles 03
  • 28. User experience design has its roots in behavioral psychology and it is a blueprint of a human being's interaction with a machine
  • 29. Famous UX laws & principles Isolation Effect Hick’s Law Fitts’s Law www.lawsofux.com
  • 30. 1- Isolation Effect Also known as Von Restorff effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. Most memorable
  • 31. Which rectangle do you think easier to recall after leaving this slide?
  • 32. Distinctive features can be like colors
  • 35. For example, if a person examines a shopping list with one item highlighted in bright green, he or she will be more likely to remember the highlighted item than any of the others.
  • 36. How to implement it 1- Make important information or key actions visually distinctive. 2- If many elements are competing for user’s attention None of them will stand out.
  • 37. Practical example Make the favorable option more distinctive to meet the user & the business goals
  • 38. 2- Hick’s law The time it takes to make a decision increases with the number of choices. Psychologist William Edmund Hick
  • 39. We assume that the more choices The better the experience But it’s actually paralyzing
  • 40. Too many options = delay in reaction
  • 41. Until apple came with a user centered design Foucing on the primary actions
  • 42. You may think providing too many options is for the user But in fact too many options lead to a bad experience
  • 43. Which one feel easier?
  • 44. 3- fitts’s law The time to acquire a target is a function of the distance to and size of the target. psychologist Paul Fitts
  • 45. As targets gets smaller and further away, it takes longer to acquire.
  • 46. How to implement it 1- Touch targets should be large enough for users to accurately select them. 2- Touch targets should be placed in areas of an interface that allow them to be easily acquired.
  • 47. This law directly affects the user experience when designing buttons, for example, larger ones, especially on mobile devices that are tactile, reaching the conclusion that with smaller buttons it is more difficult to interact.
  • 48. Keep the main CTA big and close to the thumb
  • 50. Keep in mind ease of reach when creating your layout.
  • 52. 1- Always look for design inspirations.
  • 55. 2- Don’t use more than 3 fonts in a design
  • 56. 3- Keep in mind the Z-pattern The user scans the page from top left to top right and then travels diagonally to bottom left while reading to make a decision and eventually the user should be ready to decide by the time they reach to bottom left. Decision would be either take an action or leave the page or maybe read more details to decide.
  • 57. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik THANKS Do you have any questions? @rasheedosalem
  • 58. REFERENCES ● Lawsofux.com ● UX collective medium.com ● digitalsynopsis.com/design/ux-design-laws/