Mmd 2093 ch2

MMD 2093FUNDAMENTAL OF WEB DESIGN

CHAPTER 2Visual Design

Visual Design Elements

•Line

•Color

•Typography

•Form/Shape

•Space

•Texture

•Value

LineTypes

• 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

• Circles

• Ellipses

• Ovals

• Rectangles

• Triangles

Form and Shape

Space

By incorporating the use of spacein 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

BalanceSymmetrical or Formal Balance

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

BalanceAsymmetrical or Informal Balance

Parts of the design are not identical but are equal in visual weight.

BalanceRadial Balance

Design Elements radiateoutward from the center.

BalanceVertical Balance

The top and bottom parts are equal.

BalanceHorizontal 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

RhythmRegular Rhythm

A element is repeated at the same repetition each time.

RhythmGraduated Rhythm

The beats of the element become closer or further apart as they move.

RhythmRandom Rhythm

The beats of the element are random or are at irregular intervals.

RhythmGradated 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