UX/UI Design 2021-2022 Tutorial for

Beginners The Complete Step by Step Guide to

UX/UI Design and Best Practices for designers with no
Experience

Tom
Mulligan
Copyright © 2021 Tom Mulligan
All rights reserved.
It is not legal to reproduce, duplicate, or transmit any part of
this document by either electronic means or in printed
format. Recording of this publication is strictly prohibited

Disclaimer
The information in this book is based on personal experience
and anecdotal evidence. Although the author has made every
attempt to achieve an accuracy of the information gathered in
this book, they make no representation or warranties
concerning the accuracy or completeness of the contents of
this book. Your circumstances may not be suited to some
illustrations in this book.
The author disclaims any liability arising directly or
indirectly from the use of this book. Readers are encouraged
to seek Medical. Accounting, legal, or professional help
when required.
This guide is for informational purposes only, and the author
does not accept any responsibilities for any liabilities
resulting from the use of this information. While every
attempt has been made to verify the information provided
here, the author cannot assume any responsibility for errors,
inaccuracies or omission.
 Contents
INTRODUCTION
CHAPTER ONE
What Is Design?
How is design related to technology?
What You Should Understand By UI/UX Design
Difference Between UI/UX Design
User Persona for UX Design
User Research for UX Design
UX Research in the Design Process
User Flow in UX Design
Wireframes in UX Design
UX research to define UX strategy
UX Design Prototypes
UX research for prototypes
CHAPTER TWO
Visual Design Principles in UI Design
Key principles
Understanding What Matters in Design Thinking
What Is Design Thinking?
What are the benefits of empathy?
What are the benefits of anticipation?
 What are the benefits of intuition?
What are the benefits of playfulness?
What are the benefits of creativity?
What are the benefits of refinement?
Tools for UI Designs
Creating Wireframes using Axure
Changing the Control Style and Attributes of a
Control
Creating Wireframes using Balsamiq
How to use Balsamiq Wireframes
What to watch out for in Balsamiq Wireframes
CHAPTER THREE
How to Create Expression
Why is expression important?
How to Create a Balance?
What is the balance?
How to Apply Contrast
What is contrast?
How to make a UI design more contrast-friendly
Using Form
Discovery
Design
Understanding Hierarchy
Understanding Alignment
 What is alignment in UI design?
What You Should Know About Sequence and
Pace
CHAPTER FOUR
Typography of UI Design
What is typography?
What is headline typography?
What is body copy typography?
What is icon font typography?
Using Typeface or Fonts
Typography on the Web
The basics of typography in web design
Non-Verbal Communication in UX
CHAPTER FIVE
Understanding the Anatomy of Type
What is the anatomy of typography?
Types of type elements
Selecting a font for headings
Selecting a font for body text
Selecting a font for subheadings
Choosing a font for large blocks of text
Choosing a font for small blocks of text
Printing UI Designs
Preparing a layout for the printing of your design
 Basic layouts for printing
What Is Serif Typeface?
What Is Sans Serif Typeface?
Getting Inspiration for Your Design
What are some places to get UI/UX inspiration?
How to Define the Brand?
The Branding Process
Choosing the Right Font
How to pick a font for your branding
Font Generator Sites
Free Fonts Online
Adding Bolding Text
Displaying Text
How to Add Meta Information
How to add Meta information in UI/UX design?
How to Do a Font Pairing
What is a Font Pairing?
Why it is important to do a font pairing
CHAPTER SIX
Readability in UI
What’s the impact of poor readability?
What makes a good UI design?
How to Get the Aspect Ratio?
CHAPTER SEVEN
What Are Design Systems
Using Figma
What Figma Does
Sketching
What Are Ligatures
How to Create a Typographic System?
CHAPTER EIGHT
Apply Geometry in Design
Geometric shapes for UI design
Why Are Grids Important
What Is Box Modal
What Are the Pros of a Modal?
Using Flex Box
What is Responsive Web Design?
Tips to Creating the layout
CSS Grid
Difference Between Responsive and Fluid
The Anatomy of a Grid
Grid systems in UI design
How to Align a Grid
CHAPTER NINE
The Psychology of Colors in UI Design
Significance of shadow in the design process
Color in typefaces
 Understanding Transparency Range
How can you use transparency in design
Transparent navigation
What Is Color Composition
Additive and Subtractive in Colors
Chromaticity of Colors
Applying Color Attributes
CHAPTER TEN
Understanding Microcopy
How to Do an F-Pattern Design
How to Do Shadows Design
CHAPTER ELEVEN
Prototype Design in Adobe Photoshop
How to Build Persuasive Products
Making use of psychological principles to
persuade
How to Create Sitemaps
Understanding What Motion Is
What Is Accessibility
Accessibility versus Usability
Accessibility guidelines in practice
CONCLUSION
 INTRODUCTION
User experience is the interaction between a
user and a product or service. A good UI
makes your users enjoy using the app and
makes them feel comfortable with the app.
Also, an efficient and good UI makes your
users navigate easily and find what they need
without having to make any complex
interactions.
This last aspect, in particular, is very
important when designing an app for
enterprise users. This is because, in this type
of application, there is a large amount of data
that users need to deal with. So, they need to
be able to find exactly the data they need and
don’t need to spend time finding where to
look for the information they need.
So, when designing your UI, you need to
keep in mind the different users you will have
and the different tasks that your users will
have when using the app. You will also need
to consider how the users are going to interact
with the app. You should have users with
different devices and screen sizes, and you
will need to think about how they are going
to interact with your app.
One of the key concepts for any good user
interface is simplicity. However, in order to
achieve a good user experience, there are
some other concepts we need to consider:
Context: Your users are the main actor of
your app. What do they need? Where do they
need it? What do they need to do? They are
not you.
User-centered: We can’t forget our users.
Think about how they will interact with your
app: Will they need to make any interaction
while using the app? Will they need to
change the design of the app?
Information Architecture: Is your interface
organized in the right way?
Usability: How is the app easy to use, and
can they navigate in a smooth way?
In this book, we will talk about the important
aspects of user interface design. It is focused
but not limited to creating experiences from
design briefs and also talks about improving
user experiences by listening to users’
feedback. This experience will help you learn
how to use design briefs as a tool to better
understand the customer, to better
communicate with them, and to get to know
the product better.
What do you want to achieve as UI/UX
designer? This guidebook is for you if you’re
interested in learning from basics to advance
of user interface design and if you want to
learn how to design an interface that doesn’t
suck.
 CHAPTER ONE

What Is Design?

As a kid, you may have played the game

where you were given two boxes, one box
was your current box of matches, and the
other box was a box of matches 100 years in
the past. The game is a race to see who can
light the first match in their current box first.
In the first game, you may have seen your
matches burn and die. It’s the same with
design.
Design is not a static process. It’s a very
dynamic, ever-evolving process. It’s not a
singular point of origin. Rather, it’s an
ongoing, iterative process of experimentation,
learning, reflection, and refinement. It is an
idea that’s been conceived and is being
executed. It’s not something that’s been
created and then moved onto the next project.
Design is an idea that is being carried out in a
series of different ways in different contexts.
What makes design ‘design’ is a variety of
different things.
How is design related to technology?
What makes design a thing worth talking
about? The simple answer is that it’s the way
that humans interact with their environments.
This includes physical things (like buildings,
devices, and systems), but it’s also what’s
created within these environments (content,
information, people, and products).
Technology is the tool that we use to create
and deliver these things to the people who we
are designing for. It can include a broad range
of different kinds of tools.
What You Should Understand By
UI/UX Design

The term UX design has been in vogue lately,

and there is little agreement on what it
actually is, or more to the point, what it
means. For the purposes of this discussion, I
will use the term as a more general term for
User Experience Design, which covers any
and all design aspects that affect the quality
of a user’s experience on a particular web or
mobile site or application.
Design, in general, is important
Design is not a specialized discipline; it is
one of the core values of a company.
Designing and building a user interface is
hard work and requires a great deal of
knowledge and skill. It is a difficult discipline
to master and requires years of learning and
experience. Many designers are under the
misconception that good design is only about
aesthetics, the visual appeal of a piece of
work. The reason why this is such a
misconception is that good design is a broad
concept that requires more than aesthetics.
In this topic, we’re going to look at what a
well-designed user interface is and what it is
not, but the first step is to define what a user
interface is in the first place.
A user interface is a tool for a user to interact
with a machine or computer. It is essentially a
graphical interface between a human being
and a machine, like your computer, your
smartphone, a website, or your television.
Designing the user interface can be divided
into two distinct elements, the first being how
the user interacts with the interface and the
second being how the interface looks.
The first element that should be taken into
account when designing the user interface is
how the user interacts with the interface. It is
not about how you feel about the design. It is
about how you feel about the way the user
interface enables you to interact with it.
How you feel about the design is important
but should not drive the decision-making
process, it is the interaction with the interface
that should drive the design decisions.
How do you feel about a particular design?
What about it makes you feel that way? The
most important element that comes to mind
when thinking about a particular design is
how well does the interface work?
A great example of this is your personal
computer. It can do a lot of things, and it
does, but one of the main characteristics that
set your personal computer apart from other
computers is how it works.
Every time you need to do something on your
computer, you interact with the interface, and
how you feel about the interface when doing
so is largely determined by the ease of use of
the interface.
I remember the day I received my first
personal computer; I remember how hard it
was to get the software working and how
much of a struggle it was to understand all
the instructions that the computer used to let
me use it. It took many years before I started
using the computer with the mindset that it
was not a toy but a tool.
It took many years for the interface to evolve
from a clunky, difficult-to-understand
machine to something that was user-friendly.
The interface of a personal computer is still
not easy to use, but there has been a
significant improvement in the user
experience of a personal computer in the last
few decades. For us, there is no difference
between a computer and a website, and I
think that most designers and developers
would agree on this.
Every web or mobile site and application that
you have worked on or currently working on
is essentially a user interface.
You should not see it like this, “today I will
be designing a beautiful website,” rather,
“today I will be designing a user interface
that is good enough to do what I need it to do,
so I can get on with my day.”
So, how can you do this? What are the steps
that should be taken to improve the user
interface?
The first step to improving a user interface is
to understand the user. You should always do
this before starting to design.
If you are in doubt about who the user of a
website or application is, you can always take
a look at the analytics for the site or
application. You can use this data to gain
insight into the user’s behavior on the site or
application. This can be in the form of
demographics, such as age, location, or
gender, or other behavioral indicators, such as
page views per session, page views per page,
and session length.
If the site or application does not have any
analytics, then you should try to get an idea
of the user’s behavior.
I do not know of any analytics tool that is
perfect, but some of them, such as Google
Analytics, are a good start.
For mobile applications, I suggest you use the
Google Analytics website and not the app
analytics. You will get more relevant data on
the website.
The second step is to understand the users’
needs. Once you understand the user, you can
then start to think about how you can design
an interface that enables the user to fulfill
their needs.
There are four basic needs that a user has
with respect to any user interface:

Getting access to information

Creating or updating information
Navigating the site or application
Taking part in the experience
1. Getting access to information
A user interface should have a navigation
mechanism that helps you to find what you
are looking for. There is a very fine line
between providing easy access to information
and creating an interface that is so cluttered
that it takes you days to find the information
that you need.
There are many techniques that you can use
to increase the ease of finding information.
One of them is to use the search bar, where
the user can type in some keywords and find
what they are looking for.
Another technique is to provide a list of links
to pages that might contain the information
that the user is looking for. This method is
best used in combination with a search bar.
When creating links, there should be a rule of
thumb that you should never create more than
two or three links to any given page.
In the case of a user interface that is being
developed for mobile phones, there should be
a section of the interface for accessing
contact information. This is a common
requirement of any mobile application; it
helps to keep a user’s contact information
handy.
A good way of finding the best way of
organizing the information that a user has is
to think about what data you would find the
most useful to have in the interface and then
start to group this data together. You can start
by thinking about your top 5, 10, or 20 most
important items, then put them together and
see what pattern emerges.
2. Creating or updating information
A user interface should also have a
mechanism for creating and updating
information.
This is particularly important in the case of an
online store, where a user can order products
and update their information as they are
creating or updating their information on the
website. The order form is a perfect example
of this. A user can place an order, update
their address or billing information, and the
information is saved.
Another example of a user interface that has a
great feature for creating and updating
information is a blog. You can update your
blog, and it will be saved on your blog or the
website, and it is saved as you are updating it.
Another instance of a user interface that has a
good user interface for creating and updating
information is a web or mobile application. In
the case of a mobile application, the ability to
update your information and save it is not that
important since you can save it to your
phonebook and then access it anytime you
want.
3. Navigating the site or application
The third aspect of a user interface that a user
should have access to is the ability to
navigate through the site or application.
This is a difficult aspect to design since it is
subjective. You can look at things like the
size of a mouse pointer, the number of clicks,
etc., to try and determine the size of a click.
A good example of a user interface that
enables the user to navigate through a site or
application easily is one where the elements
are clearly separated from each other.
In the case of a web or mobile application,
you should also have an option for users to
share their experiences with other users. This
could be through sharing pictures, videos, or
through comments, where other users can
read the comments.
4. Taking part in the experience
Finally, a user interface should have a
mechanism for the user to take part in the
experience that the website or application is
providing. This is a very broad term and can
be any of the following, such as commenting
on the site, creating your own site or
application, writing reviews, etc.
A great example of a user interface that
provides the user with a mechanism for
taking part in the experience is a forum. In
the case of a forum, you can either read the
comments that other people are leaving or
participate in discussions.

Difference Between UI/UX Design

The term User Interface, UI stands for user
interface, is used to refer to the screen layouts
and visual design of software applications
used to provide information or access control
to the users.
The term User Experience UX is used to refer
to the overall user experience of a software
product or service and the user expectation
that must be fulfilled by the product.
Here are some other terms to remember
and understand:
☐ Interface: A tool is called an
interface when it does not do any work
on its own. It only helps the user
perform tasks. The interface can be a
command line or a graphical user
interface (GUI).
☐ Graphical User Interface (GUI): A
graphical user interface (GUI) is a
computer interface that allows a user to
control a computer program by
manipulating graphical objects on the
computer screen, such as windows,
icons, and pull-down menus.
☐ User experience: In the context of
user experience design, the user
experience is a subjective experience
that people have when using technology
and includes all of the elements of
interaction, such as information, device,
and context. User experience design is
about designing technology that will
help people to create a good experience.
 ☐ User Experience design: This is the
field of design and research of what will
help people to create a good experience.
User experience designers work to
define, create and assess the user
interface design, usability, and overall
user experience.
☐ User interface design: In the context
of user interface design, user interface
design is a way to help people use a
software product or application. The user
interface design also includes the way a
computer system responds to user inputs.
There are many differences between the
design of a UI and a UX. For example, UI
design is about creating layouts for websites,
mobile apps, or desktop software
applications, while UX design is about
creating the experience of the software or
application itself.
Both UI design and UX design are important,
but UX design is more important than UI
design. The reason is that UX design is what
makes the application successful. When an
application is successful, people will want to
use it, and they will feel like they’ve had a
good experience using it.
But a well-designed UI can be successful and
even great, while a poorly designed UI could
be an eyesore and a nuisance to use. So, it is
important to do a good UI design to make
sure that you can create a good user
experience.

User Persona for UX Design

It is no secret that user personas have become
an extremely popular tool in the modern
world of online marketing. Why are they so
important, and how can you use them to help
with your business?
User personas are a personified version of
how an individual’s mind works, and they’re
used to communicate in an effective way with
your customers. For this reason, it’s not
surprising that many experts now recommend
that all marketing departments have their own
in-house development teams create personas.
The main aim is to help you better understand
the type of person who is likely to visit your
site or sign up for your service. You might
also be interested to know that it is not only
for web-based businesses! Personas are also
beneficial for marketing to mobile apps,
social media, eCommerce, games, and other
types of businesses.
The goal of a user persona is to create a
profile of the kind of person that your
audience will be. This can be done through
research or just by observing and listening to
the needs of your audience. This will not only
help you in creating more effective user
experiences, but it can also help you design
and market your products and services better,
too.
This is a really important topic to discuss, so
we are going to explain it in more detail. User
personas will be helpful when:
☐ When you want to create a successful
product or service.
☐ When you want to design and create
a user-friendly website or mobile app.
☐ When you want to get a deeper
understanding of your audience.
 ☐ When you want to better understand
your audience, their needs, and concerns.
The user persona is a way of creating a
profile of your audience. To do this, you need
to:
☐ Gather and analyze data about your
audience.
☐ Analyze how this data can be
organized and presented.
☐ Create a persona that is relevant to
your audience and relevant to your
product or service.
Once you have created a user persona, you
need to understand how it affects the design
process. The goal of creating a user persona
is to understand your audience better so that
you can communicate with them more
effectively. A user persona is an umbrella
term that refers to many different types of
personas. The most common ones include:
☐ Demographic persona.
☐ Behavioral persona.
☐ Experience persona.
☐ User role.
These personas are all relevant, but their
application can vary in different cases. User
personas are different from personas that are
used in UX research.
User Research for UX Design
UX is often associated with user experience
design. In practice, user research often
precedes the design process. It is easy to fall
in love with the first few research
participants. But as they become a familiar
part of your daily routine, it is important to
keep the users’ experience in focus.
The user research process for UX involves
collecting data to understand your users and
their problems. Research helps answer the
“why?” questions. Why do people visit your
site? What are they trying to accomplish?
Why do they leave your site?
The why questions will help you make better
products, and the who question allows you to
segment your users so you can focus on the
problem you can solve for them. Now, the
what question helps you better understand the
tasks you need to solve.
User research can also guide and support
decisions throughout the UX design process.
For example, a study can help you decide
when to build a prototype, which types of
users to recruit, and what research questions
to ask.
UX Research in the Design Process
While I am a fan of user research, I am not a
fan of the process that often accompanies it.
Most people use the research process to make
an argument for a product. That may be valid,
but it also puts the cart before the horse.
Before you start the research, you need to be
sure that it is the right product for your target
audience.
This process is very helpful when the product
is in a design phase, which means that it is
unlikely that the product will launch soon.
Good research can help identify and refine
your design assumptions. A research study is
not the only type of research that can be used
to refine a design. User interviews, usability
tests, and user reviews can also be used to
refine your design.
In practice, however, you will often have to
choose between user research and a design
sprint. User research is typically a slow, time-
consuming process. Design sprints are fast,
focused on solving a problem and building a
working prototype.
You might want to design a prototype based
on your research, then run a usability study to
see if users agree with the design. In many
cases, it makes sense to run a series of
studies. But in others, a prototype that works
may be enough.

User Flow in UX Design

As a designer, we always strive to ensure the
optimal user experience. That is the reason
we are always thinking and designing to
make the users the happiest and the most
effective. In order to design an optimal user
experience, it is extremely important to
understand and get to know the user better
and his/her journey.
User Flow is a method that helps us to get to
know the users better and their journey better.
It helps to understand what is important and
what isn’t. It is an abstract way of
understanding how people move from one
page to another.
A user flow is a path that a person takes in a
website and its sub-domains. It is the way
that he/she moves from the entry point to any
other point. When we are designing a user
interface, we are also making user flows. This
is why user flow is so important in UX
design.

