Every artist was first

An amateur.
RALPH WALDO EMERSON

LAYOUTING
Olek Sarmiento Dela Cruz

I feel that there is nothing more

truly artistic than to love people.
VINCENT VAN GOGH

Things to Consider
Artists must have good mouse skills, eye hand
coordination, and keyboard skills.
Be familiar with such computer skills as creating
folders, transferring files, saving files, opening
files, and how to minimize and maximize dialog
window on their operating system.
Artists should progress from the basic tools and
functions to preparing a document for full color
printing.

Principles of Design
The principles of design suggest effective and pleasing ways
to arrange text and graphics on the page as well as the
arrangement of individual elements within illustration,
logos, and the overall graphic design of a document.
Generally, all the principles of design apply to any piece you
may create.
How you apply those principles of design determines how
effective your design is in conveying the desired message
and how attractive it appears.

Principles of Design

Alignment
Balance
Consistency
Contrast
Proximity
and White Space

Alignment
Alignment brings order to chaos. How you align type
and graphics on a page and in relation to each other
can make your layout easier or more difficult to read,
foster familiarity, or bring excitement to a stale design.

Balance
Visual balance comes from arranging elements on the
page so that no one section is heavier than the other. Or,
a designer may intentionally throw elements out of
balance to create tension or a certain mood.

Types of Balance
Symmetrical
Asymmetrical
Radial

Symmetrical Balance
Symmetrical balance is easiest to see in perfectly centered
compositions or those with mirror images.
In a design with only two elements they would be almost
identical or have nearly the same visual mass. If one
element was replaced by a smaller one, it could throw the
page out of symmetry.
To reclaim perfect symmetrical balance you might need to add
or subtract or rearrange the elements so that they evenly
divide the page such as a centered alignment or one that
divides the page in even segments (halves, quarters, etc.).

Asymmetrical Balance
Asymmetrical design is typically off-center or created with an
odd or mismatched number of disparate elements.
However, you can still have an interesting design without perfect
symmetry.
With asymmetrical balance you are evenly distributing the
elements within the format which may mean balancing a large
photo with several small graphics. Or, you can create tension by
intentionally avoiding balance.

Radial Balance
On square and rectangular pages we generally place
elements in orderly rows and columns. With radial
designs the elements radiate from or swirl around in a
circular or spiral path.

Rule of Thirds, Visual Center and Grids

Three related aspects of page layout and balance. These
are layout aspects that help the designer achieve
arrangements with visual balance.

Rule of Thirds
Visually dividing the page into thirds vertically
and/or horizontally and placing our most
important elements within
those thirds.

In this vertically symmetrical layout the headline

appears in the upper third of the page, the logo in
the middle third, and the
supporting descriptive text
in the lower third. The most
important information is in
that lower third and anchors
the page.

Taking this concept a step further, by dividing

the page into thirds both vertically and
horizontally and placing your most important
elements at one
or more of the
four intersections
of those lines.

This asymmetrical layout has

most elements in the upper
third and leftmost third of the
page with the main focal point
being around the intersection of
the topmost and leftmost
dividing lines.

Visual Center
Placing important elements
or the focal point of the
design within the visual
center of a piece is another
design trick.
The visual center is slightly to the right
of and above the actual center of a
page.

It's easy to see the

actual center, it's
where the four box
corners meet.
But the focus is on
the earth.

Grids
Roughly dividing a page into thirds or finding the visual center are
relatively easy and you don't usually have to be exact to achieve
your goals.
However, constructing the underlying structure of a piece is a bit more
complicated but essential for most designs. Most balanced
designs (and even unbalanced ones) rely on a grid. This invisible
structure (visible while working in your page layout program) helps
ensure that you place all the elements in the right location to achieve
balance as well as to help with continuity and consistency of design.
Grids can be simple or complex depending on the needs of the
design and the designer.
Sometimes the use of a grid is obvious.

This asymmetrically
balanced design uses a
simple three column grid to
ensure that each text column
is the same width and that it
is balanced by the nearly
empty column on the left.
The grid also dictates the
margins and ensures that the
page number and header
appear in the same place on
each page.

Consistency
Repeating design elements and consistent
use of type and graphics styles within a
document shows a reader where to go and
helps them navigate your designs and
layouts safely. Explore the principles of
repetition, consistency, and unity in page
design

Organized visual
information Unity
Newsletters, magazines, brochures, annual reports, and
books often have many visual elements: columns of text,
headlines, photos, illustrations, pull-quotes, etc. Grids
allow the designer to build page-to-page consistency into
these documents.
A grid, used consistently on all pages of a multi-page
document, makes it easier for the designer to provide the
consistent look that readers often expect. A carefully
conceived grid system also allows the designer to
introduce variations without forsaking readability or
consistency. It also speeds layout because it takes the
guesswork and "look back to see what we did before" out
of where to place elements from one page to the next.

