IMAGING AND DESIGN FOR THE

ONLINE ENVIRONMENT & FOR VISUAL

MESSAGE USING INFOGRAPHICS

EMPOWERMENT TECHNOLOGIESBUSINESS
OBJECTIVES:
01 IDENTIFY AND EXPLAIN THE VITAL USE OF THE BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT;

02 ASSESS THE EFFECTIVENESS OF THE GRAPHIC DESIGN IN A GIVEN

LAYOUT EXAMPLE;

03 UNDERSTAND THE INFOGRAPHICS OR SIMILAR GRAPHS AND ITS

IMPORTANCE IN SHOWING INFORMATION; AND

04 REATE INFOGRAPHICS OR SIMILAR GRAPHS USING A

SPREADSHEET APPLICATION.
GRAPHIC DESIGN VS LAYOUT
GRAPHIC DESIGN
plan of creating an idea through a combination of texts,
images, and other elements that are placed together
artistically.

LAYOUT
process of organizing and arranging these elements in a
design as you plot it in a paper.
 BASIC PRINCIPLES OF DESIGN AND
LAYOUT

proper arrangement of the elements, which

1. BALANCE gives a visual weight for the design

proper arrangement of the elements, which

gives a visual weight for the design

2 Types:
Symmetrical - elements are equally distributed on both sides of your
design
Asymmetrical - a free layout where the elements can be placed in any
order
 BASIC PRINCIPLES OF DESIGN AND
LAYOUT

2. EMPHASIS

makes a certain element of a design stand out. When

working on emphasis, you can change the color, size,
or even the element itself to lead the eye to the focal
interest.
WITH EMPHASIS WITH OUT EMPHASIS
 BASIC PRINCIPLES OF DESIGN AND
LAYOUT

3. PATTERN, REPITITION, AND RHYTHYM

Pattern - combination of elements that are repeated.

Repetition - reusing the same element s such as lines, shapes, forms,
textures, space, colors, font, and style throughout your design
Rhythm - use intervals or spaces between elements to give an
impression of movement
This principle will create texture, movement, continuity, and consistency
of the design.
WITH RYTHM WITH OUT RYTHM
 BASIC PRINCIPLES OF DESIGN AND
LAYOUT

4. ALIGNMENT

proper placement of an element to your design, just like invisibly

placing or aligning your texts or images diagonally, vertically, and
horizontally.

standard texts or paragraph alignment: center, right, left, and

justified.
 BASIC PRINCIPLES OF DESIGN AND
LAYOUT

5. HIERARCHY

proper arrangement of the details such as text, characters,

numbers, and symbols. Changing its character size, thickness,
spaces, or even font type to stand out is its most critical features.
By applying this principle, it can help the viewer to recognize and
navigate the highlight of the event smoothly.
 BASIC PRINCIPLES OF DESIGN AND
LAYOUT
6. CONTRAST

use of different or opposite elements such as sizes (large or small), shapes

(geometric or organic), spaces (negative or positive), form (real or abstract),
colors (monochromatic, complementary, triadic, tetradic), texture (smooth or
rough), and values (light or dark).
Reminder:
You must consider and limit the use of different elements, color, style, and
typography to avoid cluttered design. When creating contrast in color and
text, it is advised to choose a color from the background to create
consistency of your design. Always remember that the details must be
readable by having a dark-light value of either text and background or vice-
versa.
 BASIC PRINCIPLES OF DESIGN AND
LAYOUT

7. UNITY AND HARMONY

refers to the relationship of the elements or the contents

when you place them together. The elements of the design
must work together and agree to its meaning, theme, feeling,
or mood.
INFORMATION GRAPHICS OR
INFOGRAPHICS
is the portmanteau or combination of the words ‘information’
and ‘Graphics’, meaning, information from graphics.
Used to represent information, statistical data, or knowledge in
a graphical manner usually in a creative way to attract the
viewer’s attention
It makes complex data become more visually appealing to an
average user.
ELEMENTS OF INFOGRAPHICS

Data - reliable, timely

Design - theme, color, font, readable
Story - clear message, solution to a problem, process, etc.
Shareability - virality, social
COMMON TYPES OF INFOGRAPHICS

1. TIMELINE INFOGRAPHIC
Show historical development through
timelines.
Highlight a sequence of events.
Share a story in chronological order.
Set the audience’s expectations on how long a
process will take.
COMMON TYPES OF INFOGRAPHICS

2. PROCESS INFOGRAPHIC

Break down a complex process into easy-to-

digest pieces of information.
Provide a summary of steps in a process.
COMMON TYPES OF INFOGRAPHICS

3. INFORMATIONAL INFOGRAPHIC

Share an overview of a specific topic

Introduce a new idea or concept
Make a plain blog post or article more
engaging for your readers
COMMON TYPES OF INFOGRAPHICS

4. MAP INFORGRAPHIC

Illustrate trends on a specific location —

global, national, state, cities, towns, and even
your neighborhood.
Share visual stories of a particular place.
Communicate regional and global statistics
based on location.
COMMON TYPES OF INFOGRAPHICS
5. RESUME INFOGRAPHIC

Set yourself apart from other candidates and get the

hiring manager to call you for an interview.
Catch the eye of recruiters, leave a remarkable
impression, and compel them to learn more about you.
Showcase specific sections and relative advantages in
your resume like certain skills, projects, and teams
you’ve worked with.
COMMON TYPES OF INFOGRAPHICS
6. LIST INFOGRAPHIC

