Imaging and Design for

Online Environment
• Basic principles of graphics and layout
• Online file formats for images
• Principles and basic techniques of image manipulation
• Uploading, sharing, and image hosting
At the end of this lesson, the students should be able to:

1. understand the basic principles of graphics and layout;

2. create a simple infographic using web tools;

3. understand and use several file formats used on the web;

4. easily manipulate images using a simple image editor; and

5. upload and share images using online image hosting

services.
 Lesson 1
Basic Principles in
Graphics & Layout
 Basic Principles
in Graphics and Layout
Layout:
It is the process of planning and
arranging graphics or text in a page or
book.
A good layout should have a
balanced make up and alignment of
elements.
 Basic Principles
in Graphics and Layout
1. Symmetrical:
There should be equal
weights or elements on both
sides of the page.
 Photo by
Alan McFadyen
 Basic Principles
in Graphics and Layout
2. Asymmetrical:
It may be asymmetrical
when there is an artistic and
different intensity on one side of
the page.
 Basic Principles
in Graphics and Layout
3. Text - The text type should be:
• Legible
• Appropriate font face
• Left justified, Right justified, or centered
• The flow of text should be easy to read.
Legible?
Appropriate?
Alignment
Flow of Text
 Basic Principles
in Graphics and Layout
4. Image - The image should be:
• Proportionate
• Sharp in color
• With high resolution
• With appropriate captions
Which one is….
2

3
1
PROPORTIONATE?
Which one is….

3
1 2
PROPORTIONATE?
 Basic Principles
in Graphics and Layout
5. Proximity and Harmony:
The elements should be close together
and scattered and arranged apart from each
other. Elements should not be cluttered and
not compete with each other.
 Basic Principles
in Graphics and Layout

6. Consistency:
There should be uniformity of theme on
each page.
 Basic Principles
in Graphics and Layout
7. Color and Shape:
Use color to create interest by
providing variety in the design (color
contrast and shapes).
 Basic Principles
in Graphics and Layout
8. Emphasis:
There should be one point of interest in
a page. The elements to be emphasized
should have a different size, color, shape, or
background.
FINAL PROJECT GROUPINGS

ICT Project for Social Change

NEXT MEETING

Short quiz – coverage – Word/Excel/Powerpoint

Image Formats