Candon Campus

MODULE 5
- ---

ICT FOR SOCIAL IMPACT - IMAGING AND DESIGN

INTENDED LEARNING
OBJECTIVES
At the end of the module, students will 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

LESSON PROPER
\
Graphic design is more than just making things look visually appealing — it's a
powerful form of communication. At its core, graphic design uses a combination of
images, text, color, and layout to convey messages, tell stories, and create memorable
experiences.

The fundamentals of graphic design include key elements such as line, shape, color,
texture, space, and typography. Alongside these elements are essential principles like
balance, contrast, alignment, hierarchy, repetition, and proximity. These building blocks
work together to bring structure and harmony to a design. When used effectively, they
help guide the viewer’s eye, create focus, and ensure the message is delivered clearly.

Whether you’re creating a logo, designing a website, or developing content for

print or social media, applying these fundamentals will help you produce work that is
visually engaging and professionally crafted. These principles serve as the building blocks
that support creative expression and ensure that your message reaches your audience
with clarity and impact.

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 come with different fundamentals to consider. In this module, we will explore some
of it for us to be able to create a good design.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
 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 vary from
PowerPoint presentations, web/mobile applications, posters, logos, and even
paintings. The basic elements of graphic design are the following Line, Shapes, Form,
Texture, & Balance

THE BASIC ELEMENTS OF GRAPHIC DESIGN

1. Line - is a kind of shape
which connects two or
more points. It is also
considered as one of the
essential elements 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 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 the
following: Weight, Color, Texture &
Style

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
2. 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.
Shapes can be used in organizing or dividing
contents, create illustrations, and in adding
interest to one’s work/design.

There are 2 major categories of shapes in

design and these are the Geometric Shape
and Organic or Free Form Shape.

Geometric shapes are precise, often

symmetrical, and can be mathematically defined. Examples include circles, squares,
triangles, and polygons. They tend to convey a sense of order, stability, and
predictability, often used in more structured and formal designs.

Organic shapes, on the other hand, are freeform and irregular. They are often
inspired by nature and tend to be more fluid, dynamic, and spontaneous. These
shapes can evoke a sense of movement, creativity, and natural beauty. Examples
include curvy, asymmetrical forms, such as leaves, waves, or abstract organic
patterns.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
3. 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.

4. 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

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
5. Balance or 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. Basically,
there are two kinds of visual balance: Symmetrical Balance and Asymmetrical
Balance.

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.

Asymmetrical balance. Both sides of your composition do not contain the same
elements but contain almost the same visual weight.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
 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.

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. For example, the use of bright and
bold colors is often associated with the famous painter, Vincent Van Gogh. Lucidpress
(2018) enumerated the 7 steps to creating a brand identity design:

STEPS IN CREATING BRAND IDENTITY

• Establish clear purpose and positioning. Recall why you or your company
exists, who your target audiences are, and what makes you or your service
unique from your competitors.
• 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.
• Get a personality. Based on your research, determine your brand’s personality.
Brand personality makes a huge impact on the visuals of your marketing
materials.
• 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?
• Create an attractive color pallet. Your color pallet should be simple and
contain one to three primary colors. Once you have established your color
pallet, you may play with their color family. For example, if you choose blue as
your primary color, you may use sky blue, baby blue, and other colors under
the blue family to support your primary color.
• Choose on-brand supporting graphics. Your brand identity should have a
visual library that includes icons, images/photographs, design assets, and other
supporting graphics.
• Select professional typography. When selecting fonts, it is important to
consider these things:

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
a. Do not make it fancy. Fancy typefaces only make your text confusing.

b. Do not mix fonts/typefaces. Do not mix fonts or typefaces in a word or

sentence as it may give mixed interpretations to your audience

c. Mix contrasting fonts/typefaces. This is not similar to the above item. This
means you may use serif typefaces for your product title and sans serif for the
subtitle.

 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 5 basic principles of layout and composition: Proximity, White Space,
Alignment, Contrast and Repetition
1. 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.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
2. 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. There are 2 types of white space Micro and Macro. Micro White Space:
Mini spaces between paragraphs, lines, menu items or other elements in a design
composition. Macro White Space: Large spaces between contents and elements.

IMPORTANCE OF WHITE SPACE IN DESIGN

▪ Improve Comprehension Spaces between lines in a paragraph make the
content Legible and easily scannable to the readers/viewers.

▪ Focus and Attention Macro white spaces help guide the viewers to the
focus area in the design.

▪ 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.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
▪ Guide the user through local grouping White space helps you to achieve
the proximity of your design.
▪ 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.

3. Alignment it 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 gives your composition a definitive structure and a
creative balance. Alignment may be left, centered, right, or justified.
4. 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.

5. Repetition is one of the basic principles of design that involves reusing the same
or similar elements throughout a design to create consistency, unity, and cohesion.
These repeated elements can include:
▪ Colors ▪ Lines
▪ Shapes ▪ Textures
▪ Fonts or typography ▪ Graphic motifs

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
 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. So, let us explain first the difference between font and
typeface.

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. The table shows the difference between a font and a typeface.

TYPES OF FONTS
Fonts can be categorized into three: Serif, San Serif, and Display

A. 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.

B. San Serif is 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.dghuil5666666666

C. Display fonts are sometimes called as fancy or decorative

fonts. It can be script, black letter or all caps. These types
of fonts are used in special occasions like invitations, titles,
or posters. Examples of display fonts are Advertising
Script, Bangers, and Forte.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
 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. Before we
proceed to different color schemes, let us go over some terminologies used in color.
▪ 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.

COLOR SCHEMES

Of course, we can still remember the lessons

about color during art lessons. We have
primary colors, then secondary colors and
tertiary colors. A circular diagram of these
colors is called a color wheel. Using this
wheel, we can create our own color scheme
or combination.

A. 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.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
B. ACHROMATIC COLOR SCHEME This color scheme only revolves on using
desaturated colors like black, gray, and white.
C. ANALOGOUS COLOR SCHEME Analogous color scheme selects a group of three
colors that are adjacent in the color wheel.

D. 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.

E. SPLIT-COMPLEMENTARY COLOR SCHEME Split-complementary color scheme uses

the colors on both sides of the opposite color.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
F. TRIADIC COLOR SCHEME This color scheme uses colors that form an equilateral
triangle. It may be a combination of primary, secondary, or tertiary colors.

G. TETRADIC COLOR SCHEME Also known as double complementary. This color scheme
uses two pairs of complementary colors.

UNDERSTANDING THE 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. So, what are they? They are color profiles that
we need to consider if we create designs.

▪ 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.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
 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. Do you remember using clip
arts on your project designs? If yes, then I encourage you to not use it today as we are
over with the clip art era. Stock photos are now popular in any project.

Most people are now relying on stock photos as they are free or sometimes cost less.
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.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era
Candon Campus
MODULE 5
IMAGE FILE TYPES
There are different file types of images, and they are grouped into two categories:
vector and 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 EXTENSION

▪ 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
tools for you.

RASTER IMAGE FILE EXTENSION

▪ 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.

Course Code: GenEdElect 101

Descriptive Title: Living in the IT Era