The document outlines the principles of UI/UX design, emphasizing the importance of creating designs that attract attention and serve user needs effectively. It discusses the roles of user interface (UI) and user experience (UX) in bridging the gap between products and users, and offers guidance on conducting user studies and the design process. Key aspects include defining strategy, scope, structure, skeleton, and surface in the design workflow, along with tools commonly used in the industry.

1. Submitted by,
Riniya Mary V.B
UI/UX DESIGN
&
PRODUCT
DESIGN

2. • A unique design is present in
all things, whether they are
natural or man-made, and a
good design always attracts
the eyes.
• Smallest of the smallest in
your life and the largest of
the large, are all designed in
some way.
• Forms of designing:
 Web
 Mobile UX/UI design
What is Design?

3. • User Interface
• How people interact with
other product/services.
• Used in webs and mobile
applications.
• A bridge between a human
being and a system.
What is UI?

4. • User Experience
• When a person feels as he
experience a product or
service.
• Important role in all kind of
marketing.
• Plays a crucial role in web
and mobile applications.
• Bridge between a product
and its targeted audience.
What is UX?

5. What is a good design?
• A solution that serves the user and satisfies
the client.
• Does what users need and want.
• Natural to use.
• Help them to avoid trouble.

6. How to conduct a study?
• Plan topics in advance.
 Create an interview guide, an informal grouping of
topics and questions that the interviewer can ask in
different ways for different participants.
• Identify the target user base in advance.
• Give user a task to do against your interface and
observe their behaviour.
 Have them think aloud about what they seeing,
what they are trying to do, and actions they are
taking.
 Take copy of notes/record the session.
 Do not lead the user. Let them run the task until
they are successful or give up.
• Reflect on observations and write up a report on your
findings.

7. The design process
Strategy
Scope
Structure
Skeleton
Surface

8. Strategy
• What are the problem you are
trying to solve?
• What are your user needs?
• How does your product fit within
a business context?
Scope
• What are the features, and how
might you prioritize them?
• Defining functional specification
and content requirements of your
platform.
Structure
• Information architecture is
concerned with how the
information within the app is
organized.
• User flows map out the specific
journeys users embark on
through the app to help solve
their specific need.

9. Skeleton
• Achieve the structure of an
interface design and information
design.
• UX or product designers start
designing, testing and iterating
on wireframes.
Surface
• Communicate the brand,
product, value and functionality
in one cohesive image.
• UI designers and Visual designers
start to work.

10. Simple paper
prototypes are
easy to create
and change

11. After paper,
wireframes

12. What makes good UI?
Clarity
Feedback
Consistency
Visual
hierarchy

13. Tools used
• Invision Studio
• Figma
• Sketch
• Adobe XD
• Marvel
• Flow Mapp
• Axure
• Craft
• Webflow
• Framer X

14. Thank
you!!