The hero headline should clearly communicate the value, result, or transformation that you’re promising with what you offer​

---

How to write an EFFECTIVE hero headline

A well written Hero headline:

• Effectively communicates a compelling value, result, or transformation promised by the business. It clearly states what the visitor will gain or experience.​
• Is clear, specific, and engaging, immediately drawing the visitor’s attention and making them want to learn more or take action.
• Is tailored to the business’s core offerings and the audience’s needs.​​
• Is Action-Oriented. It often includes a sense of action or transformation, making it dynamic and appealing.​

---

Needs Improvement Headline

Hero Headline “Experience is not Expensive, It’s Priceless”

• ​The headline is somewhat abstract and does not clearly convey the specific benefits of the remodeling and renovation services.
• It focuses on the concept of experience rather than directly addressing the advantages of the services offered. ​​​
• This makes it more philosophical than actionable, lacking a direct connection to home renovation and the value it provides.​​​

---

Average Headline

Hero Headline “Expert Remodeling and Renovation”​

• Headline contains a clear value proposition, as it suggests expertise but doesn’t articulate the unique benefits or results.​
• ​Low emotional engagement, “expert” is expected rather than inspiring.​​
• No mention of cost or any other unique advantages.​​​
• ​Specific to remodeling and renovation but lacks detail on what sets it apart.​​​​
• ​​The message is nice and concise but it could improve in order to differentiate or engage effectively.​

---

Excellent Headline

Hero Headline “Elevate You Living Space with Affordable Renovations”​

• This headline has a clear value proposition. It clearly states the benefit (“Elevate Your Living Space”) and the service offered (“Affordable Renovations”).​
• “Elevate” adds an emotional dimension, suggesting a significant improvement to the living space.
• ​​Emphasizes affordability, which can attract budget-conscious customers.​​​
• The message is straightforward and easy to understand at a glance, enhancing immediate comprehension.​​​

​

---

Needs Improvement Headline

Hero Headline “You Scrub – Our Tub”

• The headline is catchy but fails to communicate the full range of grooming services and the eco-friendly approach. ​
• ​The headline is catchy but fails to communicate the full range of grooming services and the eco-friendly approach. ​
•  It is concise but too simplistic, needing improvement to better reflect the unique features and comprehensive services.​​​

---

Excellent Headline

Hero Headline “Experience Premium Pet Grooming by the Beach”

 

• Clear Value Proposition: Highlights high-quality grooming services and a unique beachside location.​
• ​Engaging: Uses “Experience” and “Premium” to create anticipation and emphasize quality.​​
• ​Engaging: Uses “Experience” and “Premium” to create anticipation and emphasize quality.​​
• ​Concise: Delivers a clear message without being wordy.​​​​
• ​​Emotional Appeal: Evokes positive imagery and relaxation, enhancing the appeal to pet owners.​​​​

---

Needs Improvement Headline

Hero Headline “Voted Philadelphia’s Top Dentist 5 Years Running”

 

• This headline focuses on the dentist’s accomplishments rather than addressing the patient’s needs. ​
• ​While it builds credibility, it doesn’t immediately communicate the benefits or solutions that the practice offers to potential patients. ​​
• ​Customers visiting a dental website are likely looking for reassurance that their specific dental issues will be taken care of effectively and comfortably​​

---

Excellent Headline

Hero Headline “Modern Dentistry with a Smile”

 

• Directly speaks to the experience patients can expect. ​
• ​It reassures them that the practice uses up-to-date techniques and technology, which is a significant concern for many who seek the latest and most effective dental care.​​
• ​The word “smile” is powerful. It not only refers to the dental service provided but also evokes a sense of friendliness, warmth, and positivity. This helps to create an emotional connection with the audience, making the practice seem approachable and caring.​​​

The Hero Sub headline supports the headline by clearly explaining how you get them the result.​

• ​Headline: “We’ll get you this result”​
• ​Sub Headline: “This is how.”

Creating an Effective Hero Subheadline

• Clearly and directly explains how the result or benefit mentioned in the headline will be achieved.​
• ​Directly related to the headline, providing additional context or detail about the process or service​
• ​Brief and to the point, avoiding lengthy explanations.​​
• Engaging and encourage the reader to take the next step or learn more.​​
• Emphasize the value or benefit that the reader will gain from the service or product.​

---

• Give anyone who is ready to go a really clear, easy path forward to get started working with you by creating an effective hero CTA.​
• ​Must be prominent and bold so it’s obvious where they need to click next.​
• ​Must be worded so its actionable and specific.​

• Clearly communicates the action the user needs to take.​​
• Uses strong, actionable language that prompts the user to act.​
• ​Stands out visually with a contrasting color and prominent placement.​
• ​Creates a sense of urgency or exclusivity.​
• ​Directly related to the user’s needs or the content of the page.​​

The hero headline is the most critical piece of text in your hero section, and it needs to grab attention while clearly communicating your value. Here are the best practices for designing a compelling hero headline:

Font Style

Choose a legible font

