Basic Principles
of Graphics and
Layout
Imaging and Design for the Online
Environment
REMINDER
Computer or mobile phone with
an Internet connection is vital
in this activity to visit and
evaluate the designs of a
website, poster, advertisement,
and other online graphic
applications.
How can you define a
“Good Website”?
Well Designed and Functional
Easy to Use
Optimized for Mobile
Optimized for Search and the Social
Web
Graphic Design vs. Layout
Design is a plan of creating an idea
through a combination of texts,
images, and other elements that are
placed together artistically, whereas,
the layout is a term used as the
process of organizing and arranging
these elements in a design as you
plot it in a paper.
Basic
Principles
of Design and
Layout
Basic Principles of Design
and Layout
1. Balance
2. Emphasis
3. Pattern, Repetition, and Rhythm
4. Alignment
5. Hierarchy
6. Contrast
7. Unity and Harmony
8. Movement
1. Balance
It refers to the proper arrangement of
the elements, which gives a visual
weight for the design.
Symmetrical balance is where the
elements are equally distributed on
both sides of your design, technically a
mirror-based design.
Asymmetrical balance is a free layout
where the elements can be placed in
any order or the opposite of
symmetrical.
2. Emphasis
It refers to something that needs to stand-out or emphasize. When
working on emphasis, you can change the color, size, or even the
element itself to lead the eye to the focal interest.
3. Pattern, Repetition and Rhythm
The use of repetitive elements such as lines, shapes, forms, textures,
space, colors, font, style, and the like to create texture, movement,
continuity, and consistency of the design. It also makes the design
formal and more comfortable to read because of its uniformity.
4. Alignment
It refers to the proper placement of an element to your design, just like
invisibly placing or aligning your texts or images diagonally, vertically,
and horizontally. The standard texts or paragraph alignment we apply
are center, right, left, and justified.
5. Hierarchy
It refers to the proper arrangement of the details such as text, characters, numbers, and
symbols. Changing its character size, thickness, spaces, or even font type to stand
out is its most critical features. By applying this principle, it can
help the viewer to recognize and navigate the highlight of the event
smoothly.
6. Contrast
It refers to the use of different or opposite elements such as sizes (large or
small), shapes (geometric or organic), spaces (negative or positive), form
(real or abstract), colors (monochromatic, complementary, triadic, tetradic),
texture (smooth or rough), and values (light or dark). The contrast gives
visual weight to an object or design.
CAUTION
RADIATON
MAY CAUSE
SUPERPOWERS
7. Unity and Harmony
It refers to the relationship of the elements or the contents when you
place them together. The elements of the design must work together
and agree to its meaning, theme, feeling, or mood.
Movement
In graphic design, movement isn't about things
actually moving on the screen (that's motion
graphics!). Instead, it's about creating the illusion
of movement and directing the viewer's gaze in a
specific way. Think of it as choreographing how
someone experiences your design.
1 2 3
4 5
6 7 8
9 10
