UI/UX DESIGN

BEGINNER

Manika Adhikari | UI/UX Crash Course | 2023 May 17

What is design?
Design is the implementation of the creative approach to build the
interface of any systems such as product, websites, application in a way
that user can easily grasp the purpose of the product and also the
workflow of the product.

− It is the process of bringing into existence the products and the

services that people use. It involves producing an ideal products
usable for the people.

WHY IS DESIGN IMPORTANT?

Design is important because it add value and meaning to clarify and to
execute the purpose of the product and persuade the user to use the
product. To tell a story.

Suppose you want to introduce a new product in the market. You

probably have an idea of what to manufacture. You obviously plan how
to build it and how to make it usable so that user will buy it. To plan is
to design. And if you don’t design then your product won’t come into
existence.

What is UI design?
− UI design is the process of creating visually appealing and user-
friendly interface for any products be it a digital or physical
product.

− Visually engaging and easy to use product.

− People nowadays wants the simple yet advanced products.

PAGE 1
 − UI design refers to the graphics design with more complex
responsibilities.

− It represents to the appearance of the product.

− A set of visual elements that allow users to interact with a website or
an application, such as buttons, icons, navigation elements, tooltips, user
profiles, etc.

WHAT ARE THE EXAMPLES OF GOOD AND BAD UI

DESIGN?
Examples of Good UI design:

− Netflix: Layout of Netflix is visually appealing

Clear navigation and large cover images, content desc.

When you hover over it then it shows the necessary info

without having to open it.

Multiple user profile for personalized experience.

Playback controls

Metrics like completion rate, start and stop time, fast

Forward, rewind.

[Extra info: Over 180 million subscribers and they watch over 140
million hours of video every day on over 450 million devices
everyday.]

Examples of Bad UI design:

− eBay: Product details page

Too much information

PAGE 2
 (Add to cart and add to wishlist button, homepage CTA

button is not visible right after landing.)

Outdated design

How to implement good UI in website design?

− Proper color contrast and choosing proper color scheme

− Responsive design

− Use of consistent UI elements

− Proper use of text hierarchy

− Use of high quality images

How does UI design become bad?

− No user feedback

− Cluttered displays

− Confusing navigation

− No difference b/w primary and secondary button

− Bad CTA

− Unaligned elements

− Too much text

PAGE 3
What is UX design?
Designing perfect scenario of using company’s product or services with
utmost satisfaction.

− Usefulness, desirability and usability mix together to provide

great user experience.

− It is about how user feel when they use our product.

− Meeting customer needs.

− It involves understanding target audiences, their needs and

behavior to design intuitive, efficient and enjoyable experiences.

− It makes websites and application easy to use and enhances

customer experience.

− For Eg: Onboarding experience

Well-designed onboarding experience can guide user

through the app’s features.

WHAT ARE THE EXAMPLES OF GOOD AND BAD UX

DESIGN?
Design is the implementation of the creative approach to build the
interface of any systems such as product, websites, application in a way
that user can easily grasp the purpose of the product and also the
workflow of the product.

− Good UX makes product easy to use and intuitive and provide a

seamless experience for the user whereas bad UX design creates
confusing, cluttered and difficult-to-navigate products.

− Incorporates visually appealing design elements that

complement the user experience whereas bad UX is designed to

PAGE 4
 pay more attention to neglect aesthetics or use them in a way
that distracts from the product’s intended experience.

− Good UX design takes into account of all users including those

with disabilities whereas bad UX may not consider accessibility
altogether or may implement it ineffectively.

Good UX example:
Mailchimp – Password guidance

Netflix autoplay feature

Gmail – eauta mail ma hover garda necessary elements dekhauxa

for eg: delete , archive, mark as read icon haru dekhauxa.

[Good UX is unnoticeable most of the time, although a feeling of

relief and easiness when completing a task or using a service are
positive indicators.]

Bad UX example:
Whatsapp/ Messenger

Inform receipent that a message sent has been deleted. So it defects

the purpose of the feature.

How to solve it?

- Message send garesi grace period 10 to 15 second dine so that tyo

