COMPOSITION

AND LAYOUT
EMPOWERMENT TECHNOLOGIES
SLIDESMANIA.COM
 01 02
TYPOGRAPHY COMPOSITION,
AND COLOR AND LAYOUT

03 04
IMAGE
INFOGRAPHICS
MANIPULATION
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
 Layout and composition are
the building blocks of design.
They give your work structure
and make it easier to navigate,
from the margins on the sides to
the content in between.
SLIDESMANIA.COM
 Composition is the way your
content is arranged. It doesn't matter
if you're working with text, images, or
elements in a graphic; without a
thoughtful, well-composed layout,
your work would basically fall apart.
SLIDESMANIA.COM
SLIDESMANIA.COM
 FIVE BASIC PRINCIPLES OF LAYOUT

1. PROXIMITY
2. WHITE SPACE

3. ALIGNMENT

4. CONTRAST

5. REPETITION
SLIDESMANIA.COM
 PROXIMITY

Proximity is all about

using visual space to
show relationships in your
content.
SLIDESMANIA.COM
SLIDESMANIA.COM
 WHITE SPACE
• White space helps you
define and separate
different sections;
• it gives your content room
to breathe. If your work ever
starts to feel cluttered or
uncomfortable, a little white
space might be just what
SLIDESMANIA.COM

the doctor ordered.

SLIDESMANIA.COM
 ALIGNMENT
Alignment is something you deal with
all the time, even if you don't realize
it. Whenever you type an email or
create a document, the text is
aligned automatically.
SLIDESMANIA.COM
SLIDESMANIA.COM
 When it comes to alignment, the most
important thing is to be consistent.

Imagine that your content is arrange

inside of a grid, in that way, you can
have your content grouped, and try to
evenly space and align the elements
SLIDESMANIA.COM

with equal-sized margins.

 CONTRAST
● To create contrast in the example
below, we've used color, more than
one style of text, and objects
of differing sizes. This makes the
design more dynamic and, therefore,
more effective at communicating its
message.
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
 SOURCE:
https://www.facebook.com/riyokki/po
sts/2678510792254353
SLIDESMANIA.COM
 REPETITION
• Repetition is a reminder that
every project should have
a consistent look and feel.
• This means finding ways
to reinforce your design by
repeating or echoing certain
elements.
SLIDESMANIA.COM
 REPETITION
• For instance, if you have a
specific color palette, look
for ways to carry it through.
If you've chosen a
special header style, use
it every time.
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
 HIERARCHY
it shows them where to
begin and where to go
next using different
levels of emphasis.
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
 INFOGRAPHICS
Information graphics or
infographics are used to
represent information,
statistical data, or
knowledge in a graphical
manner usually done in a
creative way to attract the
viewer's attention
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
 THERE ARE 3 TYPES OF
INFOGRAPHICS:

1. DATA VISUALIZATION
2. INFORMATION DESIGN
3. EDITORIAL INFOGRAPHICS
SLIDESMANIA.COM
 DATA VISUALIZATION

simply a visual
representation
of data.
SLIDESMANIA.COM
SLIDESMANIA.COM
 Reddit
user andrew_elliott
created this stunning
data visualization of
his baby daughter’s
SLIDESMANIA.COM

sleep habits.
 INFORMATION DESIGN INFOGRAPHICS

a subset of graphic
design that focuses
on the display of
information
efficiently and
effectively
SLIDESMANIA.COM
SLIDESMANIA.COM
 Source:
https://assets.goodstatic.com/s3/mag
azine/assets/527607/original/open-
uri20140702-32155-1ylgw92
SLIDESMANIA.COM
SLIDESMANIA.COM
 SOURCE:

https://www.columnfivemedia.com/wo
rk-items/infographic-boulder-is-for-
fun
SLIDESMANIA.COM
SLIDESMANIA.COM
 If you are going to create an
infographic as wide and detailed as
the infographic on the previous
slides, it is better to keep the image
quality in a high resolution so that the
viewer will be able to read the text
written on it.
SLIDESMANIA.COM
SLIDESMANIA.COM
 Source:
https://www.facebook.com/ncangeles/
posts/3165345053476274
SLIDESMANIA.COM
 EDITORIAL INFOGRAPHICS

were limited to simple bars,

lines, and pie charts, using
illustration solely in more
complex features to map
an area or show the
anatomy of an object.
SLIDESMANIA.COM
SLIDESMANIA.COM
 Source:

https://www.columnfivemedia.com/de
veloping-visual-language-usa-todays-
graphics-rebranded
SLIDESMANIA.COM
SLIDESMANIA.COM
 MORE EXAMPLES:
HERE IS AN INFOGRAPHIC ABOUT
TOXIC POSITIVITY:

https://www.facebook.com/feucentral
studentorganization/photos/pcb.2172
552899542534/2172544029543421/?ty
SLIDESMANIA.COM

pe=3&theater
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
SLIDESMANIA.COM
 ONLINE IMAGE FILE FORMATS
NAME FILE EXTENSION USE SUPPORTS SUPPORTS
TRANSPARENCY ANIMATION
1. Joint .jpeg or .jpg Real-life No No
Photographics photographs,
Experts high
Group compression
2. Graphics .gif Computer Yes Yes
Interchange generated
Format graphics
3. Portable .png Screenshots, Yes No
SLIDESMANIA.COM

Network high
Graphics compatibility
 PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION

1. Choose the right file format. Knowing the purpose is the key to finding out
the best file format.
2. Choose the right image size. It is recommended to use an average image size
for images to load faster, an image with a bigger size might make the website
load slower.
3. Caption it. Remember to put a caption on Images whenever possible. If it is not
related to the web page, then remove it.
SLIDESMANIA.COM