UI/UX presentation by Roshan Karunarathna

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

Seriously !

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?

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

.. 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.

• 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?

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

.. 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.

● UX design is what makes an interface
useful
● UI design is what makes an interface
beautiful.

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. .

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.

Aspects Addressed
UI/UX Designer
• research,
• information design, and
• visual design
UI/UX Engineer
• visual design,
• interactive design, and
• front-end development

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.”

• 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.

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.

UX Designer

UX Engineer

The FIVE
planes
The Design
Process

● 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)?

● 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.

● 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

● Achieve the structure of an
interface design and information
design.
● UX or Product Designers start designing,
testing, and iterating on wireframes.

● 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

● 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.

● 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.

● 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

● 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.

Lazy registration
Pattern in moqups

Pinterest uses
Cards for its content

Autocomplete suggestions at
google.com

● 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

● 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.

● 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 !

● 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.

Choosing the right
colors for the actions

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/

Q&A

UI/UX presentation by Roshan Karunarathna

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a UI/UX presentation by Roshan Karunarathna

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

Más de Roshan Karunarathna

Más de Roshan Karunarathna (8)

Último

Último (20)

UI/UX presentation by Roshan Karunarathna

Notas del editor