Introduction

to Design
Principles
Importance of UI/UX Design
For businesses to improve and achieve set goals, UI/UX design plays a crucial role in
developing digital products that address a user’s needs directly. Improving sales and product
quality are unachievable when zero attention is paid to a user.

● Creates a positive impression of a product- A user’s impression and experience

determine the acceptance level a product would attain in the target market.
● Indispensably attracts and sustains a user’s attention within a short period.
● Assures users and gains trust through seamless experiences with a product.
● Enables businesses to convert prospective customers into loyal customers.
● Ultimately, it improves a product’s usability and responsiveness.
The Main Elements Of Design

● Line
● Color
● Shape
● Space
● Texture
● Typography
● Scale (Size)
● Dominance and Emphasis
● Balance
● Harmony
Basic Visual Design Principles
Contrast

Contrast refers to how different elements are

in a design, particularly adjacent elements.
These differences make various elements
stand out. Contrast is also a very important
aspect of creating accessible designs.
Insufficient contrast can make text content in
particular very difficult to read, especially for
people with visual impairments.
 Balance

All design elements and principles—

typography, colors, images, shapes, patterns,
etc.—carry a visual weight. Some elements are
heavy and draw the eye, while other elements
are lighter. The way these elements are laid
out on a page should create a feeling of
balance.

There are two basic types of balance:

symmetrical and asymmetrical. Symmetrical
designs layout elements of equal weight on
either side of an imaginary center line.
Asymmetrical balance uses elements of
differing weights, often laid out in relation to a
line that is not centered within the overall
design.
Emphasis

Emphasis deals with the parts of a design that

are meant to stand out. In most cases, this
means the most important information the
design is meant to convey

Emphasis can also be used to reduce the

impact of certain information. This is most
apparent in instances where “fine print” is
used for ancillary information in a design. Tiny
typography tucked away at the bottom of a
page carries much less weight than almost
anything else in a design, and is therefore
deemphasized
Proportion

Proportion is one of the easier principles of

graphic design to understand. Simply put, it’s

the size of elements in relation to one another.

Proportion signals what’s important in a design

and what isn’t. Larger elements are more

important, smaller elements less

Hierarchy
Hierarchy is another principle of design that directly relates to how

well content can be processed by people using a website. It refers

to the importance of elements within a design. The most important

elements (or content) should appear to be the most important

Hierarchy is most easily illustrated through the use of titles and

headings in a design. The title of a page should be given the most

importance, and therefore should be immediately recognizable as

the most important element on a page. Headings and subheadings

should be formatted in a way that shows their importance in

relation to each other as well as in relation to the title and body

copy
Repetition
Repetition is a great way to reinforce an idea.
It’s also a great way to unify a design that
brings together a lot of different elements.
Repetition can be done in a number of ways:
via repeating the same colors, typefaces,
shapes, or other elements of a design.

This article, for example, uses repetition in the

format of the headings. Each design principle is
formatted the same as the others in this
section, signaling to readers that they’re all of
equal importance and that they’re all related.
Consistent headings unify these elements
across the page.
Rhythm
The spaces between repeating elements can
cause a sense of rhythm to form, similar to the
way the space between notes in a musical
composition create a rhythm. There are five
basic types of visual rhythm that designers can
create: random, regular, alternating, flowing,
and progressive.

Random rhythms have no discernable pattern.

Regular rhythms follow the same spacing
between each element with no variation.
Alternating rhythms follow a set pattern that
repeats, but there is variation between the
actual elements (such as a 1-2-3-1-2-3
pattern). Flowing rhythms follow bends and
curves, similar to the way sand dunes undulate
or waves flow. Progressive rhythms change as
they go along, with each change adding to the
Rhythm

Rhythms can be used to create a number of

feelings. They can create excitement
(particularly flowing and progressive rhythms)
or create reassurance and consistency. It all
depends on the way they are implemented
Pattern
Patterns are nothing more than a repetition of
multiple design elements working together.
Wallpaper patterns are the most ubiquitous
example of patterns that virtually everyone is
familiar with.

In design, however, patterns can also refer to set

