1

Lesson 6:
Imaging and Design for
the
Online Environment

Understanding Graphic Design and Layout

What makes a good and effective website? How do users interact with the
websites they visit?

A good website must know its target audience, determine its needs, and
communicate effectively using the basic principles of graphics and layout. Users or
visitors may have different interests and needs like browsing, researching,
streaming, online shopping, dating, and many others. They even behave differently
depending on what they perceive on the website. Web design matters in every user,
whether they can decide to stay or just leave. Usability is important for the users as
it satisfies their experience on the website, but a good design will drag the audience’s
attention to stay on the page. Always remember that first impressions last and web
design has an impact on the users on how they perceive the brand or message.

Graphic design is an artistic way of communicating ideas and messages

through visual expressions using texts, images, and symbols. Graphic designers
work on the quality of the output they serve for the audience or clients like websites,
advertisements, posters, flyers, logos, videos, and any other multimedia form. A
practical graphic layout and design can easily catch the attention of the viewers and
allow them to understand the message conveniently.

Graphic Design vs. Layout

Design is a plan of creating an idea through a combination of texts, images,
and other elements that are placed together artistically, whereas, the layout is a
term used as the process of organizing and arranging these elements in a design as
you plot it in a paper.

Basic Principles of Design and Layout

1. Balance
It refers to the proper arrangement of the elements, which gives a visual
weight for the design. There are two types of balance,
Symmetrical or Asymmetrical. Symmetrical balance is where the
elements are equally distributed on both sides of your design, technically a

1
 2

mirror-based design. In contrast, Asymmetrical balance is a free layout

where the elements
can be placed in any order or the opposite of symmetrical.

vs
.

Symm
etrica A ymmetrical
l s

2. Emphasis
It refers to something that needs to stand-out or emphasize. When working
on emphasis, you can change the color, size, or even the element itself to
lead the eye to the focal interest.

vs.

no emphasis
with emphasis

3. Pattern, Repetition and Rhythm

The use of repetitive elements such as lines, shapes, forms, textures, space,
colors, font, style, and the like to create texture, movement, continuity, and
consistency of the design. It also makes the design formal and more
comfortable to read because of its uniformity.

Slides A

No repetition of elements

Slides B
with repetition of elements such as color,
background

2
 3

and font type

4. Alignment
It 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. The standard texts or paragraph alignment we apply are center,
right, left, and justified.

vs.

all text boxes are invisibly aligned all textboxes have different
and placed with each other angles positioning diagonally

5. Hierarchy
It refers to the 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.

vs.

6. Contrast
It refers to the 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). The contrast gives visual weight
to an object or design. 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.

a poster and a packaging showing contrast with the use of a dark -colored
background and a light-colored text to make the details readable.

3
 4

7. Unity and Harmony

It 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.
The
web page
shows
the

consistent
use of

font

style, font color,

contrasting with the dark

background, the
hierarchy is according to its importance, proper text

alignment and repetition of the design in every menu.

Lesson 5.1
Imaging and Design for Visual
Message Using Infographics

4
 5

Principles of Visual Message

Design Using Infographics

We, humans, highly depend in our sense of sight, that’s why it is said that we are ‘visual
creatures’. Text information can be very detailed but to most people it fails to ‘visualize’ the
message. Showing a table of sales in a year will take time to be fully analyzed but
can be easily understood with the smart use of graphics.

There are software that can be used in creating Infographics most requires
advance knowledge and skills to make or needs internet connection to use. With the
use of a prior application that we discussed earlier, Microsoft Excel, that is effective,
practical and easy to learn.

5
 6

What’s In
This module will tackle the use of infographics in improving the
presentation of information. The focus will be on what infographics are and
how to make them using Microsoft Excel.

6
What is It

Infographics is the portmanteau or combination of the words ‘information’ and ‘Graphics’,

meaning, information from graphics. Like what you did with the activity earlier,
graphics, pictures and images can convey a lot of information especially when it
has context. Infographics can greatly enhance the way you present
your information. (see Figure 2.1)

150,000
Year Population
1945 70,024 100,000

1955 80,032 50,000

1965 99,209
0
1995 126,630
1945 1955 1965 1995 2005 2015
2005 123,639
2015 110,095
Figure 2.1: Sample Infographic, a Bar Graph

As seen in Figure 2.1, the graph through the use of shapes and
lines, gives the reader a visual interpretation of the data. The main purpose of an
infographic is to engage and to make understanding easier. Remember that
infographics are not used to make documents more appealing, but the use of
graphical elements that will improve how quickly and easily an idea or information
is presented.
CO_Q1_Empowerment Technologies
SHS Module 6

Graphs and Charts as Infographics

Graphs and charts are representation of data (mostly numeric) through

graphics.
There are many types of charts. Their uses depend on what you want
to show or report. The following are some of the charts and their uses.

Bar graphs – These are primarily used in comparing sets of data. They visualize the
difference between values in a table and show rate of change
over time. (Figure 2.1 is an example of a Bar graph)
Line graphs – These are similar with bar graphs in terms of use,
with a difference that line graphs are more suitable in showing trends.
Pie charts – These are circular statistical graphical representation of proportion
or percentage.
Forest graphs – These graphs are used to visually represent values
within a group and compare them to other groups.

7
 8

Radial graphs – These are similar to a forest graph in many aspects but are
presented using a circle.

Figure 2.2: Forest and Radial Graph

Creating Infographics using Excel

1. In your desktop, create a document named ‘Sales Data’. (Always remember to save
your
progress by pressing Ctrl + S.) 6

Figure 2.3: Sample Sales Table

2. In your work area, copy the set of

data. (see Figure 2.3)

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. (See Figure
2.4)

NOTE: Drag Selection

You drag select by clicking on the first cell
then while pressing shift, click the second
cell specified. Particularly in this example,
click on A1 then press shift and L2.

8 CO_Q1_Empowerment Technologies
SHS Module
 9

1
2

Figure 2.4: Inserting a Chart

4. A dropdown window will appear as

seen in
Figure 2.5, in the 2-D Column section,
select Clustered Column. It will create a
graph as seen in Figure 2.6.

5. To rename, double click the name of the

graph then type the “Sale Rending Graph”
(Steps 5 to 7 are already tackled in earlier
modules. You may refer to Module 2.2
“Working with Spreadsheets” for more
detailed instructions)

6. To resize, click the graph then click and

drag any of the eight handles in the edges Figure 2.5: Line Graph Selection
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.
 10

Figure 2.6: Sample Column Chart

Infographic Image and Graphical Formatting

The visual preference of people when it comes to gathering
data must not be discounted. When making an infographic
specifically a graph, it is necessary it is tailored to our target
audience. In MS excel there are options in editing, manipulating
and formatting visual elements in our graph.

Design Tools

1. To access the Chart Tools where

Design and Format Menu tools can be
found you must first select any Graph

Figure 2.7: Chart Tools

 11

that you want to edit. In the ribbon. The said Menu tools will be
available as seen on figure 2.7

2. Click on Design, In the Chart Styles section click More (as seen
on figure 2.8). It will expand and display multiple Chart Styles
options as seen on Figure 2.9.

More

Figure 2.8: More button Figure 2.9: Multiple Chart Styles Option

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
as seen on figure 2.10.

Style 14

Figure 2.10: Multiple Chart Styles Option

12