SlideShare a Scribd company logo
What & Why?
User Interface
Design
Content Provider : Oussama
Présentateur : Ismail Norri
User Interface Design
.. The design of user interfaces for machines and software, such as
computers, home appliances, mobile devices, and other electronic
devices, with the focus on maximizing usability and the user experience.
The aim is to make the user’s interaction as simple and efficient as
possible, in terms of accomplishing user goals ..
- Wikipedia
User Interface Design
.. The design of user interfaces for different software or machines with a
clear purpose
Make a better experience for users when navigating through your
app, platform or website.
User Interface Design
● The visual elements of a product
or digital experience.
● A translation of a brand’s vision into
a product or a software.
● Common UIs are on: the phone,
computer, or tablet; at the ATM;
and in your car.
What & Why?
User Experience
Design
User Experience Design
.. User experience design (UXD, UED, or XD) is the process of enhancing
user satisfaction with a product by improving the usability, accessibility,
and pleasure provided in the interaction with the product.
.. User experience design encompasses traditional human–computer
interaction (HCI) design, and extends it by addressing all aspects of a
product or service as perceived by users ..
- Wikipedia
User Experience Design
.. UX Design is studying user behaviour and understanding user motivations
with the goal of designing better digital experiences.
Make a better experience for users by understanding their
behaviour and how they interact with a product or a software.
Seriously !
UX is NOT UI
UI vs UX
UI vs UX
● UX design is what makes an
interface useful
● UI design is what makes an
interface beautiful.
The FIVE planes
The Design
Process
1. Strategy
1. Strategy
● What is the problem you are
trying to solve?
● What are your user needs?
● How does your product fit
within a business context
(product objectives)?
2. Scope
2. Scope
● Defining functional specifications and
content requirements of your platform.
● What are the features, and how might
you prioritize them?
● The challenge is prioritizing features
while minimizing tradeoffs.
3. Structure
3. Structure
● Information architecture is
concerned with how the
information within an app is
organized.
● User flows map out the specific
journeys users embark on
through the app to help solve their
specific need
4. Skeleton
4. Skeleton
● Achieve the structure of an
interface design and
information design.
● UX or Product Designers start
designing, testing, and iterating
on wireframes.
5. Surface
5. Surface
● Communicate the brand,
product, value and functionality
in one cohesive image.
● UI Designers and Visual
Designers start their work.
● Tools: Adobe XD, Sketch,
Photoshop, Figma etc
What makes good UI?
UI Design Core
Principles
Clarity
● There’s nothing worse than ambiguity in an app.
● Understand which design might help a user best achieve their goals.
● Let the user feel confident while navigating through your app.
Feedback
● Every action needs a reaction.
● This includes Loading states, Error and Success messages etc
● Let the user know what is going on !
Feedback
Example: Facebook loading state while
waiting for the content.
Consistency
● Be consistent in you UI elements.
● Once your users start learning how to use a product, they shouldn’t
have to relearn it.
● Good consistency and structure will make your users feel at home.
Consistency
UI, Behaviour, Look and Feel
Consistency in the Clear app
Use established design patterns
● Innovation is awesome and encouraged, but it shouldn’t have to be at
the expense of the user experience
● Many of these established design principles are grounded in human
perception.
● These are the best practices within the UI design space.
Lazy registration
Pattern in moqups
Pinterest uses
Cards for its content
Autocomplete suggestions at
google.com
Visual hierarchy
● The arrangement of elements in a way that implies relative
importance
● The way we perceive information is affected by several factors that
contribute to how we rank the hierarchy of the content within the
layout.
● Typography, White space and Colors are part of this visual hierarchy
Visual hierarchy: Typography
● The two primary factors that makes a good typography are:
Legibility and Readability.
● Legibility depends on the typeface. It is how each individual
letterform is distinguishable from one another.
● Readability is determined by how you manipulate a particular
typeface to make it easier to comprehend.
The typeface
matters !
NEVER center large
Blocks of copy.
The eye knows exactly
where the next line
begins.
Visual hierarchy: White space
● White space helps with readability and comprehension immensely.
● Readers find it easier to focus on and process generously spaced
content.
● White space can be used to create strong hierarchy.
On the left side negative
space is applied
on the right there isn’t
significant negative space
considered.
How line spacing influences
readability and text
comprehension.
White spacing
in action !
Visual hierarchy: Colors
● Colors have a key role in expressing the brand and intents.
● The more colors there are, the less impact each individual color will
have.
● Keeping decent contrast between colors keeps a design accessible.
The great use of brand
colors in the facebook
app.
Choosing the right
colors for the actions
Instagram understands
That the less colors
the more impact they
have
Patterns exist for
a reason ;)
Some UI Patterns
● https://medium.freecodecamp.org/whats-the-difference-between-ux-and-ui-design-
2ca8d107de14
● http://thenewcode.com/869/Understanding-User-Experience-Design
● https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-
laymans-guide/
● https://www.invisionapp.com/design-defined/user-interface-design
● https://www.invisionapp.com/inside-design/core-principles-of-ui-design/
● https://www.usertesting.com/blog/ui-vs-ux/
● https://blog.prototypr.io/intro-to-user-interface-design-ui-61df3aa90d24
● https://www.smashingmagazine.com/2018/02/comprehensive-guide-user-experience-design/
● -----
● https://careerfoundry.com/en/blog/ux-design/5-big-differences-between-ux-and-ui-design/
● https://theblog.adobe.com/4-golden-rules-ui-design
● ------
● https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
● https://www.invisionapp.com/inside-design/wireframe-examples/
● https://read.compassofdesign.com/using-color-in-ui-design-559fafa17bf4

