MANIPULATING TEXT, GRAPHICS, AND

IMAGES TO CREATE ICT CONTENT

INTENDED FOR AN ONLINE
ENVIRONMENT
5 BASIC PRINCIPLES OF GRAPHICS AND
LAYOUT

1. Proximity
2. Alignment
3. Repetition
4. Contrast
5. White Space
PROXIMITY
Proximity means grouping elements together
so that you guide the viewer/reader to
different parts of the message.
PROXIMITY
Though at first the elements
may appear scattered, their
proximity adds unity and
continuity to the page. Even
if you intend on sticking to
templates, it still helps to
know design principles for
the purposes of customizing
an existing design.
ALIGNMENT
• Alignment is the placement of visual elements so
they line up in a composition.
ALIGNMENT
It’s important to be consistent
in the alignment of elements.
When you look at the design
and something doesn’t feel
right, play around with the
alignment and see if the design
can be improved.
REPETITION

Repetition is the reusing of the same or similar

elements throughout the design.
REPETITION
In the layout on the right,
the image of the
sandwiched is cropped and
masked in repeating
squares, as well as the use
of repeated red strokes
above the word “PANE.”
Repetition puts emphasis on
particular elements of a
design, and it draws the
reader’s attention to those
elements.
CONTRAST

Contrast between design elements can make a

presentation stand out and get noticed.
CONTRAST

Adding color contrast

makes the design pop, and
it draws attention to
important parts of the
presentation and message.
CONTRAST

Notice another piece of

contrast: the two arrows are
followed by the check in the
circle, which sends a visual
message. The color of that
element could also be changed
to add contrast.
WHITE SPACE
• Very powerful in design.
• Useful when you want to make a direct message, to
stand out above the clutter found in many graphic
designs.
https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd
WHITE SPACE

The white space provides room for the

clean font style of the title, the graphic
elements, and the grouped text.

As Robin Williams points out, white space

can also be a form of contrast.
 PRINCIPLES OF VISUAL
MESSAGE DESIGN USING
INFOGRAPHICS
Infographics
- are visual presentations of information that use the elements
of design to display content.
- Infographics express complex messages to viewers in a way
that enhances their comprehension.
- Images are often an extension of the content of a written
article, but infographics convey a self-contained message or
principle.
INFOGRAPHICS
Infographics
communicate complex
data quickly and
clearly, and they are
considered to be
effective worldwide.
 INFOGRAPHICS
- Suitable for complex piece of
information that needs to be
described quickly, precisely and
clearly.
- Infographics are used for signs,
maps and data presentations.
- Scientists, technical writers,
mathematicians, educators and
statisticians use infographics
most of the time.
 Infographics are used for the following
reasons:
▪ To communicate a message,
▪ To present a lot of data or information in a way
that is compact and easy to comprehend,
▪ To analyze data in order to discover cause-and-
effect relationships,
Infographics are composed of three important
elements:
Visual Elements Content Elements
▪ Color coding ▪ Time frames
▪ Graphics ▪ Statistics
▪ Reference icons ▪ References
Knowledge Elements
▪ Facts
 Types of Infographics

It is possible to classify
infographics according
to five categories.
1. Cause and Effect Infographics
These graphics explain causal relationships between
various physical or conceptual stages.

e.g., the causes of the recession in the US and its

effect on the global economy.
2. Chronological Infographics

Chronological infographics explain an event or process

as it happened in time.

For example, a bar chart that shows the growth in sales of a

particular product over a period of time is a chronological
infographic.
3. Quantitative Infographics
Quantitative infographics convey statistical
data to readers quickly and clearly.
These graphics include charts, bar graphs, tables
and lists.
4. Directional Infographics
Infographics can navigate readers through information.
Numbers, symbols, icons, diagrams, graphs, tables, arrows and
bullets are used to communicate information.
Examples:
* Traffic symbols, scale maps and navigational aids on
streets and highways.
* Numbers are used to indicate the distance, and dots,
arrows and bullets are used as landmarks for directional aid.
5. Product Infographics
▪ Product infographics can be seen on notice
boards at factories and corporate offices,
conveying information to all employees and
visitors.
▪ Product infographics are also used by dieticians
and in cooking schools to convey key procedures.
TIPS FOR
DESIGNING
INFOGRAPHICS
Simplicity Is the Best Policy

Infographics should be simple, clean, concise and clear.

Make sure the information being conveyed is well
organized. Visual simplicity ensures that the graphic will
be easy for readers to comprehend.
Nothing Takes Effect Without a Cause

Emphasize cause and effect relationships in your

presentation.

Infographics spread awareness and enable people

to voice their concerns.
Draw Your Boundaries

Be clear: limit the scope of your information, and draw

your lines accordingly. The attention span of the average
user is not increasing.

Define your question carefully, and be sure to answer it

using the best method available. The visualization you
create will be much more effective and imaginative that
way.
Think in Color
Color is the most effective tool by which authors guide and
influence their readers. Color can give readers varied
impressions, both conceptual and emotional.

Color makes the information you provide more legible and

determines the visual hierarchy of information.

TAKE NOTE: Contrast is king: the background should blend well

with the illustrations.
Layout Is Not Just About Typography

Tap your creativity: try different combinations of typography,

illustrations, images, charts, diagrams and icons.

Use a maximum of two or three fonts in the designs you create.

The effectiveness of the infographic will depend entirely on
your creativity as a designer.

Add a logo if the infographic is connected to a company or

institution.
Make It Appeal the Eye
Ensure that you have a clear idea of the final size of
the graphic as you are working.

Design your graphics to be viewed along with

articles.
Be Verifiable
Make infographics trustworthy by allowing
readers to dig deeper into the data if they so
desire.

Always cite your data sources with relevant links.

Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Examples of Some of the Interesting Infographics
Examples of Some of the Interesting Infographics
Examples of Some of the Interesting Infographics
Examples of Some of the Interesting Infographics
 ONLINE FILE FORMATS
FOR IMAGES AND TEXT
The most common image file formats, the
most important for cameras, printing,
scanning, and internet use, are JPG, TIF,
PNG, and GIF.
Compression
• This deals with the file size. The more compressed the image
the smaller the file.

2 Types are:
• Lossy compression reduces the size of the image by discarding
image detail.
• Lossless compresses the image without discarding any detail,
but the file sizes are larger
Number of colors
• The simplest may only have one of two colors (a good
example of these would be logos) while the more complex
(like digital photos) contain millions.
• Certain file types, like .GIF, are better suited for images with
less color while others, like .JPEG, all well suited for images
with millions of colors.
 JPG
• JPG files, also known as JPEG files, are a common file
format for digital photos and other digital graphics.

• JPEG stands for Joint Photographic Experts Group,

the committee that created the file type.

• JPG files have the file extension .jpg or .jpeg.

 TIF
• Stands for Tagged Imaged File Format.

• Generally used for professional photography, print

publishing and graphic design.

• Uses losless compression so the files are usually very

large

• TIF does most of anything you might want, from 1-bit to

48-bit color, RGB, CMYK.
 GIF
• Stands for Graphics Interchange Format.

• This file type uses lossless compression and is

generally used for images with less than 256
colors, like icons or logos.
• GIF is rather limited colors for color photos, but is
generally great for graphics.

• GIF offers transparency and animation.

• For graphics of only a few colors, GIF can be much

smaller than JPG, with more clear pure colors than
JPG).
 PNG
• Stands for Portable Network Graphics.
• This is a newer file format similar to a .GIF but it
supports more colors.