ELEMENTS OF DESIGN CHANGE

1. Colors
Color is an important element of design that can affect the mood, emotion, and
perception of a design. Color can be used to create contrast, emphasis, and visual
interest, and can be used to convey a specific message or brand identity.
Color Psychology
Color psychology is the study of how colors COME affect human behavior and
perception. Different colors can evoke different emotions and associations, and can
be used effectively in design to create a specific mood or tone.
Here are some examples of how different colors can affect perception:
• Red: Red is often associated with passion, love, and danger. It can also
increase appetite and heart rate.
• Orange: Orange is often associated with warmth, happiness, and energy. It
can also evoke feelings of excitement and adventure.
• Yellow: Yellow is often associated with happiness, optimism, and caution. It
can also evoke feelings of caution and cowardice.
• Green: Green is often associated with nature, growth, and tranquility. It can
also evoke feelings of calm and relaxation.
• Blue: Blue is often associated with trust, loyalty, and calm. It can also evoke
feelings of tranquility and calm.
• Purple: Purple is often associated with creativity, royalty, and luxury. It can
also evoke feelings MONDAY of mystery and spirituality.
Website:
Use picular.co to search for colors that match a particular service or product.
By understanding the associations and emotions evoked by different colors,
designers can use color effectively to create the desired mood and tone in their
designs
Color Wheel
The color wheel is a visual representation of the relationships between different
colors. It is based on the,
1. Primary colors (red, yellow, and blue), which cannot be created by mixing
other colors, and the,
2. Secondary colors (orange, green, and purple), which are created by mixing
primary colors together.
The color wheel can be used to understand how different colors relate to each other
and how they can be used together in design.
Website:
Use coolors.co for good complementing colors that contrast well.

Gradients:
A gradient is a transition between two or more colors, with the colors blending
smoothly together. Gradients can be used to add visual interest and depth to a
design, and can be created using tools such as Figma, Adobe Color or Color-zilla.
There are several types of gradients that designers can use in their designs:
1. Linear gradient: A linear gradient transitions between two colors in a
straight line.
2. Radial gradient: A radial gradient transitions between two colors in a
circular pattern.
3. Angular gradient: An angular gradient transition between two or more
colors in a triangular or wedge-shaped pattern.
4. Diamond gradient: A diamond gradient transitions between two or more
colors in a diamond-shaped pattern.

Color Theory
Color theory is a set of principles used to determine which colors will look
aesthetically pleasing when used together. Color theory is the proper application of
all the above discussed elements which involve color psychology, color
combination, color wheel, and gradients.
By understanding and applying these principles of color theory, designers can
create visually appealing and cohesive designs that effectively communicate their
message.

2. Typography
Typography is the art and technique of arranging type to make written language
legible and readable when displayed. It involves choosing typefaces or font, font
sizes, font weight, line height, paragraph spacing, and letter spacing, and adjusting
the space between pairs of letters.
- Baseline
- Tracking/ Line Height
- Font
- Font Weight
- Paragraph Spacing
- Letter Spacing
- Recommendations
Baseline
In typography, the baseline is an imaginary line upon which most characters in a
font sit. It is the line upon which letters like "a" and "g" rest, and the point from
which descenders on letters like "p" and "y" extend. Baseline grid is a system for
aligning text across multiple columns or pages in a document.

Line Height
Line height, also known as leading, refers to the vertical space between lines of
text. In typography, line height is measured from the baseline of one line of text to
the baseline of the line above it.

Font
A font is a specific style within a typeface. A typeface is a design for a set of letters
and numbers, and a font is a specific variation of that typeface, such as bold, italic,
or regular.
For example, the Arial typeface includes several fonts: Arial Bold, Arial Italic,
Arial Regular, etc.
Fonts are an important element of design, as they contribute to the overall aesthetic
and readability of a document or user interface. Choosing an appropriate font for a
project is an important part of the design process.

Font Weight
Font weight refers to the thickness of the characters in a font. It is an aspect of a
font that can be varied to make text stand out or to create visual hierarchy within a
design.
Paragraph Spacing
Paragraph spacing refers to the amount of space between paragraphs in a block of
text. In digital design, paragraph spacing is typically specified in pixels or other
relative units.
Proper paragraph spacing can improve the readability and legibility of text by
helping to break up large blocks of content and create visual hierarchy.
In general, it is a good idea to add some space between paragraphs to make the text
more visually appealing and easier to read.
Letter Spacing
Letter spacing, also known as kerning, refers to the amount of space between
individual letters in a block of text. In digital design, letter spacing is typically
specified in pixels or other relative units.
Proper letter spacing can improve the readability and legibility of text by helping to
create even spacing between characters and preventing letters from appearing too
crowded or too far apart. It can also help to establish the tone and personality of a
design by contributing to the overall aesthetic.

Here is a list of some common fonts that are often used in UI/UX design:
• Roboto
• Inter
• Arial
• Helvetica
• Open Sans
• Space Gotesk
• Montserrat
• Calibri
• Verdana
• Gotham
. Poppins
• Futura
. Lato
. Manrope