More Related Content

What's hot

UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
Jasmine Phan
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
Shweta Joshi
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
 
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
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
sumit singh
 
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
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
Bruno Mendes
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
GDGKuwaitGoogleDevel
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
Phuong Hoang Vu
 
User interface design
User interface designUser interface design
User interface design
Naveen Sagayaselvaraj
 
User interface design
User interface designUser interface design
User interface design
Oleksii Leonov
 
UI/UX Design in Agile process
UI/UX Design in Agile process  UI/UX Design in Agile process
UI/UX Design in Agile process
Scrum Breakfast Vietnam
 
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
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
GDSCUniversitasMatan
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
Sooraj P R
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
Michał Aleksander
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
Ravi Bhadauria
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
Dzung Nguyen
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 

What's hot (20)

UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
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
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
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)
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 
User interface design
User interface designUser interface design
User interface design
 
User interface design
User interface designUser interface design
User interface design
 
UI/UX Design in Agile process
UI/UX Design in Agile process  UI/UX Design in Agile process
UI/UX Design in Agile process
 
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
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 

Similar to UI UX introduction

UI.docx
UI.docxUI.docx
UI.docx
UI.docxUI.docx
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
 
What is user experience(ux) & ux designer
What is user experience(ux) & ux designerWhat is user experience(ux) & ux designer
What is user experience(ux) & ux designer
Metricoid Technology
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
Shawn Calvert
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
Durgesh Pandey
 
User centered design process
User centered design processUser centered design process
User centered design process
Rachna Mittal
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
topseowebmaster
 
Intro to UIUX.pptx
Intro to UIUX.pptxIntro to UIUX.pptx
Intro to UIUX.pptx
ADRIANASAAGCAOILI
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designing
Menusha Pathirana
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
Digital Snack
 
UI content
UI contentUI content
UI content
MUDDUKRISHNA14
 
Specialization for Web & Graphic Designer
Specialization for Web & Graphic DesignerSpecialization for Web & Graphic Designer
Specialization for Web & Graphic Designer
Attiullah Attiaie
 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
Inexture Solutions
 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdf
Ayesha Siddika
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
 
Importance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdfImportance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdf
Mverve1
 
UX Explained
UX ExplainedUX Explained
UX Explained
Mind Over Machines
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really Works
Samer Tallauze
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
RiniyaMary
 

