VISUAL

COMMUNICATION
BASIC COLOR THEORY
TYPOGRAPHY
JElIAN JIMENEZ TABOADA
Derived from the lecture
presentation of Katrina
Juane
 Visual communication
is the practice of
What is using visual
Visual elements to
Communicatio
n? communicate
information or ideas.
(techsmith.com)
Aray,
Aray,
ang
ang
sakit.
sakit…

Aray ARA
Y
4
Studies show that people
remember:

And this is because the human brain process visual cues

better rather than the written language.
TYPES OF
VISUAL
COMMUNICATIO
N
1.
IDENTITY/BRANDING

▪ Logomark: an identifying mark or symbol that doesn’t

contain
the business name.

▪ Logotype: words or the name of a business that is

designed in a
special way
2.
POSTERS
Posters allow designers to
include more information
about a certain product,
service, or event given the
amount of space provided
on a medium.
Photo credit: Ayala
Malls
3.
STATIONARY
These include calling
cards,
letterheads, even
pens and folders
that all contain the
information of a
company, a business,
or an organization. Photo credit: Do Not Ignore Importance Of Stationery Design For
Your Business (designhill.com)
4.
BROCHURE

Brochures and flyers

are informative
paper documents
that are also often
used for
advertising. Photo credit: 5 Star Resort Brochure Template |
MyCreativeShop
5. EDITORIAL
DESIGNS

Editorial design
combines our abilities
for creative
typography, layouts
and compositions.
Editorial designs are
usually applied on Photo credit: Editorial Design — Cara Ord
Create
newspapers,
6. INFORMATION
GRAPHICS

Infographics are graphic

visual representations of
information, data or
knowledge intended to
present information
quickly and clearly. Photo credit: 10 Fun Infographic
Examples for Students
(visme.co)
7. PACKAGING
DESIGN
Good packaging designs
influence consumers to
actually buy and test
the product. A great
product needs a great
packaging design to
help it stand out from Photo credit:
https://99designs.com/profiles/thelogolounge/designs/803658
8. WAYFINDING
SIGNS

This is a visual language of

symbols and words in the urban
environment, roads, and airports
to name a few.

The objectives of these signs

are functionality, universality and
efficient communication of Photo credit: https://coopersign.com/what-we-do/ada-wayfinding-and-
directional information. directories/
9. ENVIRONMENTAL
DESIGNS
Combines visual
communications with
space and place.
Common applications
are build-up letters,
street or wall
Photo credit:
murals, or signages. https://12pointsignworks.com/blog/amp-up-
your-space-with-custom-environmental-graphic-
design/
VISUAL
ELEMENTS
• line
• Shape
• Color
• Texture
• Type
• Space
• Image
BASIC GRAPHIC
DESIGN
PRINCIPLES
BALANCE

▪ Balance provides stability and

structure, which helps to distribute
the elements evenly throughout
your design.

▪ Balance helps a design look

