ui&ux design for study purposes at engineering

Table of contents
Definition of UI&UX
01.
Difference UI and UX
02.
Steps of the UI&UX
design
03.
UI & UX widgets
04.

UI - Definition
• UI stands for user interface, and it is
the visual design of an app.
• It is what users see and interact with
when they use an app. UI includes the
layout of the screens, the buttons, the
fonts, the colors, the icons, and all of
the other elements that make up the
app's appearance.
• UI is the look and feel of an app.

UX - Definition
• UX stands for user experience, and
it is the overall user satisfaction
with an app.
• It is how easy and enjoyable it is for
users to achieve their goals with the
app.
• UX designers consider the entire
user journey, from the moment a
user first sees the app to the
moment they finish using it.
• UX is how easy and enjoyable an
app is to use.

Difference
between UI
and UX
2.

Steps of
the UX and
UI design
03.

STEPS OF THE UX DESIGN AND
UI DESIGN IN MOBILE APP
DEVELOPMENT
1. Creating user-journey map
2. Building UX wireframe
3. Building prototype
4. Graphic design
5. Usability testing

• A user journey map is a visual
representation of the “story” from a
customer’s perspective.
• The user journey helps you
visualize your product from the
customer’s point-of-view.
• It helps focus the lens on how
customers experience your product
or service.
• Before you can map the user
journey, you need to gather the
appropriate data. You’ll need to pull
this data from multiple sources to
get the best sense of user
interactions.
1.Creating User-journey map

2.UX Wireframe
• A wireframe is a layout that shows
the main elements in the overall
structure. It focuses on how a user
would interact with your app. The
purpose of UX wireframing is to
define the user flow and details
like the number of windows,
buttons and how they work, login
and registration process, etc.
• UX wireframe is only a sketch,
usually with a block layout, with
lines representing the text and
rectangles instead of the images.

3.Building prototype
• A prototype is an interactive mockup that aims to test
and improve the functionality of the app – and most
cross-platform mobile app development companies
recommend it. Creating a simple click-through model
lets you check all the screens and decide if the
navigation makes sense for a new user.
• There are two ways of mobile app prototyping:
1. Rapid prototyping, where the created product is not
used after testing. This approach doesn’t take a lot of
time, as it’s designed only to test the ideas.
2. Evolutionary prototyping, where the prototype is
the future core of the app (MVP). Its features are
added subsequently till it became the full version of
the app.

4.UI Design
Structure Principle:
Elements should be organised purposefully,
in meaningful and useful ways. The
structure should be based on clear and
consistent models that are
recognizable to users.
Simplicity Principle:
Visibility Principle: Reuse Principle:
An app should be designed in a way
that makes simple, common tasks
easy. Using popular symbols and
phrases help people understand
how things work.
The design can’t overwhelm or distract
users. All elements needed for a
given task should be visible and
easy to find.
The design of the app should reuse
internal and external components
in a way to reduce rethink and
remembering.

5.Usability Testing
• Testing is a powerful tool that helps you
determine the app’s functionality and make sure
that users can navigate the app efficiently and
effectively. It’s an essential step that enables
you to validate the decisions you’ve already
made and influence future decisions.
• During this process, you let people interact with
your app and observe their behaviour and
reactions.

ui&ux design for study purposes at engineering

More Related Content

Similar to ui&ux design for study purposes at engineering

Recently uploaded

ui&ux design for study purposes at engineering