3. Iconography
Iconography is the use of symbols and icons in UI/UX design. Icons are simple,
graphic symbols that can be used to represent various actions, functions, or
concepts. They are often used in UI design to help users navigate a website or
application and perform tasks more efficiently.
Some best practices for using iconography in UI/UX design include:
• Use icons to represent familiar concepts or actions: Choose icons that are
easily recognizable and intuitive to the user.
• Use a consistent style: Choose a consistent style for your icons to create a
good look and feel in the design.
• Use appropriate sizes and spacing: Make sure that your icons are large
enough to be easily seen and tap-able on small screens, and that there is
sufficient spacing around them to make them easy to tap.
• Use labels or tooltips to provide context: Use labels or tooltips to provide
context for unfamiliar icons and help users understand their function.
• Use appropriate file formats: Use appropriate file formats for your icons,
such as SVG or PNG, to ensure that they look good at different sizes and
resolutions.
DESIGN THINKING PROCESS
(INTRODUCTION TO UX)
Design thinking is a process for creatively and systematically addressing problems.
In the context of user experience (UX) design, it involves understanding the needs
and motivations of users, and then using that understanding to come up with
solutions that meet those needs in a way that is both functional and delightful to
use. The design thinking process typically follows a set of steps:
1. Empathize: This step involves getting to know the user and understanding
their needs and motivations. This can be done through research methods
such as interviews, observations, and surveys.
2. Define: In this step, you define the problem that needs to be solved, based
on what you learned in the empathize step.
3. Ideate: This step is all about coming up with as many ideas as possible for
solving the problem. It's important to generate a lot of ideas and not worry
about evaluating them at this stage.
4. Prototype: In this step, you take one or more of your ideas and turn them
into a tangible form that can be tested with users. The prototype can be
anything from a simple sketch on a piece of paper to a fully functional
product.
5. Test: This step involves getting feedback on your prototype from real users.
This can help you understand what works and what doesn't and make any
necessary adjustments.
These are the main 5 processes, but one can still add yet another one which is the
end product of the whole design - implement - as the sixth process
USER PERSONA
A user persona is a fictionalized representation of a typical user of a product or
service. It is typically developed by designers and marketers as a way to
understand and empathize with the needs, goals, and behaviors of their target
audience. A user persona typically includes demographic information, a
description of the user's motivations, and a summary of their attitudes and
behaviors. It is used as a tool to help guide design and marketing decisions, and to
ensure that a product or service is tailored to the needs and preferences of its target
users

USER JOURNEY MAP

A user journey map is a visual representation of the experiences, emotions, and
behaviors of a user as they interact with a product, service, or brand. It helps
designers and researchers understand the user's needs and motivations, and identify
pain points and opportunities for improvement in the user experience (UX).
To create a user journey map, you can follow these steps:
1. Identify the user group you want to focus on and define their goals and
needs.
2. Map out the various touchpoints where the user interacts with your product,
service, or brand, including online and offline experiences.
3. For each touchpoint, consider the user's thoughts, feelings, and actions.
What are they trying to accomplish? How do they feel during the
experience?
4. Identify any pain points or areas for improvement in the user's journey.
5. Use this information to iterate on and improve the UX of your product,
service, or brand.
It can be helpful to use a variety of research methods, such as user interviews and
usability testing, to gather data for your user journey map

EMPATHY MAP
An empathy map is a tool that UX designers use to understand and identify with
the needs, goals, and behaviors of a specific group of users. The empathy map is a
visual representation of the user's thoughts, feelings, behaviors, and pain points. By
creating an empathy map, designers can gain a deeper understanding of the user's
perspective and create designs that better meet their needs. The empathy map
typically includes four quadrants: thoughts, feelings, actions, and needs. By
understanding what the user is thinking, feeling, doing, and saying, designers can
create more empathetic and effective designs

USER FLOW DIAGRAM

A user flow diagram is a graphical representation of the steps a user takes to
complete a task on a website or app. It shows the different screens or pages the
user interacts with, and the actions they take in order to complete the task. The goal
of a user flow diagram is to identify any areas of confusion or friction that may be
causing users to abandon the task, and to suggest improvements to make the task as
smooth and straightforward as possible.
To create a user flow diagram, you can start by identifying the main task that users
are trying to accomplish on your website or app. Then, break down the task into
smaller steps and map out the sequence of screens or pages that the user will need
to go through in order to complete the task. You can also add arrows to show the
flow of user actions, and include notes or annotations to provide additional context
or explain the purpose of each step.
Some common elements that may be included in a user flow diagram include:
• Start and end points: The starting point is the page or screen where the
user begins the task, and the end point is the page or screen where the task is
completed.
• Input and output: Input is any information or actions that the user must
provide in order to complete the task, such as filling out a form or making a
selection. Output is any information or feedback that the user receives as a
result of their actions, such as a confirmation message or an error message.
• Decision points: Decision points are points in the flow where the user must
make a choice or decision that affects the path they will take through the
flow.
By creating a user flow diagram, you can better understand how users are
interacting with your website or app, and identify any areas that may be causing
problems or confusion. This can help you design a more user-friendly and efficient
experience for your users