How to Create the Perfect Hero Section

Introduction

• Role of designers: to help clients make more money, potentially saving the world through their clients.
• Importance of hero section: Over 90% of people leave a site within the first 15 seconds if the hero section is not compelling.
• Goal: Show how to create the perfect hero section.

Step 1: Clarify Who Should Care and Why

• Goal: Help visitors understand the website, its purpose, and why they should care.
• Steps:
  • Conduct a strategy session with clients to gather information.
  • Key questions to ask clients:
    • What are you selling?
    • Why did you start this business?
    • Who are you trying to help?
    • What are your goals for this website?
    • What actions do you want people to take?
  • Distill information into a clear value proposition and call to action.

Step 2: Creating a Wireframe

• Purpose: Outline the major content pieces without focusing on design.
• Tools: Use Figma for wireframing.
• Components to include:
  • Value proposition (e.g., “Your universe. It’s time to save it.”)
  • Brief copy explaining the organization’s mission and goals.
  • Call to action button (e.g., “Join Now”).
  • Logo, navigation links (e.g., our ships, our mission, donation).
  • Image placeholder
• Validate wireframe with client before moving forward.

Step 3: Developing a Creative Concept

• Goal: Create an emotional reaction and effectively communicate the website’s purpose.
• Steps:
  • Brainstorm multiple visual concepts.
  • Examples of concepts:
    • Ship flying away from a burning Death Star.
    • Parent hugging a child under a burning Death Star.
    • Team of happy rebels.
  • Sketch rough layouts to test space allocation for text and images.
  • Share concepts with clients for feedback and approval.

Step 4: Developing the Imagery

• Goal: Develop and refine visual assets.
• Steps:
  • Depending on resources, use stock photos, professional photography, or original images.
  • Example: Ship flying away from Death Star.
  • Use Photoshop for compositing and refining images (e.g., adding stars, flames).

Step 5: Design Process

• Apply established brand elements (e.g., logo, colors, fonts).
• Tools: Figma for layout and design.
• Enhance design using principles of hierarchy (focus on content first, then imagery).
• Example: Use bold font “Titling Got it” for its rebellious feel.

Step 6: Optimization

• Goal: Increase conversion rates.
• Techniques:
  • Add “Join for Free” to the call-to-action to increase appeal.
  • Use social proof, e.g., “Obi-Wan and 4,000 others have already joined.”
  • Include photos of other members.
  • Feature logos of credible news sources to build trust (e.g., TV stations).

Practice and Next Steps

• Practice: Download project files to improve Photoshop and Figma skills.
• Additional resources: Free workshop for a deeper dive into the process.

Conclusion

• Summary of steps to create a perfect hero section.
• Encouragement to practice and engage with additional resources.
• Call to action to share feedback in the comments.