mmd 2093 ch2
DESCRIPTION
TRANSCRIPT
![Page 1: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/1.jpg)
MMD 2093FUNDAMENTAL OF WEB DESIGN
CHAPTER 2Visual Design
![Page 2: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/2.jpg)
Visual Design Elements
•Line
•Color
•Typography
•Form/Shape
•Space
•Texture
•Value
![Page 3: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/4.jpg)
Vertical Lines
![Page 5: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/5.jpg)
Horizontal Lines
![Page 6: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/6.jpg)
Diagonal Lines
![Page 7: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/7.jpg)
Curved Lines
![Page 8: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/9.jpg)
Color
![Page 10: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/11.jpg)
• 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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/12.jpg)
Form and Shape
The shape, outline, or configuration of anything.
Examples
• Squares
• Circles
• Ellipses
• Ovals
• Rectangles
• Triangles
![Page 13: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/13.jpg)
Form and Shape
![Page 14: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/17.jpg)
Smooth Texture
![Page 18: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/18.jpg)
Rough Texture
![Page 19: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/20.jpg)
Visual Design Principles
There are five principles that encompass an interesting design.
• Balance
• Rhythm
• Emphasis
• Proportion and scale
• Unity
![Page 21: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/22.jpg)
BalanceSymmetrical or Formal Balance
The elements within the design are identical in relation to a centerline or axis.
![Page 23: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/23.jpg)
BalanceAsymmetrical or Informal Balance
Parts of the design are not identical but are equal in visual weight.
![Page 24: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/24.jpg)
BalanceRadial Balance
Design Elements radiateoutward from the center.
![Page 25: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/25.jpg)
BalanceVertical Balance
The top and bottom parts are equal.
![Page 26: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/26.jpg)
BalanceHorizontal Balance
The left and right
parts are equal.
![Page 27: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/27.jpg)
Rhythm
Repeated use of line, shape, color, texture or pattern.
Types
• Regular rhythm
• Graduated rhythm
• Random rhythm
• Gradated rhythm
![Page 28: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/28.jpg)
RhythmRegular Rhythm
A element is repeated at the same repetition each time.
![Page 29: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/29.jpg)
RhythmGraduated Rhythm
The beats of the element become closer or further apart as they move.
![Page 30: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/30.jpg)
RhythmRandom Rhythm
The beats of the element are random or are at irregular intervals.
![Page 31: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/31.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/33.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/34.jpg)
Unity• Unity is applying consistent use of lines, color,
and texture within a design.• To be harmonious.
![Page 35: Mmd 2093 ch2](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c814434a7959220b8b4569/html5/thumbnails/35.jpg)
Unity