Lesson 2 Part 2
Elements of Graphic Design
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
1st SEMESTER CY 2023-2024
Learning Objectives:
At the end of the lesson, students should be able to:
• Identify and explain the importance of the
seven elements of graphic design.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Student Learning Outcomes:
At the end of the lesson, students should be able to:
• understand the seven elements of graphic design and
how they can be used to create effective visual
compositions;
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Topics:
• Elements of Graphic Design
o Exploring the role of imagery in design
o Typography basics and its impact on
design
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery plays a critical role in design. It can
be used to:
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery plays a critical role in design. It can
be used to:
•
•
•
•
Attract attention and engage users.
Convey information quickly and effectively.
Evoke emotions and create a desired mood.
Build brand identity and recognition.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery plays a critical role in design. It can
be used to:
• Attract attention and engage users.
People are drawn to visuals, so
images can be a great way to
grab users' attention and keep
them engaged with your design.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery plays a critical role in design. It can
be used to:
• Convey information quickly and effectively.
Images can communicate
complex ideas and concepts in a
way that is more efficient and
easier to understand than text
alone.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery plays a critical role in design. It can
be used to:
• Evoke emotions and create a desired mood.
Images can trigger strong emotional
responses in viewers, which can be
used to create a specific mood or
atmosphere for your design.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery plays a critical role in design. It can
be used to:
• Build brand identity and recognition.
Build brand identity and
recognition. Consistent use of
high-quality images that are
relevant to your brand can help
to create a strong visual
identity and make your brand
more recognizable.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery can be used in a wide variety of design
contexts, including:
• Web design
• Graphic design
• Product design
• Environmental design
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery can be used in a wide variety of design
contexts, including:
Web design
TEC 200 – Technological Competency Education 1
Images can be used to break up
text, illustrate key concepts, and
make web pages more visually
appealing.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery can be used in a wide variety of design
contexts, including:
Graphic design
TEC 200 – Technological Competency Education 1
Images are used in all sorts of
graphic design projects, such as
logos, brochures, posters, and
packaging.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery can be used in a wide variety of design
contexts, including:
Product design
TEC 200 – Technological Competency Education 1
Images are used to showcase
products on websites and in
marketing materials, and to help
users understand how to use
products.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Imagery can be used in a wide variety of design
contexts, including:
Environmental
design
TEC 200 – Technological Competency Education 1
Images can be used to create a
desired mood or atmosphere in
interior and exterior spaces.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are some tips for using imagery effectively in your designs:

Choose relevant images.

Use high-quality images.

Use images consistently.

Copyright images.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are some tips for using imagery effectively in your designs:
• Imagery is a powerful tool that can be used to enhance
the effectiveness and appeal of your designs.
• By using images strategically, you can attract attention,
convey information, evoke emotions, build brand
identity, and create a more engaging user experience.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Impact of typography on design
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on
the design of a piece or project. It can be used
to:
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are a few key typography basics that
every designer should know
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typeface
Font
Point size
Leading
Kerning
Alignment
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are a few key typography basics that every designer should know:
Typeface
TEC 200 – Technological Competency Education 1
A typeface is a family of fonts
that share a common design.
Examples of typefaces include
Times New Roman, Arial, and
Helvetica.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are a few key typography basics that every designer should know:
Font
TEC 200 – Technological Competency Education 1
A font is a specific variation of a
typeface, such as Times New
Roman Bold or Arial Italic.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are a few key typography basics that every designer should know:
Point size
TEC 200 – Technological Competency Education 1
The point size is the size of a
font, measured in points. One
point is equal to 1/72 of an inch.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are a few key typography basics that every designer should know:
Leading
TEC 200 – Technological Competency Education 1
The leading is the space between
lines of text. It is measured in
points, and it should be at least
1.2 times the point size of the font.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are a few key typography basics that every designer should know:
Kerning
TEC 200 – Technological Competency Education 1
Kerning is the space between
individual letters. It is adjusted to
create a more visually pleasing
and readable composition.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Here are a few key typography basics that every designer should know:
Alignment
TEC 200 – Technological Competency Education 1
The alignment of text refers to how
it is positioned on a page or
screen. The most common text
alignments are left-aligned, rightaligned, centered, and justified.
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant
impact on the design of a piece or
project. It can be used to:
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
• Create a visual hierarchy
• Set the tone and mood
• Reinforce branding
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
• Create a visual hierarchy
By using different typefaces, font
sizes, and weights, designers can
create a visual hierarchy that helps
users to scan and understand
information quickly and easily.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
• Set the tone and mood
Typography can also be used to set the tone
and mood of a design.
For example, a serif typeface with a large point
size can be used to create a formal and
elegant look, while a sans-serif typeface with a
small point size can be used to create a more
casual and modern look.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Types of Typography
• serif typeface
• sans-serif typeface
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Types of Typography
serif typeface
• Characterized by small decorative
strokes, or serifs, at the ends of the
strokes that make up the letters.
• More formal and elegant than sansserif typefaces, which do not have
serifs.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Example of Serif typeface
Garamond is a versatile serif typeface
that can be used for a variety of
purposes, including web design,
graphic design, and typography
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Example of Serif typeface
Baskerville is a beautiful serif
typeface with a timeless look. It
is often used in wedding
invitations, magazines, and
other luxury products.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Example of Serif typeface
Caslon is a sturdy and reliable
serif typeface that is often used
in branding and marketing
materials.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Types of Typography
San-serif
typeface
• Characterized by the absence of serifs,
or small decorative strokes, at the ends
of the strokes that make up the letters.
• More modern and casual than serif
typefaces, which have serifs.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Example of San-serif typeface
Arial is a versatile sans-serif
typeface that can be used for
a variety of purposes,
including web design, graphic
design, and typography.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Example of San-serif typeface
Helvetica is a classic sans-serif
typeface that is often used in
branding and marketing materials.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Typography can have a significant impact on the design of a
piece or project. It can be used to:
Example of San-serif typeface
Roboto is a modern sans-serif
typeface that is easy to read
on screens and in print. It is
often used in web design and
Android apps.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Tips for good typography
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Tips for good typography

Choose the right typeface: When choosing
a typeface, consider the tone, mood, and
purpose of your design.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Tips for good typography
Use a variety of font sizes and weights: Using a
variety of font sizes and weights can help to
create a visual hierarchy and make your text
more readable.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Tips for good typography
Don't overcrowd your designs: Give your text
plenty of breathing room. Avoid using too many
different typefaces or font sizes in a single design.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Tips for good typography
Use kerning and leading: Kerning and leading can
help to improve the readability and visual appeal of
your text.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023
Tips for good typography
Proofread your work: Before publishing your design,
be sure to proofread it carefully for any errors in
typography.
TEC 200 – Technological Competency Education 1
EXADELIO T. LAZO
2nd SEMESTER CY 2022-2023