standards for how certain elements are designed.

For example, top navigation is a design pattern

that the majority of internet users have interacted

with
Whitespace
White space—also referred to as “negative
space”— is the areas of a design that do not
include any design elements. The space is,
effectively, empty.

Many beginning designers feel the need to

pack every pixel with some type of “design”
and overlook the value of white space. But
white space serves many important purposes
in a design, foremost being giving elements of
the design room to breathe. Negative space
can also help highlight specific content or
specific parts of a design.

It can also make elements of a design easier to

discern. This is why typography is more legible
when upper and lowercase letters are used
since negative space is more varied around
lowercase letters, which allows people to
Movement
Movement refers to the way the eye travels
over a design. The most important element
should lead to the next most important and so
on. This is done through positioning (the eye
naturally falls on certain areas of a design
first), emphasis, and other design elements
already mentioned
Variety
Variety in design is used to create visual
interest. Without variety, a design can very
quickly become monotonous, causing the user
to lose interest. Variety can be created in a
variety of ways, through color, typography,
images, shapes, and virtually any other design
element.

However, variety for the sake of variety is

pointless. Variety should reinforce the other
elements of a design and be used alongside
them to create a more interesting and
aesthetically pleasing outcome that improves
the user’s experience
Unity
Everyone has seen a website or other design
out there that seemed to just throw elements
on a page with no regard for how they worked
together. Newspaper ads that use ten different
fonts come to mind almost immediately.

Unity refers to how well the elements of a

design work together. Visual elements should
have clear relationships with each other in a
design. Unity also helps ensure concepts are
being communicated in a clear, cohesive
fashion. Designs with good unity also appear to
be more organized and of higher quality and
authority than designs with poor unity.
An Introduction
to Color Theory
and Color
Palettes
What is Color Theory
Color theory is a framework that informs the use of color in art and design, guides the curation
of color palettes, and facilitates the effective communication of a design message on both an
aesthetic and a psychological level.
Categories of Color
● Primary colors are colors you can’t create by combining two or more other colors. The primary

colors are red, blue, and yellow.

● The secondary colors are orange, purple, and green—in other words, colors that can be

created by combining any two of the three primary colors.

● Tertiary colors are created by mixing a primary color with a secondary color. The tertiary colors

are magenta, vermillion, violet, teal, amber, and chartreuse.

Introduction to color wheel
You might be thinking, “there are way more than 12 colors out there.” You’re right—and they can all be found
on a more advanced version of the color wheel.

The color wheel doesn’t just chart each primary, secondary, and tertiary color—it also charts their respective
hues, tints, tones, and shades. By visualizing how each color relates to the color that comes next to it on a
rainbow color scale, the color wheel helps designers to create bespoke color palettes that promote aesthetic
harmony. Let’s dive into these color variants a little deeper:
Hue
Hue refers to the pure pigment of a color, without tint or shade. In that respect, hue can be
interpreted as the origin of a color. Any one of the six primary and secondary colors is a hue.

Shade
Shade refers to how much black is added into the hue. As such, shade darkens a color.

Tint
The opposite of shade, tint refers to how much white is added to a color. As such, tint lightens a
color.
Tone
Tone is the result of a color that has had both white and black added to it. In other words, tone refers to any hue
that has been modified with the addition of grey—as long as the grey is purely neutral (only containing white and
black).

Color temperature
Even if you’re a self-confessed design newbie, you’ve likely heard the terms “warm, cool and neutral” tossed
around in relation to color. This is referred to as color temperature, and it’s an essential consideration when it
comes to color theory.

Warm colors contain shades of yellow and red; cool colors have a blue, green, or purple tint; and neutral colors
include brown, gray, black, and white. The temperature of a color has a significant impact on our emotional
response to it. Within the psychology of colors, for example, warm colors show excitement, optimism, and
creativity, whereas cool colors symbolize peace, calmness, and harmony. But we’ll talk a little bit more about
color psychology later on!
The importance of color harmony
The most crucial aspect of color theory, color harmony refers to the use of color combinations
that are visually pleasing for the human eye. Color palettes can either promote contrast or
consonance, but as long as they make sense together, they can still result in a visually satisfying
effect.

