UX is Not Equal to UI Design

UX is Not Equal
to UI design
Copyright © 2022 Rifat Talukder

I am Rifat Talukder
UI & UX Designer
Save The Children Bangladesh
Hello!

“
Imagine you’re designing a house. UX
would be the foundation, while UI
would be the paint and furniture.

What is UX Design?
1
UX design is about understanding the overall
journey of your users and turning it into a product

What does a UX designer do?
The role of a user
experience designer is to
understand the customer
journey. That means
understanding the target
audience, interviewing
customers, defining user
flows, and conducting user
testing.

Research and strategy
Plan
At the beginning of the
UX design process,
designers need to create
a strategic plan that
ensures stakeholders are
aligned and working
towards common goals.
User Research
While we often think of
design as something
visual, a UX designer’s
work is mostly conceptual
problem-solving based on
research and data.
Info Architecture
Information architecture
focuses on organizing and
labeling the content of a
website, app, or product.
The goal is to help users
find information and
accomplish their goals.

Wireframing and prototyping
Creating the user flow
The UX design process involves
speaking to users to pinpoint their
needs, then devising the best user flow
that will help them complete their
tasks.
Wireframing
A wireframe is like the skeleton of an
interface. It can be produced digitally,
or even drawn on paper.

Wireframing and prototyping
Testing
The best way for a UX designer to know
if they’re doing their job right or not?
Testing with real users.
Analysis
UX designers work closely with
product managers and researchers to
analyze the test results and define the
next steps

What is UI Design?
2
UI design is about using typography, images, and other
visual design elements to turn a basic interface into
something digestible and usable.

What does a UI designer do?
A UI designer’s job begins
where a UX designer’s job
ends—at the prototyping
stage. They take the
wireframes and add visual
design to make them more
usable, aesthetically
appealing, and optimized
for different screen sizes.

Look and feel of the product
Design Research
Research provides information about
users and competitors and gives
insight into the latest design trends.
Visual Design
UI designers are responsible for designing
the product layout and all the visual
elements of the user interface, including
colors, fonts, icons, buttons etc
Aa

Look and feel of the product
Brand Design
Designers must strike the right balance
between usability and consistently
showcasing the brand identity
established by the marketing or
creative team.
Design System
To ensure product and brand consistency, UI
designers create style guides, pattern
libraries, and components that detail how
each element should look (color, font)

“
A UI designer focuses on how the
colors, typography, and images of
a design connect to the brand of a
product.

Layouts
Visual Design
Colors
Typography
Interaction Design
Wireframe & Prototypes
Information Architect
User Research
Scenarios
UI
UX

◉ UX Design is what makes
an interface useful.
◉ UI Design is what makes an
interface beautiful.
Why is UI/UX important?
User Experience User Interface

1. UX deals with the purpose and functionality of the product. UI deals with the quality
of the interaction that the end-user has with the product.
2. UI design has an artistic component as it relates to the design and interface with the
product. It affects what the end-user sees, hears, and feels. UX has more of a social
component for market research and communicating with clients to understand what
their needs are.
3. UX focuses on project management and analysis through the entire phase
of ideation, development, and delivery. UI has more of a technical component to
produce the design components for the finished product.
Differences between UX and UI

How do UX design and UI
design work together?
Product
UX UI

UI/UX Fails

How do UX design and UI
design work together?
Make sure to also learn outside the field, by
exploring different professions within the
design space, such as graphic design or UX
writing, and how they interact with UX and UI.

Tools for UI/ UX Designer
Inspiration Ideation Implementation

Great Adobe XD Plugins
Icons 4 Design is an Adobe
XD plugin that searches 5,000+
free, high-quality icons and
symbols.
UI Faces create your perfect
persona or randomly generate
profiles from 1000+ avatars.
Lorem Ipsum: A small plugin
to insert placeholder text that
fits your needs.
UnDraw Use hundreds of
vector illustrations without
attribution or cost and bring
them to life with Auto-Animate.
Photosplash provides a high-
quality, free, and exclusive
stock shot, a fantastic stock
picture plugin.

8-point grid system
The value of 8-point grid system:
◉ It provides a visual hierarchy to elements
and drives consistent scalability with fewer
decisions to make while maintaining
a quality rhythm. When designing the UI
look clean, better, and beautiful.
◉ The best system of communication
between designers and developers. A
developer can easily understand and
eyeball 8pt increment instead of having to
measure each time.

8-point grid system
Spacing system between elements and 8-
point grid:
Spacing is very important in UI design
because it makes the design neat and
clean. UI looks logical (developers friendly),
attractive and beautiful. Use principles of 8
point: 8px / 16px / 24px / 32px / 40px /
48px / 56px and so on for all padding and
margin between elements (sometimes you
can use 4px if you need to go in tight).

Mobile project
Font size
Smallest: 12 px
Details: 13-14 px
Body Text : 16-18 px
Subtitle: 18-20 px
Title: 24-28 px
Header: 32-38 px
Tab – 375 x 812
(Columns – 8, Gutter
width – 20)
Screen size

Tablet project
Font size
Smallest: 14 px
Details: 16-18 px
Body Text : 18 px
Subtitle: 20 px
Title: 28-32 px
Header: 40-44 px
Tab – 820 x 1180
width – 20)
Screen size

Desktop project(Font)
Font size
Smallest: 16 px
Details: 16-18 px
Body Text : 20 px
Subtitle: 24 px
Title: 32-36 px
Header: 40-48 px
Web – 1366 x 768
width – 40, Margin - 97)
Screen size

Extensions
CSS Peeper
Extract CSS and build
beautiful style guides.
ColorZilla
Advanced Eyedropper, Color
Picker, Gradient Generator
and other colorful goodies
Dimensions
A tool for designers
to measure screen
dimensions
Fonts Ninja
Identify fonts from any
website. Speed up your
design workflow!
GoFullPage
Capture a screenshot of
your current page in
entirety and reliably—
without requesting any
extra permissions!
Window Resizer
Resize the browser
window to emulate various
screen resolutions.
Muzli 2
The freshest links
about design and
interactive, from
around the web. A
designer's must!
Similarweb
See website traffic and key
metrics for any website,
including engagement rate,
traffic ranking, keyword
ranking and traffic source.

Any questions ?
You can find me at
◉ rifatrafa007@gmail.com
◉ rifat.talukder@savethechildren.org
Thanks!

UX is Not Equal to UI Design

More Related Content

What's hot (20)

Similar to UX is Not Equal to UI Design (20)

Recently uploaded (20)

UX is Not Equal to UI Design