Visual Design:

Imaging and Layout

Design
Objectives:
At the end of this lesson, you should be able to:
• 1. Understand the basic principles of graphics
and layout;
• 2. Create a simple infographic using web tools;
• 3. Understand and use several file formats
used on the web;
• 4. Easily manipulate image using a image-
editor;
• 5. Upload and share images using
Photobucket.
What is the most visited website in the
world? Think about it for a second.

No, it is not Facebook nor Twitter.

What is the most visited website in the
world? Think about it for a second.

Here is a clue, the site’s mission statement

is to organize the world’s information and
make it universally accessible and useful.”
You have probably guessed it by now,
Global
Organization of
Oriented
Group
Language of
Earth
Facts about
• Google was founded by Larry Page and
Sergey Brin while they were Ph.D.
students at Stanford University, and was
formally incorporated as a privately held
company on September 4, 1998.
Facts about
• The name 'Google' is actually derived
from the mathematical term 'googol'
which is basically 1 with a 100 zeros
following it.
Facts about
• Co-founders Larry Page and Sergey Brin
originally named Google as
Creating a web page is like creating a
work of art. There are certain things that
you need to consider in order to get your
message across.
What can you see?
What is an Image?
• a representation of the external form of
a person or thing in art.
• An image is an artifact that depicts
visual perception.
What is an Image?
An image may be:
Two-dimensional(2D)
- is a shape that only has two-dimensions:
height and width.
Three-dimensional(3D)
- is a shape that only has three-dimensions:
depth, height and width.
2D VS 3D
Two-dimensional(2D)

Three-dimensional(3D)
What is a Graphic?
• Images that are generated by a computer
are called computer graphics.
• Examples are photographs, drawings,
Line art, graphs, diagrams, typography,
numbers, symbols, geometric designs,
maps, engineering drawings, or other
images.
• Graphics often combine text, illustration,
and color
What is a Graphic?
• Images that are generated by a computer
are called computer graphics.
• Graphics often combine text, illustration,
and color
Examples of Graphics
• Photographs • Geometric designs
• Drawings • Maps
• Line art • Computer Graphics
• Graphs • Engineering
• Diagrams drawings, or other
• Typography images
• Numbers
• Symbols
Images VS Graphics
“A picture is Worth a
Thousand Words.”
What is a Layout?
• is part of graphic design that deals in the
arrangement of visual elements on a
page.
Basic Principles of
Graphics and Layout
Infographic
• Is a short term for information graphics,
which refers to an image that combines
information, storytelling, and
perceptions that help the cause of an
individual or an institution to
communicate a message to viewers.
Basic elements of layout design
Lines
-are the most basic elements of all the
elements. Lines can define the
characteristics of an infographic.
-it can form shapes that can catch
attention of a viewer.
-they can be sharp, can be broken, can be
fine or thick.
- Can create impressions to viewers
Basic elements of layout design
Color
-one of the powerful and influential
elements in an infographic.
-right combination of color can catch the
attention of a passerby or even glancing
viewers.
Example:
Warm Colors: Red,Orange,Yellow
Cool colors: Blue,Green, Violet,Indigo
Basic elements of layout design
Shapes
-defined by enclosure created by
combination of multiple lines.
-it expresses psychological influences on
the audience especially when combined
with different colors.
Principles of Design
Balance
-the visual weight of objects, texture,
colors, and space is evenly distributed on
the screen.
- It describes the placement of elements,
shapes, or lines through the images.
Principles of Design
2 types of Balance:
1. Formal Balance- when object are
placed symmetrically are proper
distributed.
Principles of Design
2 types of Balance:
1. Informal Balance- includes a none
symmetrical distribution of elements
but is compensated in different aspects
such as color and lines.
Principles of Design
Contrast
- is the difference in luminance or colour
that makes an object distinguishable.
Principles of Design
Emphasis
-An area in the design that may appear
different in size, texture, shape or color to
attract the viewer’s attention.
Principles of Design
Movement
-Visual elements guide the viewer’s eyes
around the screen.
-How the eye moves through the
composition; leading the attention of the
viewer from one aspect of the work to
another. Can create the illusion of action.