IMAGING AND

DESIGN FOR
ONLINE
ENVIRONMENT
 Basic Principles of
Graphics and Layout
1.Balance – it is the visual weigh of objects,
texture, colors, and space is evenly
distributed on the screen.
2. Emphasis – an area in the design that may
appear different in size, texture, shape or
color to distract the viewer’s attention.
3.Movement – how the eye moves
through the composition leading the
attention of the viewer from one aspect
to another.
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.
5. Proportion – visual elements create a
sense of unity where they relate well with one
another.
6. Variety – this uses several design
elements to draw a viewer’s attention
 CREATING
INFOGRAPHICS
What is Infographics?
- Are use to represent information, statistical,
data, or knowledge in graphical manner
usually done in a creative way to attract the
viewers attention.
Example of infographics
Reasons to use Infographics:

• To communicate a message
• To present in a way that is compact and easy
to comprehend.
• To analyze data in order to discover cause-
and-effect relationships.
• To periodically monitor the route of certain
parameters.
3 Elements of Infographics:

1. Visual Elements which includes color

coding, graphics, and reference icons.
2. Content Elements which includes time
frames, statistics and references; and
3. Knowledge Elements which consist of
facts.
 TYPES OF
INFOGRAPHICS
1.Cause and Effect Infographics –
infograpics that show the cause and effects
of certain topics.
2.Chronological Infographics – usually
used to show a topic in a chronological or a
step-by-step sequence.
3.Quantitive Infographics – used to show
statistics like charts, bar graphs, etc.
4.Directional Infographics – similar to
chronological infographics where you use
arrows to direct the viewers attention to
another aspect of the infographic.
5.Product Infographics – used to promote
products and services.
Here are some Tips for Creating
Infographics:
• Simplicity Rocks
• Nothing takes effect without a cause
• Draw your Boundaries
• Think in Color
• Layout is not just Typography
• Make it Appealing
• Be Verifiable
ONLINE FILE
FORMAT
FOR IMAGES
 THERE ARE 4
TYPES OF IMAGE
FILE FORMAT
PNG (Portable Network Graphics)

The features of PNG are transparency for

24 bit RGB images, and loss
Less compression. However, PNG is
slower to read or write.
JPEG (JOINT PHOTOGRAPHIC EXPERTS
GROUP)

Its compresses the data

to be a very much
smaller in the file but
lossy compression to
accomplish this feat,
which is strong
downside.
TIF(TAGGED IMGAGE FILE)

The format supports lossless

compression so that graphic
artists and photographers
archive their photos to save
on disk space without
compromising quality.
GIF(GRAPHICAL INTERCHANGE
FORMAT)

GIF files are saved in

lossless format, the
meaning clarity of the
image is not
compromised with GIF.