SaaS homepage design: a section-by-section structure for B2B companies.

What does a B2B SaaS homepage need to do for its target audience?

Three jobs: explain, prove, and route. Nielsen Norman Group (NN/g) tells teams to treat the homepage as an elevator pitch to prospective customers, and to include a tagline that explicitly conveys what the company does unless the company name already makes that clear. Three of its five homepage principles shape the sections below: communicate who you are and what you do, reveal content through examples, and prompt actions and navigation.

Routing matters because the visitor is rarely alone. Forrester's 2026 State of Business Buying says the typical buying decision now includes 13 internal stakeholders and nine external influencers. For most SaaS companies selling to businesses, the audience is a group, not one buyer. Gartner's 2026 press releases, based on a survey of about 645 B2B buyers in August and September 2025, report that 67% prefer a rep-free experience and 70% prefer a completely digital, self-service one, that buyers used an average of seven information sources in a recent purchase, and that 69% prefer to validate AI-generated insights with sales reps. Forrester's survey of nearly 18,000 business buyers adds that 94% report using AI during the buying process.

The homepage is where a champion, a security reviewer, and a finance lead each need to find their next page, and where potential customers decide whether to keep reading. If your buyers are small business owners who decide alone, a free trial and a short sign up path can do most of that work. If they are a committee, the page has to route by role.

What sections should a SaaS homepage have, and in what order?

Put the essentials in the first two screens. Users spend most of their attention there: in NN/g's 2018 eye-tracking study, they spent about 57% of their page-viewing time above the fold and 74% in the first two screenfuls. Our guide to B2B SaaS website pages covers the pages around the homepage; the table below covers the homepage itself, in the order a buyer's questions arrive: what is this, do others like me use it, what does it do, is it for my role, does it fit our stack and pass security, what does it cost, and what do I do next.

Sections 1 to 3 usually sit in the first two screens, where most attention goes. Sections 5 to 9 exist for the rest of the buying committee and can be short, as long as each links to a full page. Skip or merge sections the product doesn't need: a self-serve product with one audience can fold section 5 into section 4, and a product with no integrations needs no section 7. Optional homepage features, such as a short how-it-works strip, a FAQ that answers the objections your sales calls raise, or a changelog strip that shows new features, earn a place only if they answer a question buyers ask. Keep the top nav short and user friendly: Product, Solutions, Pricing, Resources, Company, and one button. Make the footer well organized, with link groups for product, solutions, resources, company, and legal, because it serves everyone the main sections don't, such as job seekers.

Lead each block with the outcome, then the feature that produces it. Benefits persuade first; technical details belong on product pages, which the homepage links to. Plan for three owners: product marketers for the message and the proof, product designers for the UX design and layout, and developers for speed and markup. In SaaS website design, the homepage has to hold the rest of the site together, so settle its section order and its words early in the design process, because changing a headline costs less than redoing a layout.

How do you write the hero section, value proposition, and primary CTA?

Say what the product does in plain words, then say exactly what the button does. The hero section is the first block of the page: a headline, a one-line subhead, and one or two calls to action. Keep its word count low and move everything else further down.

• Headline. NN/g says to include a tagline that explicitly conveys what your site or company does, unless the company name already does. SaaS products are often complex, so the headline has to simplify: if a visitor can't repeat it to a colleague, rewrite it. Treat it as marketing copy a buyer could say out loud, not a slogan.

• Subhead. Name the buyer and the outcome in one sentence. Together, the headline and the subhead are your value proposition: who the product is for, what it does, and why it matters to the target audience.

• Primary CTA. NN/g's article on the label says Get Started is ambiguous and can apply to almost any goal a user might have, and it advises stating precisely what users should expect. 'Book a demo' and 'Start free trial' set expectations; 'Get started' doesn't. In the six homepages below, hero buttons range from Get started (Stripe) to Get Notion free and Request a demo (Notion). Keep one primary CTA, make it a clear CTA with a verb and an outcome, and repeat the same one in the final section; it is the action that turns visitors into new customers.

• Secondary CTA. Offer the other path: a product tour for self-serve buyers, or pricing for buyers who want a number first. Forrester's survey found that more than 60% of business buyers report purchasing some form of trial, so a free option next to a demo request fits how many buyers already evaluate software. Notion, HubSpot, and Datadog each pair a free option with a demo or a look at the platform in the hero.

• Title tag. Google advises writing descriptive and concise title text, says to avoid vague descriptors like Home for your home page, and calls the home page title a reasonable place for some additional information about the site.

Keep the area around the hero uncluttered. A promo banner or limited time offer above the hero pushes the headline down, and promotions below it push the product down: Vanta's page opens with a promo banner ahead of the hero, and Datadog places event and ebook promotions between its logo bar and its product tiles.

How should social proof, customer logos, and the key features of SaaS products appear on the page?