Wireframes in UX Design
Wireframes are a common tool for
visualizing your product design. They show
the layout of an interface in a graphical form.
A wireframe shows your site’s page hierarchy
and the relationships between pages. It is a
quick way to show users what the final
product will look like. When building
wireframes, the first step is to sketch a design
on paper. In practice, I find that paper
sketches can be a very poor choice, as they
are typically a mess.
With the help of a software tool, the
wireframes can be created in a way that is
more usable. I prefer to create wireframes
using a tool like Axure or Balsamiq. You can
read more about Axure and Balsamiq on
another topic.
UX research to define UX strategy
UX strategy should address the following
questions:
☐ What will your site do?
☐ How will it work?
☐ Why do you want to design a specific
way.
As you think about your design, you can ask
yourself these questions. In practice, it is
useful to have an overview of all the different
types of research you will need to do, such as
surveys, interviews, user reviews, and
usability tests.

UX Design Prototypes

In UX design, a prototype is a quick and

visual way of exploring your ideas.
Prototypes help us define our solution, then
test the solution in the real world. Prototypes
are especially useful for creating solutions
that may seem too large or complex to tackle
in one go.
A prototype is a small, working version of a
solution. As with wireframes, you can use a
tool to create a prototype. UX design tools
are becoming increasingly easy to use. You
can find plenty of tools that can help you
design and prototype your ideas.
UX research for prototypes
The key to designing a usable prototype is to
focus on user needs. Prototypes are most
effective when they represent a real-world
problem. You are not creating a mockup. You
are designing a solution that will work in the
real world.
Good research helps you understand what the
user wants to accomplish. This is a different
kind of research from the kind you conduct
during the design process. You are not
interviewing your users in order to help them
with their problems. You are researching to
identify a problem that can be solved. When
building a prototype, focus on the user’s
experience. Remember to be pragmatic. A lot
of sites are not designed for the mobile user,
so don’t design for mobile-first. A prototype
that is too complex or that does not address
your user’s problem may fail.
 CHAPTER TWO

Visual Design Principles in UI

Design

What’s the first thing that you learn about

design? It’s all about balance. The same
principles of design apply to UX and UI as
well. Whether you’re designing web, mobile,
or desktop applications, it’s important to
remember the key principles of balance that
lead to good design.
As an aspiring UX/UI designer, you’re bound
to run across various design guidelines and
principles for web and mobile applications, as
well as desktop software. But there’s a bit of
a disconnect between these design guidelines
for web applications, desktop applications,
and even mobile applications. This is because
you learn these design principles while you’re
in school.
These principles are important, but they
aren’t the best starting point for designing
effective and user-friendly interfaces.
So how do we begin?
What’s the best place to start learning the
basics of visual design?
In the design principle of balance, balance
leads to better design. But there are a few
other key principles to keep in mind when
you start designing. The key to understanding
good design is understanding the design
principles at work behind it. It all starts with
knowing the basics of visual design, so let’s
get into it.
Key principles
Here are the four most important visual
design principles for beginners to remember:
 ☐ Balance
☐ Visual Balance
☐ Composition
☐ Aesthetics
Visual balance is the key to good design. You
can think of balance as the principle that
keeps the design together and not split apart
in any way. It’s the principle that keeps it
from looking like it was put together
haphazardly.
The key to good visual balance is
understanding the elements of the design, like
the title, body copy, and headings. As a
beginner, you’ll probably have more than a
few things that can be improved. That’s okay.
You’re not a professional designer yet. You’ll
have to balance that out by adjusting some
parts of your design.
You’ll learn to recognize a few visual
elements and their key features. Once you do,
you can learn to improve them in your
designs. For example, if your layout has too
many buttons in one section, it can easily be
made to look like a button factory. The same
thing can happen if you try to cram too many
elements into one section of the design.
Visual balance is about the size and shape of
the elements in a design. The smaller and
more similar the elements in a design are, the
better. The elements in a design can either be
similar or different, but not too different.
You should also pay attention to the size of
the text on your design. Text size is also key
to good visual balance. As you increase the
size of the text in a design, it should look the
same from font to font. It’s the same with the
colors of the design. They should look similar
throughout your design.
Visual balance is about a few things in your
design:
☐ The text sizes
☐ The amount of space between
elements
☐ The size of the elements
☐ The amount of contrast in the design
There’s a saying in graphic design that the
text is the most important element in a
design. That’s because the text is the first
thing a user sees in a design. A user will
probably skim the text first. The size of the
text and the placement of the text is all very
important.

Understanding What Matters in

Design Thinking

Design Thinking is a design methodology

that includes the following three steps:
☐ Ideation
☐ Construction
☐ Validation
These three steps are also known as a Design
Thinking process.
In this topic, we will discuss what Design
Thinking is and how it is different from other
methodologies, the benefits of using it, its
application, and how it is beneficial in both
business and personal projects.
What Is Design Thinking?
Design Thinking is a term used to describe a
design methodology that can be applied to
both business and personal projects. Design
Thinking is not a product; it’s more of a
design process. Design Thinking is an
iterative process that involves thinking of a
problem, researching the problem, and then
developing a creative solution.
Design Thinking is inspired by human design
and is based on the following five principles:
☐ Empathy
☐ Intuition
☐ Anticipation
☐ Playfulness
☐ Creativity
☐ Refinement
In the next few lines, we will talk about these
principles one by one.

1. Empathy
Empathy is the ability to understand the
feelings and emotions of others and the
ability to relate to people. It’s defined as the
ability to understand and identify another’s
perspective or experience.
One of the main concepts of Design Thinking
is empathy. Design Thinking involves the
ability to get inside the brain of the target
customer and understand their needs and
emotions. It involves understanding their
world and their perspective. Design Thinking
starts with a discovery phase where we gather
all the relevant information we can get and
understand the problem.
The main idea is to empathize with the target
customers and understand their problems,
hopes, and dreams.
What are the benefits of empathy?
It is beneficial to design as it is easier to
empathize with others and understand their
emotions, needs, and struggles.
It helps us to find solutions to complex
problems and can help the organization to
deliver products and services which are user-
friendly and customer-centric. In addition,
empathy is a key skill for a designer. It allows
us to design products or services that are
aligned with the target customer.
It is said that the best designers are
empathetic. They have an ability to
understand the customer, their perspective,
and their emotions. The main idea behind this
is that when you empathize with others and
understand their perspective, they will feel at
home and comfortable with your product or
service. This will help in creating a lasting
relationship.

2. Anticipation
Anticipation is the ability to imagine the
future. This is done by identifying and
imagining the consequences of our actions. It
is a key component of design thinking, and it
is essential to think of the future and try to
predict how our customers will act. It is
important to think ahead and try to predict
how the customer will use the product or
service.
What are the benefits of
anticipation?
It is useful in the context of design thinking
because it helps us to understand how people
will use the product and design the product
accordingly. It helps us to create products that
are aligned with our customers’ needs. It is
also a key part of agile software development
as it helps us to make changes to the product
or service during the implementation process.

3. Intuition
Intuition is defined as the ability to see things
in a certain way. Intuition can be defined as a
sixth sense or our gut feeling. Intuition is a
feeling of knowing something before you
know.
What are the benefits of intuition?
Design Thinking involves thinking
intuitively, and we use it as a tool to generate
ideas. It helps us to make creative decisions
and use our instincts. It is also useful for
design thinking as it allows us to think ahead
and take action without knowing the
complete picture. Intuition is also an essential
component in decision-making. We use our
intuition to make decisions without knowing
the whole picture.
The design thinking process involves
brainstorming, where the team explores their
ideas and comes up with many solutions. In
this step, we use our intuition to select the
best idea which is the best fit. This helps in
making decisions quickly, and we are able to
move on to the next steps.

4. Playfulness
Design Thinking is based on the principles of
playfulness, as it is essential to have fun and
be creative while working on a project. It
involves creating new and innovative ideas,
and it is important to see and develop new
ways of doing things. It is said that creativity
is important for the development of a human
being. It is essential to be creative and have
fun while working on a project.
In Design Thinking, we try to understand the
customer as a user, not just a problem, and
design solutions that are aligned to the
customer’s needs. In this step, the team plays
with the solutions and develops new ideas.
What are the benefits of playfulness?
It is useful in designing because it allows us
to create new solutions, innovate, and take
action. It also helps us to see and understand
the world from a different point of view, and
it helps us to develop a better understanding
of ourselves.
Design Thinking also helps in improving our
thinking and improving our ideas. It is a
creative activity, and it allows us to be more
creative and innovative.

5. Creativity
Design Thinking is an activity that is based
on the concepts of creativity. It’s based on the
ideas of playfulness and is a way of designing
and creating new ideas. In the initial phase of
Design Thinking, we try to gather all the
relevant information, and then we develop a
problem statement or user story.
We then use these initial ideas to explore the
problem and generate many ideas. In this
step, we try to create solutions that are
aligned with the customer’s needs.
What are the benefits of creativity?
Design Thinking is a creative activity, and it
helps in the development of a better
understanding of ourselves and the world
around us. Creativity is a process of making
new ideas that are unique, fresh, and
innovative. In Design Thinking, we need to
develop a creative problem statement to
explore the problem.
In this step, we try to explore new ideas and
explore the world from a different
perspective. It is also a key part of agile
software development. The team members
are encouraged to develop new ideas and
solutions, and they are encouraged to play
and explore different ideas.

6. Refinement
In this step, we test our ideas to make sure
that they are aligned to the customer’s needs
and are appropriate. We refine the idea and
then create a prototype which is the first
working model. We also validate our
prototype with the customer to make sure it
meets their needs.
What are the benefits of refinement?
Refinement is useful in design thinking
because it allows us to test our ideas and see
if they meet the customer’s needs. It helps us
to improve our idea and ensure that it meets
the customer’s needs. The refinement step
allows us to create a prototype and validate it
with the customer to ensure that the prototype
meets their needs.
The Design Thinking process is an iterative
process that involves a series of steps and
processes which are repeated many times. It’s
based on creativity and is a series of
processes that can be applied to both business
and personal projects.

Tools for UI Designs

Design tools help you to create layouts,

images, icons, graphics, websites, and more,
which in turn helps you to create beautiful,
appealing, and attractive designs that are
perfect for any kind of web-based project.
Some design tools are more focused on the
website design; however, others are perfect
for graphic design, logo designs, and even
logo designs. Some are great for creating
mock-ups, and some are perfect for designing
print media.
In this topic, we’ll introduce you to the top 7
best tools for UI designs 2021, based on their
reputation, popularity, and ease of use.
Let’s start.

01. Adobe XD
Adobe XD is a vector-based tool that focuses
on designing and previewing the UI, which in
turn helps you to create more beautiful
designs, and it’s perfect for designing
anything, from print, UI, websites, apps, and
more.
There are two main things that you can do
with this tool. You can create an asset
directly using Adobe XD, or you can import
from other programs or assets into Adobe
XD. Adobe XD has a variety of different
tools and elements for designing your
designs. You can use shapes, arrows, icons,
text, shapes, and images to create your
designs.
It also has a range of other features that are
useful, such as:
✓ A wide variety of symbols
✓ A wide variety of fonts
✓ A powerful library for designing with
icons and symbols
✓ A live canvas for testing your designs
✓ Various styles for your designs
✓ A wide variety of layouts and
arrangements

02. Figma
Figma is a cross-platform (Windows, Mac)
tool that is available for free. It is a browser-
based tool for creating prototypes and
mockups that are perfect for designing
websites and mobile apps. It works by
importing your assets from Sketch, Adobe
XD, and other tools.
The best thing about Figma is that you can
design your UI in a more efficient way by
having an extensive set of elements and
layouts at your disposal. You don’t need to
use complicated codes to create your design.
This tool also offers various collaboration
options that are perfect for large-scale
projects.
Figma offers the following features:
✓ Import images from Sketch,
Photoshop, and Adobe XD
✓ Preview your design in full-screen
mode
✓ Drag and drop your components to
rearrange and position them
✓ An unlimited number of components
at your disposal
✓ Multiple designs per page and per
project
✓ Export your design to PSD, PNG,
PDF, SVG, JPEG, and more
✓ A powerful tool for designing
responsive layouts
✓ Support for mobile, tablets, and
desktop
 ✓ Live canvas for testing your
prototypes and designs
✓ Share and collaborate with others via
your team or individual accounts

03. Framer
Framer is a tool for prototyping mobile apps
and websites. It’s perfect for wireframes and
user interfaces. It can be used to create
mobile apps, websites, UI designs, and
wireframes for both web-based and mobile-
based apps. It’s a cross-platform tool that can
be used on Mac, Windows, iOS, and Android
platforms.
Framer offers an excellent set of tools that are
perfect for designing and previewing user
interfaces:
✓ UI builder
✓ CSS builder
✓ Components
✓ UI layout
✓ Wireframe
✓ Mockup
✓ Animation
 ✓ Screen sharing and video recording
✓ Design collaboration features
✓ An excellent tool for designing
wireframes

04. Sketch
Sketch is an excellent tool for designing and
creating all kinds of creative designs and
mockups. It’s the industry’s leading vector-
based design tool. It’s the perfect tool for
designers and anyone who loves creating
designs and UI mockups. It’s one of the most
widely used tools in the industry. It’s the
world’s most popular vector-based graphic
design tool.
It offers a wide range of tools and elements
that are perfect for designing UI mockups:
✓ Vector shapes
✓ Live editing and preview tools
✓ Layer styles
✓ Gradients
✓ Color palette and swatches
✓ Layers and paths
✓ Shadows, bevels, and stroke
 ✓ Advanced typography features
✓ An amazing range of fonts
✓ Artboards
✓ An array of tools for drawing and
editing
✓ An impressive number of export
options, including JPEG, PDF, PNG,
SVG, and more
✓ An array of themes

05. SketchFlow
SketchFlow is a vector-based tool for creating
beautiful designs and mockups. It offers a
wide range of tools and features that are
perfect for creating beautiful, professional
designs. This tool is one of the most powerful
and popular tools in the industry. It’s a
perfect tool for creating both 2D and 3D
designs.
It offers an impressive range of features that
are perfect for designing a range of creative
designs:
✓ Layer styles
✓ Strokes and fill
 ✓ Text and symbols
✓ Gradients, bevels, and reflections
✓ Layer effects
✓ 3D effects
✓ A variety of fonts and fonts styles
✓ An impressive range of colors
✓ Custom icon creation

06. InVision App

InVision is a web-based app that is perfect for
designing and prototyping web-based
interfaces. It’s a browser-based tool for
creating mobile- and web-based prototypes
and is used by various web-based apps and
startups. It’s a great tool for creating UI
mockups, prototypes, wireframes, and much
more.
It has a powerful set of tools and features that
are perfect for designing websites and apps:
✓ Design library
✓ Multiple screen designs
✓ Components
✓ Mockups
✓ Wireframes
 ✓ Animation
✓ An excellent tool for designing
prototypes and mobile apps
✓ Live preview, editing, and preview
✓ An impressive range of components,
layouts, and shapes

07. Proto.io
Proto.io is a free web-based tool for
prototyping and designing UI mockups. It’s
one of the best tools for creating prototypes
and UI mockups for mobile apps, websites,
and web apps. It’s a web-based tool that is
perfect for designing and creating a range of
UI mockups.
Proto.io offers an impressive set of tools that
are perfect for designing anything:
✓ Components
✓ Mockups
✓ Wireframes
✓ Animations
✓ A live canvas for testing your design
✓ Multiple screens and layouts
✓ An easy-to-use tool
 ✓ A powerful tool for designing and
prototyping
✓ An impressive number of themes and
a variety of UI colors
✓ An impressive range of export
options, including JPEG, PDF, PNG,
and more
✓ An array of icon and symbol libraries

Creating Wireframes using Axure

Axure RP is the next generation of Axure.
Based on the industry-leading Balsamiq,
Axure RP features a full suite of powerful
modeling and prototyping tools for rapid,
collaborative, cross-media, and cross-channel
design. It provides a complete solution for
wireframe, prototype, and interactive media
applications. Axure RP includes over 50+
modeling and prototyping tools and a single
environment to develop, model, and share
interactive wireframe and prototype
applications.

✓ Work Environment
(1) Toolbar and main menu
Open, save, and format files, as well as create
forms and specifications, are all typical
processes that may be automated.

(2) Sitemap panel

The hierarchy of designed pages may be
added to, deleted from, renamed, and
organized (including wireframes and
flowcharts).
(3) control panel
Wireframe and flowchart controls are
included in this panel. You may also use pre-
existing component libraries (*.rplib files) to
create your own component libraries.
(4) Panel of Modules
This is a reusable page for adding, deleting,
and renaming modules, as well as organizing
the module categorization hierarchy.
(5) Working space for wireframes
The page workplace is another name for the
wireframe working area. The wireframe
workspace is where you’ll do most of your
prototyping. You may create wireframes,
flowcharts, custom components, and modules
in this section.
(6) Page Annotation and Interaction Area
At the page level, you may insert and
organize annotations and interactions.
(7) Interactive control panel
Configure how controls interact, including
link, popup, dynamic display, hiding, and so
on.
(8) Suspension control panel
Control functionality can be suspended here.

✓ Interface Functionality
(1) Panel of navigation: You must first
consider the interface structure and determine
the content and information level before
developing a wireframe or flow.
You may utilize the page navigation panel to
pick the page to create after describing the
interface layout. You may utilize the page
navigation window to manage the planned
pages by adding, deleting, and reorganizing
the page structure.
Adding, deleting, and renaming pages
To insert a page, choose the Add Subpage
option on the panel menu, then select the
Delete Page option to remove it. To rename
the page, right-click and pick “Rename Page”
from the selection.
Sorting and organizing pages
You may rearrange the page level and shift
the page arrangement up and down in the
page navigation panel by dragging the page
or clicking the sort icon on the toolbar.
Access the design page in the page navigation
panel, then double-click the page to open it in
the wireframe design panel.

(2) Controls: Controls are user interface

components that are utilized in the creation of
wireframes (or wireframe diagrams). The
Control Panel comprises controls that are
often used, such as buttons, pictures, text
fields, and so on.
Instructions on how to include controls
To add a control, drag it from the Control
Panel to the Wireframe panel using the
mouse cursor. To copy controls from one
wireframe to another, utilize the Ctrl + C
keyboard shortcut followed by the Ctrl + V
keyboard shortcut to paste.
What is the best way to handle control?
Adding controls to the wireframe is as simple
as clicking and dragging the control where
you want it to go. Also included is the ability
to resize, move, and modify numerous
controls at the same time. You can also
combine, sort, align, set, and lock controls,
among other things. All these tasks may be
carried out either the control’s right-click
menu or the buttons on the object’s toolbar,
depending on the situation.