Opt for a clear, modern font that aligns with your brand. Sans-serif fonts like ‘Montserrat’ or ‘Lato’ work well for tech or modern brands, while serif fonts like ‘Lora’ may fit a more classic or luxury brand.

Use bold for emphasis

The headline should be the most prominent piece of text, so use a bold font weight to make it stand out from the rest of the content.

---

Font Size

Large and attention-grabbing

The headline should be the largest text element in your hero section, typically between 48px to 72px on desktop and 24px to 36px on mobile. This ensures that it immediately catches the user’s eye.

Responsive scaling

Ensure the font size scales properly across devices. The headline should adjust to fit smaller screens without overwhelming the user experience.

---

Font Color

High contrast

Make sure the headline color contrasts sharply with the background image or color. Use white text on dark backgrounds or black text on light backgrounds for maximum legibility.

Brand colors

Incorporate your brand’s colors where possible, but prioritize readability over brand consistency.

---

Placement Relative to the Hero Image

Avoid busy parts of the image

Place the headline where it won’t compete with complex image elements. Use overlays or gradient backgrounds to make the headline stand out if necessary.

Follow the rule of thirds

Position the headline according to design principles like the rule of thirds, ensuring a balanced and harmonious layout.

---

Formatting

Line spacing

Ensure there’s adequate line spacing (1.2 to 1.5 line height) for readability, especially for multi-line headlines.

Text transformation

Avoid using all caps for long headlines as it reduces readability. Use capital letters sparingly for emphasis.

---

Alignment

Left or center alignment

Align the headline to the left for a more traditional layout or center for a modern, balanced look. Avoid right-aligned text, as it can feel off-balance.

Whitespace

Give your headline room to breathe. Avoid crowding it with other elements to maintain clarity.

Hero Subheadline Best Practices

The hero subheadline supports the headline by providing additional details about your product or service. It should enhance the message without overwhelming the user. Here are the key best practices for designing a strong subheadline:

---

Font Style

Complementary font

The subheadline should use a lighter or thinner version of the headline font or a complementary font family. This visual contrast helps distinguish the headline from the subheadline without breaking consistency.

Readable and professional

While the subheadline is typically smaller, it still needs to be easily readable. Avoid overly decorative fonts and focus on clarity.

---

Font Size

Smaller but still readable

The subheadline should be smaller than the headline—generally 18px to 36px on desktop and 16px to 24px on mobile. This keeps it visually secondary but important.

Responsive design

Ensure the subheadline remains legible and scales well on smaller devices without crowding the screen.

---

Font Color

Slight contrast from the headline

While the subheadline should be in the same color family as the headline, you can use a lighter or darker shade to create subtle visual hierarchy.

Ensure legibility

Like the headline, the subheadline should contrast with the background image to ensure it remains easy to read.

---

Placement Relative to the Hero Image

Position under the headline

The subheadline should be directly below the headline to create a natural reading flow. Make sure it is not placed over busy areas of the image or design elements.

Whitespace for readability

Provide enough space between the headline and subheadline to avoid clutter and maintain clarity.

---

Formatting

Use sentence case

It’s generally best to use sentence case (capitalize the first letter of the first word) for subheadlines, as this enhances readability.

Line spacing

Maintain sufficient line spacing, typically around 1.2 to 1.5, especially if the subheadline spans multiple lines. This improves readability and makes the text look more inviting

---

Alignment

Consistent with the headline

Align the subheadline in the same way as the headline—either left-aligned or center-aligned. This maintains balance and flow in the hero section.

Hierarchical placement

The subheadline should not overpower the headline. Keep its position and size subordinate but complementary.

The call-to-action (CTA) in the hero section is the element that drives user interaction. It should be eye-catching, action-oriented, and aligned with your business goals. Here are the best practices for designing an effective CTA in the hero section:

Font Style

Bold and readable

The CTA font should be bold and clear to ensure it stands out. Sans-serif fonts are a popular choice for their clean and modern look.

Consistency with other elements

Use a font style that matches or complements the headline and subheadline but adds enough distinction to draw attention.

---

Font Size

Readable but not overwhelming

The CTA font should be large enough to grab attention, typically between 16px to 20px. Ensure the text scales appropriately on smaller screens, so it remains easily tappable on mobile devices.

Button size matters

The CTA button should have enough padding (around 10px to 20px) to make it look clickable and inviting without being too large.

---

Font Color

Contrasting color

The CTA text should be in a color that contrasts with both the button color and the hero background. This ensures maximum readability and impact.

Action-oriented color scheme

Consider using bright, attention-grabbing colors (e.g., orange, red, or bright blue) for the CTA text and background, as long as they complement the overall design.

---

Placement

Position below the subheadline

The CTA should be placed immediately below the subheadline for a natural flow. This proximity encourages users to take the next step after reading the value proposition.

Prominent and obvious

Make sure the CTA is not buried or overshadowed by other elements. It should have a clear and distinct placement within the hero section.

---

Button Design

High contrast for visibility

The CTA button color should contrast sharply with the background of the hero image or section, ensuring it stands out. Bright, bold colors work well here.

One primary CTA

Stick to a single, clear CTA in the hero section. Multiple CTAs can dilute the focus and confuse users. If a secondary CTA is needed, use a more subtle design (e.g., outline button).

