learn-co-curriculum / hs-intro-web-design-teachers-guide-visual-hierarchy

###SWABTS Understand and use concepts of visual hierarchy to provide appropriate weight to the important features of a site.

Motivation / Why Should You Care?

You may have a great idea for a website and build something that works, but soon notice that people are coming and then leaving after a very short amount of time. They're not engaging or clicking on any of the links. Sometimes they might end up not being interested in your sight, but without a good design, it could be that users can't find the things they're looking for.

Lesson Plan

TEACHERS SHOULD CREATE THEIR OWN DECK FOR THIS - each class will have a lesson on design principles

• helps you organize and prioritize the most important content on the page in a way that helps users understand the purpose of your site and navigate throughout the site.
• Where do you want your audience to look first?
• What is the call-to-action that you need to draw attention to?
• Hierarchy guides the user from one element to the next, ideally in a flow that corresponds to the content’s message.
• Visual importance or weight on to too many elements makes everything becomes flat. It's like saying you have ten ‘favorite’ flavors of ice cream.
• Let the content shine and and make sure graphic elements don’t distract.
• Here is an example of how visual hierarchy breaks up content on a page and directs a user’s eye - the example on the right has headers and footers, headlines and paragraphs with text in different colors.

• Ways to create visual heirarchy
  • Size: larger elements carry more visual weight
  • Color: Some colors are perceived as weighing more than others. Red is to be heaviest while yellow is to be lightest.
  • Density: Packing more elements into a given space, gives more weight to that space
  • Value – A darker object will have more weight than a lighter object
  • Another good strategy is employing contrast. Here are a few examples of how you can employ contrast to make an object stick out and indicate its importance

• Land Book also has good examples of actual websites and how they employ visual hierarchy.
• The photo below is a good example of visual hierarchy: *Clear what site is about
  • Eye is also drawn to the large buttons directing you to “learn how it works”, “get started for free”, and a smaller - but outlined - button to “sign up”.

• Other things to think about:
  • The most important content on your page should go above the fold - at the top of the page before a user needs to scroll down
    • Here is an example of what kind of content should go above the fold vs below the fold:

Conclusion / So What?

Design principals play a huge part in determining the amount of action your page gets. Visual hierarchy can help you provide the right amount of weight to get the most important parts of your page noticed.

View SWABTS on Learn.co and start learning to code for free.