When it comes to UI design, color harmony is what all designers strive to achieve. Based on the
psychological need for balance, color harmony engages the viewer and establishes a sense of
order. A lack of harmony in a color palette can either result in an interface being under-
stimulating (boring) or over-stimulating (chaotic and messy)
Introduction to color palettes
A color palette is a combination of colors used by UI designers when designing an interface. When
used correctly, color palettes form the visual foundation of your brand, help to maintain
consistency, and make your user interface aesthetically pleasing and enjoyable to use.

While color palettes date back thousands of years, color palettes are commonly used in digital
design, presented as a combination of HEX codes. HEX codes communicate to a computer what
color you want to display using hexadecimal values. Back in the ’90s, most digital color palettes
only included eight colors. Now, designers have a myriad of shades and hues from the color
wheel to choose from
What are the different types of color palettes?

Monochromatic
A popular choice with designers,
monochromatic color schemes are formed
using various tones and shades of one single
color.
Analogous
An analogous color scheme is formed of
three colors that are located next to
each other on the color wheel.
Analogous color palettes are commonly
used when no contrast is needed—for
example, on the background of web
pages or banners
Complementary
Complementary color palettes are
comprised of colors that are placed in
front of each other on the color wheel.
While the name may suggest otherwise,
complementary color palettes are
actually the opposite of analogous and
monochromatic color palettes, as they
aim to produce contrast. For example, a
red button on a blue background will
stand out on any interface
Split-complementary
The split-complementary color palette
differs from the complementary color
palette only in that it employs a higher
number of colors. For example, if you
choose the color blue, you’ll then need
to take the two colors that are adjacent
to its opposite color, which in this case
would be yellow and red.
Triadic
The triadic color scheme is based on
three separate colors that are
equidistant on the color wheel. Most
designers employ the triadic color
scheme by choosing one dominant
color, and using the other two colors as
accents.
Tetradic
Commonly used by more experienced
designers, the tetradic color scheme
employs two sets of complementary
pairs—four colors from the color wheel
in total that should form a rectangle
when connected. While it’s a little
harder to balance, it makes for a
visually stunning end effect!
How to choose a color palette
Now that we’ve mastered the basics of color theory, let’s look at how you can use this newfound
knowledge to select a color palette that tells your brand story and resonates with your audience.

When choosing a color palette for your user interface, here are a few things to consider
Research your audience
Emotional responses to colors are can depend on a range of personal factors, including gender, cultural
experiences, and age. Before you get started with choosing your color palette, be sure to establish who
your audience is. What are their common traits, and what are their expectations? What brands relating
to yours are popular among your target audience—and how can you out-do their designs?

Conducting structured, thorough research on your target audience will not only help you to fine-tune the
story you want to communicate, but it will also help you to prevent a potentially catastrophic design
failure
Consider color psychology
With clarity on your target audience, it’s time to look at the psychology behind your potential
brand colors. Color psychology is a branch of psychology surrounding the influence of colors on
human mood and behavior. According to color psychology, the human mind subconsciously reacts
and interprets colors in a way that influences our actions.

If you want to create a color palette that attracts your target audience and accurately tells your
brand story, it’s essential to have a basic understanding of color psychology. To get you up to
speed, let’s take a look at some of the most common color associations below:
● Orange is energetic and warm. Some common associations with orange include

creativity, enthusiasm, lightheartedness, and affordability.

● Red is the color of blood, so it’s often associated with energy, war, danger, and power

but also passion, desire, and love. Some common associations with red include action,
adventure, aggression, and excitement.
● Yellow evokes positivity, youth, joy, playfulness, sunshine, and warmth.
● Pink evokes feelings of innocence and delicateness, gratitude, romance, softness, and

appreciation.
● Blue is perceived as authoritative, dependable, and trustworthy. Common associations

with blue include calmness, serenity, confidence, dignity, and security.

● Green is the color of nature. It symbolizes growth, freshness, serenity, money, health,