message recipient saga gainahalos ra hamile delete garna milos.

PAGE 5
Is it possible to have good UX with bad UI and vice-
versa?
Good UX with bad UI: It depends

− Old cell phone served its purpose although it was not very nice
looking.

− No. They go hand in hand. UX is only good when its aesthetics

follows. Eg: Creating a great product but displaying them with
hard-to-read typography. Any service won’t thrive if you don’t
nail them all.

Good UI with bad UX: Yes

− Some design looks good, color scheme looks good, typography

looks goods but there might be lack of the elements that helps
increase the user engagement. For example: Not having CTA.

What does UX designer do?

UX designer focuses on building a positive experience for end users.
UX designers are responsible for user research, creating design
solutions and user testing.

What is design thinking?

Understanding users, challenge assumptions, redefine problems and
create innovative solutions to prototype. It involves 5 phases;

− Empathize: Prioritize user’s insight/needs over own assumptions.

− Define: Define problem statements and create personas.

Ideate: Challenge assumptions and create ideas, look for

alternative ways to view the problem, identify innovative

PAGE 6
 solutions to the problem statement you’ve created,
brainstorming.

− Prototype: Experimental phase, best possible solution for each

problem, could involve simple paper prototyping.

− Test: Try your solutions out, iteration, alteration and refinement.

Generate different ideas and understand & address rapid changes in

user’s environments and behaviors. “Think outside of the box.”

Design team use design thinking to tackle ill-defined (unknown

problems) because they can reframe these in human-centric ways and
focus on what’s most important for users.

With design thinking, teams have the freedom to generate ground-

breaking solutions.

Design thinking is used in the generating strategies, building product

and providing services.

It is an ideology on designer’s workflows for mapping out stages of

design.

Design work processes helps us systematically extract, teach, learn and

apply human-centered techniques to solve problems in a creative and
innovative way.

What are design Heuristics?

Design heuristics are the general guidelines that mentions “best
practices” that have been identified through research and experience
as effective approaches to solving design problems.

There is no right answer with the design.

Applying effective heuristics can provide insights and lead to a good

design.

PAGE 7
Design heuristics includes:

− Visibility of system status: The design should always keep

users informed about what is going on, through the appropriate
feedback within a reasonable amount of time.

Predictable interactions create trust in the product as well as the

brand. Build trust through open and continuous communication.

Example:

Elevator: It shows in which floor the elevator is currently in.

Progress bar: While downloading something from the internet,

it displays the time, percentage, file size and cancel & resume
button.

E-commerce application: Showing the out of stock tag or “x”

items left in the product card.

− Match between the system and the real world: The design
should speak the user’s language. Use words, phrases and
concepts familiar to the user, rather than internal jargon or
abbreviation.

Example:

E-book: User being able to highlight favorite quote in the e-book

just like the real ones.

Folders: Just like how we organize our files in the physical office,
we can organize files within a folder in computer.

− User Control and Freedom: User often perform actions by

mistakes. They need a clearly marked “emergency exit” to leave
the unwanted action without having to go through an extended
process.

PAGE 8
Example:

Message: Accidently sending critical message to the wrong person,

then there should be an option which deletes the message form
the both sides.

Cancel Order: Accidently clicking the checkout button in the e-

commerce application, user should be able to cancel the order.

− Consistency and standards: User should not have to

wonder whether different words and situations, actions mean
the same thing. Design should follow platform and industry
conventions.

Example:

User flow: After logging into some website, always redirect user in
the home page.

Same color theme: Use same color theme throughout the website
pages.

Similar icon: Don’t mix solid and outline icon in the same web
design.

− Error Prevention: Good error messages are important but

best design carefully prevent problems from occurring in the first
place. Either eliminate error-prone conditions or check for them
and present users with a confirmation option before they
commit to the action.

Example:

Upload image: inform user about what size image can be uploaded
and also warn them if try to upload more than required size.

PAGE 9
Auto save option: Auto save option in the word, excel.

− Recognition rather than recall: Minimize user’s memory

load by making elements, actions and options visible. The user
should not have to remember information from one part of the
interface to another.

