<p>Published on <a href="https://blog.prototypr.io/11-tips-for-designing-high-converting-landing-pages-bd9ae8354e3e?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Designlab <img alt="" src="https://cdn-images-1.medium.com/max/1024/0*h2GrxEl5arBdsLJy.png">Text &amp; Illustration: Andrew Wilshere</p>
<p><strong>A landing page is any web page that a user might “land” on — it could be the homepage of a whole site, or a page that presents a specific product or event.</strong></p>
<p>Generally the purpose of a landing page is to rapidly introduce a product through concise text and clear images, and then invite the user to take a specific action — perhaps to sign up for updates, or to make a purchase. In this piece, we take a look at how you can create a high-converting landing page design of your own.</p>
<h3>What makes a good landing page?</h3>
<p>When we talk about a page being “high-converting”, we mean that a relatively large number of users who arrive on that landing page end up taking the desired action. As a design pattern, the landing page has come into its own in the past few years.</p>
<p>This is partly because designers and marketers have become better informed about what works, and because with mobile devices, users have become very savvy with scanning information quickly and reaching a rapid judgement about whether it’s worth their time. A good landing page presents a product in such a way that it passes this initial “sniff test” from a user.</p>
<p>Visually, a good landing page is recognizable (not generic or off-the-shelf), has a clear call to action for the user, and — importantly — connects potential customers with something that is valuable for them. <a href="https://land-book.com/">Land-book</a> is a great source of inspiration for landing page designs.</p>
<p>Here are our top 11 tips for how to design a landing page that will not only look the part, but will also maximize the number of users who click that call to action button.</p>
<h3>1. Plan how the user’s eye will travel</h3>
<p>The landing page for <a href="http://www.google.com/home">Google’s “Home” voice assistant</a> went through several iterations in 2017 alone, but each version has had a clear smile-shaped journey for the user’s eye. The eye travels from the distinct Google “G” in the top left, down to some crucial micro-copy giving product information (“Meet Google Home. Now £40 off.”), then up, following the line of the table, to a beautiful, clear product image. Finally, the eye lands at the prominent (but still understated) “Buy” button. In this example, notice especially how important the use of whitespace is to directing this visual journey.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*DoNGrGoMrEo-PkjY.png"></p>
<h3>2. Refine the copy</h3>
<p>The information on a good landing page is very concise. You might only have the user’s attention for less than a second before they decide whether to engage further with the product. In that initial moment, you need to have a few words that persuade the user to take a positive action, whether that’s clicking a button, or simply scrolling down to read more.</p>
<h3>3. Use bullet points or numbered lists</h3>
<p>The average user is adept at rapidly scanning information. Particularly if your product is itself information-based — like an eBook or email course — short bullet points or numbered lists are seductive because they promise a focused, well-crafted, useful product.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F30422c%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2F30422c%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F30422c%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/3ff3ed195075d9778ff4576ebb483be5/href">https://medium.com/media/3ff3ed195075d9778ff4576ebb483be5/href</a></iframe></p>
<h3>4. Structure the information you present</h3>
<p>Related to the bullet points idea above, make sure that the information you present is organised into a clear and logical structure. At the very least, have a main heading and a block of body text with extra detail. The more information you want to include in your page, the more structured it will need to be. A key decision with longer landing pages is what sequence information should be presented in; and also, what key points should go above the fold (i.e. the content before you have to scroll down).</p>
<h3>5. Remove your usual navigation</h3>
<p>If your page appears within a larger site, you might think it’s logical to place it within your “usual” template, which probably has a navigation bar or hamburger menu at the top of the page. This might seem counterintuitive, but most of the time it’s best to lose your regular navigation. Why? Because its presence creates a visual distraction, and also provides ways for the user to navigate away from your landing page other than by taking the desired action. Here’s how <a href="http://shopify.com/free-trial">Shopify</a> removes their usual navigation on a free trial landing page:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*0IwxyMLuZAwj9_IO.png"></p>
<h3>6. Include a beautiful product shot, but only if it adds</h3>
<p>Not all pages have a product that can be shown off visually. But if you are selling a physical product, make sure it’s clear, prominent, and beautifully photographed, just as the Google Home speaker is in the layout pictured above. But remember that the first job of a landing page is to communicate key information to the user as rapidly and effortlessly as possible. If you’re tempted to add an image for purely decorative reasons, it’s likely to distract from the page’s main aim — better to leave it out.</p>
<h3>7. Establish your brand’s credibility</h3>
<p>If you’re creating a landing page, the chances are that you’re trying to attract new traffic to your site directly to that page. By definition, new visitors may not be familiar with your brand or have any basis to judge its credibility. Therefore, if your brand has been featured in any other sites or publications, take the opportunity to include their logos on your site as badges that speak of your brand’s quality and brand affinities. For example, you could include a “As seen on” section, followed by the logos of sites where your product has been featured or reviewed. Here’s a great example of how <a href="https://www.intercom.com/">Intercom</a> does this on their main landing page:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_HY9BBZOT5sGMOW-.png"></p>
<h3>8. Reinforce the value proposition by repeating key words</h3>
<p>We recently created a landing page for our successful <a href="https://trydesignlab.com/sketch-101-course/">Sketch 101 free email course</a>. Here, we repeated the words “Sketch”, “101”, and “course”. This not only reinforces in the user’s mind what they are there for and what they will get if they sign up; it will also improve the search ranking of your landing page for relevant searches:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Meu6bFUgq649mJ1o.png"></p>
<h3>9. Make the “submit” action crystal clear</h3>
<p>If you’re asking users to fill out a form of any kind, it’s important that they know how to send that information — here the safest bet is to simply use the term that users are most used to seeing — i.e. the word “Submit” on a button. Alternatively, go for text that reinforces what the user is going to receive by clicking — for example, make your button text “Download Your Free eBook”. Try to avoid anything more abstract than that, as it could create an obstacle to user understanding and lose you conversions. Whatever you choose, use verb-based constructions to encourage user action. On their Developer page, <a href="https://marvelapp.com/developers">Marvel</a> makes their main button stand out by combining a different colour with button text that is both actionable (“Apply”) and very specific (“for API beta access”):</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*3XnfHnDirvhbyOzF.png"></p>
<h3>10. Minimise page load time</h3>
<p>The longer a page takes to load, the more likely that a user will navigate to another tab or app. If that happens, you’ve probably missed the opportunity to get them to engage with your call to action. When it comes to load times, the difference between 2 and 3 seconds is huge, so cut out the big images and focus on the message.</p>
<h3>11. Test and iterate</h3>
<p>As far as possible, test out the design with friends and colleagues before launching it. But the most useful “test” is to study how the page performs once it’s been published. If you create landing pages regularly, experiment with different layouts and options and study your stats to see which are generating more conversions. Also, a page isn’t set is stone once you go live: particularly if you are promoting an evergreen product rather than a one-off event, keep tweaking, testing, and iterating.</p>
<p><strong>We hope you’ve enjoyed this look at some high-converting landing page practices! What are the best landing pages you’ve found lately? Let us know your thoughts in the comments or </strong><a href="http://www.twitter.com/trydesignlab"><strong>send us a Tweet!</strong></a></p>
<h3>Work on your own landing page designs</h3>
<p>Designlab offers Design 101, a 4-week introduction to visual design. Students work 1-on-1 with a professional designer to create and iterate on your own landing page designs. Whether you’re looking to upskill or just trying something new, <a href="http://trydesignlab.com/courses/">check out our short courses here</a>!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F30422c%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2F30422c%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F30422c%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/3ff3ed195075d9778ff4576ebb483be5/href">https://medium.com/media/3ff3ed195075d9778ff4576ebb483be5/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=bd9ae8354e3e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/11-tips-for-designing-high-converting-landing-pages-bd9ae8354e3e">11 Tips For Designing High-Converting Landing Pages</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


11 Tips For Designing High-Converting Landing Pages

Top Stories