Changing the Control Style and

Attributes of a Control
There are numerous methods for changing the
style and characteristics of a control:
Double-click with a mouse: Double-clicking,
a control with the mouse, allows you to alter
the attributes of the control that are often
utilized. For instance, double-clicking an
image control will allow you to import a
picture; double-clicking a drop-down list or
list box control will allow you to change the
entries in the list.
Toolbar: To make changes to the text font,
background color, border, and other aspects
of the control, click the button in the toolbar.
The right-click menu has the following
options: The right-click menu of control has
options for editing some of the control’s
unique settings. These qualities differ
depending on the kind of control.

(3) Comments: You may include comments

in the control to provide further information
about the control’s operation.
Insert Feedback
Add comments to the control by selecting it
in the wireframe and then editing the value
entered in the field in the Comments and
Interactions panel in the Comments and
Interactions panel. The label box at the top of
the panel allows you to give the control a
unique identification.
Custom fields
Customize Annotation Fields and Views can
be accessed from the main menu ‘Wireframe’
or by clicking “Customize Fields and Views”
in the annotation header of the panel. The
Customize Fields and Views dialog box will
appear, and you can add, delete, modify, and
sort annotation fields in the dialog box.
Adding a remark to the control will result in a
yellow box appearing in the upper right
corner of the control, known as a footnote,
showing in the top right corner.

(4) Page Notes: Page notes may be used to

describe and explain the content of a page.
Add Page Notes
You may include page notes in the wireframe
by using the Page Notes panel, which is
located at the bottom of the wireframe.
Notes on the administration page
Because page notes may be customized, you
can provide various notes to different persons
to match their specific requirements. Test
Cases and Operating Instructions are just a
few examples of the numerous sorts of page
notes you can include.

✓ The Interaction Design

(1) Interaction Control: When designing
wireframe controls, the Control Interaction
panel is used to specify their behavior, which
may include anything from basic links to
more complicated RIA behaviors. Specific
interactions may be tested and implemented
in the prototype that will be developed in the
future.
Defining the interaction of the control, which
is comprised of events, situations, and
actions, may be done in the control
interaction panel.
The interface is launched when the user
clicks on a button, enters a cursor into the
interface, or moves the mouse away from it;
each event may include many scenes, which
are the requirements that must be completed
once the event starts; events are fired when
the user launches the interface;
There are several activities that may be
performed by each scene, such as opening
connections, viewing panels, concealing
panels, and moving panels.

(2) Select a link: The following instructions

demonstrate how to pick a link from a control
button on your computer:
1. To begin, drag a control button to the
wireframe and pick it from the drop-down
menu.
2. Choose the “On Click” event in the control
interaction panel by double-clicking it. A
dialog box titled “Interaction State
Properties” will emerge, from which you can
choose the action to do.
3. In “Step 2,” choose the option “Open link
in current window” from the cut menu.
4. In “Step 3,” pick “Link,” and then in the
popup connect properties dialog, you may
choose which website to link to or enter the
URLs of additional websites to link to.
As an alternative to doing the procedures
outlined above, clicking Quick Link at the top
of the Control Interaction panel and selecting
the page to link from the popup Link
Properties dialog is the fastest method to
create a link.

(3) Action Set: In regards to basic links,

Axure includes a variety of sophisticated
actions that may be executed in any scene
that is triggered by a trigger. The following
activities are supported by Axure:
❖ Start a new tab or window in the
current window
❖ View a web page in a popup window
❖ In the main window, go to a page.
❖ Close the recent window
❖ Open a new tab or window and go to
a page.
❖ The dynamic panel’s state should be
set to “show..
❖ Display the dynamic panel.
❖ Disable the dynamic panel.
❖ Changing the status of the dynamic
panel’s display (showing/hiding) may be
done here.
❖ Move the dynamic panel using either
absolute coordinates or relative
coordinates to get the desired result.
❖ Set the value of a variable or a
control variable.
❖ Start a new tab in the browser’s main
window.
❖ Continue scrolling until you reach the
image map location.
❖ Activate the following tools: Convert
the state of an item to a state that is
accessible.
❖ Tools may be disabled by selecting
“Disable Tools” from the drop-down
menu. Convert the state of an item to a
state that is not accessible.
❖ Waiting period(s): How many
 milliseconds (ms) should be elapsed
between this action and being
performed.
❖ Display the text description of the
activity in addition to the visual
description.

(4) Multi scenarios: A sequence of events

may include multiple scenarios, each of
which can conduct operations or interact with
the other scenarios depending on the
circumstances.
(5) The following page-level trigger event is
supported by the event hub: On-Page, Load is
a function that is performed when the
prototype loads the page in question.
The On-Page Load event for the page is
specified in the Interactions panel of the Page
Notes panel, which is accessible through the
Page Notes panel. Scenes are added to events
in the same manner that control events are
added to events.

Creating Wireframes using Balsamiq

When you start building a wireframe, one of
the most valuable assets that you create is the
wireframe itself. Your wireframe not only
serves as a guide for how the real thing will
look but also provides an opportunity to
create a design language for your brand. And,
if you’re working with other designers or
developers, a wireframe also saves you from
having to explain over and over again that the
site will have the following:
A full-screen image at the top
An image of a header, with an area to type
the URL to the page
But, how can you make wireframes even
better and make them a useful tool for your
development team? The best way to get that
done is by using wireframes and wireframing
software.
How to use Balsamiq Wireframes
For this topic, I’ll be focusing on using
Balsamiq wireframes to create wireframes. It
may sound odd to some, but in my
experience, a wireframe is a really important
tool that you can use to get a clear vision of
how the final site will look like. In addition to
that, you’ll be able to see how the wireframes
you create can provide a real asset, not only
for the user but also for the development
team. In this article, we’ll take a closer look
at how to wireframe and how to use
wireframes.
Wireframing in Balsamiq is pretty
straightforward. You can open a blank page
and start sketching out the elements of the
page in the drawing window. There’s not
much to say about that—a blank page with a
sketch of the page. As you can see, you can
use Balsamiq’s sketch to wireframe out any
element that you like.
You can also choose to sketch out the
navigation as well. If you’re not a big fan of
wireframes, you can even skip them entirely
and just create a sketch of the page.
When you’re done sketching out the page,
you’ll be presented with a preview of what
the page looks like. It’s here that you can
make any changes you wish.
What to watch out for in Balsamiq
Wireframes
If you’re a new user of Balsamiq, you may
not know some of the things to keep in mind
while using Balsamiq wireframes. That’s why
I’m going to go over them below:
1. Use wireframes
The first thing that you should keep in mind
while using wireframes is that wireframes are
only there to help you create the page and see
what it will look like. You can’t actually use
them to develop anything. That means, for
example, that if you want to use Balsamiq
wireframes to create your logo, then you need
to be using another tool, such as a vector-
based tool like Adobe Illustrator, or an image
editor such as Photoshop.
If you want to use wireframes, you need to be
using them as a tool to help you develop and
design the final page, but not to create a logo.
2. Keep it simple
When sketching out a page in Balsamiq, the
first thing that you should keep in mind is
that the sketch is not a finished product. You
shouldn’t spend a lot of time working on the
sketches, as you don’t want the wireframe to
look messy and unorganized. If you do, then
you may end up spending a lot of time
redoing the sketch.
You should keep your sketches simple. You
should start with the essential elements that
you need to design and build the page and
then add more on top of it.
That means, for example, that if you are
planning on designing the header of your
page, you should keep it simple. The header
of the page will not be its final design. It will
just be a sketch that helps you understand
what you can expect when you’re finished.

3. Be flexible
The last thing that you should keep in mind
when sketching out pages in Balsamiq is that
you should be as flexible as possible. As I
mentioned above, wireframes are used as a
tool to create a page and help the
development team to have an idea of how it
will look like.
But the truth is that you may end up with
more pages than you expect. That’s why,
while wireframing out the elements of the
page, you should be as flexible as you can. If
you create a wireframe of your site
navigation, and the site does not have
navigation, you may end up with navigation
in the sketch. Or, if you are sketching out the
main content on the page, you may end up
with too much information in the sketch.
 CHAPTER THREE

How to Create Expression

Expression is defined as the process of design
that involves conveying the emotions or
information being conveyed. For example, an
interface design that includes the expression
of a smiling face to convey happiness might
be considered expression design.
“Emotion” is used to describe the feelings
associated with a task and may include
information such as “confusion” or
“surprise.”
“Information” refers to the details or structure
of a concept, object, or task. “Emotional”
design might emphasize information design.
“Visual” expression refers to how an
interface design appears. Visual expression
includes a variety of effects and styles. These
include color and design, as well as typeface
and layout.
“Emotional” expression refers to how an
interface design affects the viewer. Emotional
expression includes color and design, as well
as sound and animation.

Why is expression important?

There are several reasons that expression is
important in user interface design.
Expressing the emotion associated with the
task
The best way to convey information to the
user is to do it in a way that makes the
information understandable. This usually
happens when the user is not distracted by
other tasks or when he or she is doing
something else at the same time, such as
thinking or working on something else.
This means that when the user interface is
doing a task for them, it should be doing it as
a task, not as something else. For example, a
screen with information, such as a menu, can
also be used to ask questions and provide
instructions. In this way, information can be
provided using a design that is easily
understood.
The way we express ourselves and the
emotions we are associated with are part of
our personality. The emotions we use to
convey information can be associated with
our experience with technology or other
things that are part of our personality. If we
have used a computer for a long time, for
example, it is not unusual for us to have a
strong emotional reaction to a particular
interface. In a similar way, emotions and
feelings can affect how we react to the
interface.
Some of the emotions that users are
associated with include:
❖ Surprise
❖ Fear
❖ Disgust
❖ Sadness
❖ Happiness
❖ Disgust
The way in which an interface design can
convey information through expression is
through color, type, layout, and sound. By
using these, you can give users a feel of how
the information on the screen is presented. By
expressing the emotions or information
associated with the interface, you can convey
the intended mood or message to the user.

How to Create a Balance?

A few months ago, I had a very interesting
conversation with a designer friend of mine
who works at an agency. He said he was
really excited about the fact that he was able
to create a really strong balance in his work.
I’m going to explain what he meant and why
it is important for designers to understand
how we can achieve that.
The designer explained that he’s working on
a new project right now and that there are
some elements that are really easy to create,
but when you try to put them all together,
everything just looks too crazy. The designer
told me that in order to achieve balance in his
work, he needed to think about his projects as
layers. He mentioned that his projects have a
UI, a UX, and a marketing layer. That’s how
he approaches them.
In order to create a balance, it is very
important to make sure that the layers have
different aspects to them. They should look
different and have different goals. The main
thing here is to ensure that everything is in
balance. It’s a really tricky topic because a lot
of people are not sure of what balance is.
What is the balance?
Balance is really simple. It’s a way to make
sure that things work well together. For
example, we might think about a table.
Imagine that we want to create a table that
has a certain aspect. It should be centered; it
should be a good table. Now, imagine that we
have a design and everything looks nice and
balanced.
You can take that design and put it anywhere
in the world. It’s going to look nice and
balanced. But, if you start to add another
element to the design, for example, the table
is no longer centered, or it’s no longer a good
table. We will have to change the design in
order to make sure everything still works
well. This is why we call that a balance.
The key here is not to overdo it. It’s not the
case that if we do too much that we are going
to end up with a bad design. For example, if
we want to create a balance, we need to be
mindful of what we add to the design. If we
start to design a lot of small features in the
design, we may end up with a design that is
too busy.

How to Apply Contrast

As designers, we often overlook the
importance of using contrast in our designs.
In this tutorial, we will learn to apply contrast
in UI design and explore its importance.
We’ll go through what exactly is contrast,
how to apply contrast in UI design, and how
to choose colors for contrast.

What is contrast?
Contrast is a visual difference between two
different elements. Contrast is a difference
between two different things on the same
line. It is not a question of what the objects
are or are not, but a matter of perception.
If a black border is placed on the top of a
white background, it would appear as if they
are the same thing. However, if the border is
placed at the bottom, it would appear as if
they are not the same.
When we view a document, we know the
differences between black and white even
though they may appear as the same thing
when viewed from a distance.
A contrasting border, therefore, appears to
separate one element from the next. The
border color is also a consideration. If the
background color is white, the dark color will
help create contrast and help your user
understand where the edges are.
But why does contrast matter in UI
design?
Because contrast makes our text and graphics
clear.
It helps us distinguish one type of text from
the next.
When used properly, it makes the page more
readable.
How to make a UI design more
contrast-friendly
1. Background Images
Background images are often ignored by
designers, but they are a great way to bring
out color contrast. When placing images
behind the text, it is very important that the
image is in focus and is at the same size and
color as the text.
This will increase the contrast, making your
text more readable. A common mistake made
by designers is to have background images of
an entirely different color than the page
background.
Make sure the background image is the same
color as the page background and keep the
color to a minimum. If the background image
is placed on a dark background, it will create
greater contrast and help the text read better.
2. Darken the Page
If the page is dark, it is best to keep the color
scheme simple. We are more likely to read
text and graphics when they are brighter and
easier to see.
Use a darker color for your main text. It is
also advisable to use a slightly darker color
for the links in website navigation.
3. The Font
The next thing to consider is the typeface.
Choose a typeface with high contrast between
the different characters. In other words,
choose a font that can easily differentiate
between capital, lowercase, and numeric
characters.
The size of the font should also be
proportionate to the size of the text. The
small size of the font should not be the only
size used. Choose one typeface and use it
consistently throughout the page.
4. Text Color
When choosing colors for text, be careful of
the way it is displayed. Use a dark color for
the main text. Choose a light color for the
heading. It will help the text stand out.
5. The Contrasting Color Scheme
The colors you use for text and graphics
should be chosen carefully. A bright, intense
color can attract attention and create a strong
impression on the viewer. However, a color
that is too intense can be distracting and may
be harder to read.
It is best to use a contrast color for your main
text and navigation. This will help to create a
clear separation between the text and the rest
of the page. Colors used for navigation
should be kept to a minimum. Avoid using
too many colors, especially if you have a dark
background. The background color should be
light and keep the contrast to a minimum.

Using Form
Forms are used in many situations, such as
creating a customer order, creating a purchase
order, and managing a customer relationship.
In this article, we’ll focus on UI/UX forms
that are part of a purchase order, but the
concepts can be applied to other forms as
well.
To design and create forms, you’ll typically
use a form builder tool or a form editor
within a content management system. A form
builder tool can be a software-based tool,
such as Microsoft Word’s Insert > Form or
Publisher’s Create > Form feature or a user-
friendly website interface.
The process of form design can be broken
down into the following phases:
Discovery
In this phase, you begin by determining the
needs of the form or what purpose it is to
serve. It could be that you’re just creating a
form to gather information. Perhaps the
information will be collected, but it will never
be used again. Or maybe the form will be
used to enter or confirm data. The main point
is, the reason for the form should be
determined before designing it.
Design
In this phase, you design the form.
Depending on the purpose of the form, you
may need to use a graphic designer or front-
end developer to develop it.
The design should be clear and concise. It
should also be useful to users to gather,
process, and confirm their information. You
can include the steps to complete the form as
well as for instructions on how to complete
the form. Make sure that your form is simple
and easy to use because this is often the first
impression that users will get of your form.
If possible, a form builder tool can be used
for the majority of the form’s design. A web-
based form builder tool such as Formsite
allows designers to quickly and easily create
forms and collect the information using
HTML and JavaScript. If using a web-based
form builder tool, be sure to test the form
thoroughly to ensure it is working as
expected. If using a proprietary tool, make
sure to test it extensively to ensure that it is as
functional and easy to use as expected.
If using a form builder tool or web-based
form builder tool, make sure the form will be
usable in all the browsers and operating
systems that will be using it.
Layout
In this phase, you layout the form. Once you
have a solid design in place, it’s time to
layout the form on a page or layout the form
on a screen. A common approach is to break
the form into sections, with each section
having a title, label, input field, and submit
button.
When laying out the form, it’s important to
make sure it’s readable, clear, and consistent
with the rest of the page. Use proper spacing,
and apply formatting such as color and font
style, as needed. You may also need to
provide guidance and instructions to users on
how to complete the form.
In the case of a purchase order, you may want
to provide some sort of visual feedback to
users that their form is being collected and
will be submitted. You may also want to
confirm that a user successfully submitted the
form. In this case, you would typically set a
value such as a variable within the form that
indicates whether the form has been
submitted or not. This value can then be used
to provide feedback to the user. You can set a
value for this to be “0” when the form is not
submitted and set the value to “1” when the
form has been submitted.
Finally, make sure that the design of the form
is responsive. If you want your form to look
the same across different devices, you need to
be sure that the layout of the form adjusts as
needed. You’ll typically make this adjustment
by using media queries to display or hide
elements of the form depending on the
device’s screen size. You can make it so that
a phone-sized device shows a mobile version
of the form, and a tablet or computer displays
a standard version of the form.

Understanding Hierarchy
Visual Hierarchy is a technique for arranging
the elements of an interface in a way that
makes them easier to understand and use.
Visual hierarchy helps a user to focus on the
important content, which is often in the center
of an interface. It helps to keep the interface
organized, clear, and easy to use.
It is based on Fitt’s law which says:
“When people are presented with more
options in a list, the selection rate declines.
But people do not always have the same
number of choices. Some people get to
choose; others have to choose.”
Visual Hierarchy has three parts:
Visual Hierarchy, visual order, and the
hierarchy of information.

In the first part, we consider all the

components of the interface.
In the second, we look at the visual
arrangement of the elements of an
interface.
In the third, we look at the hierarchy
of information.
Let’s see an example of this:
For example, let’s consider a navigation
menu on a website.
The visual hierarchy is as follows:
The menu items are arranged in order of
importance.
This is the visual hierarchy of a navigation
menu. But the importance of a component is
not the same for everyone. So, it’s better to
understand and implement the visual
hierarchy based on the needs of the users.
When designing an interface, we consider the
users and their needs before designing a
navigation menu. This is the reason why we
use the visual hierarchy in UI/UX design.

