When someone lands on your website, they form an opinion almost immediately. They don’t take minutes of reading or careful comparison. Within a few seconds, they’re already deciding whether your business feels relevant, trustworthy, and worth exploring further.
That first screen, what we’ll call your introduction section, carries most of that responsibility.
The introduction section is made up of two parts:
- Your header (logo, navigation, key call-to-action)
- Your hero section (main headline, supporting message, image or video and primary action)
Together, they answer four silent questions every visitor has:
- Am I in the right place?
- What does this business actually do?
- Can I trust them?
- What should I do next?
If your introduction section gets these right, the rest of your website becomes easier. If it gets them wrong, even a beautiful site can underperform.
Let’s break down how to get both your header and hero section working properly, in clear, practical terms.
Part 1: Getting Your Header Right
Your header is the strip at the very top of your website. It usually includes your logo, navigation menu, and a call-to-action button.
It appears on every page which means small problems become big problems quickly.
1. Make Your Brand Instantly Recognisable
Your logo doesn’t need to be huge. It needs to be clear.
Visitors should be able to glance at the top left and know whose website they’re on. Avoid shrinking your logo so small that it’s unreadable, but also avoid making it dominate half the screen.
Clarity builds confidence.
2. Simplify Your Navigation (More Than You Think)
Most businesses overload their navigation.
They treat the menu like a storage cupboard for every page they’ve ever created. The result? Visitors hesitate instead of clicking.
Your navigation should guide people, not overwhelm them.
Use simple labels:
- Services
- About
- Pricing
- Our Work
- Blog
- Contact
Avoid vague menu titles like “Solutions” or “Capabilities” unless they’re extremely clear in your industry.
And remember: you don’t need 12 top-level items. Five or six is often plenty.
If someone has to think too hard about where to click, they’ll leave.
3. Include One Clear Call-To-Action
Your header should include one primary action.
Examples:
- Get a Quote
- Book a Consultation
- Request a Callback
- Call Now
Make it visible. Make it specific. Make it match how customers buy from you.
If you’re a high-consideration service (law firm, architecture, consulting), “Book a Consult” makes more sense than “Buy Now”.
If you’re an emergency plumbing company, “Call Now” should be obvious and tappable.
Your header should gently push people toward action without feeling aggressive.
4. Make Sure Your Designer Uses Mobile First Approach
Most people will see your website on their phone. That means your header needs to:
- Have an easy-to-tap menu icon
- Keep the logo compact
- Make the call-to-action accessible
- Avoid giant dropdowns that feel messy
Open your site on your phone and try using it one-handed. If it feels awkward, it needs improvement. Mobile friction kills conversions quietly.
5. Don’t Overload It With Badges and Noise
Trust matters but too many trust symbols can backfire.
- A phone number? Great.
- A subtle review rating? Helpful.
- “NZ Owned” or “20+ Years Experience”? Strong if true.
But stacking awards, certifications, icons, and banners in the header makes it feel cluttered and desperate.
Example of a clear website introduction section Sky Media created for Lily’s Choice — simple navigation, organised service dropdown, strong headline, and a visible “Book Now” call-to-action guiding users instantly.
Part 2: Getting Your Hero Section Right
Now let’s talk about the hero section — the large area directly beneath your header. This is where most websites either win or lose attention.
1. Replace “Welcome” With a Real Headline
“Welcome to our website.” This is one of the most cliché lines on the internet.
Your hero headline should clearly explain:
- What you do
- Who it’s for
- What result you provide
For example:
“Landscaping Design and Installation That Transforms Outdoor Spaces”
“Residential Heat Pump Installation in Wellington — Fast, Reliable Service”
No clever metaphors. No vague slogans. Just clarity. People shouldn’t have to decode your business.
2. Support the Headline With Context
Your subheading (the smaller text under the headline) should answer:
Why choose you?
This is where you mention experience, specialisation, speed, quality, or unique approach. Keep it short: two or three sentences at most.
Your hero section is not the place for a full company history.
3. Use One Strong Primary Button (or Primary and Secondary Buttons)
Your hero section should have a clear action.
Usually:
- Primary button: Get a Quote / Book Now
- Secondary button (optional): View Services / See Our Work
Make sure the primary button stands out visually.
If everything is the same colour and weight, nothing feels important.
4. Choose Images or Videos That Support — Not Distract
Hero images can elevate your brand or make it feel generic.
Avoid overused stock photos of:
- People high-fiving in boardrooms
- Handshakes against city skylines
- Abstract “success” visuals
Instead, use:
- Real photos of your team
- Real photos or videos of your completed projects
- Real photos of your products
- Real photos or videos of environments, like your office, your building site etc.
Authenticity builds trust faster than perfection.
Also, make sure your image or video doesn’t slow down the page. Large, unoptimised images or videos can hurt loading speed, especially on mobile.
A fast-loading website feels professional.
5. Keep It Visually Calm
A common mistake is trying to say everything at once.
Headline. Subheadline. Three badges. Two buttons. Background video. Animated text. Scrolling logos.
It’s too much.
Your hero section should feel focused. One clear message. One clear next step.
Whitespace is not empty space — it’s breathing room and the tool to guide visitors’ attention into the right place.
6. Make It Clear You’re a Real Business
Small credibility signals in the hero area can increase trust:
- Years in business
- Number of projects completed
- Google rating
- Short testimonial snippet
But again: subtlety wins. Trust is built through clarity, not clutter.
How Header and Hero Work Together
Think of your introduction section like this:
- Your header is the roadmap.
- Your hero is the explanation.
The header helps people move around. The hero helps them decide whether to stay.
If your header is clean but your hero is vague, visitors feel unsure.
If your hero is strong but your header is confusing, they struggle to navigate.
They must work together.
Example of a strong hero section Sky Media created for Visa Ease featuring clear value proposition, trust signals, and prominent call-to-action buttons guiding visitors to call or request an assessment immediately.
A Simple Self-Test
Open your homepage and ask:
- Can I tell what this business does in three seconds?
- Is the main action obvious?
- Is the navigation simple and easy to understand?
- Does it feel calm and confident — not busy and chaotic?
If any answer is “not really”, your introduction section needs refinement.
Would like a Website Audit?
If you’re not sure whether your header and hero section are helping or hurting your conversions, let’s take a look.
Send us your website link and we’ll provide a practical website audit with clear recommendations on what to improve, simplify, and optimise for better results.
