Crafting Your Hero Section: Value & CTA

1. The Anatomy of a Hero Section

A hero section isn't just a random collection of pretty elements; it's a finely tuned communication tool. Think of it as the cover of your book or the opening scene of a movie. It has to grab attention and set the stage immediately.

The following video provides a concise breakdown of the essential components that make up a hero section.

To summarize, nearly every effective hero section contains these core elements:

1. Headline: A powerful, attention-grabbing statement that communicates your core value.
2. Supporting Copy (Subheading): A brief description that adds context to the headline and clarifies what you do or who you do it for.
3. Hero Visual: An image, video, or animation that reinforces your message and brand aesthetic.
4. Call-to-Action (CTA): A button that directs the user to take the most important next step.
5. Social Proof (Optional but Recommended): Elements like testimonials, user counts, or client logos that build credibility.

This structure provides a proven framework for your design.

2. Crafting Your Message: Value Proposition and CTA

Before you design anything, you must clarify your message. A beautiful hero section with a confusing message will fail. This step is about writing, not drawing.

The first video below explains how to distill your idea into a clear value proposition and CTA.

The Value Proposition: Lead with Benefits

Your headline is your value proposition. Its job is to answer the visitor's question: "What's in it for me?" A common mistake is to describe features (what your product does) instead of benefits (what your product helps the user achieve).

For a deeper dive into this concept and some excellent examples, read the first two best practices from the following article.

The Call-to-Action (CTA): Provide a Clear Path

Your CTA is the single most important action you want a user to take. To maximize effectiveness:

• Be Singular: Avoid offering too many competing choices. Stick to one primary CTA. You can offer a less prominent secondary CTA (e.g., a "ghost" button or text link for "Learn More"), but the main goal should be obvious.
• Be Action-Oriented: Use clear, direct verbs like "Get Started," "Download Now," or "Join the Waitlist."

3. Visual Design and Layout

Once your message is clear, you can start designing the layout and applying your visual styles. This is where your work from the last lesson comes into play.

Your goals here are:

• Establish Visual Hierarchy: Use the font sizes and weights from your Text Styles to make the headline the most prominent element, followed by the subheading, and then the CTA.
• Guide the Eye: Arrange elements to create a natural flow of attention, typically from the headline to the CTA button.
• Apply Your Brand: Use your Color Styles to ensure the CTA button stands out and the overall design feels cohesive with your brand identity.

There are many common layouts, such as centered text, or a split-screen with text on one side and a visual on the other.

For inspiration on different layout patterns you can use, browse the examples in the LogRocket article.

Activity: Design Your Hero Section (~25 minutes)

It's time to build. Open your Figma project file and navigate to your landing page design.

Step 1: Define Your Content (5 mins)
Before touching any design tools, open a text editor or simply create a text box in Figma and write out the content for your hero section. Think about the first product you plan to create (e.g., a wallpaper pack, an icon set).

• Headline: What is the primary benefit for the user? (e.g., "Transform Your Desktop Aesthetic," not "Download HD Wallpapers").
• Supporting Copy: Briefly explain what it is and who it's for. (e.g., "A curated collection of 20 minimalist wallpapers for designers, developers, and creators.")
• CTA Text: What is the single action you want them to take? (e.g., "Get the Pack," "Download for Free," "Join the Waitlist").

Step 2: Build the Structure in Figma (15 mins)

1. Create a new Frame for your desktop hero section (e.g., 1440px wide).
2. Add your headline, supporting copy, and CTA text using the Text tool.
3. Apply Your Styles:
   • Select your headline text and apply your Heading/H1 style.
   • Apply your Body/Default or a Heading/H3 style to your supporting copy.
   • Create a button component. Use Auto Layout to add padding around your CTA text. Apply your Interactive/Button Primary Fill color style to the button's background and your Interactive/Button Primary Text style to the text.
4. Create the Layout:
   • Arrange the text elements and the CTA button. Use Auto Layout on a parent frame to control the spacing between them (e.g., 24px between the headline and subheading, 40px between the text block and CTA).
   • Decide on a layout (e.g., centered, or left-aligned).
5. Add a Visual Placeholder:
   • Draw a large Rectangle where your hero image or visual will go. Fill it with a neutral gray from your color styles. This keeps you focused on layout and composition for now.

Step 3: Review and Refine (5 mins)
Look at your design. Does the eye naturally go from the headline to the CTA? Is the CTA the most visually prominent interactive element? Adjust spacing, alignment, and text styles as needed to improve the visual hierarchy.

Conclusion

Excellent work. You've now moved beyond creating individual assets and have composed the most critical communication piece of your website. You've learned to combine strategic copywriting with design principles to create a hero section that not only looks good but also performs its job effectively.

Key Takeaways:

• A hero section must immediately convey your value proposition (what's in it for the user) and provide a clear call-to-action.
• The core anatomy is a Headline, Supporting Copy, Visual, and CTA.
• Always lead with benefits over features.
• Use your pre-defined text and color styles to establish a strong visual hierarchy and maintain brand consistency.
• Start with content first (wireframing with text) before focusing on visual layout.

Preview of the Next Lesson:
Your hero section has made a promise. In the next lesson, "Design a feature section to highlight a product's primary benefits and use cases," you will learn how to provide the proof. We will design the section directly below the hero, where you'll visually break down your product's key benefits and features to convince the user to follow through on that call-to-action.