Social proof is evidence that other buyers chose you: customer logos, customer testimonials, case studies, and review badges. Forrester's 2026 buying research says buyers are far less forgiving of claims without proof, so put a metric next to every claim and link to the case study behind it. Treat logos, testimonials, and certifications as trust signals that have to be specific and checkable: a named person and company, a date, and a number with its source.

Choose logos for relevance, not count. Show names buyers recognize, ideally industry leaders in the segment you sell to, and use the same wording for customer or client logos everywhere on the page. The six successful SaaS websites we read all show logos in the first two blocks: five directly after the hero, and HubSpot under a short 'What is HubSpot?' introduction.

Under the proof, explain what the software does. Pick the three or four main features buyers compare and give each its own block: outcome first, then the feature, then an example, with a link to the product page. Linear, a project management tool for product teams, gives each capability its own feature section: intake and integrations, planning and monitoring, AI and automations, and build, review, and ship. Show the product with real product screenshots or a short demo, not an illustration, and leave product details such as every setting for the product pages.

Visual design choices such as a dark theme or ample white space are brand decisions, but contrast is not optional: WCAG success criterion 1.4.3 (Level AA) asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. White space also helps scanning. NN/g's reading research advises starting headings and subheadings with the words that carry the most information, so that if users see only the first two words, they should still get the gist of the section. A clear visual hierarchy, with the headline largest, then the subhead, then the buttons, lets a buyer scan the page in seconds.

What do homepages from six real SaaS companies show?

We read the text of six well-known B2B SaaS homepages on October 19, 2026: Stripe, Linear, Notion, Datadog, HubSpot, and Vanta. They are real examples, not mockups, but the reading covers text, not images, and big homepages change often, so treat the table as a dated snapshot of design examples, not a ranking.

Patterns worth noting:

• Logos come early, and pricing is in the navigation. All six SaaS sites show logos in the first two blocks, and all six list Pricing or Plans in the navigation (Vanta labels it Plans).

• Four of six put AI in the hero. Linear, Notion, Datadog, and HubSpot mention AI or agents there. Stripe brings it in a little lower, and Vanta mentions AI risk in a banner above the hero.

• Security is mostly a footer link. Only Datadog and Vanta have security or compliance sections in the body, and both describe security products they sell. At Linear, Notion, and HubSpot, Security appears only as a footer link.

• Segment sections are rare. Only Stripe and Vanta have body sections for named segments. The other four keep any segment or industry links in the navigation or footer.

Use them as examples, not templates. The six differ because their buyers differ: Vanta sells to the people who own security and compliance, and Linear sells to product teams. Start from your own buyers' questions: read sales call notes, run user interviews with recent customers, and list the objections that come up before a demo.

How do you serve every role on the buying committee, from the pricing page to security?

Give each role a visible next step, then let the full pages do the work.

• Pricing. Link the pricing page from the navigation and from a short pricing section near the bottom of the homepage. Show pricing plans or a starting price on the homepage only if you already publish them, and if you do, use a few pricing cards, one for each of your pricing tiers, that each link to the full comparison. The choice between publishing prices, showing a starting price, or explaining cost drivers is covered in our post on SaaS pricing page decisions. If the product has a free trial, say so in the hero and on the plan that includes it, and keep the sign up path short.

• Integrations and security. IT teams check fit before anything else, so show the main integrations and link to the directory, and list certifications with dates and a link to the trust page. Our post on what B2B software buyers need from your website covers pricing, security, integrations, and proof page by page.

• Claims that can be checked. Forrester reports that AI tools can create mistrust by delivering incomplete or unreliable information, and Gartner found that 69% of buyers prefer to validate AI-generated insights with sales reps. Write each claim in plain text that a buyer or an AI tool can read, and make a claim such as 'used by 4,000 security teams' link to the page that backs it up.

• Who the page is for. If you sell to small businesses whose owners decide alone, the routing can be light: a free trial, a price, and a sign up button. If you sell to a committee, add the role paths from section 5, since Forrester counts 13 internal stakeholders in a typical decision. Each block should answer questions that role asks before a demo.

How is a SaaS homepage different from a SaaS landing page?

A SaaS homepage serves everyone who arrives without a specific reason: buyers, potential users, job seekers, partners, and press. A SaaS landing page is built for one audience and one action, usually for a campaign, so it can make one point and repeat one call to action. The structure in this guide is for the homepage. A landing page usually keeps only the hero, the proof, and a single CTA, and drops the paths by role and most of the navigation.

Send paid or email traffic to the landing page that matches the ad or message, and keep the homepage for visitors who arrive on their own. A landing page that repeats a commercial page can compete with it in search, so point it to the main page with a canonical link or keep it out of the index unless it targets a query of its own.

Which technical details make or break a homepage?

The hero image, motion, structure, markup, and mobile behavior.