Example:

File Path: file path in laptops. Desktop>Test>new items

Search bar: Google search bar gives you multiple variations of

option before you are done typing.

− Flexibility and efficiency of use: Shortcuts – hidden form

novice users –may speed up the interaction for the power user so
that the design can enter to both inexperienced and experienced
users. Allow users to tailor frequent actions.

Example:

Filter: Filter and sorting options in the websites

Laptop shortcuts: Window + D (desktop), Window + E (Folder)

− Aesthetic and minimalist design: Interface should not

contain the information that are irrelevant and rarely needed.
Every extra unit of information in an interface completes with
the relevant units of information and diminishes their relative
visibility.

Example:

PAGE 10
Design: Cluttered Vs uncluttered design.

− Help users recognize, diagnose and recover: In case

user perform wrong actions they should be able to recognize that
what they did was wrong, so they should be able to diagnose and
recover it.

Example:

Error message: Error message should be explained in the plain

language (no error codes) precisely indicate the problem and
constructively suggest a solution.

− Help and documentation: It’s best if the system doesn’t

need any additional explanation. However, it may be necessary
to provide documentation to help users understand how to
complete their tasks.

Example:

Help menu: Some software consists of help menu to guide user.

Product manual: User manual of the product.

Onboarding message: Guide user how to use application.

− BONUS: Accessibility and inclusion: Done before

conducting user testing.

Example:

Regional setting: Able to change language, currency

PAGE 11
What are the stages in UI/UX design process?
Understanding users, challenge assumptions, redefine problems and
create innovative solutions to prototype. It involves 5 phases;

− Research and discovery

− User persona and journey mapping and user flows

− Competitive and market analysis

− Sitemap and Wireframing

− Visual design

− Prototyping

− Usability testing and evaluation (iteration, allteration and

refinement)

− Development and implementation

− Launch and maintenance

What are design principles?

Ensuring how to make good design

− Contrast: color contrast, shapes and text vs back ground contrast

− Balance: Balance b/w UI elements

− Proximity: Related content should be placed together

− Hierarchy: Importance of elements within a design. Emphasis

the important elements and mute the less important elements.

− Repetition: repeated styles indicates the content are related.

− Whitespace: More space between elements will draw more

attention to them.

PAGE 12
What is your favorite design principle and why?
One of my favorite design principles is proximity, which refers to
the visual grouping of related elements to create a clear and
organized layout. Proximity plays a crucial role in enhancing the
user experience and conveying information effectively. By
placing related elements close together, we can guide the user's
attention and help them make sense of the content at a glance.

The reason I appreciate proximity is because it simplifies the

visual hierarchy and improves the overall readability of a design.
When elements are grouped based on their relationship or
purpose, it reduces cognitive load for users as they navigate
through the interface. It allows them to quickly identify related
items and understand the structure and organization of the
content.

Example:

Product Card & CTA section

What is design system and why is it important?

Design system is the collection of reusable components. It often
includes colors, typography, tables, buttons etc.

It is important because.

− It helps to maintain the consistency throughout the design

− It boosts the speed since the components are dragged and used.

− It makes easy to update the UI elements.

− It helps to maintain the identity of brand.

PAGE 13
What is color?
Color is kind of element which shapes the way we see the
world by evoking emotion - it can be stimulating, calming,
unsettling or mysterious.

Explain Color theory?

− Color Contrast: When it comes to applying colors readability and
legibility are the key factors. Mostly vibrant colors enables
enough of contrast

− Color scheme: Color scheme is the combination of colors used in

UI design. Color scheme contains the following group of colors:

a) Primary Colors
b) Secondary Colors
c) Accent colors
d) Neutral colors
e) Semantic colors

How to choose color properly?

The important color combination from color wheels are:

a) Complementary
b) Monochromatic
c) Analogous
d) Split Complementary
e) Triadic
f) Tetradic

- Follow 60-30-10 % rule: 60% dominant hue, 30% secondary hue

and 10% accent color
- If brand color is already fixed then use color wheels.

