IMAGING AND DESIGN FOR SOCIAL IMPACT

Lesson 3

LAYOUT
COMPOSITION
Jumao-as, Dora Charlot D.
BSCE-1A
 Layout and composition are the
building blocks of design.

➢ These two focus on the arrangement of

your objects or elements on your design.

➢ Your good texts, images, or other

elements in the graphic will turn to waste
if your layout is not well-composed.
 We might be confused sometimes in
using lay out instead of layout.

Lay out is a verb phrase which simply

means to arrange something, while layout
is a noun which means how things are
organized.
There are five basic principles
of layout and composition:
1. Proximity
2. White Space
3. Alignment
4. Contrast
5. Repetition
 Proximity
Proximity
➢ Proximity is the process of placing related
elements together.

➢ Elements that are not related to that group

should be separated to show that these
elements are not related.

➢ In design, block texts or graphics that are

related should be grouped together to make
your design easier to understand.
Ex .
 White
Whitespace
space
White space is not literally the white
spaces that you found on the design but
rather the negative space between lines,
paragraphs, and element on the design.
 In his article “Importance in White Space in Design”, Pratik Hedge
described white space as:

“White Space in design composition is same as use

of Silence in a musical composition. Without
proportionate use of Silence, music is unstructured;
some may call it noise. Similarly, without White Space,
design is unstructured and difficult to consume.”
There are two types
of white space:
➢ Micro white space. Mini spaces
between paragraphs, lines, menu items,
or other elements in a design
composition.

➢ Macro white space. Large spaces

between contents and elements.
How important is
white space in
design?
Hedge (2017) listed some of the
importance of white space in design.
1. Improved comprehension.
Spaces between lines in a paragraph makes the
content legible and easily scannable to the
readers/viewers.

Ex .
2. Focus and attention.
Macro white spaces help guide the viewers to the
focus area in the design.

Ex .
3. Increased interaction rate.
If used wisely, white space in design helps the viewer to
get the message quickly even without looking at the
instructions. Take a look at Google’s homepage UI. White
space helps the viewer to get the message, which is to
search.

Ex .
4. Guide the user through local grouping.
White space helps you to achieve the proximity of
your design.

5. Branding and Design Tone.

Let us look back at the steps of brand identity design, the
way how are you going to apply white spaces in your design
helps you create your own brand’s personality.
6. Creates a breathing space for users.
A lot of people believe that in design, one must maximize
the space by putting contents on it. However, this might make
your design stuffy. Having enough white space makes your eye
rest, helps us breathe and not to be overwhelmed with the
information

Ex .
 ALIGNMENT
ALIGNMENT
Alignment helps designers to organize different
elements in their composition. This is similar to the
alignment that we see in MS Word or other
productivity tools. Effective use of alignment give your
composition a definitive structure and a creative
balance. Alignment may be left, centered, right, or
justified.
 CONTRAST
CONTRAST
➢ Contrast means one element is opposite to the other
element.

This does not only apply to colors, but to typeface and

size of elements as well.

Contrast helps you to catch the viewer’s eye, create a

direction, or giving emphasis to something.
Ex .

Figure 13 The use of different text styles to create contrast

 REPETITION
REPETITION
Repetition simply means to use of the same:
➢Typefaces
➢Color palettes
➢Or other elements

To achieve consistency in your composition.

This create unity in your composition or make
your projects connected to each other.
Courtesy of Pinterest