Understanding Alignment
You’re a web designer, and you want to
create a beautiful, responsive website. It’s a
complex project, so you’ve decided to start
with the user experience (UX). You need to
plan, write and design each page of your
website.
The problem is, when you write the content,
you don’t consider the usability of your page.
If a person finds it hard to read or understand,
then the visitor will not stick around. You’re
losing people, and they might never come
back.
So, what is the solution? You start with
designing your pages, not writing.
Designing an effective page requires a
specific approach. You need to look at the
whole site, including all its elements: the
layout, typography, colors, images, and any
other resources you use. You must
understand that a website is not a piece of
paper but a collection of interactive pages
that can be used by your visitors. It’s your
responsibility to design a set of usable pages,
and your job is to make sure that the design is
effective.
What is alignment in UI design?
Alignment is used to ensure that the text
and/or icons within a UI design are laid out in
a specific way. The most common use of
alignment is when we want to create an
element that can be easily scaled in different
screen sizes and/or aspect ratios, such as a
button or text box. Alignment can be created
using the Alignment option within Photoshop
or by using the Photoshop Shape tool to
create a rectangle or a circle and align it to
the left.
Let’s look at some of the most common
alignment issues in web design:
Margins
Margins are a good tool for creating
separation between elements. They have the
same effect as a wall, and you can use them
to put your content in order.
There are several ways to use margins:
Add margins to the container of each
element. This is the most basic technique, and
it’s a good way to make sure that your
content is aligned. You can use either a
negative margin or a percentage.
Add margins to the container of each
element. This is the most basic technique, and
it’s a good way to make sure that your
content is aligned. You can use either a
negative margin or a percentage.
Add margins to each element individually.
This is similar to the previous approach, but
instead of creating a negative margin on the
container, you create it directly on the
element. This makes things a little trickier
since you will need to make sure that you add
the same margin on every element, or else it
won’t work.
Align an element to the left or right. You can
use floats and clear. If you use float, make
sure that the element has the display property
set to inline.
If you use float, make sure that the element
has the display property set to inline. Add
margin to an element. You can use padding,
but this isn’t the same thing as a margin. If
you need to increase the distance between an
element and its container, you can use
padding instead.
You can use margins to create separation and
emphasize the content on your page. You can
do this by separating the text from the
background, by aligning the different parts of
a box, or by emphasizing particular elements.
Here is a simple example. You have a
headline, and you want to put a little bit of
text to the left of it. To make it work, you can
use margins to create the distance.
Here’s a different way to create the same
result. Instead of creating a negative margin,
you use padding.
You can also create margins using
percentages:
Create the top, right, left, and bottom
margins. You can use percentages instead of
pixels to create a flexible distance. It’s also
easier to resize elements with percentage
values.
To change the margins of the div, you would
change .margin to .margin-right: 5%; for
the top margin.
You can use negative margins to create a
distance between the content and its
container. The container will be positioned
according to the position of the element that
contains the negative margin.
You can make the background transparent
using negative margins. You can combine the
top and right margins with negative margins.
You’ll need to make sure that the element has
the correct position before doing so.
.box { position: relative; margin-top: -50px;
margin-right: -50px; }
The above code will make sure that the box
has the correct position.
The box doesn’t have a margin on the top.
Instead, it creates a margin that moves the top
of the container downward by -50px.
Alignment is essential to a beautiful design. It
lets you make your page more readable, and
it helps make your site more user-friendly.
For example, margins are not just for creating
a distance between content and the container.
You can use them to make a particular
element align with another one. You might
want to align the header with the text, or the
text with the footer, or whatever other way
that you want. You can use the text to center
the image, and it will align with the other
elements.

What You Should Know About

Sequence and Pace
In the past, I was asked about how do I
determine the sequence and pace of my
website/web app’s UI? I have prepared a few
examples showing the process and the results.
The first step is to plan the sequence and pace
of your website. If you’re not familiar with
the term “sequence” and “pacing,” just think
about a movie or a book. It’s the sequence
and pacing that keep us engaged and
absorbed in what we’re reading. So, what is it
about?
A good sequence and pacing are what makes
the viewer follow the plot, i.e., to know
what’s going to happen next in the
book/movie. This means that we’re following
the logical steps of the storyline, and it keeps
us focused on the characters and their story.
This is the same as for the website. It’s the
sequence and pace that keep people visiting
your website and clicking on the links or
filling out forms in the registration form or on
the contact page. The more important thing is
that your sequence and pace must be
consistent and follow the rules and guidelines
that your web app is designed with.
 CHAPTER FOUR

Typography of UI Design

For some designers, the art of typography of

UI design is more important than anything
else. The design of websites, mobile apps,
and desktop apps can be a little more
complex than other forms of design, and
typography plays a significant role in the
overall visual appeal of a design. However,
there are a few things you need to know
about typography and UI design to get the
most out of it. In this topic, we’ll share an
overview of what typography is and discuss
the differences between different types of
typography.
What is typography?
First, let’s get a few definitions out of the
way:
➢ Informal: A word that represents
letters, numerals, punctuation marks, and
other characters that are used in written
language.
➢ Pronunciation: A collection of letters
that are combined to create words and
sentences and make up a specific
language.
➢ Typography: The art of arranging or
arranging letters in such a way that
creates a specific effect, meaning, or
mood.
Typography encompasses a wide range of
different design styles and approaches. It’s
one of the oldest forms of design, and it’s
been around for a long time. Some of the first
texts that we have from ancient civilizations
are actually types of typography. In this
article, we’ll be looking at three different
types of typography, including headline
typography, body copy typography, and icon
fonts.
What is headline typography?
Headline typography is basically the art of
designing typography used for headlines.
These can be used for everything from emails
to emails to blog posts. Here are a few of the
basic principles of headline typography:
➢ Bold and bright colors.
➢ The fonts should be large.
➢ There should be a lot of space
between the headline and the copy.
What is body copy typography?
Body copy typography is basically the art of
designing typography used for body copy.
It’s basically the part of your site that is
intended to persuade the reader or user to take
some action, which may be to purchase a
product, take the next step on a process, or
even just read the rest of the article. There are
a few things to keep in mind when using
body copy typography:
 ➢ Avoid the use of too many bold or
italicized fonts.
➢ The typography should be more
subtle.
➢ The font sizes should be smaller.
➢ Avoid using a font with too many
curves.
What is icon font typography?
Icon fonts are a relatively new type of
typography that makes it very easy to create
icon fonts on any device. Here are the basic
principles of using icon fonts:
➢ Icon fonts work on all the major
browsers.
➢ It’s very easy to download icon fonts
and use them on any site.
Font-end icons can be used inside and outside
the body copy.

Using Typeface or Fonts

The typeface is a font that a designer uses to
display a design in a website, a logo, and so
on.
A logo is a visual representation of a
company’s name and brand. A typography
logo is the combination of text and typeface
that represents a brand. A brand name is a
name that represents a business, an
organization, or a person.
A typeface is a collection of fonts (sans-serif,
serif, monospace, cursive, fantasy, script,
italic, and so on). The typeface is different
from the font.
The typeface is usually made up of letters or
symbols used in a design. A font is a
collection of letterforms. A letterform is the
part of a letter that makes up the character.
The design elements are the objects in a
design that are used to convey messages to
the audience. The most basic elements in
design include colors, lines, shadows,
reflections, and shadows. These basic
elements are called design elements.

Typography on the Web

In the web design and development world,
typography is a topic that most people know
about, but many of us don’t know enough
about it. It’s often seen as a way to add
personality to a website, and most of us
would be willing to pay for a pretty design
with great typography. However, there’s a lot
more to typography than just pretty designs.
This post will focus on the basics of
typography in web design and explore how it
can help you improve conversions.
The basics of typography in web
design
If you were asked to identify a font in an
image, what would you do? Would you just
search for fonts? Or would you go back to the
drawing board and sketch out a new typeface
in Illustrator or Photoshop, using an actual
font as a reference?
What would you be looking for in a good
font? Perhaps the font should be:
✓ Clear and obvious
✓ Unique
✓ Easy to read
✓ Well written
 ✓ Well known
✓ Well made
✓ Have a clear relationship with
another font family
And would you be happy to pay a fair price
for it?
If you answered yes to most of those
questions, then you’re probably familiar with
a font or a font family. If you’re not familiar
with a font, you’re not alone! It’s pretty tough
to describe a font and even tougher to explain
it.
I once tried to explain it to a client. The client
asked how a designer can choose a font that
looks good for their website. He even asked
what makes one font better than another. But
I struggled to explain it to him, as it’s so
much more complex than the simple answer
of “that one looks better” and “that one is
cheaper.”
So, what is a font for the web?
A font is a typeface, which is a design, but
not necessarily for a particular medium.
Typefaces are an essential part of every
printed book and newspaper, as well as many
other forms of advertising. They are designed
by hand to create a set of symbols for specific
applications, such as serif, sans serif,
geometric or ornamental.
In the web world, font could be a web font (a
file hosted somewhere on the internet that
you link to from your site) or a custom font
(which means you made the font yourself in a
design program like Photoshop or Illustrator).
A font is designed for a specific purpose. So,
when you choose a font for your website, you
need to be specific.
If you want to communicate that you are a
design company, and your primary purpose is
to help design and build your website, you
might use a monospace font. You’re basically
looking for something that is clear and
readable (like Arial) but a bit more elegant
and modern (Monospace).
If you want to communicate that you are a
sports-related site, you may look for a sport-
related typeface, like a “Rugby typeface.”
If you want to communicate that you are a
site for a specific type of business, you can
find a business-related typeface. For example,
a site for a bank may use a simple font that is
more of a “bank-style” font, and the font
should be easy to read and distinct.

Design for the user

It’s easy to get stuck in the technical side of
typography.
“The best fonts are those that are based on
human anatomies, like the Helvetica Neue
font. It has a lot of structure to the letters, so
if you need a font that is very clear and
structured, Helvetica Neue is a good option.”
- Chris Coyier.
We get that the font choice is important. But
the choice shouldn’t be the main focus. There
is a lot more to typography than just the fonts
that you use. You also need to make the
choice that is most suitable for your audience,
and most importantly, your target user.
What are your visitors doing on your
website? They’re visiting your site to get
something from it. So, what is it that they
want to get from your website? This is where
you get to be the designer!

Make sure that your users don’t get lost in the

details of typography. Focus on creating a
pleasant experience for your visitors. It will
make them more interested in your content
and your website.

Non-Verbal Communication in UX
In UX research, we rely heavily on nonverbal
communication in order to better understand
people. This usually comes as a surprise to
the users. However, there are ways to help
them get to a more comfortable space during
our research, to get them to relax and not
worry about their body language and the way
they look.
Nonverbal communication isn’t just about
reading body language. Nonverbal
communication is how we communicate and
interact with one another through our
physical environment, for example, through
furniture, physical features of buildings,
objects, walls, and people’s clothing.
There are three important things we need to
understand in order to make the best use of
nonverbal communication.
☐ First, we need to be aware of how the
human body reacts and expresses itself.
☐ Second, we need to know which
nonverbal clues to pay attention to in
order to get to know people better.
☐ Third, we need to know how to
communicate with people in an engaging
way, so they will relax and participate in
our research.
This topic is about the first one: how to read
nonverbal communication. We will try to
look at the human body from a biological and
psychological point of view in order to
understand the various cues we can pick up
from others, to see whether the expression we
see on someone’s face is a real or a feigned
one.
In order to achieve this, we will use a
common research scenario, where a person
will be invited to take part in a UX research
session. However, this scenario doesn’t have
to be only about people’s faces. The same
principles also apply to our own body
language.
The face
Facial expressions can be an indicator of how
a person feels. For example, if a person
smiles, it shows that they feel happy. But they
may smile because they are happy about
something, or because they are trying to be
polite or to put on a smile for the research
team.
If a person is upset, they may be showing an
involuntary facial expression. If someone is
very angry, their expression may change even
if they are not conscious of it.
Our facial expressions can be very different,
depending on how we are feeling, how we are
thinking, and how we feel towards other
people. In addition, facial expressions change
during our life, depending on the situations
we are in and the mood we are in.
For example, when we are about to give a
presentation in front of a group, our facial
expressions can change. Our eyes may shine
more, our mouths may be tenser, and our
faces may have a different shape.
It’s not only about the face
We need to notice other nonverbal clues, such
as the tone of voice and how people interact.
Nonverbal clues
As mentioned in the introduction, nonverbal
communication is also physical
communication. It is based on the fact that
our body reacts to everything around us. We
can also use nonverbal communication as a
communication tool.
For example, if you notice that someone is
nervous about something, you can use that as
an opportunity to get to know the person a bit
better, and you can ask him to talk more
about it.
You can also use nonverbal communication
to help them relax. You can try to find
something to help them relax, and try to show
them that you understand the situation.
In order to understand nonverbal
communication, it’s essential to notice what
the person is communicating to us through
the way they look. For example, they may try
to hide something they don’t want us to know
or show something they don’t want us to see.
Nonverbal communication can also show us
how the person is feeling in the moment. If
you see them shaking or sweating, you can
use this information to help them to relax.
Finally, nonverbal communication can help
us learn about the person’s history.
For example, we can use a person’s posture
to know if they are a “macho” or a “femme”
person. However, with practice and a good
understanding of nonverbal communication,
you can read nonverbal clues and figure out
what the person is trying to show you and
how you can communicate with them better.
 CHAPTER FIVE

Understanding the Anatomy

of Type

What is the anatomy of typography? What is

the function of fonts? What is the difference
between type and print? These are among the
questions we explore in this topic.
There are three main functions of
typography:
☐ To create visual appeal, including
contrast, visual hierarchy, color, balance,
and harmony.
 ☐ To communicate ideas, facts, and
information on a page.
☐ To help users understand the page
content.
The most important function of typography is
visual appeal. In print publications and
online, typography creates an emotional
connection between the reader and the
content.
What is the anatomy of typography?
If you’ve ever been confused by the anatomy
of a type element (e.g., letter, font, logo,
illustration, etc.), this topic will help clarify
the relationship between fonts, typefaces, and
fonts. To help you understand the
relationship, we will use the letter E as an
example:
The font of the letter E is Euphemia, a serif
font.
The typeface of the letter E is Euphemia, a
serif font.
The font of Euphemia is Euphemia, a serif
font.
There are other common examples of font
anatomy that you may be wondering about:
Type anatomy can be complicated. So, let’s
simplify the terminology and break down the
different categories of type elements, starting
with the font.
Types of type elements
Type elements. Type elements are the
physical shapes of a type. These may include
letters, numbers, symbols, etc. A type
element that is a character or word can also
be referred to as a character.
Character. A character is the smallest type
element that can be combined to form a word
or sentence. It is represented by a single, solid
line, or by the combination of different lines,
as in a letter.
Examples of fonts and typefaces
Now that you know the basics of font
anatomy, let’s discuss some common
examples of fonts and typefaces that you
might use in your own designs:
Fonts can come from a number of places,
including digital typefaces (e.g., Google
Fonts, MyFonts, Typekit, Fontdeck, etc.),
custom fonts you have created or purchased
from a type designer or a type foundry (i.e., a
typeface library with fonts and font styles),
pre-made typefaces on stock sites such as
Canva, Adobe Stock or Fotolia, as well as
third-party software applications (e.g., Adobe
InDesign, Adobe Photoshop, Adobe
Illustrator, CorelDraw, Adobe Muse, etc.).
As noted, some of the most common
typefaces on the web and in print are sans-
serif fonts (e.g., Arial, Helvetica, Roboto,
etc.). On the other hand, serif fonts (e.g.,
Book Antiqua, Cambria, Garamond, etc.) are
more common in books, magazines, and other
printed media.
In addition to fonts and typefaces, your type
library may include multiple font styles, such
as italics or bold. When selecting fonts for
your design, consider the following
guidelines:
Selecting a font for headings
For headings, serif fonts can look a bit stiff or
overly formal, and sans-serif fonts can look
too casual or “web-like.” A combination of a
serif font (such as Georgia, Times New
Roman, or Arial) and a sans-serif font (such
as Helvetica or Open Sans) may be used. You
can also use a script font, such as Garamond,
or a display font, such as Gotham or Lato. In
these cases, your heading should have a bit
more weight and a higher x-height.
Selecting a font for body text
As a general rule, when it comes to the body
text, a combination of a sans-serif and serif
font may work well. However, you may also
have some fun and choose a more playful,
modern, or “web-like” font such as Gotham
or Lato.
Selecting a font for subheadings
When it comes to subheadings, you have a bit
more freedom to experiment. A sans-serif
font is a safe bet because it looks fairly casual
and modern. You can also select a serif font,
such as Georgia, Times New Roman, or even
Garamond.
Choosing a font for large blocks of
text
Large blocks of text (e.g., a section headline,
a paragraph heading, etc.) can also be set in
one of three ways:
A combination of two or three typefaces; for
example, you could use two sans-serif
typefaces and one serif.
A single serif or a single sans-serif. For
example, you could use a serif font (such as
Garamond) or a sans-serif font (such as
Helvetica).

Choosing a font for small blocks of

text
Small blocks of text (e.g., small type
elements, headlines, subheadings, etc.) may
be set in one of two ways:
In one instance, you can use a combination of
two fonts (e.g., serif font and a sans-serif
font). In this case, you are likely selecting a
font that looks more casual and “web-like.”
In another instance, you may use a single
typeface with one style (e.g., a sans-serif font
such as Open Sans or Gotham) and another
font-weight (e.g., serif fonts such as Book
Antiqua or Arial).
When in doubt, you may always select one of
the fonts that looks the least formal. For
example, if you need a casual-looking
typeface, you might go with a sans-serif
typeface such as Open Sans. It’s important to
understand that you can’t have too many
different fonts and typefaces in a design. You
need a mix of fonts to match your brand
colors, theme, and your overall message. This
will make your design more readable.

Printing UI Designs
For the web designer, the print world is not a
different world. Many design projects that
have been created on web pages and websites
are being reused in printed media to make
your design stand out. It is very important to
include the text, logos, symbols, or other
small graphic elements that can be printed in
any format. It is a good idea to try to replicate
the design on multiple media because if a
design can be reproduced in many formats,
your design will reach a wider audience.
Preparing a layout for the printing of
your design
There are different kinds of layouts that you
can prepare. A basic layout for printing will
consist of an image and an optional text block
on top of the image. In this case, the only
thing you need to prepare is the image.
In order to make your design stand out when
printed, it is a good idea to include the text,
logos, symbols, or other small graphic
elements that can be printed in any format.
Basic layouts for printing
There are a number of different layouts that
you can use in order to print your design, but
for the most common purposes, there are only
two:
The basic layout for printing is used when the
designer wants to print the whole page, with
the design being replicated in its entirety. In
this case, the image and the optional text are
positioned together.
The basic layout for printing is used when the
designer wants to print a portion of the design
on the page. The design will be repeated at
the same location. If you want to have
different text and symbols for different sizes
of prints, you can use this layout to print a
small area with an image and the other
portion with text and symbols.

What Is Serif Typeface?

A serif typeface is a typeface that contains

serifs. These are a decorative feature that
resembles a small bar of a type that extends
from a character. This may be because it is a
bit easier to draw this type of letter than a
character without a bar. Or it may be because
it makes it look a bit more like a handwritten
letter. The serif typeface may also have a
decorative outline of the type around the edge
of a character. Some typefaces may contain
only serifs and no other features.
Serif typefaces are designed with an aesthetic
purpose in mind. You can think of serif
typefaces as having more character and
personality than other typefaces. For
example, a serif typeface is better suited for a
project that you are designing to look more
hand-drawn or childlike. This is in part
because serifs are designed to make the
character look a bit more like handwriting.
They are also used to help make the character
look more delicate and feminine.
Serif typefaces may also be more formal or
professional-looking. This is in part because
the serif can give the character a more
structured or authoritative appearance.
However, this appearance may be a bit more
rigid or stiff. This may be because serif
typefaces are often used to create a more
formal or traditional design.