PAGE 14
 - Color contrast check – [colors.eva.design] & [colorhunt.co]
- Color psychology research
- Eg: Yellow color brings happiness, joy and excitement.

What is Typography?
Typography transfers the language into a decorative visual element. It
is the difference between different styles of text that create distinct
appearances. Typography uses fonts, letter spacing, layout styles and
other design elements.

− Typeface: Typefaces refers to the design in the full style or family

of styles

− Font: Font refers to format or storage mechanism

How to choose font/typeface in website design?

Fonts can alter meaning of the text from the means of perception.

− Readability: Reading screen is harder than reading a paper

− Legibility: Distinguishable letters and numbers. Check the

difference b/w lowercase and uppercase.

− Fonts for table. Example: Calibri: 24874 and Georgia: 24874

Example:

− Sans-serif is suitable for a serious business app

− Font: Some letters like “o”, “e”, “c”, “a” can be easily confused in
some typefaces which in turn makes words harder to identify.

Favorite font:

− Poppins, Sofia-pro

PAGE 15
 − Font: Some letters like “o”, “e”, “c”, “a” can be easily confused in
some typefaces which in turn makes words harder to identify.

How to choose typography line height?

It depends upon what typeface is being used in design.

− Headings: 120%

− Legibility: 150% - 160%

Example:

18px font size: 27px line height

16px font size: 24px line height

Difference between serif and sans serif?

− Serif: Traditional feel

More legibility at smaller scales

9.5 font in printed books, serif helps you distinguish the

Letterforms and create flows as you are reading.

Example: Times New Roman

− Sans serif: Modern Vibe

Institutional look i.e. used for serious business app

Used for screens, Name on the maps, application

Examples: Helvetica, Arial, Clearview

PAGE 16
Accessibility in design. Explain it.
Accessibility in UI design is refers to providing equal access of the
service to all kinds of users.

The 3C concepts of accessibility:

Color Contrast accessibility

Clickable area accessibility
Common Content accessibility

How to achieve accessibility in design?

Accessibility in UI design is refers to providing equal access of the
service to all kinds of users.

Provide Sufficient contrast between foreground and background

Don’t use color alone to convey information
Ensure that interactive elements are easy to identify
Provide clear and consistent navigation options
Ensure form elements include clearly associated labels
Provide easily identifiable feedback
Use headings and spacing to group related content
Create designs for different viewport sizes
Include image media alternatives in your design
provide controls for content that starts automatically

Example:

News channel: Sign language news deliver is also present to deliver

new to the deaf people.

Building: Building with wheel chair accessibility.

PAGE 17
WCAG Guidelines (A vs AA vs AAA).
WCAG full form: Web content accessibility guideline developed by W3C.

WCAG 2.0 guidelines follow 3 levels of conformance:

− A: lowest level: 25 criteria: easy to achieve: 30 in 2.1

Non-text content (images and videos) must have a text equivalent.

Users must be able to access content using a keyboard only.

Forms must include labels or instructions, so users know what’s expected of

them.

Assistive technologies, such as screen readers, must be able to access content.

Information or instructions must not be conveyed through shape, size or color

alone.

− AA: mid-range: 13 more criteria i.e. 38: 50 in 2.1

Continuing with the theme of color, you’ve to ensure that all the
text meets color contrast requirements.
Text and background must use good color contrast. For example, have a
minimum level of contrast of at least 4.5 to 1.

Content should be organized under clear headings, using a logical order. For
example: A H1, followed by H2, H3 etc.

Elements that affect navigation should be consistent across the site.

The requirement differs somewhat based on the size of the text,

but actually pretty strict.

− AAA: highest level: 23 more criteria i.e. 61: 78 in 2.1

One can only use very dark colors on a very light background
and vice versa. Average website don’t target AAA conformance.
Contrast ratio between text and background is at least 7 to 1.

PAGE 18
 Pre-recorded video content must have a sign language translation.

Extended audio description should be provided for pre-recorded videos.

Design should be perceivable, operable,

understandable and robust.

If we don’t follow AA conformance, then

Accessibility barriers; Reputational damage; Missed business

