![Page 1: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/1.jpg)
CREATING A VISUAL HIERARCHY Mr Shelor’s Graphic Design Class – M-101 Lab
![Page 2: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/2.jpg)
• Visual Hierarchy is the arrangement or presentation of elements in a way that implies
Creating A Visual Hierarchy
![Page 3: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/3.jpg)
What is most important for your audience to notice?!
What is the 2nd most important thing for your audience to notice?!
What is the 3rd most important thing you want your audience to see?
Visual Hierarchy-Arranging the Elements of Designin the ORDER OF IMPORTANCE To Get Your Design Noticed!
![Page 4: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/4.jpg)
Primary Focal Point- Main Point of Emphasis
Secondary Focal Points-
![Page 5: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/5.jpg)
Creating A Visual Hierarchy in Design
1st Thing
3rd thing 3rd thing 3rd thing
2nd thing
![Page 6: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/6.jpg)
Creating A Visual Hierarchy in Design
Objects with the!
to their surroundings !are recognized !
first by the human mind!
![Page 7: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/7.jpg)
Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value, proximity, and size,
you can organize elements on a page so that users gets a sense of visual importance.
Look at this graphic below
Where did you eyes go 1st? The point is, nothing guided your eyes because all of the circles are the same.
If you make everything bold, nothing is bold.
![Page 8: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/8.jpg)
Let’s make a slight change to that graphic
Now where did your eyes go? My guess is the first circle. With only shading, I was able to direct your eye to
the circle that, for whatever reason, I believed to be the most important.
This is visual hierarchy.
![Page 9: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/9.jpg)
Example Ad 1!!
NOT SO GOOD!
1. Primary Focal Point or EMPHASIS in this ad
XXX Not A Good ExampleXXX
![Page 10: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/10.jpg)
Better Ad-Has AVisual Hierarchy!
1. Where does your eye go first? LOWEST PRICE EVER
2. Where does your eye go 2nd?
To The Widget-(shape) 3. Where does your eye go 3rd? Sale End Monday
>>A Better use of SPACE around the text and pictures<<
![Page 11: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/11.jpg)
Visual Hierarchy!
![Page 12: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/12.jpg)
![Page 13: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/13.jpg)
![Page 14: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/14.jpg)
![Page 15: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/15.jpg)
![Page 16: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/16.jpg)
![Page 17: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/17.jpg)
![Page 18: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/18.jpg)
![Page 19: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/19.jpg)
![Page 20: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/20.jpg)
![Page 21: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/21.jpg)
![Page 22: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/22.jpg)
Easy and legible = comprehension and message received.
![Page 23: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/23.jpg)
![Page 24: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/24.jpg)
![Page 25: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/25.jpg)
![Page 26: CREATING A VISUAL HIERARCHYkhsgraphicdesign.weebly.com/uploads/3/0/2/6/... · Visual Hierarchy is really a pretty simple concept. By using color, contrast, texture, shape, value,](https://reader033.vdocuments.mx/reader033/viewer/2022043003/5f83250a8ddaeb1a6e2dd03f/html5/thumbnails/26.jpg)