What Is Sans Serif Typeface?

A sans-serif typeface is a typeface that is

devoid of serifs. This may be because of the
design of a typeface, or it may just be because
the serif is not necessary. The design of a
sans-serif typeface might suggest a sense of
casualness or lightness. For instance, sans-
serif typefaces are often used in children’s
products. Sans-serif typefaces are also often
used to make the typeface look friendly and
fun.
There are many different typefaces available
for you to use in designing your projects.
Some typefaces are designed to be used for a
particular purpose. For example, you might
use a font for a text-heavy design project that
is a sans-serif typeface. This is because the
sans-serif typeface will not be too busy, and it
will make it easier to read the text on a page.
However, you could also use a sans-serif
typeface for a logo design. A sans-serif
typeface will be more modern or fresh in a
logo design. You could also use a sans-serif
typeface for an advertisement. This typeface
will give the design a bit more personality
and character.

Getting Inspiration for Your Design

Every product has its unique and distinctive
qualities. Every product has its own look and
feel. Every product should be easy to operate.
We don’t need to talk too much about the
qualities of the product. What we need is how
to get inspiration for UI/UX design? How do
we come up with ideas for UI/UX design?
You can get inspiration for UI/UX design
from several places. You can watch and read
some of the best UI/UX designs. You can
also try to analyze some other applications
which have been used in the industry. You
can get a general idea about UI/UX design
through these applications. You can also read
about them to get some information about the
qualities of the applications.

What are some places to get UI/UX

inspiration?
There are a lot of places you can get
inspiration. Let’s have a look at some of these
places:

1. Read other users’ reviews: You

can read the reviews of other users
who have used the application
before. You can learn from their
experiences and their views. If you
have read any user’s review, then
you will get a general idea about the
qualities of the application and the
things which are wrong with it.
You can also learn from the comments of the
users who have used the application. You can
get the suggestions of the users who have
used the application and have some problems.
You can also get information about the users’
views. You can also learn what their needs
are. You can also learn about the problems
which have occurred in the use of the
application. You can learn from the things
they have mentioned in the comments. You
can also learn from the users’ comments
about the things which you should avoid. You
can also get information about the features
which you should include in your application.
You can also learn from the applications’
specifications and the features they have
mentioned in their features. You can also
learn from the specifications about the things
you should avoid. You can also get some of
the things which are included in the features
of the application.

2. Analyze popular and used

applications: You can get
inspiration for your own application
 from the applications which are
being used in the industry and are
popular among the users.
You can learn from the characteristics of the
applications which people are using. You can
also get some ideas about the types of
applications which people like to use. You
can also get some ideas about the features
which people want in their own application.
You can also get information about the
features which people do not want in their
own application. You can also get
information about the problems people face
in the use of the application. You can also get
information about the things people would
like to improve in the application. You can
also get information about the things people
want to add to the application.
You can also learn from the applications
which are being used by people and are
popular among people. You can learn from
the things people would like to improve in the
application. You can also learn from the
things people want to add to their
applications. You can also get an idea about
the things people would like to improve in the
application. You can also get an idea about
the things people would like to add to the
application.

3. Learn from the features of the

popular applications: You can get
an idea about the applications which
are being used in the industry and
are popular among the users from
the features of these applications.
You can learn from the features of these
applications which people use and which are
popular among the users. You can also get an
idea about the types of applications people
use. You can also get an idea about the types
of applications people would like to use. You
can also get an idea about the features which
people want in their application. You can also
get an idea about the types of applications
people would like to use. You can also get
some ideas about the features which people
would like to add to their application. You
can also get some ideas about the features
which people would like to improve in their
application. You can also get some ideas
about the kinds of applications people would
like to use.

4. Read and learn from the user’s

feedback: You can also get some
ideas for your own application from
the user’s feedback. You can learn
from their experiences and views.
You can get some ideas for your
own application from the user’s
feedback. You can learn from their
experiences and views. You can also
learn from the problems users have
faced in the use of the application.
You can also learn from the
suggestions and information people
have provided about the application.
You can also get an idea about the
things users would like to improve
in the application.

How to Define the Brand?

Design is a very powerful medium of
communication; the best designers work hard
to give clients what they want while also
communicating effectively with them. In
many cases, we need to take advantage of the
many tools available to us to convey the
intended message. This usually means using
design principles that fit the type of content
being communicated.
One thing I’ve found is that sometimes the
best way to convey information is through an
interface. It’s something many of us do
(intuitively) when we watch a movie, TV
show, or play a video game, and I’m sure that
many of you use interfaces all the time when
you’re browsing the Internet. Even though we
all know that interfaces are not supposed to
be the sole focus of a design, they are often
the best way to convey ideas and information
to users.
There’s another aspect of design that most
people don’t think about: branding. A brand
is often described as a collection of ideas that
define an organization and that are designed
to attract and retain customers. It also has an
emotional component, helping to give
products and services identity and
personality.
Branding is usually the job of the marketing
department; the rest of us focus on designing
and producing a product or service that fits
the brand. However, in some cases, this
branding can also be done by the designers
themselves. If we’re doing it right, we can
help clients to achieve the intended brand
without resorting to traditional advertising.

The Branding Process

There are four important stages in branding a
product or service.
Defining The Need: This is the first step; it
starts with discovering what the customer
wants. This involves learning about their
lifestyle, as well as their buying habits. In
many cases, it can also include knowing the
customer’s emotional state and how they
want to feel when they purchase something.
Defining The Target Audience: If the
company already has a brand identity, then
they’ve already defined the target audience.
In other cases, they may need to define a new
one. This involves defining a profile of
potential customers and learning as much
about their likes, dislikes, and habits. This
process is often done through online research
so that the customer can be seen as an
individual instead of a generalization.
Defining The Vision: This is a high-level
look at the company, the product or service,
and the overall brand identity. It should
incorporate all the previous work, including
the target audience and the needs of that
audience. This is also the stage where the
logo and other graphics are designed.
Defining The Brand: This is the final stage,
where the brand is fully defined. It may be
time for a complete re-branding; in other
cases, it may be that some changes are
required. It is usually important for a designer
to work on the final version of the brand.

Choosing the Right Font

You’ve probably seen the fonts that are
associated with famous logos like Coca-Cola,
Pepsi, and McDonald’s. In today’s topic, I
want to talk about how to pick a font for your
branding, the most common font types that
work for branding, and what fonts work best
for your particular industry. If you’re looking
for a new logo, font is the first step you’ll
want to take. You can find a font online for
free, and it doesn’t have to cost you a lot of
money. You just need to find a typeface that
fits well with your brand so that your new
logo has a strong and memorable presence.
The term font is derived from the word type.
It’s the set of characters that a particular font
uses to create letters, numbers, and symbols.
You may have thought that your website’s
font looked pretty nice and clean. But when
you really look at it, you’ll notice that it
actually has a bunch of different characters in
it. These characters come from different fonts
and are combined to create the letters,
numbers, and symbols you see on your
website.
It’s worth pointing out that not all websites
use a typeface. Many companies use a custom
font, meaning a font that’s been specially
created for them.
So how do you pick a good font for your
website? Well, you want to pick a font that is
similar to the font that your brand uses
because it will add a personal touch to your
branding.
When you’re designing your site, think about
how you want it to look. A clean, simple site
has a nice font that makes the design and
design elements look more elegant. A messy
site might have a very rough-looking font that
makes it look a bit cluttered.
Also, consider the color scheme that you
want for your website. You want to pick a
typeface that you think looks good in your
site’s design. You can also use the color
scheme that you’re using on your other brand
materials to add to your branding. For
example, you can choose a typeface that’s a
similar color to your logo font. That way, it
will work very well with your branding and
add an extra personal touch to your brand.
How to pick a font for your branding
Once you’ve decided that you want to use a
particular font, the next step is to look for the
font online. There are a bunch of places that
you can find a typeface online, and the web
has some really awesome resources for
finding the right typeface. I’ve listed some of
my favorite online resources below.
It doesn’t matter what kind of design you
want. You can find a typeface that will help
you achieve a very elegant look, or you can
find a font that will be more fun and funkier
for your site. Just make sure that the font you
choose will fit with the design of your brand.
Font Generator Sites
You can use free online font generators.
Some of these sites will show you a random
assortment of fonts, or you can pick from a
wide selection. These sites are useful because
they’ll help you quickly create a font to test
out.
You can choose from a variety of fonts and
then change the colors, the weight, the
lettering styles, and even the sizes of the font.
These sites are great for testing out a lot of
different fonts at once, and they’re super easy
to use.
Free Fonts Online
I know you’re probably wondering how a
bunch of free fonts can be free. Well, it’s
because most of the free fonts online are
made for print and not for websites. There are
some fonts that are designed to work well on
websites, but most of the fonts that work well
for websites are a bit off from the fonts that
are designed for print.
However, you can also find lots of awesome
fonts online that are specifically made for
websites. The only problem with these fonts
is that they can be a bit difficult to find.
You’ll have to spend a bit of time searching
to find the ones that will work best with your
brand.
Paid Fonts
If you want to make a typeface that will
really wow your visitors, you should look for
a paid font. These are the most expensive
fonts that you’ll find online, and they are
often made especially for websites. Most of
these fonts have a limited number of weights,
so you’ll have to choose a weight that works
well with your brand. For example, if you
want a font that looks a little rough, you’ll
want to use a lighter-weight font. You’ll want
to use a lightweight if you’re trying to make
your brand look a bit more playful or a bit
more whimsical.

Adding Bolding Text

Bold text is an important part of UI design.
It’s used to emphasize important elements
and is sometimes used for humor in the
design. Bold text can be used in any UI
design, whether it’s for UI mockups, app
icons, or splash screens.
Why use Bold?
It is a way to increase the prominence of the
information in the UI design. The user might
not know what this specific button does
because it’s grayed out or it’s too small to
see, but they understand the concept of it.
Sometimes, bold can be used to show
something is an error, to emphasize
something that needs attention, or to make it
pop. Bold is used in many different places in
a UI design, and this is one of the first places
you’ll see it.
1. Headlines
Headlines are often used in websites, so it’s a
good idea to use bold in a mobile app to
emphasize important information.
The first place you’ll see this used in a
mobile app is the header of the app. You can
use it to show the name of the app, as well as
any information about the app. In the header,
you can use these colors to emphasize some
parts of the information.
If you want to add some humor to your
header, you can use different colors to show
different aspects of the app and a joke or
story about it. You can also use text that has
the same color as the background to add some
emphasis.

2. User Stories
Another common place where you will use
bold is in the user story. This is a section in
the design that shows what users should be
able to do. You will use bold when you want
to show the name of the feature, as well as
any descriptions about it. You can also use
this for any other sections of the user story.
In the user story, you can use colors to show
the priority of the section and any links to
support or additional information. The same
text in another color can be used to
emphasize what you are describing and make
it stand out.
3. Contact Information
You’ll often see bolded contact information
in iOS app design. The main use of bolded
contact information is to show the full name
of the person who will be contacted.
This can be used in the “Contact” section or
anywhere in the design. This can be used in
the main section of your app, on the contact
card, or anywhere you want to emphasize this
information.
The text should also be consistent with the
rest of the design. You don’t want to use it
for everything, as this looks cheap and
unprofessional.
4. Bold Text in Icons
You can also use in-app icons to make them
more obvious. The general use for icons is to
show what the app does, but sometimes it’s
good to add some emphasis to the icon, as it
can be easier to see. You can use this to show
the name of the app or what it’s for.
The same guidelines apply when using bold
in the icons, like using the same text color or
using text that is the same color as the
background.
5. Bold Text in the Splash Screen
The splash screen is the first thing the user
sees when they open an app. It is important to
make it bold, so it stands out. There are two
main uses for the splash screen:
Promote your app
Include a splash screen with a funny joke or
story about the app
In this example, you can use different colors
for your text and for the background to
emphasize different things about the app.
A splash screen should be designed to be
consistent with the rest of your app. If you do
use it, you should try to make sure it fits the
theme of your app.

Displaying Text
A display text field is a very important
function for UI/UX designers. If we can’t
display the text field, the users cannot fill in
the text fields, and the functionality of the
application or website will be blocked. As we
all know, the display text field is the input
form of the text field, and the placeholder is
the hint for the input.
In this topic, we will share the top eight ways
to display the text field. They are:
1. Floating text field
This is the first type of text field. A floating
text field is the best way to display the text
field in your design. You can drag and drop
the floating text field from the element
library.
2. Placeholder text field
The placeholder text field is a type of input
field. The placeholder text field will appear as
a hint in a placeholder. You can set the
placeholder text, such as: “Enter the text.”
3. Icon text field
You can also use an icon text field to display
the text field. Just like the placeholder text,
the placeholder can also be a set of icons.
4. Input field with a button
The button of the input field can be used to
trigger the input action, such as:
The button is blue, so the users can easily
distinguish it from other buttons.
5. Input field with an overlay
This is the best way to display the text field.
The users just need to input the text field and
can see the input content in the field without
clicking the input button.
6. Input field with a dropdown menu
This is also the best way to display the text
field. The dropdown menu will open after
inputting the text.
7. Label text field
It is a very simple and direct way to display
the text field. The label text can also be a
button, for example: “Select.”
8. Input field with a form
The input field can be a type of form to let
the users input the content easily.

How to Add Meta Information

Meta information is a piece of extra
information that may be provided by a
designer to help the client understand the user
experience more easily. If you add meta
information to the design, you can make it
easier for a designer to explain the design to
the client and make their job easier. Some
meta information is also important for a
designer to understand the client’s
expectations. It is important to add the meta
information according to the project
requirements and objectives.
How to add Meta information in
UI/UX design?
1. Add an understanding of what you are
explaining
When explaining the user experience, the
designer should understand the users’ needs
and motivations and how they work. The
designer should also be aware of how users
interact with products and how they want to
be provided with a better user experience.
This helps the designer to understand and
communicate to the client what they want to
show the client.
There are two ways to explain a design in a
better way – either by using the user’s own
words and making it easier for them to
understand what you are explaining or by
explaining using your own words so that the
client understands better.
☐ Use their own words to explain the
design. This means to use a user
interface language that is the language
that users would use. It is easy to
 understand, and it will help the user
understand the design easily. A good
example of a user interface language is
Ionic Framework. This is the framework
that is designed specifically for mobile
apps, where you can use the user
interface language to help people easily
understand what is happening in your
design.
☐ You can explain the design in your
own words, with images and video. This
helps you to explain the design more
effectively to the client, as they can
relate to the images and the video that
you are using in the explanation. This
will help the client understand the design
better and what you mean by your
explanation.
2. Add a little information for the client to
help them understand the design
Another benefit of using meta-information in
the design is that it helps the client to
understand the design better. This helps the
designer to explain the design in a more
effective way, and this helps the client to
understand what the designer wants to
explain. When explaining the user experience
design, it is important to add a few extra
words, such as images and video. This helps
the client understand the design better and
understand what the designer wants to
explain in more detail.
Adding a few extra words to the design will
also help the designer to understand the
design and make a good explanation.
The best example of this is the user
experience strategy. It is an important part of
user experience design, and it will help the
designer explain the design to the client
better. When explaining the user experience
strategy to the client, you should add an
introduction, a description of the product, and
some user interaction points. The introduction
explains what the product is and what it does.
It helps the client understand the design better
and the purpose of the product.
3. Use images and video to explain it to the
client better
Adding images and video to the user interface
of your design will make it more appealing.
The design will have an eye-catching effect,
and the client will be interested in using the
design.
Using images and videos as a part of the user
interface helps the designer explain the user
interface design better, especially if the
design has a lot of information. You can use
the images and video to explain what is
happening in the design to the client. This
helps the client to understand the design
better and learn how to use the product.
4. Use a language that is easier to
understand
When adding meta information in the design,
it is important to use a language that is easier
for the client to understand and will help
them understand the design better. It is easier
for the client to understand the design if you
use a language that is similar to the client’s
native language. A user interface language
should be easy for the user to understand, and
it should not be difficult for the client to
understand the explanation. It should also be
easy to translate to the client’s native
language.

How to Do a Font Pairing

Many times, we tend to overlook small
details when it comes to design. This can be a
little tricky for those who aren’t the best at
design. Some of you might already know that
font pairing is one of the most crucial aspects
when it comes to design. With that in mind, it
is important to give it some attention, so we
are not surprised in the future.
What is a Font Pairing?
If you have ever heard about a font pairing
before, you might have heard it with the
following term, “font pair.” This is a
particular technique that combines two fonts
that complement each other perfectly.
Now that you understand what a font pairing
is, the next step would be to figure out why it
is important to do one.
Why it is important to do a font
pairing
The reason why you should do a font pairing
in design is to make the design look better. In
order to do this, you will need to make sure
the font pairing is compatible. With this, it
means that the fonts you pick for the font
pairing should be of the same type and have
the same style. This way, the design will look
well-balanced and will be consistent
throughout the page. Not only that, but it will
also be more attractive to the user.
It will make the design more engaging and
will definitely have an impact on the users’
overall experience. When you pair fonts
together, the contrast becomes more
prominent, especially with the contrasting
colors and sizes.
The best part about the font pairing is that it
is able to create an original design that is
different from the traditional designs. This
will make the design more interesting and can
make it stand out from the crowd.
To sum up, it is very important to make sure
you pair the right fonts for your design. The
following is a list of fonts you can pair
together.
 CHAPTER SIX

Readability in UI
Readability and legibility play a critical role
in UX design. User’s experience is directly
proportional to how well they can read a
website or an application. The more legible
and easier to read your website or app is, the
more people will appreciate your website or
app.
What’s the impact of poor
readability?
When users have to scroll horizontally to get
the information they’re looking for, they
spend more time than needed on a page, they
often skip or abandon the page, they have less
confidence in your site, and they have less
motivation to return. These factors will lower
the traffic of your website.
What makes a good UI design?
Good UI design is all about how easy to read
and understand your UI is. A good UI design
is simple to scan, easy to comprehend, and
requires minimal effort to read and
understand.
A good UI design must include the following:
☐ Use a limited number of elements to
reduce the number of decisions users
need to make while scanning a page. Use
basic colors, bold text, and icons. Use a
simple and clean layout.
☐ Use text at a minimum size to reduce
the number of words on a page and
avoid using text with a lot of special
fonts.
☐ Use white space between elements to
give users visual comfort and make the
design more readable.
If a user clicks on an element and there is no
obvious feedback, they will get confused and
may even give up on using the site. To
increase the readability of an application, use
colors that are easy to distinguish and that
have low contrast. Make the text font size
large enough to be clearly legible.
How to Get the Aspect Ratio?
In the world of UI design, aspects ratio refers
to the width to height ratio of the elements on
the interface. If your element is wider than
tall, it will create a sense of visual confusion
when designing and using the interface.
There are two most common approaches to
creating an aspect ratio: either having the
ratio of the element and the whole interface
or having the ratio of the interface and the
element.
Let’s first talk about the elements. As a
general guideline, having a ratio of 1.0 will
work best in most cases. Below 1.0 will have
an adverse impact on the interface design.
Anything above will not add a lot to the
design. It is still not wrong to have ratios
higher than 1.0 if the elements are in the
center of the interface. However, you still
need to take into account the user interface
design and how it will be used.
What is the difference between having an
element that is wider than taller and vice
versa? If you have a wider interface and it
contains elements that are the tall or tall
interface that contains elements that are wide,
the interface will feel cluttered and
disorganized. This can be a problem if there
is only one element per row or if there is no
scrolling at all.

