mmd 2093 ch2

35
MMD 2093 FUNDAMENTAL OF WEB DESIGN CHAPTER 2 Visual Design

Upload: sephia17584

Post on 28-Jan-2015

126 views

Category:

Technology


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Mmd 2093 ch2

MMD 2093FUNDAMENTAL OF WEB DESIGN

CHAPTER 2Visual Design

Page 2: Mmd 2093 ch2

Visual Design Elements

•Line

•Color

•Typography

•Form/Shape

•Space

•Texture

•Value

Page 3: Mmd 2093 ch2

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.

Page 4: Mmd 2093 ch2

Vertical Lines

Page 5: Mmd 2093 ch2

Horizontal Lines

Page 6: Mmd 2093 ch2

Diagonal Lines

Page 7: Mmd 2093 ch2

Curved Lines

Page 8: Mmd 2093 ch2

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.

Page 9: Mmd 2093 ch2

Color

Page 10: Mmd 2093 ch2

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

Page 11: Mmd 2093 ch2

• 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?

Page 12: Mmd 2093 ch2

Form and Shape

The shape, outline, or configuration of anything.

Examples

• Squares

• Circles

• Ellipses

• Ovals

• Rectangles

• Triangles

Page 13: Mmd 2093 ch2

Form and Shape

Page 14: Mmd 2093 ch2

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

Page 15: Mmd 2093 ch2

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

Page 16: Mmd 2093 ch2

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.

Page 17: Mmd 2093 ch2

Smooth Texture

Page 18: Mmd 2093 ch2

Rough Texture

Page 19: Mmd 2093 ch2

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

Page 20: Mmd 2093 ch2

Visual Design Principles

There are five principles that encompass an interesting design.

• Balance

• Rhythm

• Emphasis

• Proportion and scale

• Unity

Page 21: Mmd 2093 ch2

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

Page 22: Mmd 2093 ch2

BalanceSymmetrical or Formal Balance

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

Page 23: Mmd 2093 ch2

BalanceAsymmetrical or Informal Balance

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

Page 24: Mmd 2093 ch2

BalanceRadial Balance

Design Elements radiateoutward from the center.

Page 25: Mmd 2093 ch2

BalanceVertical Balance

The top and bottom parts are equal.

Page 26: Mmd 2093 ch2

BalanceHorizontal Balance

The left and right

parts are equal.

Page 27: Mmd 2093 ch2

Rhythm

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

Types

• Regular rhythm

• Graduated rhythm

• Random rhythm

• Gradated rhythm

Page 28: Mmd 2093 ch2

RhythmRegular Rhythm

A element is repeated at the same repetition each time.

Page 29: Mmd 2093 ch2

RhythmGraduated Rhythm

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

Page 30: Mmd 2093 ch2

RhythmRandom Rhythm

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

Page 31: Mmd 2093 ch2

RhythmGradated Rhythm

The repeated element is identical with the

exception of one detail increasing or

decreasing gradually with each repetition.

Page 32: Mmd 2093 ch2

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.

Page 33: Mmd 2093 ch2

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.

Page 34: Mmd 2093 ch2

Unity• Unity is applying consistent use of lines, color,

and texture within a design.• To be harmonious.

Page 35: Mmd 2093 ch2

Unity