Scribd
Upload
2K views

Lesson 3 Imaging and Design For Online Environment

This document discusses layout and design principles for online environments. It covers the basic principles of balance, emphasis, movement, repetition, and whitespace in layout. Balance can be symmetrical or asymmetrical. Emphasis draws attention to focal points. Movement guides the eye around a page. Repetition creates unity. Whitespace allows for breathing room. Some guidelines provided include avoiding tombstoning, building from top to down, using photos, keeping it simple, and eliminating unnecessary details. The document also discusses infographics and how they simplify large amounts of data visually. It provides steps for creating infographics using Piktochart, including selecting a template, adding graphics, text, and other elements, and saving the infographic.

Uploaded by

Diana Leonidas
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
2K views

Lesson 3 Imaging and Design For Online Environment

This document discusses layout and design principles for online environments. It covers the basic principles of balance, emphasis, movement, repetition, and whitespace in layout. Balance can be symmetrical or asymmetrical. Emphasis draws attention to focal points. Movement guides the eye around a page. Repetition creates unity. Whitespace allows for breathing room. Some guidelines provided include avoiding tombstoning, building from top to down, using photos, keeping it simple, and eliminating unnecessary details. The document also discusses infographics and how they simplify large amounts of data visually. It provides steps for creating infographics using Piktochart, including selecting a template, adding graphics, text, and other elements, and saving the infographic.

Uploaded by

Diana Leonidas
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/ 34

IMAGING AND

DESIGN FOR
ONLINE
ENVIRONMENT
WHAT IS LAYOUT?

Layout 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. It is often considered a safe
solution, but boring layout to use.
• Asymmetrical (or informal) balance may be unequal in position
and intensity. To create asymmetrical balance, there must be an
increase in intensity to compensate for the change in position.
Intensity can be increased by changing size, shape, or tone.
BASIC PRINCIPLES OF GRAPHICS
AND LAYOUT

2. Emphasis – usually the focal point


in a page. It could be done by
varying the size, the color, shapes or
background.
BASIC PRINCIPLES OF GRAPHICS
AND LAYOUT

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.
BASIC PRINCIPLES OF GRAPHICS
AND LAYOUT
4. Repetition – repeating visual element on
an image or layout to create unity in the
layout or image.
Color
Repeats
BASIC PRINCIPLES OF GRAPHICS
AND LAYOUT

5. Whitespace – it is the negative


space or large margins that allows
your design to breathe within the
elements.
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.”
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.
INFORMATION GRAPHICS
- Makes the data easily understood
at a glance and quickly
communicates a message especially
to simplify the presentation of large
amounts of data.
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
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
CREATING INFOGRAPHICS USING PIKTOCHART

3. Once you have created an


account and logged in, select a
template for your infographic.
CREATING INFOGRAPHICS USING PIKTOCHART
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.
CREATING INFOGRAPHICS USING PIKTOCHART
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. Styles – 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.
VIDEO PRESENTATION
2 QUARTER
ND

PERFORMANCE
TASK NO. 1
CREATE AN
INFOGRAPHICS Rubrics:
USING • Creativity - 10
PIKTOCHART.COM • Originality –
OR CANVA.COM
10
TOPIC: ANY • Content - 10
TECHNOLOGY OR • Timeliness - 10
ICT RELATED TOPIC
• TOTAL = 40

You might also like