and healing.
● Black represents power, elegance, and authority. Common associations with black also

include class, distinction, formality, mystery, secrecy, and seriousness.

Choose your colors wisely
Commonly, color palettes are made up of six colors. These colors should include one dominant color, four
accent colors, and one standard color for your text (which is usually black or grey). Your dominant color is
what your customers will forever associate with the brand, so be very careful when reflecting on what this
color should be. Take your time to get inspired, keep the color associations in mind, and do some user testing
if you have to.

Note: you’re free to add more or fewer colors depending on your brand personality, and the aesthetic you’re
aiming for. Choosing monochromatic, analogous, or complementary colors will help you to achieve a
streamlined color palette. Remember: color harmony is the goal here!
Stick to UI conventions
When working with colors, it’s easy to get carried away with aesthetics over practicality. Of course,
your interface should be visually pleasing—but it also needs to be accessible, easy to navigate, and
enjoyable to use. Of course, it’s great to be experimental—but challenging design conventions with
“edgy” designs can confuse your users, and make them work harder than they need to.

Some common UI design color conventions include:

● Using a dark color for text to ensure legibility

● Keeping light colors for backgrounds
● Using contrasting colors for accents (as mentioned above)
● Sticking to classic call-to-action colors—such as red for a warning sign

Sticking to these conventions will reduce the cognitive load for your users, and allow them to
navigate the interface intuitively
Introduction to Typography
https://www.interaction-design.org/literature/article/the-ux-designer-s-g
uide-to-typography

https://www.toptal.com/designers/typography/typographic-hierarchy

https://graphicdesigneye.com/layout-design-for-website-and-mobile-app
s/

https://www.interaction-design.org/literature/topics/visual-hierarchy
What Is Typographic Hierarchy?

Beginning designers sometimes underestimate the necessity of using a hierarchy of typography. Yet look at

this example:
There are a variety of things that make up typographic hierarchy on the web. These include:

Size. Size is generally the first thing new designers turn to when trying to create typographic hierarchy. And

for good reason: It’s immediately, easily identifiable by readers. Bigger = more important, smaller = less

important. But size can become a crutch when there are so many other options to create hierarchy.

Weight. Making a typeface bolder or thinner is another easily recognizable way to create hierarchy that’s

easily identifiable even by non-designers.

Color. Color is often overlooked as a way to create a hierarchy, but it’s a fantastic option. Even using lighter

and darker shades of a given color can create a more distinct hierarchy. Creating more contrast between

type and it’s background can also add to typographic hierarchy.

Contrast. Beyond contrasting colors, the contrast between different type sizes, weights, and styles is also

key to creating typographic hierarchy. A difference of only one or two points in type size won’t create

enough contrast to make the hierarchy apparent to most users. Instead, designers should use easily

distinguishable sizes, weights, and styles to easily create contrast between things like headers or body text.

Case. While capitalizing body text is generally not a good idea from a readability perspective, using

uppercase characters in headings or subheadings can help differentiate different headings or other type.

Position and Alignment. The positioning of headings and subheadings, along with other type that a

designer wants to stand out, can have a lot of impact on where type falls within a hierarchy. Centering type,

for instance, tends to make it stand out. Setting type outside of the regular margins of a page can also make

that type stand out within the hierarchy of a page.

How to Create Typographic Hierarchy (and Visually Organize Your Design)

Designers have a lot of options when it comes to creating a

typographic hierarchy. But just knowing what goes into creating a

hierarchy alone won’t necessarily help designers create an

effective hierarchy.

One of the first things to consider is how many levels of hierarchy

a design should have. As a general rule, every design should

include three levels of hierarchy: heading, subheading, and body

text. From there, it’s up to the designer to consider additional

levels that might be necessary. These could include captions,

additional subheadings, pull quotes, and meta information (for

things like authors or dates on an article).

With these guidelines in hand, designers can follow the four-step process that the web typography

source Better Web Type sets out for creating effective combinations:

1. Find an anchor font for your main body text

2. Find a few secondary fonts for possible combinations

3. Evaluate the combinations

4. Eliminate/choose font combinations