Share a collection of tips.

Support an idea or topic with major points.
Summarize your presentation.
COMMON TYPES OF INFOGRAPHICS
7. DATA VISUALIZATION INFOGRAPHIC

A case for an argument, opinion, or perspective.

impactful statistics.
COMMON TYPES OF INFOGRAPHICS
8.COMPARISON INFOGRAPHIC

Encourage your audience to see two or multiple

perspectives.
Compare pros and cons.
Show similarities and/or differences.
GRAPHS AND CHARTS AS INFOGRAPHICS
Bar graphs – primarily used in comparing sets of data. They visualize the
difference between values in a table and show rate of change over time.
GRAPHS AND CHARTS AS INFOGRAPHICS
Line graphs – similar with bar graphs in terms of use, with a difference that
line graphs are more suitable in showing trends
GRAPHS AND CHARTS AS INFOGRAPHICS
Pie charts – are circular statistical graphical representation of proportion or
percentage
GRAPHS AND CHARTS AS INFOGRAPHICS
Forest graphs – used to visually represent values within a group and
compare them to other groups.
GRAPHS AND CHARTS AS INFOGRAPHICS
Radial graphs – These are similar to a forest graph in many aspects but are
presented using a circle.
 CREATING INFOGRAPHICS USING EXCEL
1. In your desktop, create a document named ‘Sales Data’. (Always remember to
save your progress by pressing Ctrl + S.)
2. In your work area, copy the set of data.
3. Drag select A1 to L2, then in the ribbon press Insert then in the charts section,
click the desired chart. For example, click Insert Column Chart or Area Chart.
4. A dropdown window will appear as seen in Figure 2.5, in the 2-D Column
section, select Clustered Column. I
5. To rename, double click the name of the graph then type the “Sale Rending
Graph”
6. To resize, click the graph then click and drag any of the eight handles in the
edges of the graph.
7. To reposition the graph, click and drag the graph to the desired position.
8. You can copy and paste the graph to other Microsoft Office application. To
copy press Ctrl + C then press Ctrl + V to paste.
 INFOGRAPHIC IMAGE AND GRAPHIC FORMATTING
Design Tools

1. To access the Chart Tools where Design and Format Menu

tools can be found you must first select any Graph that you
want to edit.
2. Click on Design, In the Chart Styles section click More
3. In the Multiple Chart Styles you can choose different types of
styles that can accommodate different styles requirements or
preference. Click and explore any of each to see their
differences. For the purpose of demonstration, click Style 14.
“CREATIVITY is allowing yourself
to make mistakes. DESIGN is
knowing which ones to keep”.

- Scott Adams
REFERENCES:

Empowerment Technologies Quarter 1 – Module 5:

Imaging and Design for the Online Environment
Empowerment Technologies Quarter 1- Module 6:
Imaging and Design for Visual Message Using
Infographics
https://piktochart.com/blog/types-of-
infographics/
https://youtu.be/AiiSGGfPQTY?
si=kde4aNdmwk7oS9sY
 QUIZZ

1. It is a plan of creating an idea through a combination of

texts, images, and other elements that are placed together
artistically?

A. Bar Graph
B. Graphic Design
C. Infographic
D. Data Visualization Infographic
 QUIZZ

2. It is used to represent information, statistical data, or

knowledge in a graphical manner usually in a creative way to
attract the viewer’s attention?

A. Radial Graph
B. Graphic Design
C. Resume Infographic
D. Infographic
 QUIZZ

3. Which of the principles of graphics and layout refers to the

proper placement of an element to your design, just like
invisibly placing or aligning your texts or images diagonally,
vertically, and horizontally?

A. Symmetrical
B. Asymmetrical
C. Balance
D. Alignment
 QUIZZ

4. Which of the principles of graphics and layout refers to the

proper arrangement of elements, which gives a visual weight
for the design?

A. Balance
B. Emphasis
C. Pattern, Repetition and Rhythm
D. Unity and Harmony
 QUIZZ
5. What is the main use for bar graph?
A. To compare different data group from other data group.
B. To show percentage or rates.
C. To show rate of change over time of values.
D. To present relationship of data to other data

6. A type of graph that is used to visually represent values

within a group and compare them to other groups.
A. Pie charts
B. Forest graphs
C. Line graphs
D. Radial graphs
 QUIZZ

7. A type of common Infographic that Illustrate trends on a

specific location — global, national, state, cities, towns, and
even your neighborhood.

A. Map Inforgraphic
B. List Infographic
C. Timeline Infographic
D. Informational Infographic
 QUIZZ

8. It is a process of organizing and arranging these elements in

a design as you plot it in a paper.

A. Layout
B. Graphic Design
C. Infographic
D. Data Visualization Infographic
 QUIZZ

9. A type of common Infographic that encourage your audience

to see two or multiple perspectives.

A. Data Visualization Infographic

B. Comparison Infographic
C. Resume Infographic
D. Informational Infographic
 QUIZZ

10. Elements of Infographics

A. Data, Design, Story, & Shareability

B. Pattern, Repitition, & Rhythym
C. Balance, Emphasis, Hierarchy, & Contrast
D. Data, Layout, Texture, & Visualization
 OUR TEAM YEAHH

Crizza Angela Christian Josh John Mark Segui

Norte Magtarayo
THANK YOU.