First impressions are 94% design-related. Which means, if a potential buyer’s first expertise together with your model happens on a complicated touchdown web page, they may not stick round. In reality, 48% of users name a enterprise’s web site design an important think about figuring out a model’s credibility—they usually could make that snap judgment inside a mere 50 milliseconds.
The reality is, even among the world’s largest manufacturers have ineffective touchdown web page design. It’s a standard downside—however you possibly can resolve it with a website design that’s knowledgeable by a deeper understanding of your target market.
Forward, be taught from specialists about how one can create higher landing page designs that convert prospects into prospects, full with 20 inspiring examples from manufacturers which might be nailing touchdown web page design.
What makes a touchdown web page efficient?
A touchdown web page sometimes follows the identical construction, however there are particular components that high-performing pages pay notably shut consideration to.
Above the fold content material
The fold is the house on a webpage that’s seen if you land on the web page and have not but scrolled down. The precise dimensions of what’ll present up above the fold varies based mostly on the system getting used (e.g., desktop browser, pill, cell phone) to go to that web page. That mentioned, usually, the realm above the fold could be measured as 600 pixels from the highest of a given browser window.
Not all your touchdown web page guests will scroll previous the fold of the web page on desktop or cellular gadgets. In reality, the vast majority of web site guests in all probability received’t scroll down in any respect. Prioritize capturing guests’ consideration together with your content material above the fold, however make certain your web page under the fold additionally flows logically.
Touchdown web page copy
Good touchdown web page copy consists of the phrases on the web page—together with product descriptions, calls to motion copy, headlines, and your meta title and outline. Use a daring, problem-focused headline to start out off your touchdown web page.
Think about the voice of the client when writing your touchdown web page copy. Mine evaluations and social media, and incorporate the phrases and phrases your viewers makes use of into your touchdown web page copy.
Bear in mind to tout advantages as a substitute of options. For instance, in case your touchdown web page is selling a water-proof cellphone case, speak about how individuals can take photos whereas swimming if you spotlight the IP waterproof score.
Lastly, compelling copy is written together with your brand voice in thoughts. Consistency is vital, even with regards to focused promotions and campaigns.
Imagery and shade scheme
Your touchdown web page design ought to account for colours and fonts, in addition to have house for well-placed imagery. Many individuals begin with their touchdown web page copy after which develop the visible property to make sure synergy between the 2. Bear in mind, imagery may embody illustrations and movies along with product photographs.
Buyer evaluations
One of many smallest, most impactful tweaks Ezra Firestone, founding father of Good Marketer and co-founder and CEO of BOOM! by Cindy Joseph, made to the purchase bins on his personal Shopify retailer was including customer testimonials on the prime of the field instead of the merchandise title.
Right here’s what that appears like:
Together with a quote up prime builds belief, doesn’t depart individuals trying to find evaluations, and lets your individual prospects converse for you. Simply ensure you select quotes that immediately converse to a profit or ache level every product solves.
Moreover, take into account together with a whole part dedicated to your buyer evaluations so customers can learn the views of actual individuals who have truly bought your merchandise. Ensure that to point out at the least just a few of the dangerous ones and center vary evaluations so others can get an entire understanding of what individuals love and what they don’t.
Name to motion
Each touchdown web page wants a call to action (CTA) to be efficient. Yours ought to drive customers to take the motion you need them to take. Relying in your touchdown web page, the CTA may say one thing like “Be taught extra,” “Purchase now,” or “Subscribe.” You may also embody pricing data right here, if related.
If you happen to’re questioning about CTA placement, that is dependent upon what your viewers wants, too. You’ll decide this based mostly on testing placement to see what drives a greater conversion price. Typically talking, you’ll wish to have a CTA above the fold in addition to all through the touchdown web page, relying on how lengthy the web page is.
20 touchdown web page design examples
- Brightland
- Olipop
- Path
- LUSH Cosmetics
- Netflix
- Grind
- Creatorpreneur Academy
- Jolie
- Ahrefs
- Tabs
- Peepers
- ConvertKit
- Jones Road Beauty
- BEAM Content
- Basecamp
- Maev
- Money with Katie
- Creator Wizard
- Descript
- Shopify POS
1. Brightland
Have you ever ever been featured in a information publication? That includes these logos in your touchdown pages with quotes from the articles is what Nik Sharma, CEO of Sharma Brands, calls a “brag bar.” These publications add credibility to your model, and mentioning them goes a great distance with customers searching for extra data.
Brightland, for instance, sells additional virgin olive oil from California. It’s gotten constructive reward from publications like The New York Instances and The Wall Avenue Journal, which it makes use of to its benefit in its touchdown web page design.
2. Olipop
Olipop sells more healthy sodas filled with plant-based substances and prebiotics to help a wholesome microbiome. The model makes use of benefit-driven copy to immediately deal with objections (“However how a lot sugar does the soda have?”) and place the drink as a craving treatment for avid soda drinkers searching for a strategy to give up.
You could possibly replicate different touchdown pages concepts corresponding to clear, daring textual content, in-depth product data (upon scrolling), stars with an precise evaluation rely for credibility, a small header that doesn’t dominate the web page, intuitive and easy-to-navigate format, and nice product photography.
3. Path
Path is a digital photograph modifying studio with a Shopify retailer. Its core choices are product photograph modifying companies. One of many channels it makes use of to market to and join with potential prospects is e-mail. Path has a devoted touchdown web page to drive e-mail e-newsletter sign-ups.
You may see the web page is clearly targeted on the purpose—driving subscriptions—and doesn’t provide a lot distraction to get in the way in which of that purpose. The web page isn’t readily accessible from the corporate’s web site, however it may drive focused campaigns selling e-newsletter sign-ups to this touchdown web page.
4. LUSH Cosmetics
Certifications go a great distance with customers, and a few received’t make a purchase order with out them. The Leaping Bunny, non-GMO, or licensed B Corp certifications are three examples. If you happen to’ve been licensed for something, put it in your touchdown web page.
LUSH Cosmetics takes this method with its touchdown web page design. On the backside of its “plastic free” page, prospects see the model’s core values—together with the actual fact its merchandise are 100% vegetarian, handmade, and never examined on animals.
5. Netflix
Netflix is thought to be a pioneer within the subscription trade. Boasting greater than 260 million paying subscribers in over 190 international locations, it is aware of a factor or two about designing touchdown pages that persuade individuals to subscribe.
Take the design of its gift card landing page, for instance. There are two easy calls to motion (whether or not you wish to purchase the cardboard by Netflix or on Amazon) and a small breakdown of how the present card works. It’s quick and candy, giving somebody all the knowledge a buyer must know earlier than shopping for.
6. Grind
Grind is a espresso model that sells by its on-line retailer and low homes. It has a touchdown web page the place it talks all about sustainability—one of many model’s core values and differentiators.
What’s particularly nice about this touchdown web page design is using visible components. There’s a scrolling bar simply above the fold, color-coded buttons that assist individuals navigate to the part they’re most occupied with, and catchy subtitles that replicate its goal market’s vocabulary—like “We take espresso critically.”
7. Creatorpreneur Academy
Digital merchandise could be high-ticket; individuals will want a number of data earlier than they decide to a bigger buy. Creator Ali Abdaal has designed the best touchdown web page for this—one which delivers need-to-know data in a manner that isn’t overwhelming to guests.
The very first thing somebody sees once they go to this touchdown web page is the headline: “Scale up your inventive side-hustle to the following degree.” It pulls on a problem and purpose that will resonate with the target market. If somebody prefers to be taught extra concerning the course with out studying textual content, they’ll click on the hyperlink to observe the YouTube video that explains it in additional element.
8. Jolie
The first purpose of a touchdown web page is to get somebody to finish an motion. Within the case of ecommerce, that’s not all the time to say your touchdown web page design ought to revolve across the options and advantages of no matter you’re promoting.
Take Jolie, for instance, a direct-to-consumer model that sells bathe filtration programs. It constructed a touchdown web page for its water report—a manner for individuals to see what chemical substances are of their water.
The web page talks concerning the risks of sure chemical substances and their influence on our pores and skin and hair. As soon as individuals know this data, the difficulty turns into extra pressing and urgent, making them extra prone to full the report by one of many e-mail signup types built-in into the touchdown web page design.
9. Ahrefs
You don’t want specialist design abilities to customise a high-converting touchdown web page. Take Ahrefs, for instance, an search engine marketing device that has touchdown pages for every of its key options and use instances.
The touchdown web page design for its key phrase analysis performance has small graphics that break up key factors into textual content blocks. There’s additionally a tiny Ahrefs brand within the line breaks—a wise strategy to reinforce model consistency and brand recognition with out inserting the total model.
10. Tabs
Tabs’ substances web page is a masterclass in how one can incorporate social proof into your touchdown web page design. It has a pink announcement bar, which stands out in opposition to the monochromatic design, to point out the way it affords a money-back assure, 1000’s of five-star evaluations, and greater than 200,000 completely happy prospects.
There’s additionally a five-star evaluation part beneath the primary CTA button, which reinforces that somebody is in good firm in the event that they store for their very own chocolate. This placement is strategic—it’s probably the very last thing somebody sees earlier than clicking the CTA button.
11. Peepers
The product description you may incorporate into your touchdown web page design is succinct copy that instantly will get throughout what your product truly is. You have got much more house down the web page to offer particulars that immediately deal with any objections that may block a buyer from finishing their buy.
Eyewear enterprise Peepers makes use of this tactic. Above the fold is a plethora of product pictures, and under you’ll discover particulars and an outline that lists all the advantages of selecting a Peepers lens.
12. ConvertKit
Though greatest observe is to stay to a small variety of complementary colours in your touchdown web page, ConvertKit demonstrates how you need to use hues and shades to get extra variance—with out deterring too far out of your model guides.
What’s nice about this touchdown web page design is using white house. As a substitute of leaving the part above the subheading clean, ConvertKit’s designer added handwritten notes to the customer. It’s a wise use of microcopy—and a bit of design inspiration—that may assist touchdown web page guests get a way of the model’s character.
13. Jones Highway Magnificence
Some magnificence manufacturers wrestle with returns when selling cosmetics online. Shades look totally different on a pc display than in actual life. Jones Road Beauty solves this downside with quizzes that assist individuals discover the suitable one.
The touchdown web page design for Jones Highway Magnificence’s quizzes is straightforward and direct. It goes in opposition to greatest observe to solely embody one CTA, but it surely does an incredible job of explaining the quizzes obtainable, how they’re used, and how one can take them. There’s even a small star score beneath the quiz subheading to bolster that the quiz does a superb job of fixing the difficulty of mismatched shades.
14. BEAM Content material
Very like your copy ought to be on model, so ought to imagery, fonts, and colours. Whilst you may need extra room for creativity with touchdown web page design, it’s nonetheless necessary to offer a synonymous model expertise throughout all touchpoints.
BEAM Content is a superb touchdown web page instance to attract inspiration from. The company makes use of a complicated shade palette with graphical components that match. The font selection is straightforward and stylish, utilizing hand-drawn fonts for microcopy that pulls consideration to necessary copy—like “model social,” the primary service providing on this touchdown web page.
15. Basecamp
Testimonials are a key a part of any touchdown web page design. One examine discovered that when a web page exhibits evaluations for an costly product, conversion charges can enhance by as much as 380%.
The issue with testimonials is which you could’t change what somebody mentioned. It’s dangerous observe to chop down another person’s phrases and attribute it to them. Basecamp, nonetheless, exhibits how one can spotlight the hardest-hitting elements of a testimonial to make it stand out.
16. Maev
Maev is a superb instance to attract touchdown web page inspiration from if it is advisable to current a number of data in a manner that’s simple on the attention.
As a substitute of merely itemizing the substances in its pet food, the retailer has used pictures. Individuals immediately acknowledge a blueberry or kale, serving to them to beat a standard ache level when shopping for pet meals on-line: visualizing precisely what their canine is consuming.
17. Cash with Katie
E-newsletter touchdown pages have one clear purpose: to get somebody to subscribe to your e-mail listing. Money with Katie, a e-newsletter beneath the Morning Brew model, has perfected it with out investing right into a full-length touchdown web page design.
Cash with Katie’s whole touchdown web page is simply what we see above the fold. There’s no have to scroll nor overwhelm the customer with an excessive amount of data. The headline guarantees precisely what they’ll get; the photograph exhibits them what they’re signing up for. The one factor they should do is full the subscription kind.
18. Creator Wizard
Justin Moore is a sponsorship coach that sells digital merchandise. Gifted to Paid is its premium on-line course that walks creators by how they’ll safe sponsorship offers and earn cash from their on-line content material.
Gifted to Paid touches on each of those objectives all through your complete touchdown web page. This part, particularly, offers the customer details about the course’s tutorial. It’s plenty of data to digest, so Justin made sensible design selections—like bolding necessary textual content and utilizing GIFs—to make it simpler to grasp.
19. Descript
Headlines demand extra space in your touchdown web page, making them an necessary factor to concentrate on when designing. On Descript’s touchdown web page, for instance, the headlines are sensible and subtly tackle the impediment somebody may need earlier than changing: How a lot does it price? And what’s actually included in a “free” plan?
With so many pricing variables, there’s additionally an interactive pricing calculator to assist individuals determine how a lot the video modifying software program prices. It’s rather more participating than static content material and helps the model personalize at scale.
20. Shopify POS
The Shopify designers who constructed the point of sale (POS) touchdown web page had the powerful activity of catering to 3 totally different CTAs:
- Beginning a free trial
- Speaking to gross sales groups
- Logging into an current Shopify POS account
Button colours make an enormous distinction right here. Excessive-contrast buttons (white textual content on a darkish background) stand out most in opposition to the impartial design, so this grew to become the choice for the popular and most necessary CTA: beginning a brand new trial.
Speaking to gross sales obtained the same-sized button field with the reverse colours. The third and least necessary is only a small snippet of linked textual content beneath every button.
7 touchdown web page design greatest practices
You’ve caught the eye of a possible buyer, and now you’ve just a few seconds to share what makes your model and your merchandise distinctive. It’s a fairly large ask to get that throughout in just a few phrases or pictures, and much more troublesome when a prospect has little context about your model.
Whereas efficiency goes to rely on many elements, retaining the general touchdown web page design easy will help direct individuals to the knowledge you most need them to see. In the event that they take nothing else away, what’s the one factor you’d prefer to resonate?
- Consider information flow
- Optimize your buy box for conversion
- Focus on visual elements
- Use a responsive design
- Analyze traffic and device source
- Test your landing page designs
- Prioritize UX research
1. Think about data stream
It doesn’t matter what works greatest in your prospects, you’ll all the time wish to be considerate concerning the form of copy and content material you place on the prime of any touchdown web page. However attempting to suit content material into the primary display can backfire and end in a cluttered expertise for the consumer.
“Entrepreneurs ought to assume much less about ‘over the fold’ and rather more concerning the total data hierarchy and stream of the content material on the touchdown web page,” says CRO advisor Michael Aagaard.
Replicate on the next questions as you construct your touchdown pages. The solutions will rely in your understanding of your target market’s total consumer journey and the position you’d just like the touchdown web page to play.
- Are you answering the suitable questions and addressing the suitable obstacles?
- Are you managing expectations and following up on “guarantees” made within the advert supply?
- Are you delivering the content material in the suitable order and constructing momentum towards the conversion purpose?
2. Optimize your purchase field for conversion
The purchase field is a small part of every touchdown web page that should make a big effect. Ezra calls it an important a part of your product touchdown pages. It’s a literal field on the web page with a extremely optimized set of conversion property that features a buy button.
Typically, in case you’re taking a look at it on a desktop, the purchase field consists of a picture carousel with photographs of the product on the left and your recap, gross sales copy, pricing, evaluation stars, Purchase button or Shop Pay button, and distinctive promoting proposition beneath the button to the suitable.
“Most companies don’t have gross sales copy within the purchase field, they don’t have social proof within the field, they don’t have distinctive promoting propositions and picture format beneath the Add to Cart button, and the product carousel options pictures that don’t look good,” Ezra says. “The purchase field is all the pieces.”
There are just a few templated components that make house in your copy and pictures to essentially shine. A extremely optimized purchase field consists of what Ezra calls “conversion asset stacking.” Right here’s an instance of what that would appear to be on desktop:
3. Give attention to visible components
The photographs you embody of your merchandise are probably the one factor potential patrons have once they’re contemplating finishing the specified motion. Break up the knowledge in your touchdown web page design with different components like:
- Bullet factors or numbered lists
- Logos or graphics
- Photographs
- CTA buttons
- Opinions
- Video testimonials
Within the case of ecommerce, pictures are how a purchaser photos an merchandise with out having the ability to maintain it for themselves. In case your pictures doesn’t absolutely seize how wonderful your merchandise are, it’s very troublesome for patrons to do the identical.
4. Use a responsive design
You’re probably designing your touchdown web page on a laptop computer or pc display, however the actuality is: not everybody accesses touchdown pages on a desktop. Roughly half of all internet traffic occurs on a cellular system. A responsive design flexes to make your touchdown web page appropriate for any system.
Use your website builder to examine how picture carousels and CTAs render on each desktop and cellular to make sure they’re optimized for each. Different suggestions for a responsive website design embody:
- Utilizing collapsable menus
- Buttoning up the smaller particulars to make sure a smoother expertise
- Utilizing a picture compressor like TinyPNG to decrease picture measurement for quicker loading time
- Avoiding video autoplays
- Utilizing massive finger-friendly buttons
5. Analyze visitors and system supply
Designing your touchdown web page based mostly on the system somebody retailers with is one strategy to start your conversion analysis.
If most of your prospects are coming to your web site on a cellular system, you’ll wish to optimize your touchdown pages for a great mobile experience. Or, in case you be taught that your customers desire desktop, you’ll be higher geared up to construct a touchdown web page that enhances the desktop expertise.
Nik Sharma of Sharma Brands recommends wanting even deeper into that visitors to grasp what sort of platform individuals got here from—whether or not it’s TikTok, Fb, a weblog submit, or one other channel.
“Not making your pages contextual to the platform they got here from will trigger your bounce price to skyrocket and your total platform ROAS [return on ad spend] to remain low,” he says. This sort of contextual listening drives a greater buyer expertise total.
6. Check your touchdown web page designs
After you have your touchdown pages dwell and a few significant visitors coming to your web site, you can begin to A/B take a look at totally different elements of your touchdown web page design to make sure it’s changing on the highest attainable price.
A/B testing is not only about discovering the perfect performing tagline or CTA placement, nonetheless. Ben Labay, managing director at Speero by CXL, notes: “If you happen to take a look at, you don’t wish to take a look at to show opinions, however slightly to problem technique or take a look at hypotheses immediately linked to buyer issues or enterprise alternatives.”
Ben says checks ought to be immediately proportional to elements associated to what you are promoting’s progress mannequin. If you happen to’d like to amass extra prospects, monetize your Instagram, or retain current prospects, the touchdown web page expertise and testing hypotheses want to vary accordingly.
7. Prioritize UX analysis
The touchdown web page design suggestions on this article have been profitable for the specialists who’ve examined and iterated on them. However watch out to implement these design components with out understanding how they connect with your total objectives.
Understanding what your target audience wants is the idea for constructing high-converting touchdown pages.
“The higher you perceive your target market, the higher touchdown pages you possibly can construct. Don’t get blinded by the most recent design traits,” says Michael. “As a substitute, ensure you get all of the fundamentals in place and do in-depth consumer analysis so that you’re making knowledgeable choices that influence conduct, slightly than merely tweaking web page layouts.”
Construct lovely touchdown web page designs
Shopify has all of the instruments, apps, integrations and themes it is advisable to get began together with your touchdown web page designs. Begin from scratch or with a template, customise it to suit your distinctive model, and handle all the pieces from anyplace.
You may as well browse thousands of Shopify apps so as to add touchdown web page options and performance, serving to you increase conversions and take advantage of your funding.
Touchdown web page design FAQ
What’s touchdown web page design?
Touchdown web page design consists of the weather, each visible and written, that make up a webpage optimized to transform new prospects and encourage repeat purchases. Simplicity in visible format, benefit-driven copy, and high-quality product pictures are three of many guiding pillars for compelling touchdown web page design.
How do you create a touchdown web page?
- Select a platform corresponding to Shopify to create your touchdown web page.
- Design your web page with a headline, name to motion, and some other needed components.
- Use an efficient headline. It ought to be concise and attention-grabbing.
- Add content material to your web page corresponding to pictures, movies, and testimonials.
- Use key phrases and different search engine marketing greatest practices to make sure your touchdown web page is discoverable by engines like google.
- Check your touchdown web page and refine it based mostly on the outcomes.
What ought to a touchdown web page include?
A touchdown web page sometimes consists of a headline, a quick introduction, a name to motion, and a kind for guests to offer their contact data. It might embody extra components corresponding to movies, pictures, buyer testimonials, social proof, and product demos.
How does touchdown web page design influence conversion charges?
The typical conversion price for a touchdown web page is 5.89%, although the design can affect how shut you’re to this benchmark. The most effective touchdown web page designs are responsive, use visible components to interrupt up textual content, and A/B take a look at for the perfect outcomes.
Do you have to A/B take a look at your touchdown web page designs?
A/B testing means creating two variations of your touchdown web page design (whereas making one small change at a time) and monitoring which one has the very best conversion price. This helps you make data-backed choices on how one can design different touchdown pages.
