SlideShare a Scribd company logo
1 of 4
In website design both the size and the placement of text determines
hierarchy. Items at the top and bottom of the page attract more
attention than text at the side.
Hierarchy
WD131: Fundamentals of Design
Unit 8: Visual Hierarchy
Module 3: Visual Hierarchy for the Web
This is due to page scanning patterns. Site visitors scan the
page first to see if they are interested before fully reading
the page.
Hierarchy
WD131: Fundamentals of Design
Unit 8: Visual Hierarchy
Module 3: Visual Hierarchy for the Web
The size of type on a page attracts attention. Larger items will
override any inclination to read in a “normal” top down , left
to right pattern.
Hierarchy
WD131: Fundamentals of Design
Unit 8: Visual Hierarchy
Module 3: Visual Hierarchy for the Web
Brighter colors stand out on screen more than greys and
browns.
Hierarchy
WD131: Fundamentals of Design
Unit 8: Visual Hierarchy
Module 3: Visual Hierarchy for the Web

More Related Content

Viewers also liked

Dig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imageDig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an image
kateridrex
 
Fund of design unit 2 module 1 understanding categories of l ine and their use
Fund of design unit 2 module 1 understanding categories of l ine and their use Fund of design unit 2 module 1 understanding categories of l ine and their use
Fund of design unit 2 module 1 understanding categories of l ine and their use
kateridrex
 
Wd131 unit 9 module 2 how to create a visual pulse
Wd131 unit 9 module 2 how to create a visual pulseWd131 unit 9 module 2 how to create a visual pulse
Wd131 unit 9 module 2 how to create a visual pulse
kateridrex
 
Dig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layersDig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layers
kateridrex
 
Dig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelsDig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channels
kateridrex
 
Wd131 unit 9 module 1 understanding imagery and rhythm
Wd131 unit 9 module 1 understanding imagery and rhythm Wd131 unit 9 module 1 understanding imagery and rhythm
Wd131 unit 9 module 1 understanding imagery and rhythm
kateridrex
 
Elem of design unit 1 module 4 hue, value, saturation
Elem of design unit 1 module 4 hue, value, saturationElem of design unit 1 module 4 hue, value, saturation
Elem of design unit 1 module 4 hue, value, saturation
kateridrex
 
Dig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imageDig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an image
kateridrex
 
Wd131 unit 8 module 2 how to organize and control
Wd131 unit 8 module 2 how to organize and control Wd131 unit 8 module 2 how to organize and control
Wd131 unit 8 module 2 how to organize and control
kateridrex
 
Elem of design unit 8 module 3 working with text on a frame
Elem of design unit 8 module 3 working with text on a frameElem of design unit 8 module 3 working with text on a frame
Elem of design unit 8 module 3 working with text on a frame
kateridrex
 
Wd131 unit 4 module 3 fundamentals of color interaction
Wd131 unit 4 module 3 fundamentals of color interaction Wd131 unit 4 module 3 fundamentals of color interaction
Wd131 unit 4 module 3 fundamentals of color interaction
kateridrex
 

Viewers also liked (11)

Dig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imageDig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an image
 
Fund of design unit 2 module 1 understanding categories of l ine and their use
Fund of design unit 2 module 1 understanding categories of l ine and their use Fund of design unit 2 module 1 understanding categories of l ine and their use
Fund of design unit 2 module 1 understanding categories of l ine and their use
 
Wd131 unit 9 module 2 how to create a visual pulse
Wd131 unit 9 module 2 how to create a visual pulseWd131 unit 9 module 2 how to create a visual pulse
Wd131 unit 9 module 2 how to create a visual pulse
 
Dig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layersDig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layers
 
Dig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelsDig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channels
 
Wd131 unit 9 module 1 understanding imagery and rhythm
Wd131 unit 9 module 1 understanding imagery and rhythm Wd131 unit 9 module 1 understanding imagery and rhythm
Wd131 unit 9 module 1 understanding imagery and rhythm
 
Elem of design unit 1 module 4 hue, value, saturation
Elem of design unit 1 module 4 hue, value, saturationElem of design unit 1 module 4 hue, value, saturation
Elem of design unit 1 module 4 hue, value, saturation
 
Dig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imageDig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an image
 
Wd131 unit 8 module 2 how to organize and control
Wd131 unit 8 module 2 how to organize and control Wd131 unit 8 module 2 how to organize and control
Wd131 unit 8 module 2 how to organize and control
 
Elem of design unit 8 module 3 working with text on a frame
Elem of design unit 8 module 3 working with text on a frameElem of design unit 8 module 3 working with text on a frame
Elem of design unit 8 module 3 working with text on a frame
 
Wd131 unit 4 module 3 fundamentals of color interaction
Wd131 unit 4 module 3 fundamentals of color interaction Wd131 unit 4 module 3 fundamentals of color interaction
Wd131 unit 4 module 3 fundamentals of color interaction
 

