CENTER FOR POSITIVE FUTURE,

INC.

Quarter 2 - Module 5

IMAGING AND
DESIGN FOR
THE ONLINE
ENVIRONMENT

Presented by Marcos, Bernabe

CENTER FOR POSITIVE
FUTURE, INC.

Lesson 1:

Basic
Principles of
Graphics and
Layout
Presented by Marcos, Bernabe
Jr.
 Lesson 1 - Basic Principles of Graphics
and Layout

What i
need to
know?
This module will help you more
understand, appreciate, and unveil
your creativity
on the use of the proper graphic and
layout designing for more effective
communication. You will also learn
the core components of graphic
design.
 Lesson 1 - Basic Principles of Graphics
and Layout

Most
Essential
Learning
Competenc
Evaluate existing websites and

y:
online resources based on the
principles of
layout, graphic, and visual
message design.
CS_ICT11/12-ICTPT-IE-F-6
 Lesson 1 - Basic Principles of
Graphics and Layout

OBJECTIVE
S:
1.Identify and explain
the Basic Principles of
Graphics and Layout;

2. Explain the vital use of

the Basic Principles of
Graphics and Layout in
communication and
industry;
 Lesson 1 - Basic Principles of
Graphics and Layout

OBJECTIVE
S:
3. Assess the
effectiveness of the
graphic design in a given
layout example; and

4. Evaluate existing
websites and online
resources based on the
principles of layout,
 Lesson 1 - Basic Principles of Graphics and
Layout

Introduction:
Communication is critical for
people to share thoughts, feelings,
and emotions. With the use of
different media, people can express
their views in many ways, including
adding artistic designs. The purpose
of the combined images and texts
also gives influence to people not
just understand the sent idea or
message, but it also adds emotion to
what is being seen.
 Lesson 1 - Basic Principles of Graphics
and Layout

Understanding
Graphic Design
and Layout
WHAT MAKES A GOOD AND
EFFECTIVE WEBSITE?

HOW DO USERS INTERACT

WITH THE WEBSITES THEY
VISIT?
 A good and
effective website
must have...
determine its
needs

target effective
audience communicati
basic on
principles
of graphics
and
layouts
 Users have
diff erent interest
such as...
RESEARC
HING
BROW STREA
SING MING
ONLIN
E
SHOPP
 Users have
diff erent
interest such
as...

DATIN
G
 • Web design
• Usability
• Good design
Graphic design is an artistic
way of communicating ideas
and messages
through visual expressions
using texts, images, and
symbols. Graphic designers
work on the quality of the
output they serve for the
audience or clients like
websites, advertisements,
 A practical graphic
layout and design can
easily catch the
attention of the
viewers and allow them
to understand the
message conveniently.
 Graphic Design vs. Layout
Design is a plan Layout is a term
of creating an used as the
idea through a process of
combination of organizing and
texts, images, arranging these
and other elements in a
elements that design as you
are placed plot it in a
together paper.
artistically.
Basic Principles of
Design and Layout

1.BALANCE
 BASIC PRINCIPLES
OF DESIGN AND
LAYOUT
1.BALANCE
It refers to the proper arrangement of
the elements, which gives a visual
weight for the design. There are two
types of balance, Symmetrical or
Asymmetrical. Symmetrical balance is
where the elements are equally
distributed on both sides of your design,
technically a mirror-based design. In
contrast, Asymmetrical balance is a free
layout where the elements can be
placed in any order or the opposite of
SYMMETRICAL
BALANCE
SYMMETRICAL
BALANCE
ASYMMETRICAL
BALANCE
 Basic Principles of
Design and Layout

2. EMPHASIS
 Basic Principles of
Design and Layout

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
Emphasis
Basic Principles of
Design and Layout

3. PATTERN,
REPETITION AND
RHYTHM
 Basic Principles of
Design and Layout
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
Pattern, Repetition,
and Rhythm
Basic Principles of
Design and Layout

4. ALIGNMENT
 Basic Principles of
Design and Layout

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
Alignment
Basic Principles of
Design and Layout

5. HIERARCHY
 Basic Principles of
Design and Layout

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
Basic Principles of
Design and Layout

6. CONTRAST
 BASIC PRINCIPLES
OF DESIGN AND
LAYOUT
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. You must consider
and limit the use of different elements, color, style, and
typography to avoid cluttered design.
BASIC PRINCIPLES
OF DESIGN AND
LAYOUT
CONTRAST

When creating contrast in color and text, it is advised to

choose a color from the background to create consistency of
your design. Always remember that the details must be
readable by having a dark-light value of either text and
background or vice-versa.
 Monochromatic:
This color scheme uses different shades, tints, or tones of a single color. It creates
a unified and harmonious look, but can sometimes feel less dynamic due to the
lack of color variation. For example, a design using only different shades of blue is
monochromatic.

Complementary:
Complementary colors are opposite each other on the color wheel (e.g., red and
green, blue and orange). This scheme creates high contrast and vibrant effects,
which can make certain elements pop. It’s often used to draw attention to
 Triadic:
In a triadic color scheme, three colors evenly spaced around the color wheel
are used (e.g., red, blue, and yellow). This scheme offers strong contrast but
still maintains balance and harmony. It’s often vibrant and energetic.

Tetradic:
The tetradic (or double-complementary) color scheme uses two sets of
complementary colors (e.g., red and green with blue and orange). This
creates rich and diverse color combinations, but balancing them can be
challenging to avoid overwhelming the design.
 Basic Principles of
Design and Layout
7. UNITY AND
HARMONY

The web page shows the consistent use of

font style, font color,
contrasting with the dark background, the
hierarchy is according to its importance,
 Basic Principles of
Design and Layout

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.
THANK
YOU