Rounded corners or sharp edges

Depending on your brand’s style, use rounded corners for a friendly, modern feel or sharp edges for a more professional look.

---

Hover Effects

Subtle hover interactions

Add a hover effect (like a color change or shadow) to indicate interactivity. Ensure the effect enhances usability without being distracting.

Consistent with the design

Ensure the hover effect matches the overall aesthetic of the hero section and the website.

---

Whitespace Around the CTA

Breathing room

Give the CTA enough space to stand out. Avoid cluttering the button with other elements, and make sure it has adequate whitespace around it for visual separation.

Visual Quality

The visual quality of your hero image is crucial for making a strong first impression. A high-quality image signals professionalism and can engage visitors effectively.

1. Choose High-Resolution Images

• Clarity: Use high-resolution images (at least 1920x1080px) to ensure crispness across all screen sizes.
• Proper scaling: Ensure the image scales well without distortion on mobile and desktop.

2. Color Quality and Corrections

• Natural colors: Keep colors vibrant but not oversaturated. Make slight edits to contrast or brightness as needed to enhance the image without losing authenticity.
• Brand alignment: The hero image’s colors should complement your website’s design and brand identity.

3. Use of Lighting

• Balanced lighting: Avoid harsh shadows or extreme highlights. Natural lighting generally looks more professional and clean.

4. Optimize for Performance

• Compression: Use tools like TinyPNG to reduce image file size without sacrificing visual quality.
• Responsive images: Serve optimized images for different devices to ensure fast loading times and maintain visual quality.

A high-quality hero image immediately boosts the visual appeal of your site and creates a positive, lasting impression.

---

Effectiveness

• The hero image is important to get right, as it’s the first visual impression a user will get on your site.  ​
• ​It’s important to choose an image that will emotionally connect with the most people. 

 

How to create an EFFECTIVE hero image

An effective hero image will contain the following:

• Emotional Connection: The image should evoke a positive emotional response and resonate with the target audience.​
• ​Relevance: Clearly aligns with the headline and subheadline, visually representing the value or benefit promised.​
• ​Quality: High-resolution and professionally taken, ensuring clarity and visual appeal.​
• ​Authenticity: Features genuine representations or relatable scenarios that reflect the actual experience or product.​
• ​Engagement: Engages users and draws them into the website, complementing the overall design and message.​

---

Common types of hero images include the following:

Most effective hero images however, are of happy customers or desired outcomes. ​

​That doesn’t mean it has to be a real customer of the business, or positive results from the actual service or product, it’s more like a representation of the happy after state that the customers are feeling or seeing. It should feel natural, and overall positive. ​

---

For Example, if you are in the service industry, just show that happy feeling in some kind of context, for example, if you fix computers….​

Other Examples

 Needs Improvement

While this image is relevant to the industry, features a genuine representation that reflects the actual experience of going to the dentist, ​and provides good contrast for the hero text, its not effective in evoking a positive emotional response and resonate with the target audience.

Needs Improvement 

This image does not feature a genuine representation or relatable scenario that reflect the actual experience of going to the dentist. It may be high quality, and compliment the overall design, it comes off as fake, and cheesy, and will not connect with the target audience.

 Excellent

​

• This image should evoke a positive emotional response and resonate with the target audience.​
• Clearly aligns with the headline and subheadline, visually representing the value or benefit promised.​
• High-resolution and professionally taken.
• Features genuine representation of the actual experience that will come with clean, healthy teeth.​
• ​Engages users and draws them into the website, complementing the overall design and message.​

---

Needs Improvement

This stock image, while relevant to purchasing a home, is not in any way authentic, and is less effective overall.

Excellent

This image better represents the positive emotion that comes from moving into a new home, that can be achieve by this particular home loan service.

---

Custom Design Elements

Customizing your hero image can improve visual cohesion and make it more unique, helping it stand out.

1. Custom Cropping and Focus

• Crop strategically: Highlight the most important parts of the image, such as a product or person. Avoid awkward cuts or disproportionate elements.
• Balance: Ensure the image fits seamlessly within the hero section without overpowering other elements.

2. Overlays and Gradients

• Text overlays: Apply a subtle dark or light overlay to improve text readability.
• Gradients: Use gradients to direct attention toward key content, such as the CTA.

3. Blurring Backgrounds

• Depth of field: Blur the background slightly to bring focus to the subject or text in the hero image.
• Text clarity: Blurred backgrounds can also make the text more readable without compromising visual appeal.

4. Shadows and Lighting Adjustments

• Subtle shadows: Add a light shadow behind the text or subject for emphasis without creating too much contrast.
• Lighting tweaks: Adjust the brightness or contrast of the image to fit your website’s overall aesthetic.

5. Consistency with Website Design

• Brand consistency: Ensure the colors and style of the image align with your brand’s visual language, creating a cohesive look.
• Complementary styles: Any custom elements, like borders or shadows, should blend seamlessly with your site design.

By applying these custom design tweaks, your hero image becomes more engaging, visually coherent, and aligned with your overall brand.