MODULE 7:

IMAGING AND DESIGN

FOR
SOCIAL IMPACT
GROUP 6
Lesson 1: Graphic Design
Fundamentals
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”.

• The fundamentals of graphic design varies from PowerPoint

presentations, web/mobile applications, posters, logos, and even
paintings.
THE BASIC ELEMENTS OF GRAPHIC
DESIGN ARE THE FOLLOWING:
• Lines

• Shapes

• Form

• TextureBalance
Line
• A 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.
Figure 1
Shows the different styles of a line
• Lines can be used and commonly found in
drawings or illustrations, textures or patterns,
as well as on text composition whether to
give emphasis, divide or organize content, or
to guide the viewer’s eye. Impacts on lines
also differs based on their attributes.
These attributes include
•Weight

•Color

•Texture

•Style
Shape
A 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.
There are two (2) major categories of shapes in design:
• Geometric – these are regular and mathematical shapes.
• Organic- these are freeform shapes.
Figure 3 shows the different examples of geometric and organic shapes.
• Shapes can be used in organizing or
dividing contents, create illustrations, and
in adding interest to one’s work/design.
Form
A 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.
Figure 5 shows that a ball, if you make it two-dimensional is just a circle.
Texture
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 can be used for:
• Establishing visual value or a focal point in an
artwork.
• Having contrast within a design
• Making an artwork visually balanced.
FIGURE 6
REAL TEXTURE (LEFT) AND VISUAL TEXTURE (RIGHT)
Balance
• Visual balance is the creation of visual
equilibrium by relating elements such as line,
shape, color, space or form in terms of their
visual weight.
THERE ARE TWO KINDS OF VISUAL
BALANCE:
1. Symmetrical balance
From the name itself, symmetrical
balance, which includes radial symmetry
is when both two sides of a piece are equal.
If you fold your artwork or piece into two
or if you put an imaginary line between
your artwork, each half is identical or
2. Asymmetrical balance
Both sides of your composition does
not contain the same elements but
contain almost the same visual weight.

Figure 7 Symmetrical design example Figure 8 Asymmetrical design example

Lesson 2: Branding and
Identity
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.
• Simply what people thinks about you, your
product or your service.
• 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.
• Branding and identity are not just
for products and services, we can
even apply it to how we work or what
type of output we produce.
7 STEPS TO CREATING A
BRAND IDENTITY DESIGN:
1. Establish clear purpose and positioning
Recall why you or your company exists, who
your target audience are, and what makes you o
your service unique from your competitors.
2. Conduct thorough market research.
Having a deep analysis on your target
audience on what their personalities are which
will lead you to the next step.
3. Get a personality.
Based on your research, determine your
brand’s personality. Brand personality make
a huge impact on the visuals of your
marketing materials.
4. Create a polished logo
In creating your logo, it should be simple,
scalable, and memorable. Observe the logos
of famous companies like Amazon, Google,
and IBM. What do these loans have in
5. Create an attractive color pallete.
Your color pallete should be simple and contain one
to three primary colors. Once you have established
your color pallete, you may play with their color
family. For example, if you choose blue as you
primary color, you may use sky blue, baby blue, and
other colors under the blue family to support your
6. Select professional typography
When selecting fonts, it is important to
consider these things:
A. Do not make it fancy. Fancy typefaces only
make your text confusing.
Example:
B. Do not mix fonts/typefaces in a word or
sentence as it may give mixed interpretations to
your audience.
Example:
7. Choose on-brand supporting graphics
Your brand identity should have a visual
library that include icons,
images/photographs, design assets, and other
supporting graphics.
Lesson 3: Layout and
Composition
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.
Note
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:

1. Proximity

2. White Space

3. Alignment

4. Contrast

5. Repetition
PROXIMITY
• 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.
• In design, block texts or graphics that are related
should be grouped together to make your design
easier to understand.
Example of Proximity
WHITE SPACE
• White space is not literally the white spaces
that you found on the design but rather the
negative space between lines, paragraphs, and
element on the design. In his article
Importance in White Space in Design, Pratik
Hedge described white space as:
“White Space in design composition is same as use of
Silence in a musical composition. Without
proportionate use of Silence, music is unstructured;
some may call it noise. Similarly, without White Space,
THERE ARE TWO TYPES OF WHITE
SPACE:

1. Micro white space.

Mini spaces between paragraphs, lines, menu
items, or other elements in a design
composition.
2. Macro white space.
Large spaces between contents and elements.
HOW IMPORTANT IS WHITE
SPACE IN DESIGN

1. Improved comprehension.
Spaces between lines in a paragraph
makes the content legible and easily
scanable to the readers/viewers.

2. Focus and attention

Macro white spaces help guide the
viewers to the focus area in the design.
3. Increased interaction rate.
If used wisely, white space in design
helps the viewer to get the message
quickly even without looking at the
instructions. Take a look at
Google’s homepage UI. White
space helps the viewer to get the
message, which is to search.
4. Guide the user through local
grouping
White space helps you to achieve
5. Branding and Design Tone
Let us look back at the steps of brand identity design,
the way how are you going to apply white spaces in your
design helps you create your own brand’s personality.
6. Creates a breathing space for users
A lot of people believe that in design, one must maximize
the space by putting contents on it. However, this might
make your design stuffy. Having enough white space
makes your eyet rest helps us breathe and not to be overwhelmed
with the information.
ALIGNMENT
Alignment helps designers to organize
different elements in their composition.
This is similar to the alignment that we
see in MS Word or other productivity
tools. Effective use of alignment give
your composition a definitive structure
and a creative balance. Alignment may
be left, centered, right, or justified.
CONTRAST
• Contrast means one element is opposite
to the other element. This does not only
apply to colors, but to typeface and size of
elements as well. Contrast helps you to catch the
viewer’s eye, create a direction, or giving
emphasis to something.
REPETITION
Repetition simply means to use of the
same typefaces, color palettes, or other
elements to achieve consistency in your
composition. This create unity in your
composition or make your projects connected
to each other.
 Lesson 4:
Typography
Typography
Typography is the art of arranging texts
that makes it readable and appealing to
the viewer. It involves font style, typeface,
and text structure. Some people often
misuse the term “font” as typeface.
Font
Font refers to the variation of weights of a typeface,
while typeface refers to the text style. Font also refers
to the format or storage mechanism of a text like .otf
and .ttf. For example, Arial Narrow, Arial Black, and
Arial Rounded are fonts under the Arial typeface.

“Typeface is to font as song is to .mp3” – Nick

Sherman
Table 1 – Difference between font and typeface
Types of Fonts
Fonts can be categorized into
three:
• Serif
• San Serif
• Display
Serif

Serif fonts are fonts that have little

strokes called serif on each end of the
letter. They are typically used in formal
or traditional projects. Examples of
typefaces with serifs are Times New
Roman, Baskerville Old Face, and
Californian FB.
Sans Serif

Sans serif are fonts with no extra

strokes. Sans serif simple means “without
serifs as sans is a French word for without.
These fonts are normally found in mobile
phones, and computer screens. Examples of
this type are Calibri, Arial, and Roboto.
Display

Display fonts are sometimes called as fancy

or decorative fonts. It can be script, black
letter or all caps. These type of fonts are
used in special occasions like invitations,
titles, or posters. Examples of display fonts
are Advertising Script, Bangers, and Forte.
Lesson 5: Color
Color
Colors are very essential to your compositions.
One may use a combination or one or more
colors. It may be our instinct to choose color but
there is a science behind it, called Color Theory.
Color Theory describes how different colors
contribute to each other and how they appear as
they are mixed into other color schemes.
•Hue. Refers to pure, vibrant colors.

•Saturation. Refers to the intensity of the

color. It ranges from black and white(or
grayscale) to vibrant color.

• Value. Refers to the lightness or darkness

of a color. For example, from light blue to
dark blue.
Color Scheme
We have primary colors, then secondary colors and
tertiary colors. A circular diagram of these colors is
called a color wheel
Monochromatic Color Scheme
This color scheme only focuses on one color, and often
using variations by incorporating saturations or values. For
example, if you chose the color blue, then you may have
other colors under the same color family like sky blue,
baby blue, navy blue, or dark blue.
Achromatic Color Scheme
This color scheme only revolves on using desaturated
colors like black, gray, and white.
Analogous Color Scheme
Analogous color scheme selects a group of three
colors that are adjacent in the color wheel.
Complementary Color Scheme
These are colors that are direct opposite to each
other in the color wheel. Usually, a combination of a
primary and secondary colors.
Split-Complementary Color Scheme
Split-complementary color scheme uses the colors on
both sides of the opposite color.
Triadic Color Scheme
This color scheme uses colors that form an
equilateral triangle. It may be a combination. Of
primary, secondary, or tertiary colors.
Tetradic Color Scheme
Also known as double complementary. This color
scheme uses two pairs of complementary colors.
Color Profiles
Whenever we open an image editing application
or buy a printer ink at the store, we may observe
labels like RGB or CMYK.
• RGB. This color profile consists of Red, Green, and
Blue. You should use this profile for design that are
intended for screen displays.
• CMYK. 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
Image
Images are not just limited to photographs, it also includes
graphics, and other illustrations. Having images on your
composition makes it appealing to the eyes of your viewer. Take
magazine as an example, imagine that your favorite magazine
contains no image. You do not want to read it right? That is the
power of images they are not just decorations on your
composition. Finding and placing the right image is not a
difficult thing as long as you know what kind of image you are
going to use in your composition.
There are various stock image websites all over the
internet. The only thing that you need to do is to
choose pictures/images for your composition. The
best free stock photos & videos shared by talented
creators.
Image File Types
There are different file types of images, and they are
grouped into two categories: vectorand raster.
• Vector. It is a type of image that does not lose its
quality when zoomed in. Your image will not be
pixelated when enlarged.
• Raster. Opposite to vector, raster images become
pixelated when enlarged, Vector Image File
Extensions
• Encapsulated Postscript (EPS). This vector
format are designed to produce high-resolution
graphics for print. Being a universal file type,
EPS files can be opened in any design editor.
• Adobe Illustrator Document (AI). Most
preferable and commonly used image file type by
designers. If you want to create a vector image,
AI is one of the best tool for you.
Raster Image File Extensions
• Joint Photographic Experts Group (JPG or JPEG). This file
type is the most commonly used image file type. Since this is a raster
type of image, JPEG images are known for their “lossy”
compression. Meaning, the image quality decreases when being
enlarged.
• Portable Network Graphics (PNG). This file type is known for
having a transparent background. Images in this type are commonly
used in web documents.
• Graphics Interchange Format. This file type is known in its
animated form. You can find them in social networking sites as posts
or comments. GIFs are often used in web pages as can load quickly
due to its reduced file size.
THANK YOU