SlideShare a Scribd company logo
Turning ideas into
user-friendly software
Roshan Karunarathna
UI/UX Engineering - Roshan Karunarathna 2
1. Definitions
1. UI Designer/Engineer
2. UX Designer/Engineer
2. Introduction
3. Trends
4. Tools
5. Career guidance
6. Some tips
UI/UX Engineering - Roshan Karunarathna 3
Seriously !
UI/UX Engineering - Roshan Karunarathna 4
As Rahul Varshney, co-creator of Foster.fm puts it:
“User Experience (UX) and User Interface (UI) are some of the most confused and misused
terms in our field. A UI without UX is like a painter slapping paint onto a canvas without
thought; while UX without UI is like the frame of a sculpture with no paper Mache on it. A
great product experience starts with UX followed by UI. Both are essential for the product’s
success.”
“UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the
horse.”
— Dain Miller, Web Developer
What & Why?
UI/UX Engineering - Roshan Karunarathna 5
Definition
• User interface (UI) design or user interface engineering is
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
UI/UX Engineering - Roshan Karunarathna 6
UI/UX Engineering - Roshan Karunarathna 7
.. 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, platformor website.
UI/UX Engineering - Roshan Karunarathna 8
• 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?
UI/UX Engineering - Roshan Karunarathna 9
Definition
• User experience design (UXD, UED, or XD) is the process
of supporting user behavior[1] through usability, usefulness,
and desirability provided in the interaction with a product.[2]
• 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
UI/UX Engineering - Roshan Karunarathna 10
UI/UX Engineering - Roshan Karunarathna 11
.. 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.
UI/UX Engineering - Roshan Karunarathna 12
UI/UX Engineering - Roshan Karunarathna 13
UI/UX Engineering - Roshan Karunarathna 14
● UX design is what makes an interface
useful
● UI design is what makes an interface
beautiful.
UI/UX Engineering - Roshan Karunarathna 15
a lot of people consider it to be the
same which is wrong
• They are highly related but quite different.
• UI is more related to designing aspect while
• UX is more related to analysis and technical aspects.
• There are many differences between UI/UX designer and UI/UX
engineer even though they are likely to work together in a company. In
short,
• the role of UI/UX designer is to research and design while
• the role of UI/UX engineer is to design and code it out. .
UI/UX Engineering - Roshan Karunarathna 16
Skill Requirements
UI/UX Designer
• understand and analyze the needs of the users
and formulate concept and design ideas that those
users will love to use.
• graphic designing - needs to know all the
industrial-standard design tools especially the
ones that are commonly used.
• should have a complete idea about the
professional designing process that involves the
UI/UX engineer as well as the application
developers.
UI/UX Engineer
• more practical and technical.
• he collaborates with the UI/UX designer to create the
wireframe and also understand the thought process
and the concepts and reasons behind all the designs
• He has to pay attention to the fact the design looks
good and it is functional on all browsers or operating
systems or machine configurations.
• Translate the wireframes and all the concepts into the
practical output
• , apart from having a design skill set, he needs to
know the programming languages used to design the
front-end of any application.
UI/UX Engineering - Roshan Karunarathna 17
Aspects Addressed
UI/UX Designer
• research,
• information design, and
• visual design
UI/UX Engineer
• visual design,
• interactive design, and
• front-end development
UI/UX Engineering - Roshan Karunarathna 18
The term UX, or user experience, was coined
by Don Norman, a pioneer in the field of UX
design.
He defines UX as the experience that
includes “all aspects of the end-user’s
interaction with the company, its services,
and its products.”
UI/UX Engineering - Roshan Karunarathna 20
A Little Bit of Everything !
UI/UX Engineering - Roshan Karunarathna 22
UI/UX Engineering - Roshan Karunarathna 23
UI/UX Engineering - Roshan Karunarathna 24
• A UX engineer (UX= user experience) is usually a front-end engineer who works on a
design team, facilitating collaboration between engineering and design. UX engineers
bring together technical know-how and design aesthetics. They partner with
programmers, researchers, designers, and more to conceptualize to deliver an effective
user experience.
• A UX engineer often has the skillset of a front-end engineer but also the working know-
how of UX design principles. Don’t be confused though; a UX engineer is not a UX
designer.
UI/UX Engineering - Roshan Karunarathna 25
UI/UX Engineering - Roshan Karunarathna 26
UI/UX Engineering - Roshan Karunarathna 27
UI/UX Engineering - Roshan Karunarathna 28
UI/UX Engineering - Roshan Karunarathna 29
Few UX designers have the same academic and work background. In
fact, the majority of UX Engineers have varying job titles! You do not
need an educational degree to be a UX Engineer. Although a
Bachelor’s degree in Computer Science or IT may be beneficial.
In reality, most UX Engineer are self-taught. They are passionate
about the role and enjoy learning new developing technologies.
Additionally, certifications/online diplomas are an excellent resource
to help boost your career.
UI/UX Engineering - Roshan Karunarathna 30
UI/UX Engineering - Roshan Karunarathna 31
UX Designer
UI/UX Engineering - Roshan Karunarathna 32
UX Engineer
The FIVE
planes
The Design
Process
UI/UX Engineering - Roshan Karunarathna 33
UI/UX Engineering - Roshan Karunarathna 34
● 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)?
UI/UX Engineering - Roshan Karunarathna 35
UI/UX Engineering - Roshan Karunarathna 36
● 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.
UI/UX Engineering - Roshan Karunarathna 37
UI/UX Engineering - Roshan Karunarathna 38
● 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
UI/UX Engineering - Roshan Karunarathna 39
UI/UX Engineering - Roshan Karunarathna 40
● Achieve the structure of an
interface design and information
design.
● UX or Product Designers start designing,
testing, and iterating on wireframes.
UI/UX Engineering - Roshan Karunarathna 41
UI/UX Engineering - Roshan Karunarathna 42
● 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
UI/UX Engineering - Roshan Karunarathna 43
What makes good UI?
UI Design Core
Principles
UI/UX Engineering - Roshan Karunarathna 44
● 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.
UI/UX Engineering - Roshan Karunarathna 45
● Every action needs a reaction.
● This includes Loading states, Error and Success messages etc
● Let the user know what is going on !
UI/UX Engineering - Roshan Karunarathna 46
Feedback
Example: Facebook loading state while
waiting for the content.
UI/UX Engineering - Roshan Karunarathna 47
● 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.
UI/UX Engineering - Roshan Karunarathna 48
Consistency
UI, Behaviour, Look and
Feel Consistency in the
Clear app
UI/UX Engineering - Roshan Karunarathna 49
● 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.
UI/UX Engineering - Roshan Karunarathna 50
Lazy registration
Pattern in moqups
UI/UX Engineering - Roshan Karunarathna 51
Pinterest uses
Cards for its content
UI/UX Engineering - Roshan Karunarathna 52
Autocomplete suggestions at
google.com
UI/UX Engineering - Roshan Karunarathna 53
● 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
UI/UX Engineering - Roshan Karunarathna 54
● 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.
UI/UX Engineering - Roshan Karunarathna 55
The typeface
matters !
UI/UX Engineering - Roshan Karunarathna 56
NEVER center
large Blocks of
copy.
The eye knows
exactly where the
next line begins.
UI/UX Engineering - Roshan Karunarathna 57
● 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.
UI/UX Engineering - Roshan Karunarathna 58
On the left side negative
space is applied
on the right there isn’t
significant negative space
considered.
UI/UX Engineering - Roshan Karunarathna 59
How line spacing influences
readability and text
comprehension.
UI/UX Engineering - Roshan Karunarathna 60
White spacing
in action !
UI/UX Engineering - Roshan Karunarathna 61
● 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.
UI/UX Engineering - Roshan Karunarathna 62
Choosing the right
colors for the actions
UI/UX Engineering - Roshan Karunarathna 63
UI/UX Engineering - Roshan Karunarathna 64
https://vironit.com/basic-features-of-ux-and-ui-design-
and-is-there-any-difference-between-these-definitions/
https://www.freelancermap.com/blog/what-does-ux-
engineer-do/
https://medium.com/google-design
https://xd.adobe.com/ideas/career-tips/what-is-ux-
engineer/
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/
design
https://www.invisionapp.com/inside-design/core-principles-of-
ui-design/
https://www.usertesting.com/blog/ui-vs-ux/
https://careerfoundry.com/en/blog/ux-design/5-big-differences-
between-ux-and-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
Roshan Karunarathna
https://www.linkedin.com/in/roshankarunarathna/
UI/UX Engineering - Roshan Karunarathna 66
Q&A

