A good website homepage considers every type of visitor at once. A landing page is different; it drives one specific action from one target audience. Using them correctly requires strategy and finesse.
āSome brands and businesses will use a landing page to show everything that they have, and thatās really not the best use of this type of page,ā says Jaz Fenton, who cofounded full-stack web design agency Otherhalf Studio alongside Jamil Bhuya.
A well-designed landing page focuses on one conversion goal.
āItās also a great way to test other audiences that you might not want to test on your website,ā Jaz says.
Below, read Jaz and Jamilās advice for building high-converting landing pages. Youāll also find a selection of landing page examples, curated by Jaz and Jamil, for design inspiration.
What is a landing page?
A landing page is a web page built around a singular goal, such as encouraging customers to buy a particular product or sign up for an email newsletter. Customers arrive at landing pages from various customer touchpoints, such as digital ad campaigns, email blasts, and organic social media posts. These pages are often linked to particular campaigns or promotions for specific target audiences.
What makes a landing page effective?
- A clear, focused offer
- Immediate trust signals
- Selling the outcome, not the product
- Integrated social proof
- Multimedia product content
- A sticky CTA
Jaz Fenton and Jamil Bhuya of Otherhalf Studio have worked on branding projects and website builds for companies including Junkless, Kiyoko, and Elavi. Hereās what they say to include in an effective landing page:
A clear, focused offer
āA key thing for all landing pages is having a very, very clear offerāsomething that is really focused,ā says Jaz. That offer could be a value proposition or a purchase incentive, like a discount or a free trial.
Once youāve determined your offer, make sure every element on the page supports it. āThat offer, or that outcome, promise, or statistic, needs to constantly be reinforced throughout the landing page in various ways,ā says Jaz.
āThe page should be driving one specific thing and not trying to do too much at once.ā This avoids overwhelming visitors and keeps them focused.
Consider if your own landing page offer is unclear or obvious:
| Unclear offer | Why it doesnāt work | Clear offer |
|
āBrowse our lip productsā |
Too passive; doesnāt point the visitor toward a decision |
āTry our bestselling lip starter kit for $21ā |
|
āLearn more about usā |
Centers the brand instead of the value to the visitor |
āSee how 6,000 teams cut meeting times in halfā |
|
āSign up for updatesā |
No clear reason to hand over an email address |
āGet a free 7-day meal plan delivered to your inboxā |
|
āCheck out whatās newā |
Broad and undirected |
āPre-order the summer collection before it sells outā |
Immediate trust signals
āBrand is the key thing that signals trust super, super quickly when you land on a website,ā says Jaz. āWe really want to make sure that when you first land above the fold, that impact is there.ā
Elements of your brand include your logo, typography, photography style, and color palette. Display these throughout your entire page to immediately convey your brandās visual identity to customers.
Selling the outcome, not the product
āThe consumer doesnāt always care about the product,ā says Jamil. āThey care about the outcome, or the community, or the feeling that said product will give them.ā
This is known as value-based selling or outcome-based selling. Rather than writing landing page copy about product features, consider writing lines focused on outcomes, feelings, and solutions. Do this by touching on desires and empathizing with customer pain points.
āOne of the things we really try to address, especially when working with a lot of founder-led brands, is that they can get a little too product-oriented,ā says Jamil. āWe really try to bring it back to the consumer and their end goals.ā
Here are a few examples of how this might look:
| Product | Selling the product | Selling the outcome |
|
Productivity software |
āAI-powered task managementā |
"Your workday, wrapped an hour earlier" |
|
Electrolytes |
āSugar-free magnesium and potassium mixā |
āSalts to sustain you for the last five milesā |
|
Baby sling |
āAdjustable ergonomic baby carrierā |
āYour baby close, your hands freeā |
Pair outcome-driven copy with imagery, such as Instagram embeds, GIFs, and videos, that show the end result, like a person using the product in their daily life.
Integrated social proof
Social proof shows prospective customers that people already love your products. Consider these different types for your next landing page:
- Video testimonials from actual customers
- Press logos and earned media mentions
- User-generated content from social media
- Case studies with measurable results
- Customer reviews and star ratings
āReal reviews are probably the most important,ā says Jaz. Place your strongest customer reviews at the top of your landing page. Jaz shares a few tips for sourcing good ones: āThe biggest one is you want to make sure that the review is focusing on some kind of result and outcome.ā
If you have a high review count, you can also surface your star rating and number of reviews (like ā4.9 stars from 2,300+ reviewsā) as a trust signal above the fold. Depending on your industry, before-and-after images can also work.
āSkincare would be one where results can be very important, so showing real before and afters,ā says Jaz. For B2B or software products, outcome-oriented case studies with named companies can also serve as social proof.
Other types of social proof, like press mentions, can appear lower down the page. āWe do see a lot of brands pushing press higher up on the fold, but we think it has its place maybe at the end of the page, just to solidify,ā Jaz says.
Multimedia product content
āShowing the product in action, really trying to focus on more media-rich video content versus just static assets, is really important,ā says Jaz. Mixing formats throughout the page gives visitors multiple ways to evaluate what youāre selling. Video lets you communicate texture, scale, and context.
A sticky CTA
Your primary call to action (CTA) should follow the visitor as they scroll. Keep the CTA button copy consistent across the page so every instance drives to the same destination.
āA sticky CTA that reinforces that offer and gets the visitor to be able to add to cart or sign up at any point on the pageāitās something that we always recommend,ā says Jaz.
In web design, a āstickyā element, like a sidebar table of contents, a button, or a top of the page navigation map, means one that stays in place regardless of how far you scroll down the page.
6 best landing page examples
Jaz and Jamil recommend the following sites as landing page inspiration. Each illustrates the principles above in practice:
1. Liquid+
Liquid+ sells a fiber and gut health supplement called Liquid Salad. Otherhalf built this landing page as a one-page website. Instead of traditional navigation that links away to new pages, the navigation, or nav bar, links to sections further down the same page.
Source: Liquid+
Jazās favorite aspects of the landing page:
- Clear and non-competing offers: āVery clear offer. We have two: the free shipping, and then the 42% off your first order.ā
- Smart navigation: āBecause it was a one-pager and itās super long, we thought, āWhy not use that top navigation to just anchor people down to different sections?ā It feels like a website, but itās bringing you down throughout the page, which just makes it easier to jump around.ā
- A hero section that does it all: āWe have motion, we have people enjoying the product, all in one, so you really get an idea of whatās being sold right away.ā
- Comparison chart for customers: ā[It] compares liquid salad to other things that you would normally try and get your veggies and fiber from.ā
2. Armra
Armra sells health supplements made with colostrum, the first milk cows produce after giving birth. Armraās landing page design strips away navigation and has a sticky floating header bar at the top of the page.
It also presents a featured customer review in the hero section alongside lifestyle and product photography and includes educational copy. Press mentions sit further down for credibility, and a small upsell section introduces complementary products without pulling focus.
Jazās favorite aspects of the landing page:
- Customer review at the top: āWhat I really like about it is they have that featured review in the hero.ā
- Clear offer: āThe sticky bar, which I think is important, would follow you throughout.ā
- Education ahead of the sale: āWhat I like about this is itās really educating you before you get to the shopping module. You can add to cart at any time, but youāre still being educated. You can really absorb how this worksāespecially with something like colostrum, where a lot of people wonāt necessarily know how it works.ā
3. HexClad
HexClad makes cookware that combines stainless steel and nonstick technology. Their landing page has a streamlined nav bar. Instead of functioning as megamenus, the nav bar links bring customers straight to other areas of the website. The new areas have full navigation bars leading to other pages of the site.
The hero image section leads with social proof: five stars next to the line, āMore Than a Million Home Chefs Love HexClad.ā Below that, six reasons explain why HexClad outperforms traditional cookware. This is followed by a celebrity endorsement from Gordon Ramsay and other video reviews, i.e., more social proof.
Jazās favorite aspects of the landing page:
- Mini-site format: āItās kind of like a mini-site, because if youāll see in the top nav, they do have some other places you can jump off to, but itās a condensed version, a very condensed version from their full site.ā
- Social proof to start: āāMore than a million chefs,ā thatās huge, so you want to have that top and center.ā
4. Dia
Dia is an AI-powered browser that aids users in searching the internet and synthesizing data from multiple sources. They have a dedicated landing page for students focused on activities like researching, writing papers, studying, and job searching. The landing page prompts visitors to download the browser.
Jazās favorite aspects of the landing page:
- Pain pointāfocused headline: āItās really leading with something that is more of an emotional pull. By having a headline thatās saying something like, āYou donāt have to do it all alone,ā itās pulling at something that I might be struggling with, and then itās giving me the solution in the body copy.ā
- Minimal copy: āA great landing page is really designed for people who are skimming, so you donāt want to have too much content. I think less is more with a great landing page.ā
- Message match: āYou really need to ensure that the message thatās on the page is matching whatever sent you there. If you break that continuity, it can give this feeling of mistrust.ā
Itās important for the landing page to match the intent of the search or the paid advertising message. If an ad, for example, suggests your PPC landing page will answer their query but it doesnāt or feels like a mismatch, it can cause visitors to leave, or ābounce.ā
Bounce rates are one of the landing page statistics that helps marketers determine whether their copy resonates with visitors. Misaligned messaging may also lower your quality score from Google, which impacts your Google ad placement and costs.
5. Substack
Substack is known as a platform for writers and newsletters, but this landing page copy and design are specifically designed to draw attention to the platformās podcasting features. The headline makes that clear: āYour podcast. Bigger and better.ā
A brief description and a single CTA button sit above the fold with nothing else competing for attention. Below, a customer testimonial reinforces the value proposition before the page moves into the benefits of hosting a podcast on Substack.
The page includes logos and profiles of popular podcasters already on the platform, letting visitors picture themselves among that group. There are also two more customer testimonials down the page.
Jazās favorite aspects of the landing page:
- Clear headline: āGreat headline here. āYour podcast, Bigger and Better,ā makes it really clear what Substack is and why itās different from other podcast providers.ā
- Social proof through reviews: āSurfacing social proof so that you can imagine yourself as one of these podcasters, and to see all of the clout behind here.ā
- Consistent CTAs: āOn the landing page, we always want the CTAs throughout to go to the exact same place, so that youāre not being kicked off to different sections of the website.ā
6. Clay
Clay is a data enrichment and outreach platform typically associated with sales teams. This landing page targets marketing teams instead. A dropdown in the hero section lets visitors toggle between content for different roles. The social proof reads, āTrusted by the worldās best marketing teams,ā alongside the logos of major tech companies.
Jazās favorite aspects of the landing page:
- Using color for emphasis: āThe different colored copy really makes this part stand out: āEvery campaign more efficient.ā Your eye really is drawn to it.ā
- Dynamic social proof through logos: āIf you hover over each of them, itās not just a logo: Thereās also a review that you can see.ā
- Use of GIFs: āI always love video assets or GIFs to really show things in motion. It shows what I can expect. You can just see so much more content through this medium.ā
Read more
- The Best Shopify Ecommerce Themes for Your Online Store
- AliExpress Dropshipping- How to Dropship From AliExpress
- The 5-Step Marketing Strategy to Grow Your Business
- What is Meta Description and How to Write One (+examples)
- How To Get a Business License in 3 Simple Steps
- 25+ Ideas for Online Businesses To Start Now (2024)
- Product Pages: 16 Beautiful Product Landing Page Examples (2024)
- Marketing Funnels Explained- Why They Matter & How to Build Yours
- 5 Free Advertising Strategies True Rivalry Uses to Gain Exposure
- Etsy Dropshipping: The Definitive Guide
Landing page examples FAQ
What is the difference between a website and a landing page?
A landing page is different from a website because itās a single page nested within a website built around one conversion goal. Your website is the full collection of pages that appear in your sitemap.
How do I create a landing page?
Start by defining your landing page goal. From there, ecommerce store owners can build landing pages directly in Shopify using built-in templates to create individual landing pages that match the rest of their sites.
What should a landing page include?
A landing page should include a clear offer, trust signals above the fold, copy that sells the outcome rather than the product, social proof like reviews or case studies, rich media, and a sticky CTA that remains visible to visitors as they scroll.
What are some common landing page mistakes?
According to design agency Otherhalf, common mistakes on landing pages include focusing on product features rather than outcome, and failing to include customer reviews high up on the page.