How to Style and Format Text

The formatting and styling of text is an
important element in designing a user
interface (UI) or user experience (UX). Text
is used to represent and convey information
and can either be the focus of a design or a
part of an information-gathering process.
There are two major goals in design: To
communicate and to educate.
Let’s look at a few of the ways in which text
is styled and formatted.
1. Write Text
Writing the text you use in your designs
should be written using the same font as the
rest of your design. This will enable
consistency across the design. However, if
you have to use a custom typeface, it’s fine to
do so if that’s what your client wants.
It’s best to stick with the default text size in
your system. If you use any custom font,
make sure it has been properly imported in
Sketch and exported in the .svg format. A
professional font used in the past may not
export correctly, resulting in odd and
inconsistent sizing. Don’t use a custom font
that has a small, thin or italic variant. This
will make your text appear unreadable in a
web environment.

2. Color and Color Scheme

There are two primary areas of concern when
it comes to color and color scheme. The first
and most obvious is colorblindness. This can
cause a real problem when your website isn’t
accessible to everyone and those who aren’t
colorblind. When your site is not accessible
for any reason, it’s crucial that you are aware
of the colors you’re using and how they may
affect those with visual impairment.
You may also be concerned with accessibility
from a screen reader for people with visual
impairment; screen readers are great for
people who are visually impaired. They read
the screen out loud, giving you the ability to
have audio-only content. It’s important to
remember to keep any non-text colors in your
design to a minimum and stick to a neutral
color palette. When it comes to using color,
there are a few good tips to remember.
White and grey are a good pair. White on its
own can be overpowering, and grey can be a
good way to keep your site from being too
loud. Using too much of any one color in
your design can make the text look
unprofessional and make your users want to
get off your site.
3. Typeface
When it comes to choosing a typeface, the
more choices you have, the better. It’s a good
idea to consider the size of your text. Larger
fonts can make text stand out and be easier to
read. However, you don’t want your text to
look too big. If a font is too large, it will be
difficult to read.
4. Alignment
The alignment of text can be as simple as the
left, center, or right alignment. It’s important
to take a look at how text is positioned within
a design and how the text itself is positioned
within a row.
5. Font Size
When it comes to choosing a font size, there
are a few things to keep in mind.
The first is legibility.
A font size that is too small can make the
content hard to read and cause the text to
disappear completely.
A font size that is too big can make the
content hard to read. If you have a large font
size and the content isn’t large enough to
make sense, the content will look crowded
and look unorganized.
It’s best to use a font size that is between
16px and 24px. This ensures that there is
enough space for the content and that the text
is easy to read.
6. Font weights
There are a few different ways to type a font,
and the most basic way to do so is to change
the weight. Font weights can range from
normal, bold, italic, or bold italic. Using a
typeface that has bolding or bold italic fonts
can help the font look a lot better.
7. Font Style
It’s also important to think about the style of
the typeface. There are a few ways to style
the text. The easiest way to style the text is by
using a fixed-width font. This can make your
text look a lot more consistent across the
design.
8. Line Height
Line height is a type of vertical space that
separates the lines of text within a row. The
line-height is measured as a percentage of the
font size. It’s a good idea to stick with a line-
height that’s around 120% of the font size.
This ensures that the font size is easy to read
but is also big enough to make the text easily
visible.
 CHAPTER SEVEN
What Are Design Systems

Design systems are a set of reusable building

blocks that can be used to create digital
products. They are a means to standardize the
design of web and mobile products and are a
collection of components, guidelines, and
examples of how those components can be
used.
Design systems are an approach to product
development that helps teams develop a
common understanding of the product’s
design and develop a shared language for the
design of a product. Design systems can be
used in any type of digital product
development, such as apps, websites, or even
physical products.
When you think about design systems, you
might think about Adobe’s Blueprint
framework, which is used to create mobile
apps. But a design system is much more than
a toolbox for creating a mobile app. Design
systems are a set of components that can be
used to create web products, too.
The purpose of a design system is to make it
easy for designers and developers to create a
consistent design that meets the product’s
brand. A design system is the foundation of a
product’s design language. It can include
everything from visual design elements like
colors, fonts, icons, and typefaces, to
wireframes, user flows, and UI components.

Using Figma
When you hear about Figma, the first thing
that probably comes to mind is a tool for
designing and editing UX/UI (User Interface)
and the like. But this is just the tip of the
iceberg when it comes to what Figma offers.
Figma is a tool for everything from planning
and managing projects to collaborating on
them. It’s a digital platform that is cross-
browser, cross-platform, and cross-device.
This means that you can work on a project
from your laptop, on the go, or on the iPad.
It’s also available for free.
What Figma Does
Figma is a product design tool that helps
teams build, manage, and collaborate on
projects. It’s a product of Adobe, and so, of
course, it is browser-based. The user interface
is clean and modern, and it has a number of
features. Here is a list of the top 10 reasons
why you should use Figma.

1. Collaboration and Project Management

When you open a new project, you’re
presented with a new workspace. You can
save your work in this workspace or in your
browser and synchronize it with your
colleagues. You can easily share your
workspace and open other people’s
workspaces. You can create milestones,
assign tasks, track their status, and keep track
of deadlines. It’s a lot like Trello, but it also
has a calendar and a file system. You can set
up workflows and share documents and files.
2. Documenting and Presenting Designs
Figma comes with a number of features that
help you present and document your designs.
You can annotate your designs with text,
shapes, images, and other design elements.
You can insert layers, use images, and
annotate your designs. You can use the
preview feature to see how your design will
look on various platforms and devices. You
can share your designs with others by
uploading them to the cloud or by sharing
them on social media.
3. Mobile App and Website Design
If you’re designing a mobile app or a website,
you can use the Figma mobile app to create
your designs. You can design for various
platforms, including iOS, Android, Windows,
and web browsers. You can also design for
multiple devices, including the iPhone and
iPad.
4. Visual Communication
You can use the Figma mobile app to create
designs. You can also use the desktop version
of the tool. You can use the tools in the app to
create designs, including text, shapes, and
images. You can annotate your designs with
text, shapes, and images. You can also add
comments, links, and other design elements.
5. Sketch Design
If you’re looking to use Figma to design a
web or mobile app, you can use the Figma
mobile app to design the app. You can create
wireframes, mockups, and user flows. You
can use the tools in the app to design for
various platforms, including iOS, Android,
Windows, and web browsers. You can also
design for multiple devices, including the
iPhone and iPad.

Sketching
Designers are getting better at sketching their
designs using a variety of tools and mediums.
But what happens when you don’t have a tool
or need to get your sketch out to a client or to
a team? What about when you need to get the
sketch out quickly?
Sketching is a fundamental part of any design
process. The process of sketching helps the
designer understand and express the ideas,
concepts, and mood of a project. It also helps
the designer develop a better understanding
of the project and its users. Sketching can be
done on paper, on a whiteboard, or on a
computer.
In this topic, I’ll be talking about the different
ways we sketch in UI/UX design. I’m going
to go over all the mediums you can use to
sketch, what they’re good for, and how you
can get started.
The first sketching method I want to talk
about is sketching on paper. Sketching in the
paper is probably the most obvious and well-
known way of sketching. You can use any
paper you want, and the most important thing
is that you need to be able to see your sketch
easily.
With a pen, you can use a drawing tablet, but
you can also use a paper tablet. The
advantage of using a paper tablet is that it’s a
lot more portable and a lot cheaper than a
drawing tablet.
When sketching on paper, you can draw as
quickly or as slowly as you want, but the
important thing is that you want to be able to
see your sketch easily. The best way to do
this is to use a paper tablet, and the only
downside is that you can only get away with
sketching in one dimension at a time.
The second sketching method I’m going to
talk about is sketching in software. Sketching
in software is the best way to quickly get a
rough sketch of your design out. You can
quickly sketch your design in a 2D vector
graphics program like Inkscape, or you can
use a 3D program like SketchUp or 3D
Studio Max.
Sketching in software is a lot easier than
sketching on paper, and the best part is that
you can easily work in more dimensions at
the same time. When sketching in software,
you can make your sketch as fast or as slow
as you want. You can also zoom in and out
and pan around.

What Are Ligatures

Ligatures are letters or symbols, such as f, j,
and u, that are used to create a letter. This is
done by connecting a letter or symbol with
another, usually the letter or symbol below it.
Ligatures are sometimes called swash or
ligatures.
The most common ligatures are the standard
Latin alphabet, which uses f, j, and v as
ligatures. These are commonly found in
English but are rarely used in other
languages. In Spanish and Portuguese, the
letters c, n, and r are used as ligatures. In
French, the letters g, p, and q are ligatures. In
other languages, ligatures are also used for
other letters, such as the Greek letter lambda.
Ligatures are used for three main reasons
First, ligatures make the letters easier to read.
In English, for example, the letter f is a
common ligature to the letter f because the
letter f is often difficult to read. The letter j,
however, is a ligature to the letter j because
the letter j is common in English.
Second, ligatures are often used in
typography or in typesetting. The letter f is a
ligature to the letter f because it is easier to
create an f with another f than it is to create
an f with another letter.

Finally, ligatures can be used in certain

foreign languages to create new sounds that
would not normally be available. In Spanish,
for example, the letter r is a ligature to the
letter n. This means that in Spanish, the sound
r is made by combining the letter r with the
letter n, creating a new sound.
Ligatures are not letters themselves. In other
words, the ligature is not the combination of
the two letters that it connects. The ligature is
the connection of the two letters.

How to Create a Typographic

System?
A system is a collection of elements that
work together to achieve a goal. A system is a
tool that allows you to create an environment
that allows you to create content and
applications that have the same visual
language. In UI design, a system is a
typographic style that you choose to use.

The three most common types of typographic

systems are:
1. Web design systems
2. Print design systems
3. Application design systems
This topic will focus on web design systems.
But if you are a print designer or an
application designer, these ideas can be
applied to your own design process as well.
1. What is a Typographic System?
A typographic system is a style that you
choose to use to create content and
applications. In web design, the typographic
system is the visual language that you use to
create the typography and content on a web
page.
In print design, the typographic system is the
visual language that you choose to use to
create the typography and content on a
printed piece.
In application design, the typographic system
is the visual language that you choose to use
to create the typography and content on an
application.
2. Why Should I Create a Typographic
System?
The goal of a typographic system is to make
your work easier. By using a system, you can
create content and applications that have the
same visual language. For example, if you are
creating an application, you will want to use a
similar typographic system to the one you are
using in your printed piece. The same visual
language makes it easier to create consistent
content and applications.
3. How to Create a Typographic System in
Web Design
In web design, the environment is the visual
language that you choose to use to create the
typography and content on a web page.
If you are creating a web page, you should
choose a typographic system. A system will
make your work easier by creating
consistency. You will also be able to use the
same tools that you use in print design.
For example, if you are designing a print
piece, you may use a system that was created
for print design. You can use the same tools
that you use in print design to create your
web page.
There are three ways that you can create a
typographic system in web design.

Make a Visual Style Guide

A visual style guide is a collection of
elements that work together to create a
consistent visual language. For example, a
visual style guide is a collection of
typographic styles that you can use in web
design.
In this style guide, you can create a consistent
visual language.
You can use this visual style guide to create a
typographic system.
You can also use this style guide to create a
system for your printed piece.

Use a Typeface
A typeface is the type of typographic system
that you are using in your work. For example,
you can use a sans-serif typeface or a serif
typeface. You can also use a display typeface
or a body typeface. When you are creating a
web page, you can use a typeface that you
created for print design.

Use a Color Palette

A color palette is a collection of colors that
you can use to create a system. You can use
this color palette to create a system.
 CHAPTER EIGHT

Apply Geometry in Design

One of the most important skills of a UI

designer is the ability to create layouts that
work well with users. Some of the most
important tools in UI design are the design
process and the use of various geometric
shapes. Geometry is the study of shapes and
the forms they create. In this topic, we’ll look
at how to use geometry in UI design.
Let’s start by taking a look at how we can
apply geometric shapes in the context of UI
design.
Geometric shapes for UI design
Geometry is the study of shapes and the
forms they create. The shapes of an interface
include things like boxes, rectangles, circles,
polygons, and lines. The use of geometry in
the context of UI design can be very useful in
the context of layouts, typography, and
animation. Let’s take a look at some of the
most common geometric shapes and their
uses.
Boxes
Boxes can be used in many different ways.
Some of the most common uses of boxes are
for headers, footers, and dividers. Let’s look
at an example of a box in a UI design. The
header box is a box that is used in the header
section of an interface. The header box
usually contains the page title, the page
navigation, and a logo.
The header box is used to group all the
elements in the header section of a page. It is
typically used to group all the elements that
are in the header section of a page together. It
is typically used in the context of a web page
but can also be used in the context of a
mobile app.
Rectangles
Rectangles are used for buttons, inputs, and
other interactive elements. The input
rectangle is used in the context of a form. It is
used to group elements that are used in the
context of a form. It is also used to group
elements that are used in the context of a
form. It can also be used to group elements
that are used in the context of a form.
Circles
Circles are used in the context of typography
and design. They are also used in the context
of animation and in the context of logos and
other visual elements. The typography circle
is used in the context of typography. It is used
to group elements that are used in the context
of typography. It is also used to group
elements that are used in the context of
typography. It can also be used to group
elements that are used in the context of
typography.
Polygons
Polygons can be used in many different ways.
Some of the most common uses of polygons
are for buttons and inputs. It can also be used
to group elements that are used in the context
of buttons.
Lines
Lines are used to creating shapes in the
context of UI design. It is typically used in
the context of patterns that are used for
backgrounds.

Why Are Grids Important

Grids are a fundamental UI element, and they

help to create a lot of the “rules” that we
design for user interfaces. While grids are
definitely not the only way to achieve design
goals, they are a powerful way to create rules
that define the structure and flow of a user
interface.
Grids are also an important part of the design
process, as they help us understand the
placement and layout of elements in a design.
Grids can help to define the space available in
a design, as well as the size of the elements in
a design.
Importance
Grids allow us to create rules for the structure
of our user interfaces. There are several
different ways to think about a grid. In this
topic, we’ll be looking at how to think about
grids in terms of the grid and the layout, and
then in terms of space.
In terms of the grid, there are two types of
grids. There is a horizontal grid and a vertical
grid.
In terms of the layout, there are several
different ways to approach a layout. We can
lay out a grid and then work with that grid.
We can lay out elements in a grid and then
work with the grid to define the placement of
the elements. We can also look at the layout
as a series of rules that define the structure
and flow of the user interface.
In terms of space, there are two ways to think
about space. The first is the use of grids. We
can use grids to define space. We can also
think about space in terms of the amount of
space that is available in a design and how to
use that space.
What Is Box Modal

A modal in UI design is a box that appears

over the rest of the screen. It will appear
either on top of the screen or at the bottom.
The modal will appear with a title and a
button to close it. When you click on the
button, the modal will disappear. This pattern
is great for a login screen. It allows the user
to focus on what’s important and not on the
login process. When you click on the login
button, the modal will disappear.
What Are the Pros of a Modal?
A modal is a great way to separate the user
from the content. It will make the user
concentrate on the content without the
distractions of the interface. This is especially
useful when the user is filling out a form. The
biggest benefit of a modal is that it can be
used for any type of user interaction. A modal
can be used for the login screen, registration
form, login form, payment form, or even the
search box.

Using Flex Box

Flexbox is a new CSS3 feature that is being
widely used in web development these days.
Flexbox is built on the premise that elements
should be able to grow and shrink as needed,
which is the opposite of the normal grid
layout where you place elements in a fixed
width and height. Flexbox is the most flexible
way of designing responsive websites. The
main advantage of using flexbox is that it is
extremely responsive, and you can easily
change the size of the page and the layout by
changing the width and height of the flexbox.
In this topic, we will discuss tips to create a
responsive website using a flexbox layout.
What is Responsive Web Design?
Responsive Web Design is a web design
technique that helps to optimize the display
of web pages on different devices and screen
sizes. This makes it easier for users to access
the website’s content and read the text
without losing the layout.
Tips to Creating the layout
When building web pages using flexbox,
there are a few considerations to keep in
mind. The container is, without a doubt, the
most critical component of any flexbox
layout (where the internal elements of the
flexbox are stored).
When utilizing flexbox, the container is
normally designated display: flex so that the
things included inside it (also known as the
children) behave in a predetermined manner.
In accordance with its flex-direction trait, the
things contained inside it may flow either
horizontally or vertically as they are moved
about within it. The flex-direction property
gives the value of a row or column to a page
in order to give the page the layout that is
wanted. This attribute is only applicable to
the parent directories and not to the child
directories, which is crucial to remember.
Another important aspect recommended by
our web design assignment help professionals
is the justify-content property, which, like the
flex-direction property, is applied to the
parent directory as well. When the items
included inside the container do not
completely fill the container, the justify-
content property is used to describe how the
space within the container should be treated.
Elements included inside a flexbox container
may be spaced uniformly, oriented to the
right or left, or centered in order to produce
the desired page layout.
When creating a flexbox container, the flex-
direction property and the justify-content
property are both required since they are
responsible for determining how responsive a
web page will be when shown. However, a
web developer will still need to configure
additional properties in order to specify how
the various pieces inside a container should
behave.
Flexbox attributes might be difficult to grasp
at first, but with consistent practice, one can
get familiar with and comprehend how they
function. The most difficult aspect of this task
is determining how to organize the sizes and
actions of the various elements in the
container.