professional and attractive instead
of being jumbled and messy.
A symmetrically balanced
This vibrant design is a
design.
distribution of elements
(Designed by: Anahat (stripes and colours) to
Rawal) achieve an asymmetrical
balance. (Designed by:
ALIGNMENT

▪ Alignment plays an important role in creating a

seamless visual connection with the design
elements.

▪ Aligning elements properly will clean up a design

and eliminate the mess that can occur when
elements are placed randomly.
PROXIMITY

▪ Creates a visual relationship and see it as an entire

composition of objects.

▪ The elements don't have to be positioned closely

together, but they should be connected visually.
REPETITION

▪ This helps strengthen the overall look of the

design, creating rhythm and cohesion.

▪ Repetition also helps strengthen the identity of a

specific medium, especially if this has multiple pages
such as booklets, or even websites.
(Designed by: Anahat Rawal
http://bit.ly/Anahat_Behance)
CONTRAST

▪ Contrast happens when two design

elements are in opposition to each
other.

▪ You can use this to emphasize a

design element.
9* Scan the QR
Code for the
submission of
your outputs.
BASIC COLOR
THEORY
Perception of
Color

Are we
really
seeing the
same
colors?
BASIC COLOR
THEORY

▪ Create the overall mood of your design by choosing

the right colors.
▪ The color palette of your design may represent a
message
intentionally or unintentionally depending on
other people’s
perception, cultural beliefs, and personal
experiences.
 Perception of
Color
▪ People don’t always see the same colors
▪ The visible spectrum is not like a paint color chart,
neatly separated into blocks of distinct hue, but is
a continuum in which each color blends into the
next.
▪ We do not see all parts of the visible spectrum
equally.
▪ It is easier for us to see small changes in hue in some
Color is light and the
eye’s perception of
visible light.
 Why We Love
“Mocha”
but Hate “Brown”
Nail Polish
Shades
Color Models

RGB (Red, Green, Blue) CMYK (Cyan, Magenta, Yellow, and Key – or Black)
Primary Colors

In a RYB (Red, Yellow, Blue) color model

Color Wheel Theory
Primary colors are the three main building blocks of the
color wheel – the colors that can’t be created by mixing other
hues.
• Red
• Green
• Blue
Secondary colors consist of two primary colors mixed in
equal amounts.
• Red + blue = Magenta
• Green + red = Yellow
• Blue + green = Cyan
Color Wheel Theory
Tertiary colors are created by mixing secondary and
primary colors to create new hues.
• Green + yellow = Chartreuse
• Green + cyan = Spring green
• Blue + cyan = Azure
• Blue + magenta = Violet
• Red + magenta = Rose
• Red + yellow = Orange
Shade, Tint, and Tone
Color Temperature
Color
Harmony
Color Palette Color wheel, a color palette generator | Adobe Color

Generator
Color Palette
Generator
 COLOR PSYCHOLOGY

▪ Color psychology is the study of colors in

relation to human behavior. It aims to determine
how color affects us.
▪ Color imparts meaning and evokes emotion.
▪ Color combinations provoke immediate
associations.
▪ Red means?
▪ Pink means?
COLOR PSYCHOLOGY

▪ Red has the longest wavelength of all

colors and
is therefore considered the most
powerful color. Often cited as the most
physical color in the spectrum

▪ Red evokes a passionate and visceral

response. It is a color that increases
your heart rate,
energy level, and even appetite.
COLOR PSYCHOLOGY

▪ Blue is considered to be the color of the

mind. It is thought to stimulate mental
activity. The color of the water and sky,
blue is the color of serenity and calmness.
It is the top favorite color in the world.

▪ Blue is also associated with many

religious practices meaning mercy
and honor.
COLOR PSYCHOLOGY

▪ Yellow has a relatively long wavelength

and is essentially a stimulating color and
the easiest color for the human eye to see.

▪ Because the color is associated to the

sun, it
communicates hope and optimism. It
stimulates creativity and energy, and its
brightness is especially useful to catch a
customer’s eye.
COLOR PSYCHOLOGY

▪ Green is the color most easily interpreted

by the human eye. It’s also in the middle
of the color spectrum, making it a symbol
of balance.

▪ It is synonymous with calm, freshness,

nature, growth and health. But there is a
wide variation between its shade. Deeper
greens are associated with affluence,
lighter greens with serenity.
COLOR PSYCHOLOGY

▪ Purple and violet have the shortest

wavelength. It’s said to be
transcendental
and an aid for high intellectual thought.

▪ It is a sophisticated yet mysterious

color. The
richness of this color invoke royalty
and elegance.
COLOR PSYCHOLOGY

▪ Orange combines the brightness and

cheer of yellow with the energy and
boldness of red to make a color
that is full of life and excitement.

▪ The color orange is known to encourage

activity and stimulate conversation.
COLOR PSYCHOLOGY

▪ Black evokes a sense of classic

sophistication especially when
applied to expensive products. It
provokes strong emotions of power and
authority. It can also leave you with a
feeling of emptiness.
COLOR PSYCHOLOGY

▪ White represents purity and

cleanliness. With this in mind, white
is a popular choice for health care
and child related
businesses. Color white also is a
symbol of peace.
How to Apply Color Theory
Step 1: Understand Who Your Audience Is
It’s important to understand colors, but you also need
to consider how your audience will react to them.

People have different color preferences based on their

gender, age, geographic location, religion, and
economic status. Make sure you know these aspects
about your audience.
How to Apply Color Theory
Step 2: Set a Mood for Your Design
Consider the mood or feeling you want to attribute to
your brand, website, or product.
Here are some basic
guidelines for picking the
mood.
• Bright – energetic,
powerful, exciting.
• Muted – restful, not
stimulating, more
sophisticated.
• Light – gentle, soft,
comforting, peaceful.
• Dark – serious, intense,
professional.
How to Apply Color Theory
Step 3: Pick a Few Words (And Colors, Too)
To pick your brand’s colors, you can start with the
color that conveys the most vital characteristic of your
brand.
From here, you can build it out with a couple of extra colors, accents, or just
a monochromatic color palette.
So first, pick the main color, considering the meaning of the colors and your
brand’s personality (how you want people to perceive it).
An excellent way to do that is to write down words that describe your
business or design.
80% of the Fortune 500 companies have two or
fewer colors incorporated into their logo.
How to Apply Color Theory
Step 4: Consider the Color Context
As important as choosing the right colors, color context will influence
how people perceive the hues you’ve chosen.
That’s because colors appear differently when placed next to each
other.
If you place a red button on top of an orange background, it will make
the red appear duller. But if you put the same red button on a turquoise or
blue background, it will appear brighter.
Consider color context and contrast when using your fore and
background colors so your design won’t backfire. You might even realize
you need to change your color palette or use them differently.
In addition, this step is crucial for accessibility as you can assess if
your design accommodates the needs of color-blind people.
How to Apply Color Theory
Step 5: Use the 60-30-10 Rule
Apply the chosen color palette using the 60-30-10 design
rule. For that, use the dominant color 60% of the
design, a supporting color 30%, and the 3rd accent
color 10% of the time.

These aren’t hard-and-fast numbers, but they give a

sense of proportion and balance and avoid creating a
childish and garish design.
How to Apply Color Theory
Step 6: Draft Numerous Designs
Now it’s time to put everything you have chosen into your
design. Draft multiple designs based on the colors and
harmonies you picked, wait a couple of days and check the
designs with a clear head again.
In this step, you’ll probably draft, review, and work on a
new draft at least a few times, but that’s okay! Remember,
practice makes perfect.
Color is an ever-evolving art form, and the more you play
with color and practice design, the better you get. No designer or
artist creates their masterpiece the first time around.
TYPOGRAPH
Y
TYPOGRAPHY

Typography is one of the key pillars of design, and it speaks

volumes about a brand or an artwork when executed
stylistically or even
customized.

“Words have meaning, type has spirit,”

— Paula Scher
TYPOGRAPHY

“Fonts share visual characteristics from the real world.

If you want to choose an appropriate font, then
choose a font that visually resembles your context…”
TYPEFACE vs FONTS

TYPEFACES FONTS

VVaarriiaattiioonnss ooff Variation of weights

ttyyppeess of a typeface
▪ Arial ▪ Arial Regular
▪ Times New Roman ▪ Arial Italic
▪ Droid Serif ▪ Arial Bold
CLASSIFICATION
S

Serif Sans Slab

Serif Serif
Stable, Respectable, Simple, Sensible, Important, Evident,
Timeless, Formal, Straightforward, Bold, Impactful,
Traditional Easy to Read, Attention-Grabbing
Neutral
CLASSIFICATION
S

Displa Script Handwritte

n
y
Feminine, Personal,
Fancy, Elegant,
Pretty Informal, artistic,
Prominent, Fun, Freedom,
Quirky, Friendly, Personal
Sociable,
Don’t Use This! Use This Instead
Lato
Aveni
r idact Gothic
D
Open Sans
Playfair
Display School
Bell Handlee
Activity
Making infographics
1. Form teams of 3-5 members each and research facts
and figures about a social or ethical issue on media and
information literacy.
2. In planning for
their infographic,
ask the learners to
accomplish the
Media and
Information Design
Framework:
Thank
You!