LESSON 6

IMAGING AND D E S I G N FO R
ONLINE ENVIRONMENT
 Basic principles of graphics
and layout
 Creating infographics

 Online file formats for images

 Principles and basic

techniques of image
manipulation
 Uploading, sharing, and

image hosting
LESSON OBJECTIVES:
 understand the basic principles of
graphics and lay out;
 create a simple infographic using web
tools;
 understand and use several file
formats used on the web
 easily manipulate images using a
simple image editor ; and
 upload and share images using
Photobucket
L E S S O N MOTIVATION

 What is the most

visited website in the
world?
 No, it is not Facebook
nor Twitter. Here is the clue,
the site’s mission statement is
“to organize the world’s
information and make it
universally accessible and
useful.”
 You probably guessed it by

now, yes, it is...

 Why do you think
G O O G L E ranks number 1 in
the entire world despite the
countless search engines
and websites in the Internet?
(Alexa.com, December 2014)
L E S S O N DISCUSSION
 Creatinga webpage is like creating a
work of art. There are certain things
that you need to consider in order to
get your message across. In the
previous lesson, you learned how to
create an effective Powerpoint
Presentation. Some of those tips can
help you in graphics and lay out
design.
B AS I C P R I N C I P L E S O F G R A P H I C S
A N D L AYO U T
 1. BA L A N C E - The visual weight of
objects, texture, colors, and space is
evenly distributed on the screen.
When visiting a website, check if one
side holds the same amount of
weight on the other. The
should colors also
have similar visual
weight.
TYPES OF BALANCE
1. Symmetrical Balance- Symmetrical balance,
or formal balance, occurs when the elements of a
composition are the same on either side of an axis
line. Examples:
 The website for KiteExperience, shown
below,
illustrates this concept well.
TYPES OF BALANCE
2. Vertical Balance- Vertical balance is the
vertically oriented version of symmetrical design. If
one were to split a website along the vertical axis
along the middle of the page one would find that
the top and bottom halves reflect on this axis.
TYPES OF BALANCE

3. Horizontal Balance- Conversely, when

elements are balanced left and right of a central
axis they are balanced horizontally. Example:
B AS I C P R I N C I P L E S O F G R A P H I C S
A N D L AYO U T
2. Emphasis- An area on design that
may appear different in size, texture,
shape, or color to attract the viewer’s
attention.
Example: (Color emphasis)
Example: (Color emphasis)
An example web page of Balance and
emphasis
B AS I C P R I N C I P L E S O F G R A P H I C S
A N D L AYO U T
3. Movement- Visual elements that
guide the viewer’s eyes around the
screen.
Example 1:
EXAMPLE 2
B AS I C P R I N C I P L E S O F G R A P H I C S
A N D L AYO U T
4. Pattern, Repetition, and Rhythm. –
These are visual element on an image
or lay out to create unity in the lay out
or image. Rhythm is achieved when
visual elements create a sense of
organized movement.
EXAMPLES
These images used pattern and repetition which
create harmony for the entire image.
B AS I C P R I N C I P L E S O F G R A P H I C S
A N D L AYO U T
5. Proportion– Visual elements create
a sense of unity when they relate well
with one another.
A S C R E E N S H O T O F YA H O O. CO M W E B PAG E SHOWS
HOW THE FO N T SIZE OF HEADER IS
P RO PO RT I O NA L TO T H E S I Z E O F ITS CO N T E N T .
THIS IS D O N E S O THAT T H E VI E WE R C A N EAS I LY
S E E WHAT T H E A RT I C L E IS A L L ABOUT.
B AS I C P R I N C I P L E S O F G R A P H I C S
A N D L AYO U T
5. Variety- This uses several design
elements to draw the attention of the
viewers.
Example:
This web page uses a combination of text and images