Similar to UI UX introduction (20)

UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
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
 
What is user experience(ux) & ux designer
What is user experience(ux) & ux designerWhat is user experience(ux) & ux designer
What is user experience(ux) & ux designer
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
 
User centered design process
User centered design processUser centered design process
User centered design process
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
 
Intro to UIUX.pptx
Intro to UIUX.pptxIntro to UIUX.pptx
Intro to UIUX.pptx
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designing
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
UI content
UI contentUI content
UI content
 
Specialization for Web & Graphic Designer
Specialization for Web & Graphic DesignerSpecialization for Web & Graphic Designer
Specialization for Web & Graphic Designer
 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdf
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
Importance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdfImportance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdf
 
UX Explained
UX ExplainedUX Explained
UX Explained
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really Works
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
 

More from Ismail Norri

BikeSharing
BikeSharingBikeSharing
BikeSharing
Ismail Norri
 
Proxi banquev4 jour final
Proxi banquev4 jour finalProxi banquev4 jour final
Proxi banquev4 jour final
Ismail Norri
 
Ram Markoub
Ram MarkoubRam Markoub
Ram Markoub
Ismail Norri
 
Dart app
Dart appDart app
Dart app
Ismail Norri
 
Business model innovation
Business model innovationBusiness model innovation
Business model innovation
Ismail Norri
 
gestion soi. en cour
gestion soi. en courgestion soi. en cour
gestion soi. en cour
Ismail Norri
 

More from Ismail Norri (6)

BikeSharing
BikeSharingBikeSharing
BikeSharing
 
Proxi banquev4 jour final
Proxi banquev4 jour finalProxi banquev4 jour final
Proxi banquev4 jour final
 
Ram Markoub
Ram MarkoubRam Markoub
Ram Markoub
 
Dart app
Dart appDart app
Dart app
 
Business model innovation
Business model innovationBusiness model innovation
Business model innovation
 
gestion soi. en cour
gestion soi. en courgestion soi. en cour
gestion soi. en cour
 

Recently uploaded

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 

Recently uploaded (20)

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 