opportunity; Poor User experience

Discrimination and Legal Issues:

Many countries have laws and regulations that require websites
to meet certain accessibility standards. Failure to comply with
these regulations can expose your organization to legal risks and
discrimination claims.

In some jurisdictions, non-compliance can result in financial

penalties, legal action, and damage to your reputation.

What is edge case in UI design?

Edge cases are the scenarios which are less likely to occur and which
are uncommon features of the requirements. It is not included in the
circle of primary function.

Example:

User forget both username and password.

Uploading huge file can collapse the system.

Very long name of a person.

PAGE 19
Handling edge cases like network errors, timeouts, or unexpected
server responses is also crucial, requiring appropriate error messaging
and fallback options.

Ideal frame size for different devices.

It depends upon what typeface is being used in design.

− Desktop: min – 1280*720: best choice for small laptops

Medium – 1366 widths: usually used for websites

max – 1920*1080

− Tablet: min – 601*962

max – 1280*800

popular – 768*1024

− Tablet: min – 360*640

max – 375*667

smallest– 320px

Ideal Button, forms and labels:

It depends upon what typeface is being used in design.

− Forms and labels:

Try to minimize the number of fields as much as possible.  This
makes your form less loaded, especially when you request a lot of
information from your users.

PAGE 20
 Try to avoid optional fields in forms. But if you use them, you
should at least clearly distinguish which input fields cannot be
left blank by the user.

You should avoid having a static default unless you believe a large

portion of your user’s (e.g. 90%) will select that value.

You should group related information in logical blocks or sets.

Details in the form should be asked logically from a user’s

perspective, not the application logic. For example, when you ask
billing details, it’s unusual to ask for the address before the full
name.

Input fields are what allow your users to fill in your form.
Depending on what information you ask, there are various types
of fields — text fields, password fields, dropdowns, check boxes,
radio buttons, date pickers and others.

− Buttons:
Button size should not be less than 42 pixels and a maximum of 72
pixels. The most preferred button size is 60 pixels at a minimum,
with 72 pixels optimal for certain users.

Looking at research studies, a 72 pixel button was preferred by older

users and overall produced the highest touch accuracy.

Another research study by MIT Touch Lab found that our finger

pads are between 10–14mm and our fingertips are 8–10mm. This
means that our minimum touch target size on buttons should be
10x10mm, but keep in mind that once our finger is over the button
then it’ll be hidden, so aim for a larger size button.

PAGE 21
 What is component and why it is important?
It elements that can be reused in the design. Layout, buttons,
typography etc.

Change in main component will be reflected in the instance

Instance can be updated separately.

RBG Vs CMYK?
 RGB color mixing is the primary color mode for digital designs (like web,
TV or phone files) while the CMYK mode is used for printed designs (like
T-shirts, flyers or business cards). 

 RGB – Red Green and Blue while the CMYK – cyan, magenta, yellow and
black

RGB –mix to create white whereas CMYK – mix to create black

RGB - 16.7 million possibilities & CMYK – 16 thousand color possibilities

RGB – Smaller file size and CMYK – large file size

CMYK – Stickers, Business cards, Stationery, Signs or billboards, Posters,

Flyers, Brochures, T-shirts

RGB – Web or app logos, Online buttons or graphics, Digital icons,

Online advertisements, Social media images, Profile photos, Social
backgrounds, Video, GIFs, Online infographics

What is T shaped and X shaped designer?

 The terms "T-shaped" and "X-shaped" are used to describe different
skill sets and areas of expertise in the design field.

1. T-shaped Designers:

PAGE 22
  T-shaped designers have a broad range of skills and knowledge in various
aspects of design, with a deep expertise in one specific area. The concept of
"T-shaped" represents the shape of the letter "T," where the vertical stroke
represents the depth of expertise, and the horizontal stroke represents the
breadth of skills.
 T-shaped designers typically excel in a specific design discipline, such as
visual design, interaction design, or user research, while also possessing a
good understanding of other related areas. They can collaborate effectively
with specialists from different disciplines, contributing their expertise while
also having a broader understanding of the design process.
2. X-shaped Designers:
 X-shaped designers, also known as "full-stack designers" or "unicorn
