Imaging and Design for

the
Online Environment
CS_ICT11/12-ICTPT-Ie-f-6
OBJECTIVES:
At the end of the session, the students should be able to:

1. identify and explain the Basic Principles of Graphics and

Layout;
2. explain the vital use of the Basic Principles of Graphics and
Layout in communication and industry;
3. assess the effectiveness of the graphic design in a given layout
example; and
4. evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design.
Basic Principles of Graphics and Layout
Communication is critical for people to share
thoughts, feelings, and emotions. With the use of
different media, people can express their views in
many ways, including adding artistic designs. The
purpose of the combined images and texts also
gives influence to people not just understand the
sent idea or message, but it also adds emotion to
what is being seen.
Basic Principles of Graphics and Layout
Understanding Graphic Design and
Layout
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.
Understanding Graphic Design and
Layout
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.
Understanding Graphic Design and
Layout
Always remember that first impressions last and
web design has an impact on the users on how
they perceive the brand or message.
Understanding Graphic Design and
Layout
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.
Understanding Graphic Design and
Layout
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.
1. Balance
Symmetrical balance is where the elements are
equally distributed on both sides of your design,
technically a mirror-based design. In contrast,
Asymmetrical balance is a free layout where the
element can be placed in any order or the opposite
of symmetrical.
1. Balance

Symmetrical Asymmetrical
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.
2. Emphasis

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.
3. Pattern, Repetition and Rhythm
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.
4. Alignment
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.
5. Hierarchy
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.
6. Contrast
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 an background or vice-versa.
6. Contrast
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.
7. Unity and Harmony
Imaging and Design for
Visual Message Using
Infographics
CS_ICT11/12-ICTPT-Ie-f-6
OBJECTIVES:
At the end of the session, the students should be able to:

1. understand the infographics or similar graphs and its

importance in showing information;
2. identify which infographic or graph is most appropriate for a
particular set of information; and
3. create infographics or similar graphs using a spreadsheet
application.
Principles of Visual
Message Design
Using Infographics
Principles of Visual Message Design Using
Infographics
Principles of Visual Message Design Using
Infographics
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)
Principles of Visual Message Design Using
Infographics
Principles of Visual Message Design Using
Infographics
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.
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.
Graphs and Charts as Infographics
1. 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)
2. Line graphs – These are 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
3. Pie charts – These are circular statistical
graphical representation of proportion or
percentage.
4. Forest graphs – These graphs are used to
visually represent values within a group and
compare them to other groups.
5. Radial graphs – These are similar to a forest
graph in many aspects but are presented using a
circle.
Graphs and Charts as Infographics
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. (see
Figure 2.3)
Creating Infographics using Excel
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)
Creating Infographics using Excel
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)
Creating Infographics using Excel
Creating Infographics using Excel
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.
Creating Infographics using Excel
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 that you want to edit. In the
ribbon. The said Menu tools will be available as
seen on figure 2.7
Design Tools
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.
Design Tools
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 thei differences.
For the purpose of demonstration, click Style 14
as seen on figure 2.10.
Design Tools