MODULE 7:

IMAGING AND DESIGN FOR SOCIAL IMPACT

 OVERVIEW

• The graphic design concepts are almost like building

blocks. Each layer is on top of each other before you
have the base to create something unbelievable —
whether you're creating a logo, a website, or a unique
picture. The basic principles of graphic design comes
with different fundamentals to consider. In this module,
we will explore some of it for us to be able to create a
good design.
LESSON 1: GRAPHIC DESIGN FUNDAMENTALS

Objectives:
At the end of this module, you should be able to:
• Understand the basic concepts like colors, typography, images;
• Understand the principles and techniques of design using
applications (whether opensource or proprietary) to develop
contents for social campaigns; and
• Discuss the importance of having a good design to communicate
visually.
 WHAT IS GRAPHIC DESIGN?

• Graphic Design is a process in which we use typography, images,

colors, icons and other illustrations to communicate visually.
This term was first coined by William Addison Dwiggins on 1992
as he called himself a “graphic designer”. However, graphic
design is a thousand-year-old craft which dates back to ancient
cave drawings. In today’s era, we use graphic design not just to
communicate visually but also to having good user experience
(for software developers) and also to boost/improve one’s
emotions (with the use of colors). The fundamentals of graphic
design varies from PowerPoint presentations, web/mobile
applications, posters, logos, and even paintings.
 BASIC ELEMENTS OF GRAPHIC DESIGN

• Line is a kind of shape which connects two or

more points. It is also considered as one of
the essential element of graphic design. Lines
can be thick, thin, curved, or jagged.

• Lines can be used and commonly found in

drawings or illustrations, textures or patterns,
as well as on text composition – whether to
These attributes include: give emphasis, divide or organize content, or
to guide the viewer’s eye. Impacts on lines
Weight Texture
also differs based on their attributes.
Color Style
BASIC ELEMENTS OF GRAPHIC DESIGN

Shape - is a two-dimensional external boundary of an object. Any

object outline that has height and width can be considered as a
shape. Together with lines, they form the foundation of your
design.
Shapes can be used in organizing or dividing contents, create
illustrations, andtwo
There are in adding interest
(2) major to one’s
categories of work/design.
shapes in design:
• Geometric – these are regular and mathematical shapes.
• Organic – these are freeform shapes.
BASIC ELEMENTS OF GRAPHIC DESIGN

Form is a three-dimensional shape. Shadows,

perspective, depth, and sometimes texture creates a
form. Without these attributes, a form is just a shape or
series of shapes. Plain images/objects and flat designs
can be enhanced by adding shadows or lightings to
create an illusion of a form. It also gives the object a
sense of place. Figure 5 shows that a ball, if you make it
two-dimensional is just a circle.
BASIC ELEMENTS OF GRAPHIC DESIGN

Texture refers to the physical quality of the surface of

an object in an artwork or design. It also refers to how
an object look or feels like. An object might be smooth,
rough, shiny, hard, or soft. It can be in 3D (real texture)
or 2D (visual texture). Texture adds depth and visual
interest to the flat images or objects.
Texture can be used for:
• Establishing visual value or a focal point in an artwork.
• Having contrast within a design
• Making an artwork visually balanced.
BASIC ELEMENTS OF GRAPHIC DESIGN

Symmetrical
Balance
Asymmetrical balancebalance. Both sides of your
From
Visualthe
compositionname
balance isitself,
does the
not symmetrical
creation
containofthe balance,
visual which
equilibrium
same elements
includes
by radial
butrelating
contain symmetry
elements
almost thesuch is as
same when
line,both
visual twovisually
shape,
weight sides
color,
of a piece
space
similar are other
orto form
the equal.
in terms If you
half. of fold
theiryour artwork
visual or
weight.
piece intothere
Basically, two are or two
if you put
kinds of an imaginary
visual balance:line
between your artwork, each half is identical or
visually similar to the other half.
LESSON 2: BRANDING AND IDENTITY

Branding and identity can be found everywhere. Look around

you, you may see some of your personal items, product
packaging, documents, or some sort of advertising. All of them
have one in common – identity.
Branding is simply what people thinks about you, your company,
your product or your service. For example, we think of Albert
Einstein as the epitome of intelligence, and that is how he was
branded. Identity or visual identity is the visual representation of
a brand. It can be in a form of image, choice of color or
typography, and many more. For example, we quickly recognize
the company and its service but just looking at its logo,
typeface, or color combinations.
Lucidpress (2018) enumerated the seven
steps to creating a brand identity design:

1.
5.
2.
3.
4.
6. Establish
Create
Conduct
Get
Create
Select a clear
aan purpose
attractive
personality.
thorough
polished
professional and positioning.
color
market
logo.Based
In pallete.
research.
on
creating
typography. Recall
your
When Your
your why
research,
Having
logo,
selectingyou
color a
it
7.
or Choose
your on-brand
company supporting
exists, who your graphics.
target Your
audience brand
are,
pallete
deep
determine
should
fonts, it
identity should
analysis
be
is
should be
your
on simple
your
simple,
importanthave brand’s
to and
target
scalable,
a consider
visual contain
audience one
personality.
on
and things:
these
library to three
Brand
memorable.
that include
and what
primary
personality makes
colors.
make you
Once
a or your
you
huge service
have
impact unique
established
on the from
your
visuals your
ith
of
Observe
what
icons,
a.
c. Dotheir
Mix notthe logos
personalities
images/photographs,
make
contrasting
competitors. it of famous
are
fancy. which
design
Fancy
fonts/typefaces. companies
will lead
assets,
typefaces
This you
is like
to
and
only
not
b. Don’t mix fonts/typefaces. Do not mix fonts or
their
your color
marketing
Amazon,
the next family.
Google,
step. For example,
materials.
and IBM. Whatif you
do choose
these blue
logos
other
make
similar supporting
to your
the textgraphics..
above confusing.
item. This means you may use
typefaces
as you
have in in a color,
primary
common? word oryou sentence
may use as
skyitblue,
may baby
give
serif typefaces
mixed and for
interpretationsyour product
to under title
your audience.and sans serif
blue, other
for the subtitle. colors the blue family to
Example:
support your primary color.
Example:
LESSON 3: LAYOUT AND COMPOSITION

Layout and composition are the building blocks of design.

These two focus on the arrangement of your objects or
elements on your design. Your good texts, images, or
other elements in the graphic will turn to waste if your
layout is not well-composed.
We might be confused sometimes in using lay out instead
of layout. Please take note that these two are not the
same. Lay out is a verb phrase which simply means to
arrange something, while layout is a noun which means
how things are organized.
There are five basic principles of layout and
composition:

Proximity is the process of placing related elements

together. Elements that are not related to that group
should be separated to show that these elements are not
related to that group. Take family reunion as an example,
you are grouped by family, and anyone who don’t have
any relationship to your family should be separated. In
design, block texts or graphics that are related should be
grouped together to make your design easier to
understand.
There are five basic principles of layout and
composition:

There
White arespace
two is
types
not ofliterally
white space:
the white spaces that you
found on the design but rather the negative space
between lines, paragraphs, and element on the design. In
•his
Micro white space. Mini spaces between paragraphs,
article Importance in White Space in Design, Pratik
lines, described
Hedge menu items,
whiteor other
space as: elements in ain design
“White Space design
composition.
composition is same as use of Silence in a musical
•composition.
Macro white Without
space. Large spaces between
proportionate contentsmusic
use of Silence, and
iselements.
unstructured; some may call it noise. Similarly, without
White Space, design is unstructured and difficult to
consume.”
How important is white space in design?

Hedge (2017) listed some of the importance of white

space in design.
5.
6.
4. Branding
Creates
Guideandthe
3. Focus
1.
2. Increased
Improved aand Design
breathing
user through
interaction
comprehension.
attention. MacroTone.
space
rate. IfLet
local
white for us look
users.
help A
grouping.
used
spaces back
wisely, lot
Whiteat
of
white
guide the
the
spacesteps
viewers
people to ofbetween
the
believe
helps
in
Spaces brand
focus
you
design identity
area
that
to
helpsachieve
lines indesign,
indesign,
inthe the design.
athe
viewer oneto the
mustway
proximity
get
paragraph how
maximizeare
of your
themakes
message
the
you
the
design.
quickly
contentgoing
spaceevento putting
by apply
andwhite
without
legible contents
lookingspaces
easily on it.inHowever,
atscannable
the your todesign
this
instructions.
the
helps
Take ayoumakecreate
readers/viewers.
might look yourdesign
atyour
Google’s own brand’s
stuffy. personality.
homepage Having
UI. Whiteenough
space
white
helps space makestoyour
the viewer get eye
the rest,
message,helps which
us breathe
is to
and not to be overwhelmed with the information.
search.
There are five basic principles of layout and
composition:

Alignment
Contrast
Repetition meanshelps
simply one designers
to useisto
element
means organize
ofopposite
the same different
to typefaces,
the other
element.
color
elements This
palettes, does
or
in their notelements
other only apply
composition. tois colors,
to achieve
This but
consistency
similar to theto
typeface
in and that
size ofwe
your composition.
alignment elements
This create
see asunity
in well.
MS inContrast helps
your composition
Word or you
other
to
or catch
make the
your viewer’s eye,
projects create
connected a direction,
to
productivity tools. Effective use of alignment giveeach or
other. giving
For
emphasis to
example, if something.
you createFor example, if you
a PowerPoint use dark color
presentation, you
youryour
for
should composition
background,
use only the samea definitive
you should
color use structure
palette light color
or text and
for
style a
inyour
all
creative
foreground;
of balance.
your slides. Alignment
or if you may be
use different left,
test centered,
style to give
right, or on
emphasis justified.
your content.
LESSON 4: TYPOGRAPHY

Types
Font
Serif ofare
Typography
refers
fonts
Display
There Fonts:
fonts is
are Choosing
the
toare the
fonts
typefaces art
that a have
areof
sometimes font
variation
that or typeface
arranging
of
little
called
overused texts
weights
strokes
as fancy
andofthat makes
a decorative
called
or typeface,
outdated it
seriflike
on
readable
while
each
Whether
Comic typeface
fonts.end and
of
you
ItSans,
can the
Fonts appealing
refers
are
be letter.
Papyrus,
can new
script,
be orto old
They the
tocategorized
the text
arein
blackletter
Jokerman, viewer.
style.
typically
orgraphic
and
intoall It used
Font
caps.
Curlz
three: involves
also refers
in
design,
These
MT. font
formal
oneto
type
Though
style,
the
or
dilemma typeface,
format
of traditional
fonts
there that
is nothing and
areorprojects.
most
used
wrongtextspecial
storage
graphic
in in structure.
mechanism
Examples
designers
using ofthese
occasions
them, a like
of typefaces text
experienced likeis
with .otf
serifs
on
invitations,
typefaces are
and
are
what .ttf.
Times
titles,
being
Some fonts Foror
or
discouraged
people example,
New
posters.
often to Arial
Roman,
typefaces Examples
use.
misuse Narrow,
are
the termof Arial
Baskerville
they going Black,
Old
display
“font” and Arial
toasFace,
use.
fonts and
One
typeface. are
Rounded
Californian
mistake
Advertising
So, let usare
that fonts
FB.
Script,
explain under
beginners the
Bangers,
first the Serif
commit Arial
and is typeface.
the limit
Forte.
difference misuse
between of font
fonts or
In choosing typefaces on your design, yourself to and
one
typefaces.
or two perInproject,
typeface. choosing anda San
font/typeface,
you Serif
may play with it should portray
their family of
the message
fonts for that you
emphasis or want
Display
contrast.to sayYou tomayyour viewers.
combine In
serifs
“Typeface is to font as song is to .mp3” – Nick Sherman
design,
and sans fonts and typefaces
serifs, display and do matter.
serifs, or display and sans
serifs.
 LESSON 5: COLOR

ColorsSchemes
are
Monochromatic
Achromatic
Triadic
TetradicColor
Colorvery
Split-Complementary
Color
Hue.
Complementary Color essential
Color
Color
Scheme Color
Scheme
Scheme
Scheme
Scheme to your compositions. One may
Scheme
use
Uses
Of
These
This
This a
the
Refers combination
course,
to
are
colorcolors
pure,
we
colors
scheme
colorscheme
color on
can
scheme or
both
vibrant
still
that one
sides
are
only
only
uses or
colors. of
remember
direct
focuses more
revolves
colors the colors.
opposite
the
opposite
on
that ononelessons
form to It may
color.
about
each
color,
using and be our
color
other
often
desaturated
ancolor
equilateral in
Also known
instinct to as
choosedouble
colorcomplementary.
but there is a This
science scheme
behind it,
during
the
usingcolor
colors
triangle. art
like
Saturation.
uses two lessons.
wheel.
variations
black,
Itpairs
mayofbebyUsually,We a
incorporating
gray, and have
white. primary
combination
saturations
a combinationcolors.
complementary of acolors,
orprimary
values.
of primary, secondary, then
and
For
called
secondary
example,
orRefers Color
tertiary Theory.
colors
colors.
if you
colors. and tertiary
chose the color colors.
blue,A then
circular
youdiagram
may have of
these
other to
Color Theory
colorsthe intensity
describes
colors isundercalledthe of
how
a colorthe color.
samedifferent
wheel It
color (Figureranges
colors15).
family from
contribute
like Usingblack
to
this
sky blue,
and white
Analogous
wheel, we (or
Colorgrayscale)
can Scheme
how they
create to vibrant
baby blue, navy blue, or dark blue. they
each other and appear
our color.
as
own colorare scheme
mixed intoor
Value.
Selects a group
other color
combination. of three
schemes. Before colors that aretoadjacent
we proceed differentincolor
the
color
Refers wheel.
schemes, to let the uslightness
go over orsome terminologies
darkness of a color. used For
in
color. . from light blue to dark blue.
example,
UNDERSTANDING COLOR PROFILES

