According to Carrot's conversion optimization study, optimized hero sections can increase conversion rates up to 55%, arguably the most important thing we design for our clients at Arfadia.
The thing is, most businesses get the hero sections dead wrong. They cram them full of corporate speak, put in some generic stock photos, and then they wonder why their bounce rates are sky high. But when done right? Hero sections are now in conversion mode, doing everything in their power to turn visitors into paying customers.
Let's face it, the reason hero sections are in such high demand. Google's research on first impressions has concluded that users judge aesthetics in less than 50 milliseconds—that's actually faster than the time it takes to blink an eye. This snap judgment can mean the difference between a visitor staying on your site or another tick mark on the bounce-rate scale.
Another way of looking at it: your hero is the cover of a book. Yes, people do judge books by their covers, and they judge websites by their heroes. We notice a 25-55% increase in conversions in businesses we work on by simply optimizing one crucial part of their website at Arfadia.
So when we break up what makes an effective hero section, we're considering a recipe of five key ingredients acting harmoniously:
Your headline is your digital elevator pitch. It needs to say what you're selling in eight words or fewer. This is complemented by the subheading which adds context without confusing the viewers.
The hero visual, whether image, video, or illustration, supports your message by forging an emotional relationship. Your call to action (CTA) is clear and loud so that the visitors know what to do next. Finally, the navigation is set up so that users can easily explore if users aren't ready to pull the trigger yet.
According to Dr. Jakob Nielsen from Nielsen Norman Group's usability research, "Users do 80% of their scanning above the fold." This also means that your hero section bears an incredibly heavy burden in proving whether or not visitors stick around.
Knowing the psychological factors that impact hero section performance has changed the way we design at Arfadia. As "Don't Make Me Think" author Steve Krug puts it: "The truth is, most web users are so used to being able to click on two or three helpful-looking words, and be right where they want to be, that they routinely ignore subtle signposting." This fact informs our philosophy of making hero sections scannable, not readable.
The theory of cognitive load is a major factor here. Because the most effective hero sections embrace radical simplicity, our brains can hold only about seven chunks of information in working memory. Everything must pull its weight, or it gets the ax.
i"Hero sections aren't just digital real estate, they're conversion engines. After two decades of optimizing thousands of websites, I've seen how a single well-crafted hero section can transform a struggling business into a thriving one. The secret lies in understanding that you have milliseconds to communicate value, not minutes."
— Tessar Napitupulu, CEO of Arfadia and Digital Marketing Expert
"People make emotional decisions and then they rationalize them with logic," explains behavioral psychologist Dr. Susan Weinschenk, author of "100 Things Every Designer Needs to Know About People." This insight is how we structure hero sections, emotional triggers first followed by logical benefits.
Gestalt principles dictate how your hero section is seen by visitors. Things close together look like they're related (proximity), similar-looking things look like they belong together (similarity), the mind completes objects we don't see (closure). We use these principles to make hero sections that are intuitive and draw visitors instinctively into conversion actions.
Color psychology is also important. Different colors evoke different emotional reactions, says Prismic's design research. Blue builds trust (which is why so many financial companies use it), red creates a sense of urgency (great for sales), while green implies growth and success.
Conversion optimization specialists say hero sections that include social proof can increase conversions by 15%. Seeing that other visitors before them have taken action, when they see the queue like that, reduces the perceived risk and increases their confidence regarding their decision.
Let's see how some of America's most successful companies have mastered the art of the hero section, beginning with one of the most powerful success stories we've come across.
Carrot, a real estate technology company, found a counterintuitive truth with the help of rigorous A/B testing: Less really is more. Simply by getting rid of videos, fancy graphics and too much text from their hero sections they achieved amazing results.
It's minimalistic tactic, clean headline and big form, resulted in conversion boosts of 45.87% on one test site (from 259 to 398 conversions). That's not a typo. Close to 50% more conversions on one single variation.
What is it about the way Carrot does things that is so successful? They knew that 61% of their conversions were coming from mobile users and required them to have forms visible above the fold. They did so by removing distractions, applied mobile-first design, and ended up with hero sections that do more by not doing much at all.
i"We found our gorgeous, intricate hero sections were actually killing conversions. Sometimes the most appealing design is the most straightforward design."
— Trevor Mauch, CEO of Carrot
Figma is an amazing example of the superpower of focus in hero section design. And their hero has only one primary CTA: "Get started for free." No competing bids, no second orders, no distractions of any kind.
This tactic directly contradicts behavioral economics findings from groundbreaking studies showing the mere presence of multiple conflicting CTAs can decrease conversion rates by up to 266%. When they have too much to choose from, they often choose nothing.
It only gets better with how Figma leverages whitespace and visual hierarchy to ensure that single CTA is impossible to ignore. When paired with plain value prop copy that answers the user's pain point, this single focus provides a clear path for frictionless and easy progress.
Apple's hero sections are the status quo for product-based designs currently. Their "chromeless" style of simply presenting products set against white or black backgrounds, often making the product appear as if designers used tools to remove background distractions, generates a big amount of impact through radical simplicity.
Every Apple hero section follows a similar formula: beautiful product images, short and benefits-focused copy and prominent CTAs that contrast against plain backgrounds. This is a great brand reminder for all Apple properties and helps visitors make a decision without thinking about it.
Just look at what Apple is doing and you see how restraint can be used to make a design statement. They show less, and say more, a principle that has helped make them one of the world's most valuable companies.
The landscape of the hero section is currently in flux, as user habits and technology push the design process forward. In our studies with DesignerUp's trend analysis we begin to see a few game changing trends that are shaping up to change what's possible.
Broken up and deconstructed hero sections are stepping out of their standard center aligned forms. No more predictable layouts, we are now presented with broken, chaotic layouts, with pieces of content staggered and with huge typography. It's a particularly good fit for tech startups and creative services agencies trying to distinguish themselves in crowded markets.
However, what excites me most is the Bento Grid layout, based on Japanese lunchbox presentations, revolutionizes how we share multiple messages without overwhelming the user. We can add self-contained content blocks within the hero that would provide a "choose-your-own-adventure" for the different user intent.
Component demo sites have been a strong trend for SaaS startups. Instead of full product screen mockups, hero sections are now using individual UI elements from app screens, and creating interest through cleverly composed layered and positioned elements.
What's possibly most exciting of all, though, is that we've taken the reign of bold typography to the next level. We're creating hero sections where headlines take up 40-60% of the visible space, along with color contrast for instant attention. This trend says that in our attention-deficit digital world, you need to shout to be heard, but that you should shout with style.
There is no point of having a really good looking hero section if it takes forever to load. Google studies reveal that 53% of mobile users leave the sites that take more than three seconds to load and for each subsequent second of loading conversion drop by 4.42%. This fact has in turn influenced our approach to hero sections at Arfadia.
And here's why it is important: For every 100KB extra in hero section assets, bounce rates increase by 1.8%, which means optimization should always be on in your mind. We've honed a method to consistently keep our destructible load times sub-3-secs and provide a great visual experience while doing it, validated through years of practice.
Once the optimization process has begun, the formatting option is also initiated. WebP images are 62% smaller than JPEGs at comparable quality, and the latest AVIF format cranks that compression even farther down. We do responsive images with srcset attributes so we are not serving the desktop-size assets to mobile users.
We keep hero images under a fixed 200-400KB budget with TinyPNG compression tools every time. It may sound limiting, but it's actually freeing, limitations foster creativity.
Progressive loading approaches are a game changer for perceived performance. We serve the low-quality placeholders (3-5KB) immediately which load instantly and swap in for the high-quality versions. This two stage method can help articles that have largest contentful paint (LCP) scores on average 840ms by not being yellow, and keeping your users attention while the rest of the assets support the content in the background.
The agency has learned some harsh lessons about mobile performance when it comes to video backgrounds. If they contain videos, however, they can increase engagement as much as 80%, and also up your LCP by an average of 1.2 seconds. Our solution? Bring user-controlled playback to mobile via static poster images that keep the content looking great without the performance overhead.
Having audited hundreds of hero sections for our clients, we've noticed patterns in what doesn't work: mistakes that feel small, but tank conversion rates. Knowing what to avoid will help you make your hero section achieve results instead of chasing away visitors.
Our number one conversion killer is information overload. We've seen hero sections packed to the brim with different headings, long paragraphs, conflicting CTA buttons, and busy background images leading to visual noise. Remember: users make judgements in 50 milliseconds. They're gone if they can't immediately understand what you're offering and why it's worth it.
The solution? Apply Steve Krug's guideline: "Remove half the words on each page, then half of what's left." It sounds harsh, but it's effective.
Another big mistake that we see over and over: generic stock photography. That smiling businessperson shaking hands? They are probably featured on dozens of competing sites as well. Otherwise, generic imagery doesn't distinguish your brand and can make you less trusted.
Custom photography increases conversion rates by an average of 35% relative to that of generic imagery, according to conversion optimization research. The investment could easily pay for itself.
Shocking that mobile is roughly 57-83% of traffic but yet shitty mobile optimization is still so prevalent! We continue to see hero sections with minuscule text, non-tappable CTAs, and imagery that doesn't scale well.
The solution is simple: design mobile first, then escalate for desktop, never the other way around. Your mobile hero section should stand well on its own, and not look like a disfigured afterthought.
Poor or conflicting CTAs have profound affects on conversion potential. We've witnessed hero sections that feature five different buttons vying for attention, or even worse, CTA buttons with nonspecific words like, "Learn More" or "Submit."
Good CTAs typically employ action-driven copy ("Start Free Trial!" "Get Instant Access") and preserve visual hierarchy via size, color, and positioning. Action-oriented CTAs see a 90% higher CTR than generic CTAs, according to HubSpot's conversion rates data.
Hero section layout design is not one size fits all for every industry. What works for a SaaS startup likely won't have the same effect for e-commerce shoppers or B2B decision makers. Through our experiences working with various clients, at Arfadia we have perfected the industry specific strategies that enable us to entice your visitors with content and functionality that measures up to the promise of your brand.
For SaaS Firms, the hero sections should be outcome-focused and not feature-focused. We don't use "Powerful Email Marketing Software," we say "Close deals 30% faster with automated follow-ups." Interactive product demos and separated component displays are especially effective, providing a small slice of the interface without an avalanche of information.
Social proof including customer logos and metrics ("Trusted by 10,000+ marketers") gives instant credibility. Based on Landingi's study, hero sections with social proof perform 34% better than those without.
Urgency and a wow-factor are elements e-commerce hero sections are good at. I think seasonal campaigns, time-limited offers and more lifestyle-related photography that helps clients to imagine how they could use the products in their lives really increase conversion.
We've seen featuring a single hero product or collection (and not trying to show everything) increases click-through rates by 35%. Trust signals, like security badges and shipping guarantees, counteract common purchase hesitations immediately.
B2B service providers require hero sections that prove expertise and make difficult to understand offerings understandable. Start by engaging with problem-solution messaging that addresses executive pain.
Placing recognizable client video testimonials in hero section with text converts 34% more. And most importantly, make the next step blatantly obvious, whether it's booking a demo, downloading a whitepaper, or getting a quote.
The driving force behind an effective hero section is just the start, the real magic is in iterating based on real data. At Arfadia, we've created a measurement framework to help us better evaluate and measure how hero sections does more than simple metrics on a page.
Conversion rate is still the north star metric, but we look deeper to get the full picture. We monitor micro-conversions (newsletter sign-ups, video plays, scroll depth) in addition to macro-conversions (purchases, demo requests) in order to gain an understanding of how our hero sections are guiding users through the customer journey.
Heat mapping tools like Hotjar's behavioral analytics let us see where our attention is going, and where we're dropping traffic. This information often goes against assumptions as to what is "working" in hero sections.
Engagement stats do all the talking when it comes to hero section performance. Time on page, bounce rate and scroll depth show you whether visitors are finding instant value. Optimized hero sections do 15-30% better on these engagement metrics from what we've seen, and that's a strong base for improving conversion rates downstream.
A/B testing yields definitive answers about what works. We test it all: headlines, images, CTA colors, button placement and even punctuation. Our best-performing test, for instance, lifted conversions by 31% by simply swapping a product-focused headline for a benefit-focused one.
The trick is to test only one kind at a time to see what drives gains. It's too many variables to know what's even working.
You can find unexpected insights when you look at cross device performance. A hero section that does 8% on desktop, for example, might only convert at 2% on mobile, leading you to optimization opportunities. We keep track of device specific usage metrics separately, so our hero sections work hard no matter how visitors arrive.
Now, let's discuss some of the strategies we can apply that actually work. These are not theoretical ideas, they're proven strategies we work with our customers on at Arfadia day in and day out.
Your headline is make-or-break territory. According to marketing genius David Ogilvy: "On average, 5x as many people read the headline as read the body copy." In hero sections, that ratio is likely higher still.
Begin with the end the customer wants, not how your product will get them there. Where possible, be specific ("Save 3 hours every week" is better than "Save time"), address pain points directly and use the active voice. A/B test benefit headlines against features, we've seen benefit headlines beat control headlines by an average of 31% in our data.
Your call-to-action button is where the action happens, and does not. A/B testing studies have identified that altering call-to-action button text from "Submit" to "Get My Free Guide" led to a 47.93% conversion rate increase.
Color psychology matters too. Orange CTAs are statistically superior to other colors because they create urgency and are not as offensive as red. Size: Speaking of CTA buttons, they should be the largest thing you can click in your hero section.
Position also affects performance. We know that CTAs get 12% more action just from a little bit off center, than from being exactly centered for example, natural eye tracking.
Everything in your hero section should lead the eye to your CTA. You can do that with contrast, sizing, and placement to guide the eye from headline to CTA. White space isn't empty space, it's breathing room that allows your message to be more easily digested.
Based on UX design study, visitors read hero sections in a Z-pattern: from top-left corner to top-right, then diagonally down to bottom-left and horizontally to bottom-right. Structure your placement to fit into this default reading direction.
The path of the hero section Looking forward, Hero sections will continue to evolve as technology and user expectations advance. And AI-driven personalization is already starting to personalize hero content on the basis of visitor behavior and preferences.
We're also testing dynamic hero sections that reflect in the moment so that we show different messages to those who've already been to the site or changes dependent on their traffic source. In initial tests, engagements are up 23% when returning visitors are recognized in the hero section with personalized messages.
Making hero sections accessible isn't just good practice, it will also drive business. Accessible websites generate 28% higher revenue than non-accessible ones, says the Web Accessibility Initiative.
Be sure to have adequate color contrast (4.5:1), use semantic HTML elements, and a descriptive alt attribute for all images. Visually impaired users should be able to perceive your value proposition just like anyone else.
With mobile traffic now accounting for most web visits, mobile-first design is no longer an afterthought but a necessity. Your mobile hero section ought to be able to stand alone beautifully, not feel like a squeezed version of your desktop design.
Think about thumb-friendly touch targets (at least 44px), readable text sizes (at least 16px), and lighting-fast images sized for cellular connections. What works with wifi might not work with 4G.
If it takes more than 3 seconds for a visitor to spot your number 1 value proposition and CTA, then your hero section is too busy. We love the "5-second test", you show your hero section to a person not familiar with your business for 5 seconds and you ask for explanation of what you do and what they have to do next.
If they can't answer both question clearly, it's time to simplify. Get rid of conflicting messaging, secondary CTAs and any component that's not directly helping your primary conversion goal.
Video backgrounds can increase engagement by 80 percent when used properly, but they're not always great. Think video when you sell a complicated product that needs demonstrating, when you have a great brand story to tell, or when you need to make an emotional connection fast.
If your audience is heavily on mobile devices (think: data usage), speed matters or the video doesn't provide significant more value than static imagery, skip video. Always give users controls & accessibility (with captions).
And, when it comes to hero section copy, less is truly more. Headline, 5-8 words max, captures your "instant" value proposition. Subheads can run up to 15-20 words to establish context, but each word should prove itself.
Keep in mind users do a lot of skimming, that is true for mobile, too. We've learned that hero sections with less than 40 total words perform better every time compared to long copy blocks.
Continuous testing leads to continuous improvement, but there's a method to the frequency. We suggest running a test once every 2-4 weeks, depending on how much traffic you have, you need statistical significance for meaningful results.
Work on your most impactful elements first: headlines, CTAs and hero images usually provide the largest boosts. Well, when you optimize the fundamental pieces, you can experiment with minor tweaks, such as button colors and microcopy.
Instead, hero sections, when done right, can supplement SEO results with good engagement metrics. But there are also some mistakes that can damage the rankings, such as using images without alt text, using text as images (meaning you can't crawl it) and creating slow-loading sections, which work against Core Web Vitals scores.
Make sure your hero section is semantic HTML, contains your H1 tag with core keywords, and loads fast to help, not hurt, SEO.
Mobile hero sections call for a reimagining, not just responsive scaling. Desktop hero sections can have horizontal composition and hover effects, mobile needs vertical stacking and touch-friendly interactions.
We make our mobile hero sections typography larger (don't go smaller than 16px), our CTAs thumb-friendly (at least 44px for touch targets), and reduce content to optimise for small screens. And the need to perform is arguably even more important on mobile, where users can experience a huge difference in connection speeds.
The best hero section headlines are clear and benefits-driven, and all in less than 10 words. Begin with the end-state of your customer, not the functionality of your product. Be as concrete as you can ("Save 3 hours a week" is better than "Save time"), don't shy away from pain points, and, as always, write in the active voice.
Turn test headlines that focus on benefits vs. feature headlines off and on, we have data that benefit headlines lead the way, on average, by 31% in conversions.
Choosing the perfect tools can significantly speed up the production and optimization process of hero sections. According to our Arfadia's testing here, following are some of the basic tools that every digital marketer should explore using.
For design and prototyping, Figma is actually our top pick here thanks to its collaborative functionality and large library of templates. The free tier is likely sufficient for most purposes, the professional plan for $12/month adds advanced features. Adobe XD with it's CC integration is capable of some of the same things.
Optimization requires A/B testing capabilities as table stakes. VWO's visual editor provides non-technical marketers with easy access to testing, starting at $199 per month. Optimizely's enterprise capabilities are conducive to enterprise clients, and Google Optimize offers basic tests for free.
Performance tracking keeps hero sections snappy and efficient. Both Google's free Lighthouse tool and the pay for GTmetrix offer detailed audits and the latter even provides historical tracking and alerts. For actual performance data, there's nothing better than Google PageSpeed Insights, which reflects how real users experience your hero unit.
Stock assets can augment custom photography, especially when budgets are tight. Options like Unplash and Pexels can supply you with high quality free imagery, but we'd recommend paid-for platforms such as Shutterstock or Adobe Stock if you want photos that are truly unique and professional, and don't turn up elsewhere.
But with the early years of the decade coming we cannot wait to see what hero sections have in store for us next with new technological advances and user demands. Personalisation driven by AI is already starting to individualise hero content according to visitor behaviour and appetite. We're testing out dynamic hero sections that change in real-time and display different messages to returning visitors or that are customized according to traffic sources.
Augmented reality (AR) implementation is another battlefield, especially for e-commerce. Picture hero sections where visitors can visualize products in their own space or interact with 3D models directly. At this fledgling stage, this technology will change the way we consider first impressions.
We're also considering voice interface tuning. With voice search on the rise, hero sections have to work for users who cannot see them, leading to new methods for information architecture and accessibility.
The stats don't lie, a hero section that's been optimized drives 25-55% more conversions, helps to lower bounce rates, and makes a lasting first impression that sways visitors into being customers. Whether starting anew or simply tweaking what you have, the ideas above offer a blueprint for success.
Begin by auditing your existing hero section based on the best practices we've shared. Do people quickly know what you do? Is your call to action clear and with action oriented language? Is your hero image ready for the 57%+ of visitors that are coming on mobile?
At Arfadia, we have worked with hundreds of businesses to turn their hero section from a barrier into a driver of conversion. Good to great is where rigorous testing, relentless optimization, and an intimate knowledge of what your specific audience craves are what set you apart.
Keep in mind, your hero section is more than a design element, it's your digital first impression, your elevator pitch, and your main conversion tool, all in one. Make it count.
We use cookies to ensure the website runs optimally and to help us understand how you use our services. You can choose which categories to allow. Read our Privacy Policy.
Required for basic website functionality. Cannot be disabled.
Help us understand how visitors interact with the website. Data used anonymously.
Used to display relevant ads and measure campaign effectiveness.
Enables live chat, social media integrations, and language preferences.