designers," have a combination of deep expertise in multiple design
disciplines. The concept of "X-shaped" represents the shape of the letter
"X," symbolizing the crossing of multiple disciplines.
 X-shaped designers are proficient in various areas of design, such as visual
design, interaction design, user research, information architecture,
prototyping, and front-end development. They possess a broader skill set
that allows them to work independently and handle different aspects of a
design project.
 X-shaped designers are often sought after in small teams or startups where
there is a need for individuals who can handle multiple design
responsibilities and adapt to changing project requirements.

User centric vs goal centric design.

User-centric web design and goal-centric web design are two approaches that
prioritize different aspects of the design process. Let's explore the characteristics
and focuses of each approach:

1. User-Centric Web Design:

 User-centric design places the needs, preferences, and goals of the users
at the center of the design process. It involves understanding the target
audience, their behaviors, motivations, and designing a website that caters
to their specific requirements.
 Key principles of user-centric design include user research, usability
testing, and iterative design based on user feedback. The goal is to create
a website that is intuitive, easy to use, and provides a positive user
experience.

PAGE 23
  User-centric design involves considerations such as clear navigation,
intuitive interfaces, accessibility, responsive design for different devices,
and content that meets the needs and expectations of the users.
Goal-Centric Web Design:
 Goal-centric design focuses on achieving specific business or
organizational goals through the website. It emphasizes driving desired
user actions, conversions, and meeting defined objectives.
 The design process involves setting measurable goals, creating persuasive
and engaging interfaces, and optimizing the website to facilitate user
actions that align with the business objectives.
 Goal-centric design may involve tactics such as persuasive design
techniques, call-to-action placement, conversion rate optimization, and
analytics tracking to measure the effectiveness of the website in achieving
desired outcomes.

The main principles of UCD are:

 Early involvement of end-users

 A clear understanding of the context of use and user needs
 Regular collection, analysis, and incorporation of user feedback
 Employing a user-centric approach to product development and
delivery procedures
 Utilizing an iterative design process with a continual goal to
improve user experience

Tips for creating user centric website:

Involve users from beginning

Create an iterative process

Be empathetic

a) Don’t ignore the data

b) Design for the correct demographics

PAGE 24
 c) Utilize CTAs
d) Listen to feedback
e) Keep mobile in mind

Goal centric design:

GDD supports the realization that products, websites, web

applications, and just about any experience out there will serve two
masters: the End Users and the Stakeholders, who are usually in
the form of the “business owners” behind the product or service.

Keep in mind that the Goals of the End Users and Stakeholders may
not be exactly the same. It is the merging of the two that results in
strong Goal-Driven Design.
People don’t buy what you do. They buy why you do it.
a) Determine the goal
b) Get buy-in from all parties
c) Eliminate waste

PAGE 25
 What is empathy map?
It helps designers develop empathy by putting themselves in the users' shoes and
considering their thoughts, feelings, behaviors, and motivations.

1.  Says: This quadrant focuses on capturing the verbal expressions of the user. It
includes their quotes, statements, and key messages related to the design
problem or context.
2. Thinks: This quadrant explores the user's thoughts and perceptions. It involves
understanding their beliefs, assumptions, concerns, and considerations that
shape their decision-making process.
3. Feels: This quadrant delves into the user's emotions and emotional responses. It
helps uncover how the user may feel in certain situations, their desires, fears,
frustrations, or aspirations related to the design context.

PAGE 26
4. Does: This quadrant describes the user's behaviors and actions. It includes their
observable actions, physical activities, and interactions relevant to the design
problem or context.

What smallest and largest font size for web and

mobile?
Web –

Caption/error messages – 14px,

body – 16px to 18px.

Heading – 1.96 times larger than body text. Eg; 18px body - 35 px for
heading, 30px for subheadings,

Mobile device –

min 12px, perfect size – 16px

Heading – 1.3 times larger i.e if 16px body then 21px heading, 18 px
subheading

PAGE 27