IMAGING AND DESIGN FOR

ONLINE ENVIRONMENT
EMPOWERMENT TECHNOLOGIES
LESSON OBJECTIVES:
AT THE END OF THE LESSON, THE STUDENTS
SHOULD BE ABLE TO:
1. UNDERSTAND THE BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT;
2. APPRECIATE AND CREATE A SIMPLE INFOGRAPHIC
USING WEB TOOLS;
3. USE SEVERAL FILE FORMATS USED ON THE WEB
SUCH AS .JPG, .GIF AND .PNG.
WHAT IS THE MOST VISITED
WEBSITE IN THE WORLD?
Clue:
The website’s mission statement is “to organize the
world’s information and make it universally accessible
and useful.”
Alexa.com, a
renowned website
for ranking web
page popularity,
ranks this website
number 1 in the
entire world.
WHY DO YOU THINK GOOGLE RANKS

NUMBER ONE DESPITE THE

COUNTLESS SEARCH ENGINES AND

WEBSITES IN THE INTERNET?

BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
1. BALANCE
2. EMPHASIS
3. MOVEMENT
4. PATTERN, REPETITION, AND
RHYTHM
5. PROPORTION
6. VARIETY
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

1. BALANCE
 THE VISUAL WEIGHT OF OBJECTS, TEXTURE,
COLORS, AND SPACE IS DISTRIBUTED ON THE
SCREEN.
 WHEN VISITING A WEBSITE, CHECK IF ONE SIDE
HOLDS THE SAME AMOUNT OF WEIGHT ON THE
OTHER.
 THE COLORS SHOULD ALSO HAVE A SIMILAR
VISUAL WEIGHT.
CTTO
CTTO
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

2. EMPHASIS
AN AREA IN THE DESIGN THAT MAY APPEAR
DIFFERENT IN SIZE, TEXTURE, SHAPE OR
COLOR TO ATTRACT THE VIEWER’S
ATTENTION.
CTTO
CTTO
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

3. Movement
Visual elements guide the viewer’s eyes around the
screen
CTTO
CTTO
CTTO
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
4. PATTERN, REPETITION, AND RHYTHM

 THESE ARE THE REPEATING VISUAL

ELEMENT ON AN IMAGE OR LAYOUT TO
CREATE UNITY IN THE LAYOUT OR IMAGE.
 RHYTHM IS ACHIEVED WHEN VISUAL
ELEMENTS CREATE A SENSE OF ORGANIZED
MOVEMENT.
CTTO
CTTO
CTTO
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

5. PROPORTION
 VISUAL ELEMENTS CREATE A SENSE OF
UNITY WHERE THEY RELATE WITH ONE
ANOTHER.
CTTO
CTTO
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
6. Variety
 This uses several design elements to draw a viewer’s
attention.
CTTO
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
1. BALANCE
2. EMPHASIS
3. MOVEMENT
4. PATTERN, REPETITION, AND
RHYTHM
5. PROPORTION
6. VARIETY