The pages are examples

of how you might combine
text and graphics

Notice how page 1and 2 have a

consistent
(reversed) layout. Text
columns are two-grid units
wide. One grid unit provides an extra wide column of
space separating the main text from the sidebar
elements.

Unify a series of
dissimilar documents
There are many ways to establish visual unity throughout
a series of related pieces..
In a series of single, but related pieces a common grid can
help unify the separate pieces. Place repeating elements
in the same place from piece to piece.
Let your grid provide a consistent guide for mixing graphics
and text.

The informational
sheets have a
common style for
the headline
treatments but don't
all use the same
number or size of
graphics.
This is a fairly simple,
straightforward
example.

One grid, many designs

Grids have been accused of creating

boring, static designs. It's not the fault
of the grid. Used properly, grids can
offer a variety of creative design
options.

Just a few of the

arrangement options
using the same
"boring" grid.

Contrast
Use size, value, color, and type to create contrast
Contrast occurs when two elements are different. The greater the
difference the greater the contrast. The key to working with contrast is to
make sure the differences are obvious. Four common methods of creating
contrast are by using differences in size, value, color, and type.

Big and small elements

of the same type, such as
big and small images and
big and small type are
the most obvious uses of
size to create contrast.
Contrasting white space
or the physical size of the
piece with another
element of the design is
another method.

The relative
lightness or
darkness of two
elements to each
other can create
a contrast in
value. Whether
with shades of
gray or tints and shades of a single color, the
further apart the values the greater the contrast.

Use harmonizing,
complementary, and
opposite colors to
create contrast. Be
careful with the value
of the colors as well.
For example,
harmonizing colors
(adjacent to each other
on the color wheel)
can appear washed
out if there is not
enough difference in
the values of each
color.

Type contrast can utilize size, value, and color to create

contrasting type treatments. Add bold or italics to create
contrast. Mix large
type with small type.
Combine serif with
sans serif type to create
type contrast. Set
portions of text in
contrasting colors
or varying values.
Changes in type
alignment create
contrast as does type
spacing such as extreme

Some Ways to
Use Contrast
Add visual interest to a layout of tall skinny
columns of text by using wide or irregularly
shaped photos.
A series of static images with a single picture
showing movement will draw the eye to the
contrasting image.
Align text to the left but set subheads rightaligned in an adjacent column.
Typically, a layout may employ a combination of
2 or more contrasting elements.

Proximity
Proximity or closeness creates a bond between
people and between elements on a page.
How close together or far apart elements are placed
suggests a relationship (or lack of) between
otherwise disparate parts.
Unity is also achieved by using a third element to
connect distant parts.

Visual Perception:
Gestalt Laws
TO SEE IS...TO THINK
The Gestalt approach emphasizes that we perceive objects as wellorganized patterns rather than separate component parts.
Instead, we notice larger areas with defined shapes and patterns. The
"whole" that we see is something that is more structured and
cohesive than a group of separate particles.
The focal point of Gestalt theory is the idea of "grouping," or how
we tend to interpret a visual field or problem in a certain way.

The main factors that

determine grouping are:
proximity - how elements tend to be grouped together
depending on their closeness.
similarity - how items that are similar in some way tend
to be grouped together.
closure - how items are grouped together if they tend to
complete a pattern.
simplicity - how items are organized into figures
according to symmetry, regularity, and smoothness.

White Space
White space is the absence of text and graphics. It breaks up text
and graphics. It provides visual breathing room for the eye. Add
white space to make a page less cramped, confusing, or
overwhelming.
Designs that try to cram too much text and graphics onto the page
are uncomfortable and may be impossible to read. White space
gives your design breathing room.

How To Add
White Space

Increase paragraph spacing.

Use a line of space or a deep indent (but not both) to put white
space between paragraphs.

Increase space between columns of text.

Alleys or gutters that are too narrow cause the eye to skip over to
the next column. Put white space between columns with adequate
alleys.

Put space at the end of lines of text.

Use ragged right alignment to add white space between columns
and at the end of lines of text.

Put more space around outer edges of page.

If space is necessarily cramped within the body of the publication,
add white space with generous margins or gutters.

How To Add
White Space

Leave more room around graphics.

When wrapping text around graphics or wherever text and
graphics meet, provide plenty of standoff white space. Don't run
text right up to the edge of graphics.
Increase space around headlines.
Add white space between headlines or subheads and the
preceding copy and a bit below as well.
Increase space between lines of type and individual
characters.
Add typographic white space by increasing the leading of body
text, using lighter type, avoiding letterspacing that is too tight, and
avoiding unending condensed or heavy type.