MMD 2093

FUNDAMENTAL OF
WEB DESIGN
CHAPTER 2
Visual Design

SARAH
SARAH NUR
NUR AHMAD
AHMAD
MULTIMEDIA
MULTIMEDIA COLLEGE
COLLEGE (N)
(N) SDN
SDN BHD
BHD
 Visual Design Elements

•Line •Space
•Color •Texture
•Typography •Value
•Form/Shape
 Line
Types
• Vertical- Represents dignity, formality, stability and
strength.
• Horizontal- Represents calm, peace and relaxation.
• Diagonal- Represents action, activity, excitement and
movement.
• Curved- Represents freedom, the natural, having the
appearance of softness and creates a soothing feeling or
mood.
Vertical Lines
Horizontal Lines
Diagonal Lines
Curved Lines
 Color
Color has an immediate
and profound effect on a design.
Types
• Warm Colors
• Reds, oranges, yellows
• Cool Colors
• Blues, purples, greens
• Colors can affect how humans feel and act.
Color
FONT @ TYPOGRAPHY
• Keep it simple
• Limit number of fonts per page and per site
• Use the same fonts consistently throughout the site
• Make good font choices
• Sans serif vs. serif
• Commonly installed fonts
• Mood
• Readability
• USE CAPITALIZATION SPARINGLY
• Font Moods
• What mood does this font evoke for you?

• What about this one? Is it formal? Casual?

• Would this font give your page a professional look? Why or why not?

•What assumptions about the content

• Would you make from this font?

• Can you even read what this says? If you

had to read a whole page of this, how
would you feel?
 Form and Shape
The shape, outline, or configuration of anything.
Examples
• Squares • Ovals
• Circles • Rectangles
• Ellipses • Triangles
Form and Shape
 Space
By incorporating the use of space
in your design, you can enlarge or reduce the
visual space.

Types
• Open, uncluttered
spaces
• Cramped, busy
• Unused vs. good use
of space
Positive and Negative Space

• Positive and negative space refers to the juxtaposition of figure

and ground in a composition. The objects in the environment
represent the positive space, and the environment itself is the
negative space.
• white space is often referred to as negative space
 Texture
The surface look or feel of something.

Types
• Smooth surface
• Reflects more light and, therefore, is a more intense
color.
• Rough surface
• Absorbs more light and, therefore, appears darker.
Smooth Texture
Rough Texture
 Value
The relative lightness or darkness of a color.

Methods
• Shade
Degree of darkness of a color
• Tint
A pale or faint variation of a color
 Visual Design Principles
There are five principles that encompass an
interesting design.
• Balance
• Rhythm
• Emphasis
• Proportion and scale
• Unity
 Balance

Parts of the design are equally distributed to create a sense of

stability.
There can be physical as well as visual balance.
Types
•Symmetrical or Formal Balance
•Asymmetrical or Informal Balance
•Radial Balance
•Vertical Balance
•Horizontal Balance
Balance
Symmetrical or Formal Balance

The elements within the design are identical in relation to a centerline or axis.
 Balance
Asymmetrical or Informal Balance

Parts of the design are not identical but are equal

in visual weight.
 Balance
Radial Balance

Design Elements radiate

outward from the center.
 Balance
Vertical Balance
The top and bottom parts are equal.
 Balance
Horizontal Balance

The left and right

parts are equal.
Rhythm

Repeated use of line, shape, color, texture or pattern.

Types
• Regular rhythm
• Graduated rhythm
• Random rhythm
• Gradated rhythm
Rhythm
Regular Rhythm

A element is repeated at
the same repetition each time.
 Rhythm
Graduated Rhythm

The beats of the element become closer or further

apart as they move.
 Rhythm
Random Rhythm
The beats of the element are random
or are at irregular intervals.
 Rhythm
Gradated Rhythm

The repeated element is

identical with the exception
of one detail increasing or
decreasing gradually with
each repetition.
 Emphasis
•Points of attention in a design.
•The feature in a design that
attracts one’s eye.
•The focal point.
•Emphasis can be achieved
through size, placement, color
and use of lines.
•The most personal aspect of a
design.
 Proportion and Scale
•Comparative relationships
between elements in a design
with respect to size.
•3:5 ratio is known as the
Golden Mean.
•Scale

• The proportions or size of

one part of the image in
relationship to the other.
 Unity
• Unity is applying consistent use of lines, color, and texture
within a design.
• To be harmonious.
Unity