More Related Content

What's hot

UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
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
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
Dzung Nguyen
 
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
 
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
 
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
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
GDSCUniversitasMatan
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Ravi Bhadauria
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
Peeyush Sahu CAPM®
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
Bart Van Hecke
 
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 Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
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 is not UI
Ux is not UIUx is not UI
Ux is not UI
Bruno Mendes
 
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
 
What is UX?
What is UX?What is UX?
What is UX?
Peter van Lanschot
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 

What's hot (20)

UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
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
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
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
 
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
 
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
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
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 is not UI
Ux is not UIUx is not UI
Ux is not UI
 
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)
 
What is UX?
What is UX?What is UX?
What is UX?
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 

Similar to UI/UX presentation by Roshan Karunarathna

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
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
suslpst
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
Sabaragamuwa University
 
UI / UX design services agency | UI UX design companies - ASIT Solutions
UI / UX design services agency | UI UX design companies - ASIT SolutionsUI / UX design services agency | UI UX design companies - ASIT Solutions
UI / UX design services agency | UI UX design companies - ASIT Solutions
ASIT Solutions PVT Ltd
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
Sabaragamuwa University
 
ui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabadui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabad
KumarNaik21
 
ui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabadui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabad
KumarNaik21
 
UI_UX Training in Hyd PPT.pptx
UI_UX Training in Hyd PPT.pptxUI_UX Training in Hyd PPT.pptx
UI_UX Training in Hyd PPT.pptx
basanthbliss99
 
