Web Developer Fast Track

Winter 2022

Hero Sections

Hero Sections

Hero Sections are commonly used as headers to quickly captivate the user's attention and direct them.

Hero Section
A section of the website that is the first thing a user sees, it's generally really big, eye catching, and seeks to convey the identity and goal of a site. Hero sections also generally have a call to action.
  • You will also hear about hero nav and hero footer
    • These are just navs and footers that have a very large and usually comprehensive dump of links
  • We will just be focusing on hero sections in the header

Hero Codepen Examples

Key Questions

  • when creating a hero section, ask yourself: If a user does 1 thing on this site, what do you want them to do?
  • This question is useful for guiding hero section creation. Call to Action (CTA) : Guides the user to the next step of going to your site. Depending on the type and goal of the site, this can be many different things.
  • Examples:
    • Subscribe
    • Free Trial
    • Sign Up
    • Download
    • Find Out More
    • Our Work
    • Get a Quote

Example Analyses

Activity: Hero Hunt

  • Screenshot different hero sections
    • look for:
      • different positions of hero content
      • animations and user interaction
      • types of CTA
    • Answer:
      • What does this hero say about the site's identity?
      • What story does it tell?
      • What kind of engagement it is directing the user to do?
      • Is it intended to make you stop and think or does it direct you along?

Walkthrough

  • Group Discussion on hero sections that were found
  • Each group will briefly examine one of their hero sections from the hero hunt for the class

Lab Time

Prep