IMAGING AND

DESIGN FOR
SOCIAL IMPACT
ENDTERM LESSON 1
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.
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 (specifically
Photoshop) to develop contents for social campaigns; and
• Discuss the importance of having a good design to communicate visually.
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:
1. Lines
2. Shapes
3. Form
4. Texture
5. Balance
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. 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.
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 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.
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 visually similar to the other
half.
2. Asymmetrical balance
Both sides of your composition does not contain the same elements but contain almost the
same visual weight.
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
• 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.
• 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 or
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 logos have in common?

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 primary color.
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.
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:

• 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:

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. 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.
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,
design is unstructured and difficult to consume.”
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 the proximity of your design.

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
eye 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. For
example, if you use dark color for your background, you should
use light color for your foreground; or if you use different test
style to give emphasis on your content.
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.
For example, if you create a PowerPoint presentation, you should
use only the same color palette or text style in all of your slides.
THANK YOU!