UI_UX Training in Hyd PPT-converted.pdf
UI_UX Training in Hyd PPT-converted.pdfUI_UX Training in Hyd PPT-converted.pdf
UI_UX Training in Hyd PPT-converted.pdf
basanthbliss99
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
ICS
 
Engaging UX in engineering
Engaging UX in engineeringEngaging UX in engineering
Engaging UX in engineering
Siddarth Kengadaran
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
Digital Snack
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
Durgesh Pandey
 
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
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
mbrosset
 
UI_UX.pptx
UI_UX.pptxUI_UX.pptx
UI_UX.pptx
DilipPoudel2
 
What Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptxWhat Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptx
TurboAnchor
 
Bridging user experience design with agile product development
Bridging user experience design with agile product developmentBridging user experience design with agile product development
Bridging user experience design with agile product development
Harri Kiljander
 
What is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptxWhat is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptx
TandrimaTithi
 

Similar to UI/UX presentation by Roshan Karunarathna (20)

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
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
UI / UX design services agency | UI UX design companies - ASIT Solutions
UI / UX design services agency | UI UX design companies - ASIT SolutionsUI / UX design services agency | UI UX design companies - ASIT Solutions
UI / UX design services agency | UI UX design companies - ASIT Solutions
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
ui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabadui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabad
 
ui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabadui/ux training institutes in Hyderabad
ui/ux training institutes in Hyderabad
 
UI_UX Training in Hyd PPT.pptx
UI_UX Training in Hyd PPT.pptxUI_UX Training in Hyd PPT.pptx
UI_UX Training in Hyd PPT.pptx
 
UI_UX Training in Hyd PPT-converted.pdf
UI_UX Training in Hyd PPT-converted.pdfUI_UX Training in Hyd PPT-converted.pdf
UI_UX Training in Hyd PPT-converted.pdf
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
 
Engaging UX in engineering
Engaging UX in engineeringEngaging UX in engineering
Engaging UX in engineering
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really Works
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
 
UI_UX.pptx
UI_UX.pptxUI_UX.pptx
UI_UX.pptx
 
What Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptxWhat Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptx
 
Bridging user experience design with agile product development
Bridging user experience design with agile product developmentBridging user experience design with agile product development
Bridging user experience design with agile product development
 
What is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptxWhat is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptx
 

More from Roshan Karunarathna

LIVE CHAT ETIQUETTE
LIVE CHAT ETIQUETTELIVE CHAT ETIQUETTE
LIVE CHAT ETIQUETTE
Roshan Karunarathna
 
Iplanet
IplanetIplanet
Introduction to Parallel Computing
Introduction to Parallel ComputingIntroduction to Parallel Computing
Introduction to Parallel Computing
Roshan Karunarathna
 
onlinemarketing
onlinemarketingonlinemarketing
onlinemarketing
Roshan Karunarathna
 
Pay Pal Introduction.........!
Pay Pal Introduction.........!Pay Pal Introduction.........!
Pay Pal Introduction.........!
Roshan Karunarathna
 
Chou fasman algorithm for protein structure prediction
Chou fasman algorithm for protein structure predictionChou fasman algorithm for protein structure prediction
Chou fasman algorithm for protein structure prediction
Roshan Karunarathna
 
Iterative and Incremental Development (RAD)
Iterative  and Incremental Development (RAD)Iterative  and Incremental Development (RAD)
Iterative and Incremental Development (RAD)
Roshan Karunarathna
 
Introduction to backwards learning algorithm
Introduction to backwards learning algorithmIntroduction to backwards learning algorithm
Introduction to backwards learning algorithm
Roshan Karunarathna
 

More from Roshan Karunarathna (8)

LIVE CHAT ETIQUETTE
LIVE CHAT ETIQUETTELIVE CHAT ETIQUETTE
LIVE CHAT ETIQUETTE
 
Iplanet
IplanetIplanet
Iplanet
 
Introduction to Parallel Computing
Introduction to Parallel ComputingIntroduction to Parallel Computing
Introduction to Parallel Computing
 
onlinemarketing
onlinemarketingonlinemarketing
onlinemarketing
 
Pay Pal Introduction.........!
Pay Pal Introduction.........!Pay Pal Introduction.........!
Pay Pal Introduction.........!
 
Chou fasman algorithm for protein structure prediction
Chou fasman algorithm for protein structure predictionChou fasman algorithm for protein structure prediction
Chou fasman algorithm for protein structure prediction
 
Iterative and Incremental Development (RAD)
Iterative  and Incremental Development (RAD)Iterative  and Incremental Development (RAD)
Iterative and Incremental Development (RAD)
 
