Date post: | 28-Jan-2015 |
Category: |
Technology |
Upload: | sephia17584 |
View: | 119 times |
Download: | 3 times |
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