Layout and Composition

Lay out

is a verb phrase which simply means to arrange something, while layout is a noun which means how
things are organized.

Composition

composition refers to the act of creating or combining different elements or components to form a
coherent whole outcome.

five basic principles of layout and composition:

1. Proximity

2. White Space

3. Alignment

4. Contrast

5. Repetition

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 to that group. Take family reunion as an
example, you are grouped by family, and anyone who don’t have any relationship to your family should
be separated. In design, block texts or graphics that are related should be grouped together to make
your design easier to understand.

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. 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.”

Two types of white space:

Micro white space

are the minii spaces between paragraphs, lines, menu items, or other elements in a design composition.

Macro white space

are the large spaces between contents and elements.

Importance of white space in design

1. Improved comprehension. Spaces between lines in a paragraph makes the content legible and easily
scan able to the readers/viewers.

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

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.

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 is 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.

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 gives your composition a
definitive structure and a creative balance. Alignment may be left, centered, right, or justified.

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.

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.