Module 5

Imaging and Design for

the Online Environment

Cyril Baua Cauilan

 INTRODUCTION
This module teaches the basic
principles of graphics and layout to
help you create effective and visually
appealing designs for online
environments.
Learning
Competencies
Identify and explain the Basic Principles of
Graphics and Layout

Understand their importance in communication

and industry

Assess graphic design effectiveness

Evaluate websites based on design principles

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 on people not just understand the
sent idea or message, but it also adds
emotion to what is being seen.
IMAGE
• An image is a representation of the external
form of a person or thing in an art.
• Images may be 2 dimensional such as a
photograph or screen display or 3 dimensional such
as a statue or hologram.
• They may be captured by optical cameras,
mirrors, lenses telescopes, microscopes etc. And
natural objects and phenomena such as a
human eye or water
IMAGE
GRAPHICS
• Are visual images or designs on some surface, such
as a wall, canvas, screen, paper of stone to inform,
illustrate or entertain.
• Are visual representations of data made on a
computer and is displayed on a computer screen
or monitor.
• The process of planning and arranging graphic
element in a page or template. A good layout should
have balanced make up and alignment of elements
• Layout is a part of graphic design that deals in the
arrangement of visual elements
GRAPHICS
Basics Principles of Graphics and
Layout
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.
What Makes a Good Graphic
Design
➢ A good website must know its
target audience, determine its
needs, and communicate effectively
using the basic principles of graphics
and layout.
What Makes a Good Graphic
Design
➢ Always remember that first
impressions last and web design has
an impact on the users on how they
perceive the brand or message.
What Makes a Good Graphic
Design
➢ Usability is important for the users as
it satisfies their experience on the
website, but a good design will drag
the audience’s attention to stay on
the page.
What Makes a Good Graphic
Design
➢ Graphic design is an artistic way of
communicating ideas and messages
through visual expressions using
texts, images, and symbols.
What Makes a Good Graphic
Design
➢ Graphic designers work on the
quality of the output they serve for
the audience or clients like
websites, advertisements, posters,
flyers, logos, videos, and any other
multimedia form.
Graphics VS Layouts
➢ 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.
Seven (7) BASIC PRINCIPLES
OF DESIGN AND LAYOUT

Cyril Baua Cauilan

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.
 BALANCE
SYMMETRICAL ASYMMETRICAL
the
is a free layout where
elements are equally
the elements can be
distributed on both
placed in any order or
sides of your design,
the opposite of
technically a mirror-based
symmetrical.
design.
 BALANCE
SYMMETRICAL ASYMMETRICAL
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.

➢Also referred to as an area in the design that

may appear different in size, texture, shape or
color to attract the viewers attention.
EMPHASIS
EMPHASIS
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.
REPETITION
RHYTHM
Rhythm in art is the visual equivalent of
a beat in music, created by repeating
elements to guide the viewer's eye and
create a sense of movement or flow.
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.
Alignment
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.
Hierarchy
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.
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.
Contrast
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.
Unity and Harmony
THANK YOU FOR
ENGAGING
I hope what I taught is for all of you