CSS Grid
CSS Grid is a new specification that makes it
possible to create layouts using CSS. It
allows you to create and style your page
using flexible rows and columns instead of
fixed-width divs. It also makes it possible to
create a grid system for your web page
without the need for JavaScript.
Some of the properties of CSS Grid are:
Grid-template-rows: This allows you to
specify the size of each row of the grid.
Grid-template-columns: This allows you to
specify the size of each column of the grid.
Grid-template-areas: This allows you to
specify the areas of the grid.
The main idea behind CSS Grid is that you
can specify the exact position of each element
on the page with the use of CSS Grid
properties. When you add the display
property to a grid item (an element that has
the property display: grid applied to it), you
can set the size of the item to be either one of
the four grid line sizes:
Fit-content: the item fits on one grid line
(i.e., it has the width or height of the
container)
Auto: the item will be sized according to the
gridline size that fits the content the best.
Stretch: the item will fill the container.
Difference Between Responsive and
Fluid
The difference between fluid and responsive
design is the way a web page responds to the
size of the screen on which it is being viewed.
In fluid design, the page adjusts itself to the
width of the screen, whether it is a desktop
computer monitor, tablet, or mobile phone.
In responsive design, the page adjusts itself to
the size of the screen, whether it is a desktop
computer monitor, tablet, or mobile phone.
The two concepts are not mutually exclusive.
In fact, many designers and developers
combine the two to make a website work well
on different devices.
While these two terms are often used
interchangeably, there are actually some
major differences between the two design
approaches.
The first thing to note about fluid design is
that it is not a concept. It’s a process.
Like a painter, a designer creates a painting
with a particular mood or subject in mind.
Then, he or she paints the picture in a certain
style, with certain colors and a particular
palette.
In a fluid design, the same approach is taken
to the website. The designer creates a mood
and style for the site.
Both are responsive, but fluid design uses
CSS to create the fluidity of the design, while
responsive design uses the CSS grid system
to create the fluidity of the design.

The Anatomy of a Grid

When you are designing a user interface, you
are constantly coming up against limitations
in the number of elements you can fit onto a
screen. You can’t use every element, and you
need to choose which ones to use. You have
to design the interface so that it’s effective.
You need to avoid having elements that are
too small and elements that are too big.
You also need to avoid having elements that
are too close to each other. You need to
ensure that the interface doesn’t look messy.
It’s not always easy to design a user interface
that works well.
Grid systems in UI design
The way that you decide which elements to
use in a user interface is by using a grid
system. Grid systems are a way of making
sure that the elements you use in a user
interface are spaced out evenly. You’ll need
to decide what elements to use and how many
of each. You’ll also need to decide how to
space them out.
Grid systems are made up of grids. You can
make up your own grids, or you can use grid
systems that are designed by other people.
You can use a grid system to create grids for
different elements in a user interface. You
can also use a grid system to create a grid for
the whole user interface.

How to Align a Grid

When it comes to alignment, there are just a
few alternatives to consider. Any copy may
be positioned to the left, center, or right. The
center is best for shorter elements (such as a
headline or a call to action), whereas the left
is best for lengthier pieces (in western
culture, where we read top-bottom, left-right).
It’s also important to think about how the text
is oriented inside the page as a whole: at the
top, middle, and bottom. As a result, we have
a title that is aligned to the top left, a
paragraph that is positioned to the middle left,
and a call to action that is aligned to the
bottom center. It’s quite straightforward.
Images may be correctly aligned or mixed,
which means they can be placed in line with
text and grids, or they can float a bit inside
their containers, depending on the situation.
In general, correctly oriented photos will be
more visually appealing, yet floating images
may be acceptable for specific websites
(especially if there are lots of images).
However, we recommend that you choose
visuals that are properly aligned to the grid.
 CHAPTER NINE

The Psychology of Colors in

UI Design

For a long time, the idea of color psychology

was associated with the color theory of
Goethe, which stated that each color has an
emotional impact.
However, in recent years, the idea of color
psychology has become a bit broader and has
become a combination of psychology,
sociology, and even neuroscience.
In other words, color psychology is the study
of the psychological impact of color on our
senses. This includes the sense of sight, but
also the sense of smell and taste.
For example, we all know that red is
associated with love, while blue is associated
with calmness.
However, it’s not just about that.
We also know that certain colors are
associated with certain emotions and with
certain ideas.
All designers are familiar with the color
wheel and how it works, but here’s a brief
refresher on it and all the colors that go with
it:
Hue: These are the colors in their natural
condition, which means they were utilized
without any filters or lighting. These are
shown in the color wheel’s outermost circle.
Value: The quantity of light is included in
these hues. For instance, consider how the
hues of a color change when a specific
quantity of light is shone on them. For
example, trees look darker at night as
compared to when the sun shines on them.
Saturation: This relates to the color’s
intensity. When designing for digital or
printed purposes, for instance, the intensity
changes. The intensity ranges from 0 to 100
percent, with 0 being the lightest, generally
white tone and 100 representing the darkest
tone of that color.
The color ratio
The most successful color scheme for a
website or app will be 60-30-10. It’s much
too simple to use: 60% is your main color,
30% is your secondary color, and 10% is for
an accent color. Keep in mind that the accent
color should be the most brilliant color since
it will be utilized for the most important
components, such as a call to action elements.
You may retain the primary color as the
normal one and the secondary color to be
different
Significance of shadow in the design
process
Shadows convey signals about depth, the
direction of movement, and surface
boundaries. Never preserve a shadow of
black color; this is the most frequent error
that we commonly commit when making
shadows. Take an example from your
environment, particularly from semi-
transparent materials. Their shadows have
always inherited the color of the item.
Color in typefaces
Typography is the most significant feature of
any UI Design, and therefore upgrading it is a
crucial component of improving UI and UX
as well. Talking about colors in UI Design,
we usually attempt to maintain the hue of the
body on a little Darker grey shade rather than
black. The reason for this is because the
effect of contrast on screens is more severe
than that on paper, and therefore it’s fairly
tiresome to read the text with black shade.
The psychology underlying the use of the
following colors is as follows:
Red: This color should be used when you
wish to draw the user’s or viewer’s attention
to anything specific.
Yellow: Happiness, sunshine, and warmth are
represented by the color yellow; this color
should be used more prominently in images
to emphasize inspiration and drive.
Blue: Make use of this color to draw
attention to more professional interactions
and, more importantly, to instill confidence in
your brand among your customers.
Green: The color green represents nature as
its ultimate emblem, and it should be used to
emphasize images or user interface designs
that are related to the environment; this might
include websites or apps for the food and
tourism industries.
Orange is the color of vigor, excitement, and
spirituality, among other things. When
designing graphics or items that represent the
attributes listed above, designers may surely
utilize this color to throw a shadow over
them.
Purple is a color associated with monarchy,
intrigue, and enchantment. This color may
most likely be used to draw attention to the
luxurious nature of the advertising piece.
Finally, some pointers on how to take
advantage of the color palette in your UI/UX
design.
Maintain a sense of balance among the
colors.
Remember that certain color symbols may
change depending on the place or culture in
which they are used.
Contrast is your best friend, therefore treat it
as such. In addition, carefully consider the
psychology of colors and how they affect
your UI/UX Design.

Understanding Transparency Range

When we talk about transparency in design, it
is about revealing the inner workings of a
piece of design. It’s about how you’ve used
materials, colors, and typography to build a
product. It’s about the design process. It’s
about how a design team works together to
create a product. It’s about how you’ve
designed a product from the inside out.
Transparency is a term used to describe a
‘flat’ or ‘flat’ image that contains a two-
dimensional background and can be used in a
variety of ways to display information. It is
often used as an overlay over a background
image or a video background to present
additional information or interactivity.
Transparency is used in a wide variety of
websites, apps, and advertising – whether
you’re promoting a new restaurant or
showcasing your latest collection of clothing,
transparency allows you to communicate
your message.
How can you use transparency in
design
When you think about the content on a
website, you may think about what the user
can do, but when you think about the design
of the website, you should also think about
the visual content. This is where transparency
comes in and can be used in a wide variety of
ways to add a unique and engaging visual
element to your website.
There are many different ways you can use
transparency in design, and we’ll go through
a few of the more popular ways here.
Transparent navigation
Transparent navigation is one of the most
common ways that you can use transparency
in design. This is an effective way to
showcase additional information on your
navigation bar and allow the user to interact
with it by dragging their finger over the bar.
This is one of the most common ways that
you can use transparency in design, and it can
be used on navigation bars in a variety of
ways.
To create this effect, you’ll need to create a
navigation bar with a transparent background
and add some content to the navigation bar.
You can then add a mouse-over event to your
navigation bar, and when the user hovers
their mouse over the navigation bar, you can
display a small bit of information.

What Is Color Composition

When talking about color composition, the
first thing that we need to understand is that
all colors are not the same. There are
different types of colors, and each of them is
characterized by a certain number of physical
attributes. You can identify the type of color
by its brightness, saturation, and hue. Color
Composition is a term that describes the color
harmony of a particular color in a certain
space.
There are many types of color compositions,
but the most common are monochromatic,
chromatic, triadic, and complementary. Each
of these four types has its own characteristics
and its own functions, and each of them is
used for a different purpose.

Additive and Subtractive in Colors

The physics of color mixing may be divided
into two categories: subtractive and additive.
When you mix paint pigments together, you
are achieving subtractive color mixing, which
is the result. Anyone who has ever taken art
courses as a child knows that the basic colors
are red, yellow, and blue and that these are
the three primary colors. I’m here to tell you
that’s a complete and utter fabrication. I
believe they teach children this because the
colors magenta and cyan are difficult to
comprehend at a young age. Yellow is the
primary pigment, not magenta (which is red),
cyan (which is blue), or yellow (they got that
one right).
The effects of subtractive color mixing and
the results obtained by applying yellow,
magenta, and cyan filters are shown. When
you combine pigment colors, every additional
color you add darkens the final product.
When using subtractive mixing, every
additional hue that is added gets the final
result closer to black. The absence of color is
represented by the color black, whereas the
mixture of all colors is represented by the
color white.
Different primaries are used in additive color
mixing, such as using light. We work with the
colors red, green, and blue. Maintaining the
perspective that each additional light source
increases the brightness of the final product,
it becomes simpler to comprehend that when
colors are added in additive mixing, the
outcome becomes closer to white. All colors
are represented by white light, whereas
darkness represents the absence of all hues.

The two physics of color are in sync with one

another. Color primaries (also known as
secondaries) are created by combining
pigment primaries (also known as
secondaries). Blue may be created by
combining cyan and magenta. Green is
created by combining the colors yellow and
cyan. Red may be created by combining
yellow and magenta. When you combine
sufficient amounts of equal quantities of
yellow, cyan, and magenta, you produce the
color black.
Similarly, if you’re working with primary
colors of light, you can combine red and
green to produce yellow (remember that in
additive color mixing, the result is brighter
than the two colors you’re mixing); you can
combine green and blue to produce cyan, and
you can combine blue and red to produce
magenta. When you mix the colors red,
green, and blue, you obtain the color white.
Chromaticity of Colors
Chromaticity is a term used to describe the
degree to which a substance is capable of
absorbing and transmitting light of different
wavelengths, i.e., colors. Chromaticity is a
property of both natural and artificial
materials. It is an important characteristic of a
material used in color displays, where a
variety of hues is produced by varying the
intensity of different wavelengths of light.
Chromaticity is also important in the
production of colored pigments and dyes. The
color of a dye depends on the wavelength of
light it absorbs and the degree to which it
absorbs light of other wavelengths.
Colorimetric analysis of the dye solution will
tell you the wavelength(s) of light that the
dye absorbs.
If the dye absorbs only blue light, its color
will be blue. If it absorbs only red light, its
color will be red. If it absorbs light of all
wavelengths, its color will be black. The
color of a dye is determined (by the dye)
itself, the solvent in which the dye is
dissolved, and the dye concentration.
In the case of the pigment, the color of the
pigment depends on the wavelengths of light
it absorbs. Thus, a pigment with a very
narrow range of absorption will have a
narrow range of colors, and a pigment with a
broad range of absorption will have a broad
range of colors.
Colorants in paint are very similar to dyes in
that they are colorants that absorb light and
produce color. Colorants in paint are
substances that do not necessarily have any
relation to natural pigments. For example, a
pigment, a dye, and a colorant may all be
used to produce the same color.
Chromaticity is not a property that is used to
describe color alone. Many other properties
are also important in the production of color,
such as lightfastness and resistance to fading
and fading caused by the action of light, air,
heat, moisture, and other chemicals. The
International Association for Research in
Color has a list of color properties that may
be useful to a designer.
Applying Color Attributes
Color is one of the most potent tools in the
designer’s toolset. But like any other
instrument, it should be handled with caution.
Here you’ll discover a collection of
incredibly useful suggestions for utilizing
color.
1. Design in grayscale first
Developing design with color is a very
typical error among designers. While it could
be tempting to fill up the layout with color,
it’s wiser to resist that temptation. By
beginning in grayscale, you’ll be able to
concentrate more on constructing strong
visual order instead of examining an
unlimited number of different color
variations.

2. Think in terms of visual weight

Visual weight is a natural quality of an item
to draw the sight of a person. The greater
visual weight the thing has, the higher
probability that consumers will notice it.
Visual weight is a sum of three properties:
The size of the thing (typically, larger objects
have greater visual weight) (generally, bigger
objects have more visual weight)
The quantity of negative space surrounding
the item (more whitespace, higher likelihood
that people see the thing) (more whitespace,
more chances that users notice the object)
The color of the thing (contrasting color
makes the object more obvious) (contrasting
color makes the object more noticeable).
Put extra visual weight on the elements that
you want your users to view. For example, if
you create a landing page, you likely want a
call to response button to be one of the first
items consumers see when they visit the page.
3. Align colors to the brand
Brand colors should occupy a major part in
designing a color palette. Try to utilize your
brand’s colors in the layouts you build.
Suppose you’re in the approach of choosing
your brand colors, attempt to think outside
the box, and choose surprising color
arrangements. Why? As it allows you to build
a more memorable design for your users.
Recently many businesses began to employ
bright colors for their design. Vibrant colors
generate vitality and a feeling of urgency.
4. Select a color palette that is well-
balanced.
Inappropriate usage of color may quickly
cause your users to get overwhelmed. If you
don’t want your users to be distracted or
confused by your design, you should strive
for harmony in your layout. And this can only
occur when there is a sense of order in the
visual experience.
Here are a few easy principles that might
assist you in accomplishing your goal:
The 60–30–10 Rule is a simple formula
The 60–30–10 rule is a fairly basic guideline
that may be used to create well-balanced
color schemes. The concept is
straightforward: when creating a new color
palette, 60 percent of the palette should be
dedicated to one color (usually a neutral), 30
percent should be dedicated to another color
(usually a complementary color), and the
remaining 10 percent should be dedicated to a
third color (accent).
The guideline of a maximum of three
colors
In order to avoid looking like a clown or a
parrot, personal stylists often advise their
customers to limit their outfits to no more
than three colors in one piece. When
designing, it’s best to keep the number of
colors you utilize in your design to a
minimum unless you’re an expert in color
combinations.
If you believe your design needs additional
colors, experiment with deeper and lighter
shades of the colors, you’ve previously
chosen.
5. Make use of color as a visual signal
Color is not just for aesthetic purposes; it may
(and should) have a clearly defined practical
purpose as well. Color should be used as a
functional aspect by designers in order to
facilitate the process of interacting with a
product. In addition to the design of the
object, color is something that people depend
on while interacting with digital items.
It is possible to use color to: distinguish
between interactive and static things,
distinguish between interactive and static
objects, and distinguish between interactive
and static objects.
Describe the present status of the object (for
example, whether it is an active or inactive
element).

Draw the attention of the user to a critical

message.
However, in order to produce satisfactory
results, it is necessary to ensure that color is
applied consistently. To put it another way, if
you decide to use a certain color for a
clickable item, that color should be utilized
across your product as well. The ability to
draw on prior experience will allow
consumers to make more informed decisions
when dealing with different aspects of your
product.
6. Prioritize accessibility above all else.
The appropriate contrast between text and
backdrop is critical to the user’s perception of
the website. The fact that you are placing two
colors with low-value contrast close to one
other makes it very tough to read your
material each and every time.
When it comes to mobile design, the issue
becomes much more crucial. Mobile users
may be outside or in bright environments,
which might produce screen glare, which can
render your content unintelligible.
 CHAPTER TEN

Understanding Microcopy
When a user first visit your website, they will
have a certain expectation of what the page is
going to look like. However, if the
information on the page is not well written, it
can confuse or disappoint the user.
Microcopy, therefore, is the writing on your
website’s pages that explains to the user what
the page does.
There are many types of microcopies, such as
headlines, titles, navigation, subheads, and
other elements that describe the page’s
content. Microcopy can take on many forms,
and different types of microcopies can be
used together to increase the user’s
understanding of the page’s content.
Microcopy is not only used on web pages; it
can be used in email marketing messages,
text messages, and social media posts. The
microcopy you choose to use will depend on
the website’s audience, the platform you’re
using, and the content of the page.

How to Do an F-Pattern Design

The F-pattern design takes into account how

visitors start reading in the top left corner of
the page and skim horizontally across the
page. They then read across the center of the
page and on down the page, skipping along
the left side. The F-pattern design has both
advantages and disadvantages.
You can set the highlights where people are
most likely to search for them by
understanding how the human eye scans over
the top of the page, drops down, then scans
across again. If your heat maps reveal that
your readers follow the F-pattern, here are
some ideas for how to capitalize on this
information and leave a lasting impression.
1. Put Your Logo in the upper left corner
Because most English-speaking visitors will
begin their trip on your website in the upper
left corner, this is the best place to put your
logo. Your logo distinguishes your website
and informs visitors about the nature of your
company. You may also use the symbol as a
link to your home page. No matter where a
visitor travels on your site, they may return
home by clicking the logo. Even if they aren’t
reading in an F-pattern, they will most likely
begin on the top left.
2. Maintain a good user experience
Around 80% of individuals who are
unsatisfied with your site will go to one of
your competitors’ pages. You should produce
a user-centered design that satisfies
expectations according to the rules of user
experience (UX). Because people read in
certain patterns, being aware of them when
designing your site will make it more useful.
Knowing how the eye travels in an F-pattern
design helps you to put the most important
information where users can readily reach it.
Consider the page’s objective. Why do you
think people will come to see you? How can
you make doing an action that turns them
from browsers to leads seem nearly
effortless?
3. Create a Hierarchy of Navigation
The majority of websites feature a top
horizontal navigation bar for a purpose. Users
not only anticipate your menu to display near
the location, but it should also fit the way
they read a page in an F-pattern design.
The navigational hierarchy determines which
content on your website is essential and
where it may be found. Limit the number of
choices to four or five. Consider the most
popular categories and narrow down your
options to just a few. Everything else is
classified as a subcategory.
Remember that many of your visitors will be
using mobile devices to view your site. Is it
possible to accommodate all of the menu
elements on a smaller screen?
4. Take a left.
Is it necessary to constantly place your menu
across the top and your logo in the upper left
corner? Obviously not. Knowing what users
anticipate and how they read helps you to
think outside the box a little.
It’s OK to use a splash of color to draw
attention to an area where the eye doesn’t
usually move. Everything in an F-pattern
design doesn’t have to be in the form of an
“F.” Instead, it provides a plan for where
important pieces should be placed, as well as
suggestions for how to divert attention away
from those locations when necessary.
5. Pay close attention to the footers
Should you skip the footers if you’re utilizing
an F-pattern design? It is to save time that
individuals read in an F-pattern. Users scroll
down the page, scroll across the page, scroll
across the page, scroll across the page, scroll
across the page, scroll across the page, scroll
across the page, scroll. You would believe
people won’t bother looking at other
materials at first sight, but this isn’t the case.
If you’ve thoroughly engaged them, they’ll
typically go back and read things again. Your
footer is a place where you may offer
information that didn’t fit in the F.
There may be facts that aren’t critical to
making a choice but are nevertheless
relevant, such as how to reach you or your
company’s history. Consider what
information you’d want to include in your
footer and what information isn’t as
important to consumers selecting whether or
not to purchase from you.
6. Include a call to action
One of the most important aspects of a high-
converting landing page is the call to action
(CTA). It instructs the user on how to
proceed and how to join the buyer’s journey.
Because you know how your visitors look
across and down your website, you’ll know
where a button would be most effective. For
example, place your CTA on the left, middle,
or center of the page. Look at heatmaps to
discover where users are spending the most
time on your page and place your CTA there.