More from kateridrex

Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
kateridrex
 
Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
kateridrex
 
Dig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonsDig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttons
kateridrex
 
Dig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphicsDig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphics
kateridrex
 
Dig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectsDig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effects
kateridrex
 
Dig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapesDig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapes
kateridrex
 
Dig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolDig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen tool
kateridrex
 
Dig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filtersDig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filters
kateridrex
 
Dig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filtersDig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filters
kateridrex
 
Dig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masksDig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masks
kateridrex
 
Dig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masksDig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masks
kateridrex
 
Dig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolsDig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting tools
kateridrex
 
Dig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertiesDig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and properties
kateridrex
 
Dig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textDig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path text
kateridrex
 
Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]
kateridrex
 
Dig imag unit 3 module 3 incorporating color techniques
Dig imag unit 3 module 3  incorporating color techniquesDig imag unit 3 module 3  incorporating color techniques
Dig imag unit 3 module 3 incorporating color techniques
kateridrex
 
Dig imag unit 3 module 2 working with the color picker and swatches palette
Dig imag unit 3 module 2 working with the color picker and swatches paletteDig imag unit 3 module 2 working with the color picker and swatches palette
Dig imag unit 3 module 2 working with the color picker and swatches palette
kateridrex
 
Dig imag unit 2 module 3 modifying selections
Dig imag unit 2 module 3 modifying selectionsDig imag unit 2 module 3 modifying selections
Dig imag unit 2 module 3 modifying selections
kateridrex
 
Dig imag unit 2 module 1 using and managing layers
Dig imag unit 2 module 1 using and managing layersDig imag unit 2 module 1 using and managing layers
Dig imag unit 2 module 1 using and managing layers
kateridrex
 
Dig imag unit 1 module 1 i understanding image editing concepts
Dig imag unit 1 module 1 i understanding image editing conceptsDig imag unit 1 module 1 i understanding image editing concepts
Dig imag unit 1 module 1 i understanding image editing concepts
kateridrex
 

More from kateridrex (20)

Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
 
Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
 
Dig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonsDig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttons
 
Dig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphicsDig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphics
 
Dig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectsDig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effects
 
Dig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapesDig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapes
 
Dig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolDig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen tool
 
Dig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filtersDig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filters
 
Dig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filtersDig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filters
 
Dig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masksDig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masks
 
Dig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masksDig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masks
 
Dig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolsDig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting tools
 
Dig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertiesDig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and properties
 
Dig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textDig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path text
 
Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]Dig imag unit 4 module 1 learning about type fonts and properties[2]
Dig imag unit 4 module 1 learning about type fonts and properties[2]
 
Dig imag unit 3 module 3 incorporating color techniques
Dig imag unit 3 module 3  incorporating color techniquesDig imag unit 3 module 3  incorporating color techniques
Dig imag unit 3 module 3 incorporating color techniques
 
Dig imag unit 3 module 2 working with the color picker and swatches palette
Dig imag unit 3 module 2 working with the color picker and swatches paletteDig imag unit 3 module 2 working with the color picker and swatches palette
Dig imag unit 3 module 2 working with the color picker and swatches palette
 
Dig imag unit 2 module 3 modifying selections
Dig imag unit 2 module 3 modifying selectionsDig imag unit 2 module 3 modifying selections
Dig imag unit 2 module 3 modifying selections
 
Dig imag unit 2 module 1 using and managing layers
Dig imag unit 2 module 1 using and managing layersDig imag unit 2 module 1 using and managing layers
Dig imag unit 2 module 1 using and managing layers
 
Dig imag unit 1 module 1 i understanding image editing concepts
Dig imag unit 1 module 1 i understanding image editing conceptsDig imag unit 1 module 1 i understanding image editing concepts
Dig imag unit 1 module 1 i understanding image editing concepts
 

Wd131 unit 8 module 3 visual hierarchy for the web

  • 1. In website design both the size and the placement of text determines hierarchy. Items at the top and bottom of the page attract more attention than text at the side. Hierarchy WD131: Fundamentals of Design Unit 8: Visual Hierarchy Module 3: Visual Hierarchy for the Web
  • 2. This is due to page scanning patterns. Site visitors scan the page first to see if they are interested before fully reading the page. Hierarchy WD131: Fundamentals of Design Unit 8: Visual Hierarchy Module 3: Visual Hierarchy for the Web
  • 3. The size of type on a page attracts attention. Larger items will override any inclination to read in a “normal” top down , left to right pattern. Hierarchy WD131: Fundamentals of Design Unit 8: Visual Hierarchy Module 3: Visual Hierarchy for the Web
  • 4. Brighter colors stand out on screen more than greys and browns. Hierarchy WD131: Fundamentals of Design Unit 8: Visual Hierarchy Module 3: Visual Hierarchy for the Web