1. Load the hero fast. Google's Core Web Vitals treat a Largest Contentful Paint of 2.5 seconds or less as good, measured at the 75th percentile of page loads. If the hero image is the largest element on the page, it is your LCP element. web.dev's advice for an image that is likely to be the LCP element is to never lazy-load it, to set fetchpriority="high" on it, and to make sure it is discoverable in the initial HTML, not only referenced from CSS or JavaScript. Use high priority on only one or two images, or it stops helping.

1. Don't auto-rotate. NN/g wrote in 2013 that moving UI elements usually reduce accessibility, and in one example, a Siemens carousel, a discount offer was visible only 20% of the time. WCAG 2.2 success criterion 2.2.2 (Level A) requires a way to pause, stop, or hide moving content that starts automatically, lasts more than five seconds, and is presented in parallel with other content. Two of the six homepages above rotate hero content, Vanta's headline and HubSpot's video slides, so test any rotating hero against that criterion if you copy the pattern. Our Webflow accessibility checklist covers the WCAG 2.2 AA checks, and our post on the European Accessibility Act covers whether the law applies to your SaaS marketing site.

1. Use page regions. The W3C says to use the HTML5 main element to identify the main content region and to label each navigation menu when a page has more than one. Add a skip link at the top of the page that goes directly to the main content; WCAG's bypass blocks criterion (2.4.1, Level A) lists it as a sufficient technique.

1. Write real headings. WCAG 2.4.6 (Level AA) asks that headings and labels describe topic or purpose. Clear headings also help machines: Microsoft says assistants such as Copilot parse content into smaller, structured pieces and use headings to see where one idea ends and another begins, and it advises against hiding important answers in tabs or expandable menus.

1. Add entity markup. Schema markup, also called structured data, is a standard format for describing a page's content to search engines. Google says Organization structured data can help it understand your organization's administrative details and disambiguate your organization in search results; it goes on your home page or on a single page that describes the organization, and no properties are required. For your site name in Google Search, WebSite structured data must be on the home page. Markup has to match what is visible on the page.

1. Check it on a phone. Google uses the mobile version of a site's content for indexing and ranking, and it recommends responsive design, which serves the same HTML on the same URL on every device. Test the hero, the top nav, and the calls to action on mobile devices after every change.

For AI answers, Google says there are no additional requirements to appear in AI Overviews or AI Mode and no special optimizations needed: a page must be indexed and eligible to be shown in Google Search with a snippet. Answer engine optimization (AEO) is the practice of making a page easy for AI answers to find, read, and cite; for a homepage, that means the basics above: plain text claims, clear headings, and markup that matches the page. Our SaaS technical SEO post covers the wider audit.

Which homepage statistics can you trust?

Design guides quote precise conversion numbers. One widely read SaaS design guide, published in April 2026 and listed in the sources, quotes six that bear on a homepage. Each is credited to a research firm or study, none links to it, and the page has no sources section. We checked what we could on October 19, 2026.

The Portent figure is the only one of the six that we could tie to data, and it is observational: just over 100 million page views across 20 sites, 14 of them B2B lead generation, in a 30-day snapshot. The article does not say which load metric it used, so read it as a direction, not a promise.

The better move is to test on your own site. Conversion rate optimization (CRO) is the work of improving how well a page turns visitors into the action you want, and it starts with your own data. A/B testing needs enough traffic to detect a difference; if your site is below that level, review the page against research like this guide and track performance metrics such as demo requests, clicks to pricing, and free trial sign ups before and after each change. Our post on running a CRO audit on a B2B SaaS site below testing traffic shows how. The number to track is your own rate of converting visitors into demo requests or sign ups, not a rate borrowed from another site.

How does the benormedia.com homepage compare with this structure?

We build B2B SaaS websites, so here is our own homepage against the table, read on October 19, 2026. The headline is "We turn your website into a revenue engine built to scale.", the subhead says we create high-converting and AEO optimized websites that anyone on your team can update, maintain, and scale, and the buttons are Get in Touch and See Our Work. A "Trusted by +100 B2B companies:" logo strip sits directly under the hero, and the strip repeats further down. Then come case studies with client quotes, three service cards, a work section, a technologies section, and a final call to action with Get in Touch and See Pricing, followed by a contact form. The top nav has a Services menu with three pages, plus Work, Pricing, Blog, and Get in Touch.

Against the eleven sections, the page covers the hero, the logo bar, proof, a services overview in place of a product overview, pricing links, and a final call to action. It has no section for paths by role or segment: the Solutions pages for B2B SaaS web design, cybersecurity web design, and Webflow enterprise agency are linked from the footer instead, and the page has no dedicated security section. A company that sells a product, not a service, would fill those gaps on the homepage itself.

We design and build B2B SaaS websites, including homepages, so we have an interest in this topic. For how we approach the whole site, see our B2B SaaS web design page.

Questions about SaaS homepage design