RGB.
Whenever we open an image editing application or
buy color
This a printer
profile ink at the
consists store,
of Red, we and
Green, mayBlue.
observe
You
should
labels use
likethis
RGBprofile for design
or CMYK. that are
So, what are intended for
they? They
screen displays.
are color profiles that we need to consider if we
CMYK.
create designs.
This color profile consists of Cyan, Magenta, Yellow, and
Key (Black). If you have a printer in your house, you
probably see these colors as inks. This profile is intended
for designs that are to be printed.
LESSON 6: IMAGE

Finding
Most
Images and
people
are notplacing
nowthe
are just right on
relying
limited image
to stock is photos
not a difficult
photographs, as
it they
also
thing
are
includesas long
free or as youand
sometimes
graphics, know
costwhat
otherless. kind
There of are
illustrations.image you
various
Having
are
stock
imagesgoing
image to use
websites
on your inallyour
composition composition.
over makes
the internet. Do only
The
it appealing you
to
remember
thing
the eyes using
thatof youclipneed
your arts ontoyour
viewer. Takedoproject
is todesigns?
magazine choose
as an If
yes, then I imagine
pictures/images
example, encourage
for youryoucomposition.
that to
yournot favorite
use it today as we
magazine
are over with
contains the clip
no image. Youartdoera.
not Stock
want to photos
read are now
it right?
popular
That is in anypower
the project.
of images – they are not just
decorations on your composition.
IMAGE FILE TYPES

There Image
Raster
Vector
Graphics are
Image different
File file types of images, and they
File Extensions
Interchange Extensions
Format.
are grouped
Joint
Encapsulated
This Photographic
file type is into two incategories:
Postscript
Experts
known (EPS).
Group
its This
(JPG
animated vector
vector and
or JPEG).
form. raster.
format
You This file
are
can find
type
designed
them
Vector. isinthe toismost
Itsocialproducecommonly
a networking
type high-resolution
of usedthat
sites
image image
as graphics
posts
does file type.
ornot for print.
Since
comments.
lose its
this
Being
GIFs isare
aa universal
raster
often type
fileof
used type,
in image,
web EPS JPEG
files
pages as images
can
can be
loadare
openedknown
quicklyin due
any
for
quality when zoomed in. Your image will not be
their
design
to “lossy”
editor. compression.
its reduced file size. Meaning, the image quality
pixelated
decreases when
when being enlarged.
enlarged.(AI). Most preferable and
Adobe Illustrator Document
Raster. Opposite
Portable
commonly Network
used image to file
Graphicsvector,
type
(PNG).raster
by This images
designers.
file type become
If you
is known
want
pixelated
for
to having aawhen
create vector enlarged.
transparent
image, background.
AI is one of Images
the best in this
tooltype
for
are
you.commonly used in web documents.
 ONLINE VIDEOS TO WATCH

https://youtu.be/YqQx75OPRa0
https://www.youtube.com/watch?v=n8KoAHCwnMQ
https://youtu.be/sByzHoiYFX0
https://youtu.be/MELKuexR3sQ
https://www.youtube.com/watch?v=65WjYDEzi88
https://www.youtube.com/watch?v=ZK86XQ1iFVs
https://www.youtube.com/watch?v=EFf9jBs2yfU
REFERENCES / SOURCES
ASSESSMENT/EXERCISES

Using the fundamentals

of graphics design,
enumerate and explain
the elements on this
image that needs to
improve and be able to
create your version of
this design.
 THANK YOU AND GOD BLESS!

AEGIAN GRACEFER P. DINAMPO

BSCS I