Introduction to backwards learning algorithm
Introduction to backwards learning algorithmIntroduction to backwards learning algorithm
Introduction to backwards learning algorithm
 

Recently uploaded

View Inheritance in Odoo 17 - Odoo 17 Slides
View Inheritance in Odoo 17 - Odoo 17  SlidesView Inheritance in Odoo 17 - Odoo 17  Slides
View Inheritance in Odoo 17 - Odoo 17 Slides
Celine George
 
JavaScript Interview Questions PDF By ScholarHat
JavaScript Interview  Questions PDF By ScholarHatJavaScript Interview  Questions PDF By ScholarHat
JavaScript Interview Questions PDF By ScholarHat
Scholarhat
 
How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17
Celine George
 
Introduction to Banking System in India.ppt
Introduction to Banking System in India.pptIntroduction to Banking System in India.ppt
Introduction to Banking System in India.ppt
Dr. S. Bulomine Regi
 
How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17
Celine George
 
C Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdfC Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdf
Scholarhat
 
New Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 SlidesNew Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 Slides
Celine George
 
CTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDFCTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDF
hammadmughal76316
 
How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17
Celine George
 
modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025
NurFitriah45
 
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Murugan Solaiyappan
 
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptxKesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
artenzmartenkai
 
How to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POSHow to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POS
Celine George
 
FEELINGS AND EMOTIONS INSIDE OUT MOVIE.ppt
FEELINGS AND EMOTIONS INSIDE OUT MOVIE.pptFEELINGS AND EMOTIONS INSIDE OUT MOVIE.ppt
FEELINGS AND EMOTIONS INSIDE OUT MOVIE.ppt
JenezarieTarra1
 
The Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdfThe Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdf
luzmilaglez334
 
Power of Ignored Skills: Change the Way You Think and Decide by Manoj Tripathi
Power of Ignored Skills: Change the Way You Think and Decide by Manoj TripathiPower of Ignored Skills: Change the Way You Think and Decide by Manoj Tripathi
Power of Ignored Skills: Change the Way You Think and Decide by Manoj Tripathi
Pankaj523992
 
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
Celine George
 
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
thanhluan21
 
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 SlidesHow to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
Celine George
 
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES  Lecture_Notes_Unit4_chapter11_sequenceSEQUNCES  Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
Murugan Solaiyappan
 

Recently uploaded (20)

View Inheritance in Odoo 17 - Odoo 17 Slides
View Inheritance in Odoo 17 - Odoo 17  SlidesView Inheritance in Odoo 17 - Odoo 17  Slides
View Inheritance in Odoo 17 - Odoo 17 Slides
 
JavaScript Interview Questions PDF By ScholarHat
JavaScript Interview  Questions PDF By ScholarHatJavaScript Interview  Questions PDF By ScholarHat
JavaScript Interview Questions PDF By ScholarHat
 
How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17How To Create a Transient Model in Odoo 17
How To Create a Transient Model in Odoo 17
 
Introduction to Banking System in India.ppt
Introduction to Banking System in India.pptIntroduction to Banking System in India.ppt
Introduction to Banking System in India.ppt
 
How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17
 
C Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdfC Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdf
 
New Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 SlidesNew Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 Slides
 
CTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDFCTD Punjab Police Past Papers MCQs PPSC PDF
CTD Punjab Police Past Papers MCQs PPSC PDF
 
How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17
 
modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025modul ajar kelas x bahasa inggris 2024-2025
modul ajar kelas x bahasa inggris 2024-2025
 
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
 
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptxKesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
 
How to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POSHow to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POS
 
FEELINGS AND EMOTIONS INSIDE OUT MOVIE.ppt
FEELINGS AND EMOTIONS INSIDE OUT MOVIE.pptFEELINGS AND EMOTIONS INSIDE OUT MOVIE.ppt
FEELINGS AND EMOTIONS INSIDE OUT MOVIE.ppt
 
The Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdfThe Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdf
 
Power of Ignored Skills: Change the Way You Think and Decide by Manoj Tripathi
Power of Ignored Skills: Change the Way You Think and Decide by Manoj TripathiPower of Ignored Skills: Change the Way You Think and Decide by Manoj Tripathi
Power of Ignored Skills: Change the Way You Think and Decide by Manoj Tripathi
 
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
 
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
 
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 SlidesHow to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
 
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES  Lecture_Notes_Unit4_chapter11_sequenceSEQUNCES  Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
 

