IMAGING AND

DESIGN FOR ONLINE

C

ENVIRONMENT
5 Basic Principles of Graphic Design You
Take For Granted Everyday
(1) Proximity
• Grouping elements together so that
you can guide the viewer/reader to
different parts of the message.
(2) Alignment
• Aligning elements in a visual and readable
arrangement
(3) Repetition
• Repeating elements in a
graphic design can be
visually appealing.
• Repetition puts emphasis
on particular elements of a
design, and it draws the
reader's attention to those
elements.
(4) Contrast
• Contrast between design elements can make a presentation stand out and get noticed.
 (5) White Space
• Depending on the presentation, the use of white space can be very powerful in design.
Principles of Visual Message Design
Using Infographics
Infographics
• visual presentations of information that use the
elements of design to display content
• express complex messages to viewers in a way
that enhances their comprehension
• communicate complex data quickly and clearly
Reasons Why Use Infographics
• To communicate a message
• To present a lot of data or information in a
way that is compact and easy to comprehend
• To analyse data in order to discover cause-
and-effect relationships
• To periodically monitor the route of certain
parameters
Elements of Infographics
• Visual Elements
• Color Coding
• Graphics
• Reference Icons
• Content Elements
• Time Frames
• Statistics
• References
• Knowledge Elements
• Facts
The History of Infographics
• First known examples of
infographics are hieroglyphics or
cave paintings in ancient Egypt
5,000 years ago.
• Nicole d’Orseme (1352-82),
Bishop of Lisieux, combined
figures into groups and graphed
them.
• Leonardo da Vinci combined
graphics with text in his “Treatise
on Painting.”
• The Commercial and Political
Atlas, published in 1786 by
William Playfair, was the first
example of modern infographics.
• Otto Neurath was then famously
known to have attempted to create
a language without words, an
endeavor that developed into the
Isotype movement (International
System of Typographic Picture
Education).
•  Early adapters of infographics in the US
include Fortune magazine, the Chicago
Tribune and the New York Times.
Types of Infographics
• Cause and Effect
Infographics
• Chronological
Infographics
• Quantitative Infographics
• Directional Infographics
• Product Infographics
Tips for Designing Infographics
• Simplicity Is The Best Policy
• Nothing Takes Effects Without a Cause
• Draw Your Boundaries
• Think in Color
• Layout Is Not Just About Typography
• Make It Appeal the Eye
• Be Verifiable
Excellent Examples of Creative
Inforgraphics
Examples of Some of the Interesting
Infographics
 Online File Formats for Images and Text
Manipulation
• JPG/JPEG (Joint
Photographic Experts Group)
• TIF/TIFF (Tagged Image File
format)
• GIF (Graphics Interchange
Format)
• PNG (Portable Network
Graphics)
Basic Image Manipulation Using Offline
or Open Source Software
Combining Text, Graphics, and Images
• Transparent Shapes
• Mix and Match
• Align Text and
Backgrounds
• Clean & Clear
Backgrounds
Uploading, Sharing, and Image Hosting
Platforms
• Unlimited Free Storage via Mobile Upload: Google Photos
• Ideal IF You Want To Upload and Share GIFs: Imgur
• Perfect for Creating Organized Photo Albums: Flickr
• A Platform for Serious Photographers: 500px
• Cloud Storage for Phots and Other File Types: Dropbox
• Simple and Speedy Individual Image File Uploads: Free Image Hosting
• Great for When You Want To Share Images in Forum Posts: Postimage
• A Secure Place for All Your High-Res Photos: ImageShack
• A Quick and Simple Solution for JPEG/JPG: ImageVenue
• Fast and Easy Uploads for Multiple File Types: imgbox