1. LAYOUTING
by John Robin Abejar
fundamentals and
tips

2. Page layout refers to the
process of placing and
arranging text, images,
and graphics on a
software page to produce
documents such as
newsletters, brochures,
propagandas and public
materials.
LAYOUTING
PAGE DESIGN & PUBLIC MATERIALS

3. LAYOUT ARTIST
The goal is to produce eye-catching pages
that grab the attention of the reader.
Collects and assembles type styles and
images, such as illustrations, photographs
and drawings, to create a visual design in a
computer or on paper
Deliver ideas and information through visual
communications

4. FUNDAMENTALS OF
PAGE DESIGN

5. To design and to
produce.
PURPOSE
To cater and serve to
the needs and interests
of the people.
To widely disseminate
information.

6. COMMUNICATION
Readers tend to want information quickly, so it is
important to communicate clearly, and make your
information easy to read and digest. Some effective
tactics to include in your web design include:
organizing information using headlines and sub
headlines, and cutting the waffle.

7. TYPEFACES
Serif
easier to read
contemporary looking
fonts without decorative
finishes.
Sans Serif
Can be used to specify or
standout the text or word.
Script
For showing affection,
passion, love and
dedication.
A A A

8. COLORS
A well thought out color palette can go a
long way to enhance the user experience.
Complementary colors create balance and
harmony. Using contrasting colors for the
text and background will make reading
easier on the eye. Vibrant colors create
emotion and should be used sparingly
(e.g. for buttons and call to actions). Last
but not least, white space/ negative
space is very effective at giving your
website a modern and uncluttered look.

9. IMAGES
A picture can speak a thousand words,
and choosing the right images can help
for easier story telling by positioning
and connecting with your target
audience.

10. NAVIGATION
Navigation is about how easy it is for people to
take action and move around your publication.
Some tactics for effective navigation include a
logical page hierarchy.

11. PRINCIPLES OF PAGE DESIGN

12. UNITY
Unity discusses the need to tie the various
elements of a work of art together. Unity is a
measure of how the elements of a page seem
to fit together - to belong together. A unified
work of art represents first a whole, then the
sum of its parts.
SIMILARITY PROXIMITY
CONTINUITITY ALIGNMENT

13. SCALE
AND
HIERARCHY
Scale is often used to help
communicate hierarchy by drawing
attention toward and away from
certain elements, thus signifying their
importance to the communication.

14. BALANCE
Balance is a pretty important thing in many regards, and
your designs are absolutely no exception.
SYMMETRY ASYMMETRY

15. WHITE SPACE
White space when used strategically can help
boost your design’s clarity and overall look by
balancing out the more complicated and busy
parts of your composition with space that helps
your design to breathe.

16. CONTRAST
Contrast is an incredibly useful tool for both
highlighting and hiding certain elements of
your design. By upping the contrast or using
a high contrast feature color, you can help
an element stand out and draw attention.
Likewise, by lowering the contrast, you can
make an element fade into the background.

17. Repetition is a key factor when it comes to multi-
page layouts. Repeating elements of your layout
and/or design helps each page flow into the next,
creating a cohesive set of pages.
REPETITION
REPETITION
REPETITION

18. BASICS

20. THINGS TO AVOID

21. BUMPER OR
TOMBSTONING
Two elements placed side by side.

22. SEPARATION
Separating related elements to each other.

23. BAD BREAKS
Most wrong practice in headlining.

24. BOX TO BOX
Inserting box to another box.

25. SCREAMING
HEADLINES
Using too big font size to emphasis important
stories.

26. USING MANY
FAMILIES OF
FONT

27. USING SAME FONT
SIZE IN HEADLINES

28. MARAMING SALAMAT!
Lagi’t lagi nating pakatandaan na malaki ang gampanin ng taga anyo ng
pahina sa paglalathala ng mga istorya dahil na sa ating mga kamay ang
daloy ng kwento.

29. MANGALAP
MAG-ANYO
MAGMULAT
MAKIBAKA