UI/UX presentation by Roshan Karunarathna

  • 1. Turning ideas into user-friendly software Roshan Karunarathna
  • 2. UI/UX Engineering - Roshan Karunarathna 2 1. Definitions 1. UI Designer/Engineer 2. UX Designer/Engineer 2. Introduction 3. Trends 4. Tools 5. Career guidance 6. Some tips
  • 3. UI/UX Engineering - Roshan Karunarathna 3 Seriously !
  • 4. UI/UX Engineering - Roshan Karunarathna 4 As Rahul Varshney, co-creator of Foster.fm puts it: “User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper Mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.” “UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.” — Dain Miller, Web Developer
  • 5. What & Why? UI/UX Engineering - Roshan Karunarathna 5
  • 6. Definition • User interface (UI) design or user interface engineering is 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 UI/UX Engineering - Roshan Karunarathna 6
  • 7. UI/UX Engineering - Roshan Karunarathna 7 .. 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, platformor website.
  • 8. UI/UX Engineering - Roshan Karunarathna 8 • 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.
  • 9. What & Why? UI/UX Engineering - Roshan Karunarathna 9
  • 10. Definition • User experience design (UXD, UED, or XD) is the process of supporting user behavior[1] through usability, usefulness, and desirability provided in the interaction with a product.[2] • 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 UI/UX Engineering - Roshan Karunarathna 10
  • 11. UI/UX Engineering - Roshan Karunarathna 11 .. 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.
  • 12. UI/UX Engineering - Roshan Karunarathna 12
  • 13. UI/UX Engineering - Roshan Karunarathna 13
  • 14. UI/UX Engineering - Roshan Karunarathna 14 ● UX design is what makes an interface useful ● UI design is what makes an interface beautiful.
  • 15. UI/UX Engineering - Roshan Karunarathna 15
  • 16. a lot of people consider it to be the same which is wrong • They are highly related but quite different. • UI is more related to designing aspect while • UX is more related to analysis and technical aspects. • There are many differences between UI/UX designer and UI/UX engineer even though they are likely to work together in a company. In short, • the role of UI/UX designer is to research and design while • the role of UI/UX engineer is to design and code it out. . UI/UX Engineering - Roshan Karunarathna 16
  • 17. Skill Requirements UI/UX Designer • understand and analyze the needs of the users and formulate concept and design ideas that those users will love to use. • graphic designing - needs to know all the industrial-standard design tools especially the ones that are commonly used. • should have a complete idea about the professional designing process that involves the UI/UX engineer as well as the application developers. UI/UX Engineer • more practical and technical. • he collaborates with the UI/UX designer to create the wireframe and also understand the thought process and the concepts and reasons behind all the designs • He has to pay attention to the fact the design looks good and it is functional on all browsers or operating systems or machine configurations. • Translate the wireframes and all the concepts into the practical output • , apart from having a design skill set, he needs to know the programming languages used to design the front-end of any application. UI/UX Engineering - Roshan Karunarathna 17
  • 18. Aspects Addressed UI/UX Designer • research, • information design, and • visual design UI/UX Engineer • visual design, • interactive design, and • front-end development UI/UX Engineering - Roshan Karunarathna 18
  • 19. The term UX, or user experience, was coined by Don Norman, a pioneer in the field of UX design. He defines UX as the experience that includes “all aspects of the end-user’s interaction with the company, its services, and its products.”
  • 20. UI/UX Engineering - Roshan Karunarathna 20
  • 21. A Little Bit of Everything !
  • 22. UI/UX Engineering - Roshan Karunarathna 22
  • 23. UI/UX Engineering - Roshan Karunarathna 23
  • 24. UI/UX Engineering - Roshan Karunarathna 24 • A UX engineer (UX= user experience) is usually a front-end engineer who works on a design team, facilitating collaboration between engineering and design. UX engineers bring together technical know-how and design aesthetics. They partner with programmers, researchers, designers, and more to conceptualize to deliver an effective user experience. • A UX engineer often has the skillset of a front-end engineer but also the working know- how of UX design principles. Don’t be confused though; a UX engineer is not a UX designer.
  • 25. UI/UX Engineering - Roshan Karunarathna 25
  • 26. UI/UX Engineering - Roshan Karunarathna 26
  • 27. UI/UX Engineering - Roshan Karunarathna 27
  • 28. UI/UX Engineering - Roshan Karunarathna 28
  • 29. UI/UX Engineering - Roshan Karunarathna 29
  • 30. Few UX designers have the same academic and work background. In fact, the majority of UX Engineers have varying job titles! You do not need an educational degree to be a UX Engineer. Although a Bachelor’s degree in Computer Science or IT may be beneficial. In reality, most UX Engineer are self-taught. They are passionate about the role and enjoy learning new developing technologies. Additionally, certifications/online diplomas are an excellent resource to help boost your career. UI/UX Engineering - Roshan Karunarathna 30
  • 31. UI/UX Engineering - Roshan Karunarathna 31 UX Designer
  • 32. UI/UX Engineering - Roshan Karunarathna 32 UX Engineer
  • 33. The FIVE planes The Design Process UI/UX Engineering - Roshan Karunarathna 33
  • 34. UI/UX Engineering - Roshan Karunarathna 34
  • 35. ● 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)? UI/UX Engineering - Roshan Karunarathna 35
  • 36. UI/UX Engineering - Roshan Karunarathna 36
  • 37. ● 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. UI/UX Engineering - Roshan Karunarathna 37
  • 38. UI/UX Engineering - Roshan Karunarathna 38
  • 39. ● 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 UI/UX Engineering - Roshan Karunarathna 39
  • 40. UI/UX Engineering - Roshan Karunarathna 40
  • 41. ● Achieve the structure of an interface design and information design. ● UX or Product Designers start designing, testing, and iterating on wireframes. UI/UX Engineering - Roshan Karunarathna 41
  • 42. UI/UX Engineering - Roshan Karunarathna 42
  • 43. ● 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 UI/UX Engineering - Roshan Karunarathna 43
  • 44. What makes good UI? UI Design Core Principles UI/UX Engineering - Roshan Karunarathna 44
  • 45. ● 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. UI/UX Engineering - Roshan Karunarathna 45
  • 46. ● Every action needs a reaction. ● This includes Loading states, Error and Success messages etc ● Let the user know what is going on ! UI/UX Engineering - Roshan Karunarathna 46
  • 47. Feedback Example: Facebook loading state while waiting for the content. UI/UX Engineering - Roshan Karunarathna 47
  • 48. ● 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. UI/UX Engineering - Roshan Karunarathna 48
  • 49. Consistency UI, Behaviour, Look and Feel Consistency in the Clear app UI/UX Engineering - Roshan Karunarathna 49
  • 50. ● 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. UI/UX Engineering - Roshan Karunarathna 50
  • 51. Lazy registration Pattern in moqups UI/UX Engineering - Roshan Karunarathna 51
  • 52. Pinterest uses Cards for its content UI/UX Engineering - Roshan Karunarathna 52
  • 53. Autocomplete suggestions at google.com UI/UX Engineering - Roshan Karunarathna 53
  • 54. ● 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 UI/UX Engineering - Roshan Karunarathna 54
  • 55. ● 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. UI/UX Engineering - Roshan Karunarathna 55
  • 56. The typeface matters ! UI/UX Engineering - Roshan Karunarathna 56
  • 57. NEVER center large Blocks of copy. The eye knows exactly where the next line begins. UI/UX Engineering - Roshan Karunarathna 57
  • 58. ● 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. UI/UX Engineering - Roshan Karunarathna 58
  • 59. On the left side negative space is applied on the right there isn’t significant negative space considered. UI/UX Engineering - Roshan Karunarathna 59
  • 60. How line spacing influences readability and text comprehension. UI/UX Engineering - Roshan Karunarathna 60
  • 61. White spacing in action ! UI/UX Engineering - Roshan Karunarathna 61
  • 62. ● 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. UI/UX Engineering - Roshan Karunarathna 62
  • 63. Choosing the right colors for the actions UI/UX Engineering - Roshan Karunarathna 63
  • 64. UI/UX Engineering - Roshan Karunarathna 64 https://vironit.com/basic-features-of-ux-and-ui-design- and-is-there-any-difference-between-these-definitions/ https://www.freelancermap.com/blog/what-does-ux- engineer-do/ https://medium.com/google-design https://xd.adobe.com/ideas/career-tips/what-is-ux- engineer/ 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/ design https://www.invisionapp.com/inside-design/core-principles-of- ui-design/ https://www.usertesting.com/blog/ui-vs-ux/ https://careerfoundry.com/en/blog/ux-design/5-big-differences- between-ux-and-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
  • 66. UI/UX Engineering - Roshan Karunarathna 66 Q&A