How to Do a Button Design

An interactive element with a clearly

identified action is referred to as a button. If a
button reads “Pay,” you can guarantee that
clicking it will prompt you to enter your
credit card information. Buttons are crucial to
UI since most interfaces demand us to take
some form of action in order to go on.
Buttons are everywhere, whether you’re
saving, checking out, or downloading
anything. There’s a lot more you can do with
buttons, but these five stages are crucial.

1. A button should have the appearance of

a button.
This one is quite straightforward. We’re
accustomed to rectangles as buttons in real
life (and sometimes circles). It’s a certain
method to confuse your consumers if your
form is neither a rectangle nor a circle.
This is how Skeuomorphism can still be seen
in digital interfaces, even when they are
almost flat. Buttons in the user interface must
still appear and feel like buttons on a TV
remote. A button with an “organic” swirly
form will not operate. Triangles and
hexagons will likewise take much longer to
process as buttons. Some users may never be
aware of what they are doing.
The only other choice is an underlined text
link if you don’t want to use a rectangle or a
circle as your primary button form. If you’re
undecided about the hue, go with dark blue.
2. Dimensions
Have you ever needed to reset an electronic
item by first searching for a needle to put in a
tiny reset button? This design approach was
used to ensure that your device would not be
reset by mistake. Consider how little all the
buttons would be if they were all that small.
That would make them very difficult to use
and inconvenient.
Buttons should be large enough to be used
comfortably. How huge is it, though?
In the touch-screen age, we normally gauge it
by the size of a common fingertip in
proportion to the density of the screen. At 1x,
a square with a dimension of 44 to 48 points
becomes more pleasant to handle. Some
applications, such as Tinder, have tried
extending their CTA buttons to 50 points
(height) and reported positive results.
Obviously, you can’t go too far, but a height
gain of 50–60 points is worth trying.
We can go a little smaller on the desktop
since the mouse pointer is more accurate but
not too tiny. It must still be simple to direct
the mouse at. Thus a nice 32-point size
should usually be enough.
3. It’s all about the alignment!
The most common aesthetic flaw in all UIs is
incorrect button-label alignment. While most
designers and developers are able to align it
horizontally, vertically, it is seldom centered.
Most of the time, the label is only a smidgeon
too high or too low.
Although uppercase labels are clearly simpler
to center, it’s better to keep to utilizing the
baseline when dealing with Title-Case (or
simply align it to the initial, capital letter and
disregard the descending y’s, j’s, and g’s).
It’s also crucial to consider the button and
text sizes. There is no way to have a button
that is 32 points and text that is 17 points
neatly in the middle. Adjust one of them to fit
the other.
4. Practice your shadows.
Drop-shadows help distinguish an item from
the backdrop and identify it as something you
can click or touch. That’s because we
naturally assume that if something seems to
be higher than the backdrop, it may be
brought down.
Add a bit of the background color to the
shadow color to make your buttons seem
friendlier. The shadow in the illustration
above is a mixture of blues. Shadows that are
hard, dark, and contrasty should be avoided.
While they draw attention to the button, they
are jarring and unpleasant to look at, and they
divert focus away from other things.
5. Labels that can be read
We’ve previously proven that the button
labels must be centered, but they also need
sufficient breathing area in order to be
legible. Ignore buttons that have a small
amount of space around the text. Above and
below the label, a good rule is to use the
capital letter W from your label font. On the
sides, 2 x W.
Obviously, the button may be broader than
that; this is just the smallest size that looks
nice and is easy to read.
How to Do Shadows Design
In today’s UI designs, shadows are
everything. They are, behind the fill, stroke,
and corner radius, one of the most important
UI components.
Design that is completely flat is no longer a
popular style. You’ll learn how to create
amazing shadows for your cards, buttons, or
any other UI element in this quick lesson.
1. Avoid using shadow defaults.
Whether you use Sketch, Figma, or Adobe
XD, it makes no difference. All the default
shadow presentations provided by design
tools are terrible. Do not make use of them!
You must constantly change their appearance
if you want them to seem clean and trendy.
2. Make the shadows seem softer
The soft shadows make up the majority of the
excellent shadows. Reduce the opacity (10–
30%) and increase the blur level to improve
their appearance (16px-40px). Examine your
shadow now; this configuration has
significantly enhanced its appearance.
3. Consider using a blurred layer to create
shadows.
The standard shadow style is easy to use, but
if you want to make a statement, consider
creating a separate layer with a blur as a
shadow.
4. Make the hue of the shadows more
realistic.
Grey in its purest form never looks nice
(except pure black-white theme). Look at
how the shadows in real life are always
colored subtly. It will look much better if you
add the tone of your UI’s neutral color to the
shadow.
5. Use Material Colors to Create a Shadow
Examine several real-world materials,
particularly semi-transparent ones. Their
shadows take on the object’s hue. These tones
may be used to produce an illustration of that
sort of material. It’ll look brand new!
 CHAPTER ELEVEN

Prototype Design in Adobe

Photoshop
There are now a plethora of prototype tools
and techniques available to assist you in
rapidly and simply creating website mockups.
Photoshop CC is a terrific tool for quick
prototyping, even if you don’t recognize it.
Designers who wish to rapidly-produce
wireframes or prototypes to present with a
customer or construct a design suitable for a
developer will find that the program has
grown in capabilities with each release.
The ability to isolate layers, modify edges
with the live Rounded Rectangle tool, and
copy CSS elements from individual layers are
among Photoshop CC’s most valuable quick
prototyping capabilities. In addition, the
Creative Cloud setup includes essential
collaboration aspects.
In this tutorial, we’ll show you how to make a
quick prototype in Photoshop by combining a
variety of tools to build a developer- and
client-friendly page mockup.
Step 1. Begin with a grid.
Create a document with the dimensions of the
screen you’re going to build (smartphone,
tablet, and so on). Next, create a grid that will
serve as the foundation for the construction.
Open the extension and enter your desired
margin widths, column count, and gutter
width. Once you’ve pressed the GG button,
your grid will appear.
Step 2. Define the various regions
It’s a good idea to blackout essential portions
of your page layout at this time. Make a
folder for your header, footer, content, and
other elements. Starting with a light grey box
to indicate any major elements of the site
design, it’s a good idea to define them. I’ve
drawn the site’s header section (1200 x
240px) using the Rectangle tool and inserted
the title.
Step 3. Incorporate some navigation
Now you can start adding navigation items.
Select the layer, hold the Opt/Alt key, and
drag to copy your type. The alignment is
constrained while Shift is held down. Select
all of the navigation text and use the Tool
Options bar’s Distribute Vertical Centers
option to perfectly align your text layers. This
aligns and uniformly spaces your layers
vertically, making it suitable for menu items
like those illustrated.
Step 4. Make your rectangles round.
Using the Rounded Rectangle Tool, we’ve
added a sign-up form to the homepage layout.
The live Rounded Rectangles function in
Photoshop CC allows you to adjust the corner
radius of your design. This means that if your
design asks for it, you may go back and
adjust your corners later. This may seem to
be a little feature, yet it is quite useful.
Step 5. Include images
It’s worthwhile to convert photos to Smart
Objects since they’re easy to update or
replace. Your placeholder rectangles may be
used as vector masks to store pictures. Bring
in a picture as a new layer, duplicate the
rectangular mask, and connect it to that layer,
or create a selection from your rectangle and
paste it into the new layer using Paste Special
> Paste Into.
Step 6. Make use of layer styles
Layer styles are a good technique to add
effects to your photos, and to copy a layer
style from one layer to another in your stack,
press Opt/Alt and drag the FX icon to the
new layer. Simply copy your backdrop
rectangle and combine it with your text layer
into a layer group to create a Hover Overlayer
that can be switched on or off.
7. Separate the layers
If you simply want to alter certain of your
layers, this is another valuable function in
Photoshop CC. Go to Select > Isolate Layers
after selecting the layers you want to alter.
This allows you to concentrate on the regions
that need attention without being distracted
by other layers.
Step 8. Create picture assets
Adobe Generator is a function in Photoshop
CC that allows you to quickly produce
picture assets. Select File > Generate > Image
Assets from the File menu. Add a file
extension such as.png or.jpeg to the Layers
panel to automatically export that layer to a
specified folder. We’ve used an icon file to
do this.
Step 9. Copy CSS properties
When developing an HTML prototype, the
option to duplicate a layer’s CSS is a fantastic
tool in Photoshop CC. To accomplish this,
press Ctrl+right-click on the relevant layer,
then choose Copy CSS Style from the context
menu to copy the code to the clipboard. Paste
your CSS code into a new document in
Dreamweaver, Muse, or Adobe XD.

How to Build Persuasive Products

Persuasion in design is sometimes seen as a
subset of UX, yet it extends beyond UX and
standard usability mechanics. It is about
comprehending the emotions that impact
people’s behavior and decisions and then
acting on that knowledge to create engaging
user encounters. The persuasive design
combines psychological concepts of
persuasion, consumer decision-making,
engagement strategy, and social psychology
to every step of the design process,
identifying possible obstacles and emotional
triggers to elicit the desired behaviors.
UX specialists have traditionally thought
about persuasion in design in terms of e-
commerce sites, but the notion is equally
relevant to intranets, mobile devices, games,
services, and, in fact, any product or tool that
is designed to induce positive behavioral
change. Installing energy meters in houses,
for example, might impact consumer
behavior by increasing people’s awareness of
their energy usage and how they can
minimize it. A weight reduction program may
benefit from a mobile app, and an intranet
can facilitate collaborative working methods.
All of these scenarios need the use of a
technology system to impact behavioral
change and boost engagement.
Making a choice is an act that is impacted by
both emotion and logic. Rationality
necessitates arguments for action, yet no
choice can be taken without passion.
Emotions are reactive as well as anticipating.
It is our gut instinct, which guides our
instinctive, survival-based reflexes, that
allows us to make judgments and contemplate
the repercussions of those decisions. To be
able to design successfully, it is vital to
understand what emotions support the
intended action.
But how can we create to capture something
as mysterious as emotion when it is
inconsistent and even erratic?
Making use of psychological
principles to persuade
The obstacles and triggers to desirable user
actions will differ depending on the company
objectives and consumer attributes. Any one
of six universal social influence principles
may operate as a spark to elicit an emotional
response:
Reciprocity: We feel obligated to repay
favors.
Expertise: We rely on specialists.
Commitment/Consistency: We desire to
follow through on our commitments and
principles.
Scarcity: The scarcity of a resource increases
our desire for it.
Likeability: The more we like someone, the
more likely we are to say yes to them.
We turn to others to direct our conduct,
which is known as social proof.
In addition to social influence principles,
designers may use psychological concepts to
improve engagement and assist individuals in
making informed decisions, making things
simple, relevant, and trustworthy by
including persuasive elements into the
interface aids in the elicitation of desirable
user behaviors—behaviors that correspond
with the product’s business goals.
Among these psychological principles are:
Completeness: We are wired to connect the
dots.
Positive Reinforcement: Informing clients
when they are doing well can keep them
interested.
Loss Aversion: Because people dislike
losing things once they have them, notifying
clients when they are about to lose something
is a chance to keep them engaged.

Saving for the Future: According to

research conducted in the United States,
individuals are considerably more inclined to
make a promise to spend money in the future
than to spend it now.
The Power of Free: We have a tendency to
seek out free goods, even if they come at a
cost afterward.
Susceptible Moments: Possibilities for
cross- and up-selling must be presented at the
right moment when consumers are most
susceptible.

How to Create Sitemaps

Often, a sitemap is described as a piece of
XML or HTML code that Google employs to
crawl the pages of your website. We’ll be
talking about the second form of sitemap,
which is a design and user experience
sitemap. Users may access website pages
using a sitemap, which is a planning tool that
displays a list of website pages that are
normally structured in a hierarchical manner
and are available to them. When developing a
new website, site mapping is vital, but it does
not have to be difficult or time-consuming to
do. To create your first sitemap, just follow
the steps outlined below:
1. Because your sitemap will be utilized by a
variety of colleagues and stakeholders, it is
critical that you record your choices in a
digital format that is readily available to
everyone on the project team.
2. Make a list of all the important parts of
your future website, and then write them
down on post-it notes (one sticky note for
each component).
3. Is there anything more you’d want to
include? Some material is not essential
enough to warrant inclusion in a certain
category on your website, yet it is still worth
mentioning. This material is often placed on
secondary sites that are not accessible from
the website’s main page but which may be
grouped together under various categories.
Stickies should be used to jot down ideas for
auxiliary pages.
4. Organize your sticky notes by placing
secondary pages behind main pages in a row
of sticky notes. Pages will be organized in a
manner similar to a family tree.
5. Determine which pages are required and
which ones are not. With 20 separate major
pages, your website will become quite
bloated, so meet with all of your stakeholders
to determine what your team’s top priorities
are before creating any further pages.
6. Once you’ve received input, you may
eliminate anything that seems to be
excessively time-consuming.
7. After you’ve finished, go through the
layout with your team to ensure that it makes
sense and that all the stakeholders are pleased
with the final product.
8. You may put sticky notes or comments for
designers and other stakeholders on certain
pages that you wish to pay close attention to.

Understanding What Motion Is

The use of animation and motion design to
tell tales may result in very visually beautiful
user interfaces and experiences. However,
more crucially, they have the ability to
develop extraordinarily useful user interfaces.
In the early days of online and app design,
distinctive motion features and interaction
were considered “bells and whistles.” Today,
these aspects are considered essential. As
long as you were familiar with the marquee>
tag, which was popular in the 1990s and sent
hamsters dancing across your website, you
were good to go.
Nonetheless, motion interaction is becoming
more important in driving how users
instinctively find and connect with businesses
and goods. Due to the fact that the human eye
follows motion, the strategic implementation
provides businesses with the potential to
gently take customers on a journey via
narrative or customized online and mobile
app experiences.
Motion design contributes to the creation of
user interfaces that are enjoyable and
intuitive. When implemented properly, a
motion may lead the consumer through their
interaction with your digital product while
also communicating a message about your
company or product. You may tailor
animation to meet the demands of your users
in order to offer value and enhance various
areas of their interactions with you.

What Is Accessibility
Accessibility is the idea of how a service or
product can be utilized by everyone.
However, they experience it. Accessibility
rules exist to benefit persons with
impairments, but designers should aim to
accommodate all possible users in various
settings of usage anyhow. Doing so has
concrete positive impacts improves designs
for everybody.
Accessibility versus Usability
Considering that they appear similar,
accessibility is frequently mistaken with
usability. Both intersect and are crucial
components of user experience (UX) design,
but there are also major variances between
them. Usability is concerned with whether
designs are functional, efficient, and
pleasurable to use. Presumably, this implies
that usability encompasses accessibility
because a product that is difficult to access is
equally useless to someone with a handicap;
realistically, however, usability tends not to
expressly concentrate on the user experience
of persons with disabilities. Accessibility, on
the other hand, is focused on ensuring all
users are allowed to obtain an equal user
experience; however, they discover a product
or service (e.g., utilizing assistive devices)
(e.g., using assistive devices). With the
exception of usability, accessibility focuses
on persons with impairments.
Accessibility guidelines in practice
In its most recent Web Content Accessibility
Guidelines, the World Wide Web Consortium
(W3C) establishes guidelines for accessible
design (WCAG). You may serve users with
varying skills by following these major
points:
✓ Use a content management system
(CMS) that adheres to accessibility
guidelines (e.g., WordPress). Whenever
you make changes to a pre-made
template, be sure the themes were
created with accessibility in mind.
✓ Personas with diverse skills should be
included.
✓ For text, utilize header tags
(optimally, use CSS for consistency
throughout). Go from one heading level
to the next in a straight line (without
skipping).
✓ On content-enhancing photos, use alt
text.
✓ Have a link building strategy (i.e.,
describe the link before inserting it)
✓ On mouseover, provide visual clues
(e.g., PDF icons), underline links, and
 highlight menu links.
✓ With careful color selection and great
contrast, you can improve visibility.
✓ To assist users, utilize reference
shapes (e.g., “Click the square button”).
✓ Take a look at how screen readers
deal with forms. Tags are used to label
fields and provide information to screen
readers. Make the tab arrangement more
aesthetically appealing.
✓ Assign each field an ARIA necessary
or optional role (know how to use
ARIA). The asterisk convention should
be avoided.
✓ In lists, use the correct HTML
components. Put them on a separate line
from the text.
✓ Slideshows and other dynamic
materials should be presented with care.
For overlays, etc., see the ARIA
standards.
✓ Validate your markup using the W3
standards site to guarantee that your
code is readable by all browsers.
✓ Transcripts for audio and
captions/subtitles for video are available.
 ✓ Make material easy to grasp —
excellent information hierarchy,
progressive disclosure, and prompting
all help to reach more people.
✓ Attempt to utilize your design
without the aid of a mouse. Scrolling
may be difficult.
✓ To assess your design’s accessibility,
use tools like WAVE and Color Oracle.
Naturally, you should evaluate accessibility
with actual users. While it’s hard to cover all
use cases, your efforts to reach all people
may pay off in a variety of ways, including in
unexpected places.
 CONCLUSION
In the world of software design, there’s an
oft-repeated mantra: “Good design is the
difference between solving a problem and
making a mistake.” It’s a simple, elegant, and
timeless expression, but it’s also true.
We’ve all seen products that are poorly
designed. We’ve all created products that
aren’t well-designed. That’s why we should
all be wary of the term “UX design”—if it
implies that a product is well-designed, it can
often be taken to mean it’s just fine.
This book has talked about user experience,
which is the experience the user has when
using a user interface, and has successfully
ensured the experience you deliver to your
users is as good as it can be because we
believe the more awesome the user
experience, the more awesome the product.
My advice for you is to understand the basics.
We’re not saying that you need to have a
degree in the subject, but you need to
understand the process. There are many
aspects of a design. If you don’t understand
how a design is made, you will not be able to
make a good one. The most important thing is
that you need to understand the concept of
design.