Scribd
Upload
134 views38 pages

Imaging and Design For Online Environment

This document provides an overview of layout and design principles for online environments. It discusses basic layout principles like balance, emphasis, movement, pattern, repetition, rhythm and proportion. It also discusses guidelines for effective layout like avoiding tombstoning, building from the top down, allowing white space, using photos and keeping it simple. The document then introduces infographics and how to create them using PiktoChart, including making an account, choosing a template, adding elements, saving and downloading the infographic. It concludes with assigning students to create an infographic about well known people using PiktoChart and provides rubrics for scoring.

Uploaded by

Van Aero Vacio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
134 views38 pages

Imaging and Design For Online Environment

This document provides an overview of layout and design principles for online environments. It discusses basic layout principles like balance, emphasis, movement, pattern, repetition, rhythm and proportion. It also discusses guidelines for effective layout like avoiding tombstoning, building from the top down, allowing white space, using photos and keeping it simple. The document then introduces infographics and how to create them using PiktoChart, including making an account, choosing a template, adding elements, saving and downloading the infographic. It concludes with assigning students to create an infographic about well known people using PiktoChart and provides rubrics for scoring.

Uploaded by

Van Aero Vacio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

LESSON 6:

IMAGING AND
DESIGN FOR
ONLINE
ENVIRONMENT
WHAT IS LAYOUT?
- it is the process of
planning and arranging in
detail something such as a
page or book to be
reproduced.
BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
1. Balance
– deals with the visual
weight of object,
texture, colors, and
space.
• Symmetrical Balance (formal) balance has
elements of equal weight on either side of
an imaginary horizontal or vertical line.
• Asymmetrical (or informal) balance may
be unequal in position and intensity.
Intensity can be increased by changing
size, shape, or tone.
2. Emphasis
– usually the focal
point in a page.
- The area
designed to attract
the viewer’s
attention.
3. Movement – guides the
viewer’s eye around the screen.
– The flow of the text and
picture should be in the proper
orientation of the eyes.
4. Pattern, Repetition, and
Rhythm
– 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 that create a sense of
unity where they relate well with
one another.
6.Variety – uses several
design elements to
draw a viewer’s
attention.
SOME GUIDELINES…
• Avoid tombstoning.
• Build from top down.
• Have plenty breathing space.
• Use photos.
• Be simple.
• Eliminate unnecessary details and
use simple background.
“In manner, fashion and style, simplicity defines elegance.”
ASSIGNMENT:
Bring the following tomorrow:
 Magazine or Newspaper
 Short Bondpaper
 Coloring Materials
 Glue & Scissors
* Written works #3 (15 POINTS)
ASSIGNMENT:
Using magazine or newspaper, cut
some layouts that show/illustrate each
principle of graphics and layout.
(Balance, Emphasis, Movement, Pattern,
Proportion and Variety)
Put this on a short bondpaper.

* Written works #3 (15 POINTS)


ADVANCE ASSIGNMENT:
1. What is infographics?
2. Search some example layouts of
infographics.
* Put this on a short bondpaper.
(PRINTED)
Note: This should be submitted on
TUESDAY.
*Written works #2 (10 points)
LESSON 6:
IMAGING AND
DESIGN FOR
ONLINE
ENVIRONMENT
INFOGRAPHICS
INFORMATION GRAPHICS
- used to represent
information, statistical data,
or knowledge in a graphical
manner usually done in a
creative way to attract the
viewer’s attention.
CREATING INFOGRAPHICS
USING PIKTOCHART:
1. Create a Piktochart
account by going to
www.piktochart.com and
click sign up on the upper
right corner of the page.
CREATING INFOGRAPHICS
USING PIKTOCHART
2. Fill up the information
on the Sign Up page;
alternatively, you can
connect with Google+ or
Facebook.
CREATING INFOGRAPHICS
USING PIKTOCHART
3. Once you have created
an account and logged in,
select a template for your
infographic.
CREATING INFOGRAPHICS
USING PIKTOCHART
4. The Piktochart editor will
open. It is the center of the
page that takes up the most
space (working area), and
your editing tools can be
found on the left.
EDITING
TOOLS
CREATING INFOGRAPHICS
USING PIKTOCHART
Tools:
a. Graphics – allows
you to insert lines,
shapes, icons, and even
photos.
CREATING INFOGRAPHICS
USING PIKTOCHART
b. Uploads – allows you to
upload images for your
infographic.
c. Background – changes
the background of a
selected block.
CREATING INFOGRAPHICS
USING PIKTOCHART
d. Text – allows you to insert
text to your infographic with
the option to add text
frames.
e. Color Scheme – allows you
to modify the color scheme
of your infographic
CREATING INFOGRAPHICS
USING PIKTOCHART
f. Tools – allows you to
create charts, maps, and
videos.
CREATING INFOGRAPHICS
USING PIKTOCHART
5. To save your work, click on Save
on the top right of the page. To save
it in your computer, click on
Download. In the Download
options, select the medium-sized
and the PNG file type.
TO SAVE YOUR WORK:
TO DOWNLOAD YOUR WORK
PERFORMANCE TASK #3 – By Group
• Create an infographics layout using
PiktoChart.com
Theme: About “Well Known People”
Rubrics for Scoring:
Creativity – 10 pts.
Required Elements – 10 pts.
Timeliness – 5 pts.
TOTAL: 25 POINTS

You might also like