Scribd
Upload
36 views20 pages

Lesson 7 em Tech

Uploaded by

mangekyosharinggab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views20 pages

Lesson 7 em Tech

Uploaded by

mangekyosharinggab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Principles of

Layout, Graphic,
and Visual
Message Design
Prepared by:
Maria Eloiza C. Tomaquin
UNDERSTANDING
GRAPHIC DESIGN AND LAYOUT
A good website must know its target audience,
determine its needs, and communicate effectively
using the basic principles of graphics and layout.
Users or visitors may have different interests and
needs like browsing, researching, streaming,
online shopping, dating, and many others. They
even behave differently depending on what they
perceive on the website. Web design matters to
every user, whether they can decide to stay or
just leave.
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. Always remember that first impressions last and web design has
an impact on the users on how they perceive the brand or message.

UNDERSTANDING
GRAPHIC DESIGN AND LAYOUT
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, posters, flyers, logos,
videos, and any other multimedia form. 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 of The layout is a term
creating an idea used as the process of
through a combination organizing and
of texts, images, and arranging these
other elements that elements in a design
are placed together as you plot it in a
artistically. paper.
BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
BALANCE

BALANCE ALIGNMENT

EMPHASIS HIERARCHY

PATTERN, CONTRAST
REPETITION,
AND UNITY AND
RHYTHM HARMONY
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.

Asymmetrical balance is a free


layout where the elements can
be placed in any order or the
opposite of symmetrical.
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.
Areas in the design that may
appear different in size, texture,
shape, or color to attract the
viewer’s attention.
PATTERN, REPETITION,
AND RHYTHM image
The repeating visual element in an
or layout to create unity in the
layout or image. Rhythm is achieved
when visual elements create a sense
of organized movement.
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.
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.
HIERARCHY Example of Good Visual
Hierarchy

It refers to the proper arrangement Visme gives people access to


of the details such as text, templates and graphics they need
characters, numbers, and symbols. to create content.
Changing its character size,
thickness, spaces, or even font
type to stand out is its most critical
feature.

By applying this principle, it can


help the viewer to recognize and
navigate the highlight of the event
smoothly.
CONTRAST The contrast gives visual weight
to an object or design. You must
consider and limit the use of
different elements, color, style,
It refers to the use of different or and typography to avoid
opposite elements such as sizes cluttered design.
(large or small), shapes (geometric
When creating contrast in color
or organic), spaces (negative or
and text, it is advised to choose a
positive), form (real or abstract),
color from the background to create
colors (monochromatic,
consistency of your design. Always
complementary, triadic, tetradic),
remember that the details must be
texture (smooth or rough), and
readable by having a dark-light
values (light or dark).
value of either text and background
or vice-versa.
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.
LET’S EVALUATE A
WEBSITE!
Directions: Navigate and observe your visited
website. Using the Web Design Assessment Checklist,
place a checkmark (/) on the Yes or No column that
corresponds to each question. Add comments for a
detailed description in each number. Write your
answer in a one whole sheet of paper.
Web Design Assessment Checklist

WEBSITE URL: _______________________________________________________

PRINCIPLES YES NO COMMENTS

1. BALANCE

Does the page show the proper distribution of elements


in page composition, whether Symmetrical or
Asymmetrical?

Do you feel that the elements are compressed only on


one side of the page?

2. EMPHASIS
PRINCIPLES YES NO COMMENTS

Is there an element of focal point to the design that


leads in getting your attention on that page?

Does the page have emphasized any of the texts,


graphics, illustrations, or animation in a design?

Is the element emphasized by a different color, texture,


size or space?

3. PATTERN, REPETITION, AND RHYTHM

Are there any repeated elements in the web design?

Is the logo of the website repeated on every page of the


design?
PRINCIPLES YES NO COMMENTS

Do all pages have the same transition effects?

Are the font type and color used consistently on every


page?

4. ALIGNMENT

Are the graphics and texts visibly aligned which makes


it readable?

Does the placement of individual or grouped images


have the same scale or size and is evenly distributed in
space?

5. HIERARCHY
PRINCIPLES YES NO COMMENTS

Do the important elements stand out and are arranged


properly depending on its organization?

Are the headings, titles, and subtitles emphasized than


the body?

6. CONTRAST

Does the background and font color contrast each


other? (Light to dark value or vice versa)

Are there any applications of contrast in font sizes with


the same type?

Are the header and footer of the page darker than the
content area?
PRINCIPLES YES NO COMMENTS

7. UNITY AND HARMONY

Does the page look disorganized?

Are all the principles applied properly with consistency


in the design as a whole?

Does the use of combined elements relate to the purpose


of the website and creates harmony in the design?

Does the website meet its purpose of providing a clear


message in all the pages of web design?

TOTAL 30 POINTS

You might also like