<p>Published on <a href="https://blog.prototypr.io/how-to-design-an-effective-landing-page-363d521e062d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Miklos Philips </p>
<p>Landing pages can be described as one-page websites that push the visitor toward a single action. This focus on a single purpose is the primary feature that makes landing pages different from other websites.</p>
<p>Their primary goal is to generate leads which are often linked with email and social media campaigns and to convert those leads into buyers and subscribers. The process of converting visitors into leads and buyers is usually accomplished by call-to-action buttons and lead generation forms.</p>
<blockquote><p>“A landing page is any webpage on which an Internet visitor first arrives on their way to an important action that you want them to take on your site”<em><br /> — Tim Ash, </em><a href="https://www.amazon.com/Landing-Page-Optimization-Definitive-Conversions/dp/0470610123"><em>Landing Page Optimization</em></a></p></blockquote>
<p>Landing pages originated in response to the poor sales Microsoft was experiencing with its Office suite and have expanded to the point where email marketing solutions, customer management, and lead capturing features are now standard and a powerful tool for retaining and acquiring customers by means of marketing and design techniques.</p>
<p>Although a narrow and somewhat elementary form of customer acquisition and sales, landing pages continue to be one of the most powerful tools that <a href="https://blog.hubspot.com/blog/tabid/6307/bid/32566/why-landing-pages-are-an-indispensable-part-of-marketing.aspx">marketers use</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*engLMFev_r6igxht.gif">Landing page design by <a href="https://dribbble.com/shots/3330435-Smart-Homepage">Dann Petty</a></p>
<p><strong>Effective landing pages are used for conversion and sale-oriented tasks, such as:</strong></p>
<ul>
<li>Promoting new products</li>
<li>Growing subscriber lists</li>
<li>Increasing sales and leads</li>
<li>Capturing insights and data through forms</li>
</ul>
<h3>Landing Page Design Best Practices</h3>
<p>Landing pages, although very similar to common websites, serve a different purpose. Here are the key characteristics that help make a landing page look great and convert well:</p>
<h3>1. Visual Simplicity</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Guoj-hoE8pBNmX_i.png">Visual simplicity displayed on <a href="http://conversionlab.no/">Conversionlab</a>’s home page</p>
<p>Visual simplicity takes into account all elements of a landing page’s <a href="https://www.toptal.com/designers/ui">user interface</a>. Maintaining visual simplicity and a <a href="https://www.toptal.com/designers/ux/minimalist-brutalist-web-design">minimalist design</a> is important because it improves <a href="https://hbr.org/2012/05/to-keep-your-customers-keep-it-simple">visitor focus</a> and helps to showcase the value proposition. Here are some characteristics of visual simplicity:</p>
<ul>
<li>Visual simplicity maintains whitespace that focuses visitors on calls to action (CTAs) by isolating them from other elements.</li>
<li>Visual simplicity makes it easy for the key features and calls to action to stand out.</li>
<li>Visual simplicity creates contrast by displaying elements in a way that make them stand out.</li>
<li>Visual simplicity maintains the design flow by placing elements in a way that directs the user to keep reading.</li>
</ul>
<h3>2. A Great Landing Page Starts with Great Media</h3>
<p>The right images and videos on landing pages will help persuade visitors to act on the call to action. A great image helps tell the story, demonstrates the product effectively, and creates a personal connection with visitors.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*mjz66iCkx_YSqvnc.jpg">Attractive photography increases conversions on <a href="http://uber.com/">Uber</a>’s landing page.</p>
<p>The relevance of displayed images is crucial. Displaying images of friendly-looking, real people instead of generic stock images helps to build trust with visitors. Including relevant product and service imagery gives visitors a better understanding of what they are buying.</p>
<p>Research on the effect of video on landing pages suggests that <a href="http://tubularinsights.com/71-per-cent-confirm-video-converts-better/">videos have more impact</a> than still images, where “71% of respondents confirm that video converts better than other content.” Videos <a href="https://blog.shareaholic.com/video-marketing-seo-results/">help with SEO</a>, maintain user engagement, and better explain the product or service to visitors. Another factor favoring videos is that if used well, they can replace long-winded copy that could potentially hurt conversions.</p>
<h3>3. The Importance of Color</h3>
<p>Research shows that colors are <a href="https://link.springer.com/article/10.1007%2Fs11747-010-0245-y">a big influence</a> on our psychology — on the way we feel and act. Appropriate color palettes improve the user interface and help guide the behavior of users, consequently improving landing page conversions.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*ntVtbhMJNOSltzZuQrqWyA.gif">Great use of color on a landing page by <a href="https://dribbble.com/shots/3427439-Mixpanel-Automated-Insights-Landing-page-Motion-Design">Mason Yarnell</a> for Mixpanel</p>
<p>Here are few tips on how to use colors effectively:</p>
<ul>
<li>Understand how to use <a href="https://watercolorpainting.com/color/">high and low colors</a> that allow the creation of high contrast, which is directly tied to copy readability.</li>
<li>Create a color palette comprised of compatible color combinations and built on complementary/opposite colors.</li>
<li>Address colors from the <a href="http://www.colour-affects.co.uk/psychological-properties-of-colours">perspective of psychology</a> and marketing. Depending on the product/service, use colors that convey the right message (e.g., green is the color that conveys security, trust, and calmness, and therefore, its use is most appropriate for finance-related products).</li>
<li>Consider color symbolism when targeting different demographics. Various cultures <a href="https://www.thoughtco.com/visual-color-symbolism-chart-by-culture-4062177">interpret colors differently</a>, so what works for one user base might not work for another.</li>
<li>Understand that color interpretation varies from <a href="https://blog.kissmetrics.com/gender-and-color/">gender to gender</a>, and there is no “bullet-proof” solution when it comes to picking one.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*N69aCjbTtOOPRxuoGICb7Q.gif">Color used well on a <a href="https://dribbble.com/shots/3894871-Chatlio-Features">landing page</a> by Balkan Brothers</p>
<h3>5. Landing Page Responsive Design</h3>
<p>It’s been a couple of years since responsive websites <a href="https://www.bopdesign.com/bop-blog/2015/02/responsive-web-design-statistics/">became a standard</a> in the industry, and landing pages are no exception. Responsive landing pages are meant to provide the same level of user experience and UI on mobile devices as they would on full-screen layouts.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*kdR67poL70LGC6m3.png">Responsive landing page by <a href="https://dribbble.com/shots/3545002-Bigscoots-Responsive/attachments/787788">Majo Puterka</a> for Bigscoots</p>
<p>Online purchases made from mobile devices are growing, thus mobile phones will soon become <a href="http://www.businessinsider.com/mobile-commerce-shopping-trends-stats-2016-10">a major source</a> of traffic for shopping and purchases made online. Because landing pages are conversion-oriented, it’s important to understand the potential of the mobile audience and adapt towards that traffic funnel.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*JBs8aG6tzXvgO_JJ.png">Share of <a href="http://www.mmaglobal.com/files/speaker_presentations/joe_nguyen_mma_singapore_mobile_hierarchy_of_needs-final.pdf">unique users</a> by platform (<a href="https://www.comscore.com/">Comscore</a> report)</p>
<p>Although most services that provide a landing page have already integrated responsiveness into their templates, if a decision is made to design a freestanding landing page, then landing page design best practices demand that responsiveness is an absolute must. Here’s why:</p>
<ul>
<li>Responsive layouts offer feature and content parity as on the main landing page.</li>
<li>Responsive landing pages benefit from the massive amount of traffic that comes from mobiles and tablets.</li>
<li>Responsive landing pages integrate well with SMM campaigns that lead traffic.</li>
<li>Responsive landing pages are easier to build because of the reduced layout complexity.</li>
</ul>
<h3>Content — The Foundation of a Great Landing Page</h3>
<p>Headlines are the first thing visitors see when they reach a landing page and are an effective way to engage visitors. Consider the headline as a “hook” that either catches or loses the visitor.</p>
<p>You will lose readers if you don’t <a href="http://www.jeypandian.com/analytics/engagement-rate-a-new-take-on-the-bounce-rate/">engage them</a> in the first few seconds they’re on your landing page. Besides making an impression, the headline — being the element that stands out the most — should convey the essential message and the <a href="https://www.entrepreneur.com/encyclopedia/unique-selling-proposition-usp">unique selling proposition</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Xd23GGSCawoCUK3o.jpg">Catchy and concise headline on <a href="https://www.tastersclub.com/">Taster’s Club</a> landing page</p>
<p><strong>An effective landing page headline is:</strong></p>
<ul>
<li>Persuasive and catchy</li>
<li>Brief but clear, and states what problem it solves</li>
<li>Conveys a sense of urgency</li>
</ul>
<h3>2. Strong Calls to Action</h3>
<p>Call-to-action buttons are core components of a great landing page and act as the main gateway between your product or service and the user.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*TDhnV1KcAJtJpafl.png"><a href="https://www.lyft.com/drive-with-lyft">Lyft</a> making use of bright calls to action</p>
<p>It’s possible to improve your CTA “button game” by applying these tips:</p>
<ul>
<li>Keep it above the fold and put emphasis on the primary CTA. Always make it easy for the visitor to perform the desired action.</li>
<li>Use suggestive imagery and visual cues to point visitors towards the CTA.</li>
<li>Use strong and bright colors that will make the CTA buttons stand out by creating contrast.</li>
<li>Use natural and actionable phrases for your calls-to-action, such as “Start Now,” and “Get a Free Quote Now.” Avoid using simple phrases like “submit” and “send” because they are not as effective in terms of conversion.</li>
</ul>
<h3>3. Psychological Aspects</h3>
<p>Every person is subject to psychological principles and rules. People’s motivations, desires, beliefs, and biases lead them to make specific choices. These choices are heavily affected by a <a href="https://www.toptal.com/designers/product-design/design-for-emotion-to-increase-user-engagement">variety of factors</a>, conscious or unconscious, and <a href="https://www.toptal.com/designers/ux/persuasive-design-using-psychology">there are ways</a> to affect them:</p>
<ul>
<li>Make use of empathetic images that are relevant to the context of the user. This allows for a better connection at an emotional level and conveys feelings of empathy to the user.</li>
<li>Key elements on the landing page, such as the headline and call-to-action buttons, should create value and a sense of urgency for the user. This can be achieved by writing appropriate copy and using contrasting colors.</li>
<li>Widgets like trust badges, ratings, and awards should be displayed above the fold. This conveys a feeling of trust.</li>
<li>Displaying relevant testimonials works as a social proof to visitors and increases credibility and trustworthiness.</li>
<li>Showcasing logotypes and brands that have been involved with the service or product helps build trust by means of social proof.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*IcajMnwxxwr9CcGz.png">Use of social proof on Unbounce’s <a href="https://unbounce.com/">landing page</a></p>
<h3>4. Use of People on Landing Pages</h3>
<p>Besides the various psychological aspects that can be used to get more out of a landing page, using people and friendly faces is a proven technique for higher landing page conversions.</p>
<p>Using pictures of real, everyday people instead of objects or stock images helps to create a more personal connection and elicit more empathy from visitors. Because people typically make their decisions at an emotional and subconscious level, creating an emotional connection through images is a very powerful technique.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*iKVeGhQjaoWFpfFm.png">Highrise <a href="https://signalvnoise.com/posts/2991-behind-the-scenes-ab-testing-part-3-final">increased their conversion</a> by using friendly people on their landing page.</p>
<p><a href="https://www.nngroup.com/articles/photos-as-web-content/">Studies</a> that explored the use of human images in web design found that websites which include facial features stimulate the perception that the websites are trustworthy and therefore more appealing.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*rF7LBZ3Szi5DG_wK.png"><a href="http://charismaoncommand.com/">Charisma on Command</a> owners pointing to the call to action, which increases conversion</p>
<p>Another great way to draw attention to CTAs is to use images of people looking at headlines and call-to-action buttons. This technique makes it easier for the user to see important CTAs and leads to higher-converting landing pages.</p>
<h3>Common Mistakes in Landing Page Design</h3>
<h3>1. No Images or Low-quality Graphics</h3>
<blockquote><p>“A picture is worth a thousand words.”<em><br /> — Proverb</em></p></blockquote>
<p><a href="https://www.eyeqinsights.com/power-visual-content-images-vs-text/">Studies</a> have shown that people perceive images better, and symbols over 1,000 times faster than text, emphasizing the need to use quality images and videos. Generic, pixelated, dated images and stock photography will hurt credibility, reduce trustworthiness, and make the landing page less authentic in a reader’s eyes.</p>
<h3>2. Page Layouts with Too Much Content and Complexity</h3>
<p>Landing pages are meant to be easy to use and quick to understand. Layouts that are too complex to scroll, hard to scan, and overloaded with UI elements rarely provide value and dramatically reduce landing page conversions. The decision to use common website elements like navigation bars, footers, and similar elements should be made on a case-by-case basis.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_YRXkCAAeEGuLE7i.png">A <a href="http://www.novum-publishing.co.uk/become-an-author/new-authors.html">complex layout</a> that is overloaded with “noise”–too much text and information</p>
<p>Understanding the user’s perspective uncovers the weaknesses in design more effectively, helps make the page flow more intuitive, and the process of scanning the landing page less difficult.</p>
<p><a href="https://www.toptal.com/designers/ux/ux-testing-for-the-masses">A/B testing</a> a landing page is a good way to gather insights that can be applied toward improving a landing page layout. Another option is to use evidence-based UX design techniques, such as the <a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/">F-Shaped</a> and <a href="https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c">Z-Shaped</a> pattern layouts.</p>
<p>These types of layouts have been thoroughly analyzed and backed up with data that show common user interaction patterns. Going forward, applying the data from research greatly enhances the ability of users to interact with a landing page’s content.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*pc1UUhZfA9MY17PG.png">A simple yet effective design of <a href="https://muzzleapp.com/">muzzle</a>’s landing page</p>
<h3>3. Unscannable Copy</h3>
<p>Good copy on landing pages is essential for creating clear and intuitive experiences for visitors. Well-written copy is not only suggestive but also exciting. Writing copy for landing pages is in big demand because marketers, <a href="https://www.toptal.com/designers/ux">designers</a>, and business owners understand the value of great copy.</p>
<p>An important principle in customer-centric copy is storytelling. Too much text, grammatical mistakes, large bodies of unbroken text, and a boring tone can lead to a poorly-performing landing page. Visitors will trust you more if they feel the copy is tailored to them and tells a compelling story.</p>
<h3>Summary</h3>
<p>Landing pages are essentially about acquiring and retaining visitors as well as converting them into buyers and subscribers, and they are currently one of the <a href="https://blog.hubspot.com/blog/tabid/6307/bid/32566/why-landing-pages-are-an-indispensable-part-of-marketing.aspx">most popular tools</a> marketers use to gather leads.</p>
<p>The use of various marketing and design techniques can have a powerful impact on the participation of users. The landing page design techniques and psychology principles outlined in this article are backed up by real data and <a href="https://signalvnoise.com/posts/2991-behind-the-scenes-ab-testing-part-3-final">are proven</a> to guarantee a landing page that is effective, high-converting, and results-oriented.</p>
<p><strong><em>Originally by Stelian Subotin and published at </em></strong><a href="https://www.toptal.com/designers/landing-page-designers/effective-landing-page-design"><strong><em>www.toptal.com</em></strong></a><strong><em> &gt;&gt;</em></strong></p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=363d521e062d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/how-to-design-an-effective-landing-page-363d521e062d">How to Design an Effective Landing Page</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>


How to Design an Effective Landing Page

Top Stories