Editor's Notes

  1. The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of an application. It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with. This includes screen layout, transitions, interface animations and every single micro-interaction. Any sort of visual element, interaction, or animation must all be designed. This job falls to UI designers. They decide what the application is going to look like. They have to choose color schemes and button shapes — the width of lines and the fonts used for text. UI designers create the look and feel of an application’s user interface. “UX” stands for “user experience.” A user’s experience of the app is determined by how they interact with it. Is the experience smooth and intuitive or clunky and confusing? Does navigating the app feel logical or does it feel arbitrary? Does interacting with the app give people the sense that they’re efficiently accomplishing the tasks they set out to achieve or does it feel like a struggle? User experience is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created. So UX designers are also concerned with an application’s user interface, and this is why people get confused about the difference between the two. But whereas UI designers are tasked with deciding how the user interface will look, UX designers are in charge of determining how the user interface operates. They determine the structure of the interface and the functionality. How it’s organized and how all the parts relate to one another. In short, they design how the interface works. If it works well and feels seamless, the user will have a good experience. But if navigation is complicated or unintuitive, then a lousy user experience is likely. UX designers work to avoid the second scenario.
  2. UI stands for User Interface while UX stands for User Experience. First of all, a lot of people consider it to be the same which is wrong. They are highly related but quite different. UI is more related to designing aspect while UX is more related to analysis and technical aspects. There are many differences between UI/UX designer and UI/UX engineer even though they are likely to work together in a company. In short, the role of UI/UX designer is to research and design while the role of UI/UX engineer is to design and code it out. But a UI/UX is not necessary an application developer as an application developer mainly deals with the back-end development while UI/UX engineer deals with the front-end development
  3. UI/UX Designer – The best way to understand the difference between UI/UX designer and UI/UX developer is to understand the skill set they need to possess. Coming first to the UI/UX designer, as stated earlier, they need to research and design. In other words, they need to understand and analyze the needs of the users and formulate concept and design ideas that those users will love to use. Therefore, they need to have an understanding of online users’ behaviors, psychology, and all the relevant aspects. In fact, one needs to walk in the shoes of the online users and get a complete hold of what is cooking inside their heads while they are browsing. But that is all non-technical skills. For a UI/UX designer, the next skill set is more important and they are technical. It is related to graphic designing. A UI/UX designer needs to know all the industrial-standard design tools especially the ones that are commonly used. Not just that, he should have a complete idea about the professional designing process that involves the UI/UX engineer as well as the application developers. The wireframes of the application are designed by UI/UX designer which form the base on any application. Therefore, it is a combinational skill set of research, analysis, and design. UI/UX Engineer – As stated earlier, the role of UI/UX engineer is more practical and technical. After the research and analysis part is done by the UI/UX designer, he collaborates with the UI/UX designer to create the wireframe and also understand the thought process and the concepts and reasons behind all the designs. He has to pay attention to the fact the design looks good and it is functional on all browsers or operating systems or machine configurations. A UI/UX designer may not have any idea whether what he is designing will work on all browsers or not and hence, the collaboration is effective to make the final design that works for the UI/UX engineer as well as the application developer. After the collaboration is done, it is the duty of the engineer to translate the wireframes and all the concepts into the practical output. Therefore, apart from having a design skill set, he needs to know the programming languages used to design the front-end of any application. Among the front-end programming languages, HTML+JS+CSS are a must. Then it depends on the application as well as the technology the company uses for the front-end development. It can also depend on the requirement of the clients. Sometimes, the job of turning wireframes into HTML layouts is done by UI.UX designer and the UI/UX developer fine tunes them so that the application developer can start developing the back-end and integrate with the front-end seamlessly. He has to keep in mind how the designs of front-end he is doing are going to behave in different browsers, how much time it will take to uploading, how many resources it will consume, how the users will respond and much more.
  4. A UI/UX designer is more concerned with the look and feel of the interface. He is into customer surveying, user analysis, and then doing design research of the competitors, and then conceptualizing the design ideas. After that, he is concerned with the branding and graphics development. On the other hand, a UI/UX engineer is concerned with responsiveness and interactivity. The first thing he pays attention to is UI prototyping. Once that is out of the way, he looks into the interactivity and animation aspects. The adaption to all devices, platforms, and browsers are taken care of and the cons of the design aspects are stroke off. Then he starts the implementation after getting the application developer on board. In technical terms, the job description of UI/UX designer is research, information design, and visual design. The job description of UI/UX engineer is visual design, interactive design, and front-end development. Due to the front-end part, the pay of UI/UX engineers is more than UI/UX designer based on similar years of experience. You can start as a UI/UX designer and make a transition to UI/UX engineer with enough experience.
  5. With that said, a UX engineer plays an integral part in the end-user’s interaction with a digital product. Without interactivity, a user cannot complete a task. This ranges from clicking a button with a mouse or swiping using a finger. The UX engineer is responsible for making sure that the user is able to do both. Not only that, but they also must anticipate the appropriate interactivity. This means determining if a user should double-tap, or tap and hold, to activate a feature within an application. To make that decision, a UX engineer must be able to communicate with the UX design team. Engineers use their knowledge to identify how a user currently behaves when interacting with specific design elements, which informs UX designers as they conduct usability testing to evaluate the success of an interaction once it’s developed. A UX engineer’s focus on technical elements of a user’s experience is part of what separates them from other types of software engineers. Decisions about what to build and how it’s built are rooted in user research. This data either comes directly from the UX engineer’s conversations with users or by analyzing how those users engage with a prototype. The UX engineer’s job is to reduce any potential friction through the final production stages of the digital product.
  6. The difference between the two is that a UX designer is more involved in user research, making sure they’ve considered the look and feel of a product before they actually start designing. They worry about things like color palettes, fonts, and icons. With that said, a UX engineer plays an integral part in the end-user’s interaction with a digital product. Without interactivity, a user cannot complete a task. This ranges from clicking a button with a mouse or swiping using a finger. The UX engineer is responsible for making sure that the user is able to do both. Not only that, but they also must anticipate the appropriate interactivity. This means determining if a user should double-tap, or tap and hold, to activate a feature within an application. To make that decision, a UX engineer must be able to communicate with thus design team. Engineers use their knowledge to identify how a user currently when interacting with specific design elements, which informs UX designers as they conduct usability testing to evaluate the success of an interaction once it’s developed. A UX engineer’s focus on technical elements of a user’s experience is part of what separates them from other types of software engineers. Decisions about what to build and how it’s built are rooted in user research. This data either comes directly from thus engineer’s conversations with users or by analyzing how those users engage with a prototype. The UX engineer’s job is to reduce any potential friction through the final production stages of the digital product. Roles and responsibilities UX engineers are not only advocates for the UX process in the engineering realm, but they are also champions of properly coded digital products. They are the bridge between the designers and software engineers. Ultimately, a UX engineer is a front-end engineer who facilitates effective design collaboration between the design and engineering teams. Much like a UX designer, their job is to turn a complex problem into a more intuitive solution. They should understand the full scope of a project and know what the user needs to complete a task. They should be familiar with the language of basic Guidelines, as well as the technical requirements to build a digital product. A UX engineer is also an integral part of the designer-developer handoff. The UX engineer can help at this point in the process by communicating on behalf of both4/18/2021 What Is a UX Engineer & How to Become One | Adobe XD Ideas https://xd.adobe.com/ideas/career-tips/what-is-ux-engineer/ 7/11 teams. Additional responsibilities of a UX engineer include: User research Concept design Prototyping Advanced visual design (mock-ups) Usability tests User journey analysis
  7. One important element to point out is that within the UX Engineer field, we have two “lenses” or concentrations — the design and engineering lens. But regardless of title or lens, we are ultimately the glue between design and engineering.
  8. All UX Engineers have four common traits: A solid understanding of programming fundamentals A strong advocacy for UX, adept at UI implementation Great collaboration skills to work alongside design, research, and product partners Bi-lingual in pixels and pointers
  9. 1: HTML, CSS, & JavaScript HTML, CSS, and JavaScript are important skills for a good UX engineer to master in order to understand how products work inside and out, and create innovative, useful products for users. Mastering them will help you learn other programming languages and frameworks, like Semantic HTML, Package Managers (NPM), jQuery, Angular, Vue, and React, which are all useful when creating more complex digital products. While frameworks and languages change over time, a solid understanding of the basics will help you strengthen your technical skills and adapt when needed. 2: Version control The UX process is iterative, and changes will always occur when building a digital product. Git and Team Foundation Server (TFS) are platforms that help you manage those changes, so it’s helpful to understand how to use them and other similar platforms. Another bonus soft skill here: being flexible! If you’re not ready for the constant changes, you might struggle as a UX engineer. 3: Testing and debugging Testing is important for a UX engineering role because it helps catch and fix issues before a product ships. UX designers are also responsible for testing their prototypes. However, the goal of a UX engineer is different; they are concerned, first and foremost, with how well the product functions technically. Testing a product lets a UX engineer know if adjustments need to be made to the code or if a new code needs to be written. Testing also allows for a level of interactivity with the user that may have been overlooked during development. A UX engineer is responsible for producing prototypes that require coding and cannot be created using design software. This level of front-end development is valuable and informative to the final development. When prototyping, one of the tools that is unique to a UX engineer is Chrome's Developer Tools (Dev Tools). It’s a simple yet impactful tool designed to help developers edit their code and view the changes before making final adjustments. It’s a form of web4/18/2021 What Is a UX Engineer & How to Become One | Adobe XD Ideas https://xd.adobe.com/ideas/career-tips/what-is-ux-engineer/ 5/11 prototyping tool that doesn’t involve the user but can result in much better user experiences. 4: UI design principles Although it’s not the biggest skill requirement for a UX engineer, having an understanding of user interface (UI) design principles is highly valued. This doesn’t mean a UX engineer is responsible for creating wireframes; it means that they are equipped with the vocabulary and understanding of UI design principles, allowing them to do their job more efficiently. It also helps them communicate better with UX designers, which is a big part of their job. For example, a common UI design principle is the sizing and spacing of buttons on digital interfaces. Buttons are usually spaced between 12 to 48 pixels, and the touch target or the actual size of the button should be a minimum of 48dp x 48dp, with 8dpbetween the different touchpoints. Knowing these standard dimensions helps a UX engineer build a more successful product. The goal of employing UI principles is to ensure that users can quickly get familiar with your product, helping them engage more intuitively and thereby reducing the number of errors in the final product, something that is paramount for the UX engineer. 5: Empathy If you ask anyone in UX what their “superpower” is, many may say empathy. At its core, the field of UX is about understanding your target user and then designing according to what will truly benefit their life. Empathy in particular is the ability to understand and share the feelings of another. Why is this so important? UX engineers draw from their empathetic observations to communicate with UX designers as advocates for both the user and the engineering team and its capabilities. This soft skill is vital and oftentimes overlooked. Working effectively with others is the roadmap to success; not having empathy can cause friction in communication and ultimately negatively impact the end user’s experience. Empathy