MOOC course

On
UI & UX Designing

Submitted To : Submitted By :
Mr. Himanshu Pant sir Mr. Shivam Adhikari
Certificate
UI & UX
DESIGNIN
GPresented
by-
Shivam
 ?

What do we mean by UX?"

User Experience (UX) refers to the overall experience a person has
when interacting with a product or service. It encompasses all aspects
of the end-user's interaction, including their emotions, perceptions,
and responses before, during, and after use.
UX is the process of creating products that provide meaningful
and relevant experiences to users. This involves designing the entire
process of acquiring and integrating the product, including aspects of
branding, design, usability, and function.
“ G o o d U X i s a b o u t u n d e r s t a n d i n g t h e p e o p l e y o u ' r e d e s i g n i n g f o r, a n d
making sure every interaction is meaningful.” - Whitney Hess
 This is what a designing a UX mean
COMPONENTS
OF UX • Usability: How easy and intuitive it is for
users to interact with the product.
• Accessibility: Ensuring that the product
can be used by people with various
disabilities.
• Aesthetics: The visual appeal and overall
design of the product.
• Performance: How well the product works
and how it meets user needs.
• Content: The quality and relevance of the
information provided to users.

Goal of UX is to create a seamless and positive

experience that meets the needs and expectations of
the user, leading to increased satisfaction and loyalty.
What do we mean by a UI? UX is about the overall experience; UI is
about the specific elements that facilitate
that experience.

User Interface (UI) Design is the means through which we

apply UX principles to create a product that is not only
functional but also delightful to use

UI refers to the graphical layout of an application,

encompassing
buttons, text, images, sliders, and any other visual
elements.
It also includes the interactive aspects like transitions,
animations, and responsive design.
TOOLS
TO DESIGN A
UI
U I o f Fi g m a , M y p e r s o n a l f a v o r i t e
tool
 W h y Fi g m a O v e r O t h e r s ?

• Real-Time Collaboration: Multiple team members can work on the same

file simultaneously with live updates.
• Browser-Based Access: Accessible from any device without the need for
installations.
• Design Systems & Components: Supports reusable components for
consistency.
• Interactive Prototypes: Robust tools for creating and testing interactive
user flows.
• Cross-Platform Compatibility: Works seamlessly across different devices
and operating systems.
• Version History: Keeps a record of changes, allowing for easy tracking
and reversion.
• Integrated Feedback: Features for gathering feedback and comments
directly on the design.
 Process of designing a
1. Research and 2. Planning and
Analysis UI
Ideation
3. Visual Design:
• Understanding the User:
• Information Architecture • Style Guide Creation:
Conduct user research to
(IA): Organize and structure Develop a style guide that
understand the target
the content to ensure it's includes color schemes,
audience, their needs,
easy to find and navigate. typography, icons, and
preferences, and pain
• User Flow: Map out the other visual elements to
points.
steps a user takes to ensure consistency.
• Competitive Analysis: Study
complete a task, ensuring a • High-Fidelity Mockups:
competitors' interfaces to
logical and efficient path. Design detailed, high-
identify best practices and
• Wireframing: Create low- fidelity mockups to show
areas for improvement.
fidelity sketches or how the final UI will look
• Stakeholder Interviews:
wireframes to outline the and feel.
Gather input from
basic layout and elements • Prototyping: Create
stakeholders to align the UI
of the UI. interactive prototypes to
design with business goals
test the UI design and
and objectives.
gather user feedback.
 Process of designing a
4. Usability Testing
UI
5. Implementation
6. Iteration and
Improvement
• User Testing: Conduct • Collaboration with • Continuous Feedback:
usability tests with real Developers: Work closely Gather ongoing feedback
users to identify any issues with developers to ensure from users and
or areas for improvement. the design is implemented stakeholders to identify
• Feedback Analysis: Analyze accurately and efficiently. areas for enhancement.
feedback and make • Design Handoff: Provide all • Regular Updates: Make
necessary adjustments to design assets, regular updates and
improve the usability and specifications, and improvements to the UI to
functionality of the UI. guidelines to the keep it relevant and
development team. effective.
 DIFFERENCE BETWEEN
UX & UI
User Experience User Interface
• Focus: Overall(UX)
feel of the experience. (UI)
• Focus: Visual elements and interactive
• Scope: Encompasses all aspects of the
features.
interaction between the user and the
• Scope: Concerned with the look, feel, and
company, its services, and its products.
• Goals: To provide a meaningful, relevant, interactivity of the product interface.

and satisfying experience to the user.

• Goals: To create visually appealing and
• Components: Usability, accessibility, easily navigable interfaces.
performance, and the overall flow of the • Components: Layouts, colors, fonts, icons,
product. buttons, and images.
• Role: Involves research, strategy, • Role: Involves designing mockups,
wireframes, prototypes, and testing. prototypes, and implementing visual
details.
Example of a Good UI
design

guardeerfunding.c
om
Have you ever thought who’s
designing all these UI’s?
UI/UX Designers are the
one
They are professionals who focus on
creating engaging, efficient, and
enjoyable experiences for users
interacting with digital products, like
websites and applications.
SKILLS REQUIRED TO BE ONE OF
THEM
• Creativity: Ability to create visually appealing and innovative designs.
• Technical Proficiency: Familiarity with design tools like Figma, Sketch, Adobe
XD, and others.
• Communication: Strong communication skills to articulate design decisions
and collaborate effectively.
• Problem-Solving: Analytical skills to solve design challenges and improve
user experience.
• User-Centered Approach: A deep understanding of user needs and the
ability to design with the user in mind.
 Lets have a look at
some
Before UX vs After UX
examples
 LET'S
REVIEW
 LET'S
REVIEW
 LET'S
REVIEW
 LET'S
REVIEW
 PRESENTED BY-
SHIVAM ADHIKARI
(A UI-UX LEARNER)