UI UX introduction

  • 1. What & Why? User Interface Design Content Provider : Oussama Présentateur : Ismail Norri
  • 2. User Interface Design .. The design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. The aim is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals .. - Wikipedia
  • 3. User Interface Design .. The design of user interfaces for different software or machines with a clear purpose Make a better experience for users when navigating through your app, platform or website.
  • 4. User Interface Design ● The visual elements of a product or digital experience. ● A translation of a brand’s vision into a product or a software. ● Common UIs are on: the phone, computer, or tablet; at the ATM; and in your car.
  • 5. What & Why? User Experience Design
  • 6. User Experience Design .. User experience design (UXD, UED, or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. .. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users .. - Wikipedia
  • 7. User Experience Design .. UX Design is studying user behaviour and understanding user motivations with the goal of designing better digital experiences. Make a better experience for users by understanding their behaviour and how they interact with a product or a software.
  • 10. UI vs UX ● UX design is what makes an interface useful ● UI design is what makes an interface beautiful.
  • 11. The FIVE planes The Design Process
  • 13. 1. Strategy ● What is the problem you are trying to solve? ● What are your user needs? ● How does your product fit within a business context (product objectives)?
  • 15. 2. Scope ● Defining functional specifications and content requirements of your platform. ● What are the features, and how might you prioritize them? ● The challenge is prioritizing features while minimizing tradeoffs.
  • 17. 3. Structure ● Information architecture is concerned with how the information within an app is organized. ● User flows map out the specific journeys users embark on through the app to help solve their specific need
  • 19. 4. Skeleton ● Achieve the structure of an interface design and information design. ● UX or Product Designers start designing, testing, and iterating on wireframes.
  • 21. 5. Surface ● Communicate the brand, product, value and functionality in one cohesive image. ● UI Designers and Visual Designers start their work. ● Tools: Adobe XD, Sketch, Photoshop, Figma etc
  • 22. What makes good UI? UI Design Core Principles
  • 23. Clarity ● There’s nothing worse than ambiguity in an app. ● Understand which design might help a user best achieve their goals. ● Let the user feel confident while navigating through your app.
  • 24. Feedback ● Every action needs a reaction. ● This includes Loading states, Error and Success messages etc ● Let the user know what is going on !
  • 25. Feedback Example: Facebook loading state while waiting for the content.
  • 26. Consistency ● Be consistent in you UI elements. ● Once your users start learning how to use a product, they shouldn’t have to relearn it. ● Good consistency and structure will make your users feel at home.
  • 27. Consistency UI, Behaviour, Look and Feel Consistency in the Clear app
  • 28. Use established design patterns ● Innovation is awesome and encouraged, but it shouldn’t have to be at the expense of the user experience ● Many of these established design principles are grounded in human perception. ● These are the best practices within the UI design space.
  • 32. Visual hierarchy ● The arrangement of elements in a way that implies relative importance ● The way we perceive information is affected by several factors that contribute to how we rank the hierarchy of the content within the layout. ● Typography, White space and Colors are part of this visual hierarchy
  • 33. Visual hierarchy: Typography ● The two primary factors that makes a good typography are: Legibility and Readability. ● Legibility depends on the typeface. It is how each individual letterform is distinguishable from one another. ● Readability is determined by how you manipulate a particular typeface to make it easier to comprehend.
  • 35. NEVER center large Blocks of copy. The eye knows exactly where the next line begins.
  • 36. Visual hierarchy: White space ● White space helps with readability and comprehension immensely. ● Readers find it easier to focus on and process generously spaced content. ● White space can be used to create strong hierarchy.
  • 37. On the left side negative space is applied on the right there isn’t significant negative space considered.
  • 38. How line spacing influences readability and text comprehension.
  • 40. Visual hierarchy: Colors ● Colors have a key role in expressing the brand and intents. ● The more colors there are, the less impact each individual color will have. ● Keeping decent contrast between colors keeps a design accessible.
  • 41. The great use of brand colors in the facebook app.
  • 42. Choosing the right colors for the actions
  • 43. Instagram understands That the less colors the more impact they have
  • 44. Patterns exist for a reason ;) Some UI Patterns
  • 45. ● https://medium.freecodecamp.org/whats-the-difference-between-ux-and-ui-design- 2ca8d107de14 ● http://thenewcode.com/869/Understanding-User-Experience-Design ● https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a- laymans-guide/ ● https://www.invisionapp.com/design-defined/user-interface-design ● https://www.invisionapp.com/inside-design/core-principles-of-ui-design/ ● https://www.usertesting.com/blog/ui-vs-ux/ ● https://blog.prototypr.io/intro-to-user-interface-design-ui-61df3aa90d24 ● https://www.smashingmagazine.com/2018/02/comprehensive-guide-user-experience-design/ ● ----- ● https://careerfoundry.com/en/blog/ux-design/5-big-differences-between-ux-and-ui-design/ ● https://theblog.adobe.com/4-golden-rules-ui-design ● ------ ● https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html ● https://www.invisionapp.com/inside-design/wireframe-examples/ ● https://read.compassofdesign.com/using-color-in-ui-design-559fafa17bf4

Editor's Notes

  1. https://www.superoffice.com/blog/feedback/
  2. https://careerfoundry.com/en/blog/ui-design/the-importance-of-consistency-in-ui-design/
  3. https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design
  4. https://www.interaction-design.org/literature/topics/ui-design-patterns http://ui-patterns.com/patterns
  5. http://ui-patterns.com/patterns/LazyRegistration
  6. http://ui-patterns.com/patterns/cards
  7. http://ui-patterns.com/patterns/Autocomplete
  8. https://uxplanet.org/typography-in-ui-guide-for-beginners-7ee9bdbc4833
  9. https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203
  10. https://medium.com/hh-design/crash-course-ui-design-25d13ff60962 https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e