![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_StarPage_01@2x.png\")
<\/p>\n<\/p>\n
If you have a website then you already have a landing page \u2013 it\u2019s your homepage.<\/p>\n
When visitors land on your website, they will often only spend seconds there before deciding to leave. From our research, 96% of website visitors tend to leave most websites within 20 seconds.<\/p>\n
You don\u2019t have long to convince anyone that you\u2019re the right product or service for them \u2013 so designing and building a great landing page is crucial.<\/p>\n
We\u2019ve been running GoSquared for years, and in that time we\u2019ve designed and built hundreds of landing pages for ourselves, and for our customers.<\/p>\n
We\u2019ve made tons of mistakes and learned a lot along the way, and so we finally decided to share our learnings with you so you can jump straight to greatness in your journey to building a high converting landing page.<\/p>\n
This is a huge and extensive guide, so we\u2019ve broken it down into a series of sections:<\/p>\n
![\"design](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_DiamondPage_01@2x.png\")
<\/p>\n
Good landing pages are extremely clear. They don\u2019t necessarily have to be hugely innovative in terms of design.<\/p>\n
In fact, the best landing pages follow a pretty well-trodden template that is easy for visitors to read and understand.<\/p>\n
A high converting landing page starts with clarity \u2013 and that starts with words. What is your value proposition? What are you offering that no one else is?<\/p>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_DesignTemplate_01@2x.png\")
<\/p>\n
Thankfully if you want to dive deep on designing great navigation for your landing page, and for your whole website, we\u2019ve written an extensive guide on how to design website navigation.<\/a><\/p>\n It goes without saying, but the title of your landing page needs to grab the attention of the reader \u2013 it\u2019s possibly the only thing they\u2019ll read. If you get it right, it could be the first thing they read before ultimately making a purchase!<\/p>\n Your title needs to be set in a large, easy to read font \u2013 it should be the largest text on the page.<\/p>\n The copy of your title is critical and ties back to what we were covering earlier in the \u201cdefining your value proposition\u201d section.<\/p>\n If the visitor reads your title, then perhaps they\u2019ll consider reading your sub heading too \u2013 it\u2019s the second most important piece of copy on your page.<\/p>\n Your subheading should build on the title to clarify the attention-grabbing headline to tee up the visitor to want to learn more and ultimately click your call-to-action button.<\/p>\n If you have customers, you can build social proof.<\/p>\n If you are fortunate enough to have already won a well-known customer or two, get their logos on your page as fast as you can.<\/p>\n It\u2019s incredible how often this key element of a landing page is forgotten in the race to get a page live. Social proof takes time and effort to gather, but the result is dramatically increased credibility, and an ability to handle objections from visitors without having to speak for yourself.<\/p>\n Just let your customers do the talking.<\/p>\n Good questions to ask existing customers include:<\/p>\n These questions will hopefully lead to some powerful quotes that you can add to your landing page to effectively address any common concerns of visitors before they hit the \u201cback\u201d button.<\/p>\n We recently wrote the ultimate guide to writing and designing effective call-to-action buttons (CTAs)<\/a> \u2013 it\u2019s been read by thousands of people and shared all around the world by some of the most influential designers and marketers out there.<\/p>\n If you\u2019re keen to learn more about call-to-action buttons and want to see a healthy selection of examples, then we highly recommend you check out that guide.<\/p>\n Read our ultimate guide to Call-to-Action buttons<\/a><\/p>\n Chances are you\u2019re closely connected to your product or service \u2013 you know every bell and every whistle you have to offer.<\/p>\n But when it comes to creating an effective landing page, you need to step away from some of the details \u2013 you need to focus less on \u201cwhat\u201d your product does, and more on \u201cwhy\u201d it matters to the people viewing your page.<\/p>\n For example, here at GoSquared, it\u2019s great that we have so many features in our live chat product \u2013and that it\u2019s beautiful and easy-to-use.<\/p>\n But most people outside our team don\u2019t really care about these details.<\/p>\n Most people care about how GoSquared can make them more money, how we can help their team be more productive, and how we can deliver measurable improvement to their conversion rates.<\/p>\n As an exercise for your own product \u2013 try to describe why it\u2019s helpful to someone without specifically calling out any features. Focus on the \u201cwhy\u201d and you\u2019ll go a long way to writing more persuasive copy for your page.<\/p>\n Repeating your call-to-action<\/a> rarely hurts. What you see as the creator of your landing page is very different to what a visitor will see. Remember that you only have seconds to grab the attention of a visitor, and to encourage them to consider your product or service.<\/p>\n Repeating a call-to-action can sometimes feel, well, repetitive when you are creating a page or any kind of website. But remembering that visitors may be jumping around and spending mere seconds, will likely make you feel more comfortable repeating your call-to-action at least once to ensure the visitor is never far away from taking their next step.<\/p>\n The footer of your landing page is valuable real estate. If someone makes it all the way through your landing page, they\u2019ll end up bumping into your footer and potentially rest there for a few moments.<\/p>\n Given your landing page is focused on encouraging the reader to take a specific action, you want to try to avoid distracting the visitor with links and copy that could alienate them.<\/p>\n For instance, many larger websites have a huge number of pages and have a form of site map in their global footer. For your landing page you want to avoid putting any unnecessary links in the footer that could take a visitor on an unintended path.<\/p>\n Your footer, though, is an opportunity to add further reassurance for visitors \u2013 for example:<\/p>\n Your footer is an opportunity to add further reassurance \u2013 it doesn\u2019t need to be white space.<\/p>\n You know your own brand better than anyone, and while you may be the most honest, most friendly, most helpful business owner in the world, your visitors and potential customers don\u2019t know that.<\/p>\n Your landing page needs to take someone from having never heard of you to trusting you enough to give you their email address, or potentially their hard-earned money. There\u2019s no better way to build trust than to let other people do the talking \u2013 like your existing customers and well-respected publications and review websites.<\/p>\n Reviews, quotes, star ratings, and logos all help to add credibility to your proposition. But even if you have great feedback, you don\u2019t get to share this credibility with the world unless you put some serious effort into funnelling that into a place on your website \u2013 on your landing page.<\/p>\n Showing ratings from review sites such as Trustpilot, TrustRadius, and G2 Crowd is a great way to show your prospective customers that you\u2019re trustworthy can care about your customers \u2013 assuming the reviews are good that is!<\/p>\n You can often embed a widget from these websites to make it easy to display a live update of your star rating along with the number of reviews you\u2019ve received.<\/p>\n Alternatively, if you are more design conscious, you can use an image editing program to make your own stars and fit them to the design of your website, linking clearly back to the respective review site they reference.<\/p>\n How many times do you see or hear an ad that mentions \u201caward-winning\u201d in the tag line?<\/p>\n Don\u2019t underestimate the reassurance prospects can gain by seeing that third parties recognise your business and your products and services. \u201cWinner of the award for best customer service in the industry!\u201d is distinctly more powerful than \u201cWe love to serve our customers!\u201d.<\/p>\n While not from customers, even the sign of a familiar logo on your landing page can be reassuring to visitors. If you\u2019ve been written about or even mentioned in a credible publication that your audience will be familiar with, then this can be a great way to quickly build trust from zero.<\/p>\n Your landing page shouldn\u2019t be a secret \u2013 once you have a workable set of images and copy, get it in front of people as soon as you possibly can.<\/p>\n Don\u2019t be shy \u2013 getting feedback from people will help you improve your page substantially. It\u2019s far better to get feedback from friends and colleagues at this early stage before you spend money and energy driving visitors (and potential customers) to your page.<\/p>\n If you don\u2019t get feedback early, you\u2019ll just be throwing money away later.<\/p>\n The moment you have your key elements nailed down, send your page to friends and colleagues you think will be willing to give feedback. There\u2019s no reason not to!<\/p>\n Even just a preliminary round of knee-jerk responses from people you know will help you understand more about your landing page.<\/p>\n For instance, if you\u2019re anything like us, when you\u2019re putting together your landing page you\u2019ll be uncertain about certain copy or illustrations and photography.<\/p>\n Getting your page in front of anyone else will help you establish if those concerns are shared by others or if there is a totally different set of concerns you\u2019ve missed because you\u2019re so stuck into the making process.<\/p>\n We\u2019re big fans of user testing at GoSquared. We even put together a guide on how to do user testing on a tiny budget<\/a>.<\/p>\n You can learn more from a few user tests than you can from a thousand surveys or analytics reports. User testing quickly reveals big problems, often offering inspiration and ideas for how you can fix those problems.<\/p>\n You don\u2019t even need a complete landing page before carrying out a user test \u2013 you can do a quick and messy user test with your key value propositions on paper, and gather feedback from real people on what resonates and what doesn\u2019t.<\/p>\n Even once your landing page is live, and visitors come flooding in, your page is still not complete.<\/p>\n Especially early on, your visitors will likely have questions that aren\u2019t answered by the page, and have objections that aren\u2019t handled by your existing copy and quotes.<\/p>\n Putting live chat on your landing page will help you both gather this feedback and respond in the moment to avoid losing out on potential customers. The feedback you gather via live chat can be a treasure trove of ideas for how to improve your page \u2013 just make sure it\u2019s noted down and methodically recorded so you can turn the feedback into actionable changes and improvements.<\/p>\n Not sure about using live chat just yet? Thankfully we have a guide highlighting 16 benefits of using live chat<\/a>.<\/p>\n Visitors can land on many different pages of your website. Perhaps you only have one page right now \u2013 that makes life easier to some extent.<\/p>\n If you have a larger, more established website, though, you will have multiple landing pages that each must cater to different needs, and each will likely benefit from being designed to drive different outcomes for the visitor.<\/p>\n Your home page is the one landing page every website has \u2013 and it tends to be the broadest.<\/p>\n People can visit your home page for a wide variety of reasons. Ideally, people are there to consider purchasing your product, but they might also be there with an intention to read your blog, to find out if you\u2019re hiring, or to sign in to their account.<\/p>\n Your homepage often has to cater to a lot of scenarios, so can risk becoming a jack of all trades, and a master of none.<\/p>\n If you sell multiple products, then it makes sense to think about each product having its own landing page.<\/p>\n By giving each product its own landing page, you can focus the attention of the reader on the specific reasons they should purchase the specific product, and address concerns that are more specific than you could possible convey on a more versatile page like your homepage.<\/p>\n Many companies in the world of tech have products that appeal to wide audiences.<\/p>\n When you appeal to many people, you can risk delivering bland, boring messages by trying to please everyone. A popular way to address this issue is to create landing pages for each key persona or solution you sell \u2013 so for instance \u201cProduct X for Marketers\u201d.<\/p>\n By focusing landing pages around key personas, you can make your product fit like a hand in a well-made glove and use the terminology and examples that will make your prospect feel more confident that you\u2019re the right choice. <\/p>\n \u201cHalf the money I spend on advertising is wasted; the trouble is I don’t know which half.\u201d \u2013 John Wanamaker<\/p><\/blockquote>\n If you\u2019re putting in the effort to create a landing page, then you need to ensure you\u2019re aware of the impact it\u2019s having.<\/p>\n If you’re new to measurement and analytics, you might want to take a look at our free ebook on the fundamentals of web analytics<\/a>.<\/p>\n Measurement and analytics can get very technical very quickly, so it\u2019s important to start with the basics \u2013 just try to nail down what the purpose of your page is. What is the primary outcome you want visitors to take when they reach your landing page? Whatever that outcome is, you want to find a way to measure it.<\/p>\n Common outcomes to measure for landing pages include:<\/p>\n Once you have figured out how to measure any of these successful actions occurring you just need one other piece of information to give you a conversion rate: the number of visitors who land on your page.<\/p>\n Most landing page builders will have a way to measure the number of visitors to your landing page, but you can also use other web analytics tools (we may be slightly biased but we hear good things about GoSquared Analytics<\/a>) to give you a number for how many visitors land on your page every day, week, or month.<\/p>\n You have probably heard of A\/B testing because it\u2019s key to how many large businesses make decisions about how their pages should look and read. The most infamous example of A\/B testing is Google testing 40 different shades of blue<\/a> on the links in search results to see which shade would encourage the most clicks.<\/p>\n Most businesses aren\u2019t Google. Or Facebook. Or Amazon.<\/p>\n A\/B testing is often promoted as \u201cthe right way to make decisions\u201d because some of the biggest and most successful companies employ it extensively to improve their conversions and ultimately make more money.<\/p>\n However, most businesses have a fraction of the website traffic that these larger companies have, so the trust you can have in the results of any A\/B test is often dramatically lower.<\/p>\n A\/B testing won\u2019t give you an idea for a landing page, but it can help you make a decision between two very good ideas.<\/p>\n For example, if you have two headlines for your landing page, or two ideas for the layout of your hero section, running an A\/B test to establish which version leads to a higher conversion can help you decide.<\/p>\n A few words of caution for anyone dipping their toes in A\/B testing, though:<\/p>\n Having said this, A\/B testing can be used very effectively to improve the conversion of your landing pages. A few elements that make sense to test:<\/p>\n The landing page is just the start of the journey a visitor makes to becoming a customer.<\/p>\n Your landing page may be to drive someone to purchase a product, it may be to download an ebook, or it may be to start a trial of a service you offer. Regardless of the outcome, there is always a next step, so bear that in mind when designing your landing page \u2013 it\u2019s not just a single page, it\u2019s a step in a flow.<\/p>\n We tend to find that mapping out the experience and full flow of a visitor is helpful \u2013 grab a white board of a piece of paper and just story board out the steps of how someone gets to your landing page, and what happens after visiting your page.<\/p>\n The chances are high that on your landing page you\u2019ll be asking for email address from your visitors. Are you clear both with your visitors, and with yourself, about what you will do with that email address?<\/p>\n We\u2019re now living in a far more privacy-conscious world, and one where GDPR is in force, so it\u2019s critical to be clear about why you are collecting any personally identifiable information (PII) and what you are doing with that info.<\/p>\n Even if you\u2019ve made the best landing page ever, the majority of visitors to your page will still bounce off it without giving you details of any kind.<\/p>\n While it\u2019s an increasingly controversial advertising method, you can use retargeting (sometimes called remarketing) to advertise to visitors on other websites if they leave your landing page without converting.<\/p>\n To be clear on what retargeting is \u2013 these are the ads that \u201cfollow you around the internet\u201d when you are looking to make a purchase \u2013 like when you were thinking about buying that new mountain bike, went to the online bike store, and then keep seeing mountain bikes popping up in your Facebook News Feed, Twitter Timeline, and on random websites where you\u2019re reading about whatever you want.<\/p>\n Retargeting isn\u2019t inherently bad or evil \u2013 it can be helpful and can definitely be impactful. But it\u2019s worth bearing in mind the two sides of running ads like this. Sometimes when businesses chase conversion rates and growth at all costs it can sometimes turn away the very customers they\u2019re hoping to attract.<\/p>\n If you want to dive deeper on retargeting, check out our guide on how retargeting can help you reach more of your audience<\/a>.<\/p>\n Unbounce was one of the first landing page builders and remains one of the best \u2013 with a huge range of features for marketing teams of all sizes to create effective pages without writing a line of code.<\/p>\n They call it a \u201cpost-click experience\u201d platform. Whatever you want to call it, it\u2019s still essentially a landing page builder. And a good one at that.<\/p>\n A fully featured landing page builder, with a host of other features to help you boost landing page conversion.<\/p>\n A continuously updated site with heaps of landing page examples for your inspiration.<\/p>\n A design focused website builder that enables you to build professional looking sites (genuinely) without writing code.<\/p>\n A heat mapping tool to show you where visitors are clicking on your landing pages. Very useful to see if parts of your page are confusing visitors.<\/p>\n Here are a few of our favourite landing pages out there. If you’ve come across a good one, let us know and we’ll add it to the list!<\/p>\n This landing page for Stripe Payments<\/a> doesn\u2019t overwhelm you with too much information. Instead, it\u2019s easy for visitors who want to start right away to get started (or talk to someone), and if you want to browse more you can with the links highlighted in purple. <\/p>\n This is a clever landing page from Notion<\/a> which is targeted at people considering switching over from a competitor. The page let\u2019s uses familiar imagery of Evernote\u2019s branding (the elephant) and by using a comparison tells the visitor what Notion is without having to explain. <\/p>\n Framer<\/a> use banners sitting at the top of their landing page to help promote certain events or content to visitors – in this case, their Loupe Conference. The large black text in the centre of the page creates an obvious hierarchy of messaging so you get the message straight away. <\/p>\n Choosing to focus on only two colours, Hotjar<\/a> uses clever text highlighting on the landing page to get across the company\u2019s value proposition in only 3 words. <\/p>\n By offering only two options, in a larger font and a highlight colour, Proof<\/a> draws visitors towards two CTAs – offering the chance to demo or sign up. Using a white CTA on a blue background makes for an eye-catching landing page which clearly and succinctly explains the value of Clearbit<\/a> and moves visitors towards signing up.<\/p>\n By displaying their pricing directly onto the product landing page, Digital Ocean<\/a> removes an extra step from the customer journey making it a one-click to sign up experience. <\/p>\n Right Message<\/a> makes it clear to the visitor that they can get started with the product for free. They also offer a pre-recorded 3-minute video demonstrating the product in use – this can be a great way to get a lot of information on your landing page without it feeling cluttered. <\/p>\n Roadmap<\/a>\u2019s refreshingly different site stands out from almost everyone else listed here. This landing page uses social proof front and centre to encourage visitors to become customers. The biggest take away here is \u2013 you don\u2019t need to do what everyone else is doing.<\/p>\n This landing page for Buffer Reply<\/a> draws the eye to a one sentence value proposition but also shows off the company\u2019s culture and personality with its whimsical illustrations. <\/p>\n The dark background of Asana\u2019s premium<\/a> landing page helps the company to stand out to the visitor who is likely used to designs with a lot of white space. This bold use of colour is a clever trick to distinguish between multiple products under one name. <\/p>\n The quick, snappy copy of Tability\u2019s<\/a> landing page reflects their brand proposition of getting things done. They also show off their product which stands out against a dark green background. <\/p>\n In the copy and imagery, Mailchimp<\/a> demonstrates the \u201cpromise land\u201d of success after you use their product – they are telling you that when you get this product you will be a pro who is on top of all their work. Showing the promised result, not the problem, can be a powerful way to make a convincing statement. <\/p>\n The landing page for the TransferWise borderless account<\/a> uses a visual hierarchy to encourage you to sign up, but also to dig a little deeper into the product if you aren\u2019t yet convinced. The dark background makes the neon green card stand out and helps to create a distinctive visual identity. <\/p>\n Using a striking full-screen photograph with minimal text is a bold way for Libra<\/a> to stand out. This approach is not suitable for all companies but could be a great option for a lifestyle brand. The CTA in this example is to watch a video, or more subtly, read their research paper.<\/p>\n The Trulia<\/a> landing page lets visitors get straight to the point by featuring the search bar right in the middle of the page. You\u2019ll notice the \u201csign up\/login\u201d button more subtly in the top right corner. The aim here is to get visitors to see the value of Trulia by using the search first, then get them to commit to signing up after. Smart. <\/p>\n CharlieHR<\/a> uses social proof and a \u201ctry for free\u201d CTA as the main features of their landing page. They have also set up a live chat prompt<\/a> to start conversations with any visitors who might have questions. <\/p>\n Knowing its customer base Shopify<\/a> uses inspirational and active language as the headline copy on their landing page. Interestingly, they don\u2019t automatically push signing up – this is left up in the right-hand corner – instead Shopify takes a content-first approach to educate and assist their visitors before trying to convert them. This is similar in strategy to allowing search functionality before signing up. <\/p>\n Using an incredible hero image as the main focus of the landing page Airbnb<\/a> keeps a visitor in the \u2018inspired\u2019 mindset that best fits choosing an experience or place to travel to. Before making any commitments or logging in you are encouraged to explore the site and all the possibility it holds with the prominent advanced search display. <\/p>\n Bold colours and a strong statement declaring \u201ceverything you need\u201d gives the visitor a confidence boost that Wistia<\/a> knows what they are talking about. <\/p>\n Canva<\/a> requires you to sign up before starting to design anything and so they place this option on the left-hand side of their landing page – naturally a place where the eye is first drawn to. They use the rest of the space to show the possibilities of what can be done with the product and leave the details up top in a muted grey. <\/p>\n As a website design tool, Squarespace<\/a> needs a landing page that packs a lot of punch. The sleek design shows off how their tooling can help you make something elegant and sleek and the heading copy gives the user confidence they\u2019re in the right place. <\/p>\n With such high brand recognition, Netflix<\/a> doesn\u2019t explain what they are or what they do on their landing page. At all. Instead, they jump straight in to address the most common hesitation about signing up – being charged at the end of the free trial. They also neatly \u201cpersonalise\u201d the landing page based on the current date.<\/p>\n Knowing that their most valuable asset are the names of the teachers, Masterclass<\/a> uses text weighting and colour to make these names the stand out aspect of the page. <\/p>\n Although you can browse the catalogue of courses without signing up Coursera<\/a> pushes the visitor towards making an account straight away. This is a smart way to encourage people to enter your marketing funnel but doesn\u2019t feel pushy as the search bar – in the expected place – gives you another option. <\/p>\n Using an image carousel makes WeWork\u2019s<\/a> landing page interesting without being too busy. See how they\u2019ve positioned the next image just peeking out from the right-hand side – if it was hidden much more visitors would be unlikely to be prompted to click through. <\/p>\n The landing page for Feast It<\/a> gets the important details out of the way fast. They don\u2019t want you to find the food truck of your dreams and then realise they can\u2019t come to your area. This upfront form helps prevent customer frustrations later on. <\/p>\n On this site, Marvel<\/a> puts the most important information to the left of the screen – which in most Western countries is where visitor\u2019s eyes naturally travel to first. This helps the imagery to be a nice addition, not a distraction. <\/p>\n Using a transparent film over their single-page site makes this an effective landing page which tells you everything you need to know and has the benefit of getting you to agree to their terms. This is a great way for sites like WeTransfer<\/a> to cover their legal requirements without it feeling like a pain or taking the form of a huge T&Cs contract that no one wants to read. <\/p>\n By using logos of other companies and tools that you can collaborate into Slack<\/a> they are sending a powerful message: this is a solution for everything you want to do. It has the added bonus of using social proof and familiarity of other big logos to reassure visitors about the product quality. <\/p>\n The dark background colour helps Monzo\u2019s<\/a> value statement really stand out on this landing page for their US launch. Monzo shows it\u2019s brand values with a bold statement that feels collaborative and understanding. <\/p>\n You don\u2019t need to go far to find a website that\u2019s been in some way inspired by Apple\u2019s website design. Some of Apple\u2019s more recent landing pages (for specific products) have focused on large text that\u2019s easy to read on all devices. They\u2019ve even been experimenting with discounts and incentives to make you more likely to purchase. Apple is clear proof that effective landing pages can be beautiful.<\/p>\n This clean landing page uses video to quickly explain the values of Revolut<\/a> to any visitor without cluttering the page. The faded out pink \u201cGet Started\u201d button acts as a prompt to fill in the phone number field but also helps to keep the page streamlined. <\/p>\n This landing page certainly gets across the point that the product is free. Featuring prominently in the centre of the screen and on its own line, this message is loud and clear. Gremlin<\/a> have also used an unobtrusive green banner across the top to highlight an upcoming conference – this can be a clever way to show off temporary events or offers.<\/p>\n This example from Bugsnag<\/a> balances a busy image with incredibly clean text and navigation bar. This gets across the brand personality and brings some visual interest without distracting from the core message. <\/p>\n This is another good example of using a banner to share recent updates and key messaging, in this case, a report on cancellation. By promoting content on the landing page Baremetrics<\/a> are able to gain some trust and respect from the user, establishing themselves as a leader in the field.<\/p>\n For Atlassian\u2019s Jira software<\/a> the landing page hits you with a punchy claim of being the number 1 development tool. Notice that there are 3 CTAs for a free trial on this one page – this is perhaps one too many, but the different styling makes it feel less pushy. <\/p>\n This landing page for ProfitWell<\/a> uses social proof of some big names to encourage confidence in any visitors to the site. They use an interesting CTA of \u201cget free metrics\u201d – this makes it stand out from something like \u201ctry it free\u201d which can still cause hesitation in some visitors.<\/p>\n This very sleek and clean landing page focuses on that bright orange button encouraging any visitors to give the product a go. Sketch<\/a> is a design tool that requires a basic level of knowledge to get the most out of, the landing page also features chances to watch a video demonstrating how to use the product and a \u201clearn\u201d option in a prime space on the navigation bar. <\/p>\n With the \u201cget started\u201d CTA Airtable<\/a> don\u2019t mention costs in a prominent way – instead pricing is nestled up in the navigation. By not even mentioning that it\u2019s free the audience don\u2019t think about costs, or spend time evaluating value, they can just get started. <\/p>\n Chargebee<\/a> use a banner and webinar content to capture email addresses from their visitors and set themselves up as field experts in SaaS finance. <\/p>\n Recurly’s<\/a> use of contrasting colours helps the most desired CTA – signing up for a trial – to stand out against the rest of the busy page. <\/p>\n Keeping it simple and fairly monochrome helps to hammer home Close’s<\/a> vision of \u201cbreaking through the noise\u201d on this landing page. Again there\u2019s a banner focus on content and \u2018Try Close\u2019 is highlighted as one of the few colour aspects to the page. <\/p>\n This landing page for Cultured Code\u2019s task manager<\/a> keeps everything very simple. Notice that the call to action is to watch an introductory video, not to sign up. <\/p>\n This landing page for WebinarNinja<\/a> is one you would come across when searching for an alternative for GoToWebinar. Building landing pages that focus on switching from an alternative product is a smart trick to capture that traffic and to easily explain your product\u2019s value to an audience who already knows what they want. <\/p>\n Curated<\/a> use a very clean, simple design to keep the visitor focused on their value proposition which is where your eye is automatically drawn. They encourage visitors to get started straight away and see the product\u2019s value through testing it out, but the clean navigation bar allows an alternative, although less desirable, option. <\/p>\n There\u2019s a lot going on on Freshbooks’<\/a> landing page, but still, the eye is drawn to the CTA where a visitor fills in their email. Some social proof is added both through press name checks and a great statistic about customer satisfaction. <\/p>\n A short social proof example is included in Front\u2019s<\/a> landing page which provides an instant reassurance that you\u2019re in good company. Using a video, live chat prompts, and stand out colours for important CTAs are all good techniques that you can see in this example. <\/p>\n By opening with a question FullStory<\/a> get the visitor to think about the problem that they are hoping to solve. Clever use of colour, social proof of existing customers, and a content focused banner make this a great example. <\/p>\n Adding a live chat prompt to any landing page can be a great way to help visitors navigate the site and also to capture leads that you can follow up with later. Kalo<\/a> uses a video encourages visitors to linger on the site which increases the opportunities to convert them into qualified leads and customers. <\/p>\n Adding a second free trial CTA under the main text might help to increase the CTR here, but Kayako<\/a> do a great job of creating a calm and effortless feel to their landing page. This gets across the brand message visually as well as through text which is an important element of the design process. <\/p>\n A bold opening statement from Pipedrive<\/a> helps to imagine that \u2018promised state\u2019 of success after using their product. Using colour sparingly on the most important page element is good practice for CTAs and the video, although a lesser ranked CTA, helps to keep visitors on the page for longer. <\/p>\n This clean but fun landing page for Square\u2019s PoS<\/a> offering doesn\u2019t bury the visitor in too much information. They are making the assumption that if you\u2019ve got this far you probably know what you are looking for and so focus the attention on good design and getting started. <\/p>\nTitle<\/h3>\n
Subheading<\/h3>\n
Social proof<\/h3>\n
\n
Call-to-action<\/h3>\n
Features or solutions<\/h3>\n
Call-to-action (again!)<\/h3>\n
Footer<\/h3>\n
\n
Build trust<\/h2>\n
![\"building](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_BuildingTrust_01@2x.png\")
<\/p>\nShow ratings<\/h3>\n
Show badges and awards<\/h3>\n
Show press mentions<\/h3>\n
Get feedback on your landing page<\/h2>\n
![\"get](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_Feedback_01@2x.png\")
<\/p>\nSend it to friends and colleagues<\/h3>\n
Do a user test<\/h3>\n
Put live chat on to get feedback from actual visitors<\/h3>\n
Types of landing pages<\/h2>\n
![\"different](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_DifferentLandingPages_01@2x.png\")
<\/p>\nHome page<\/h3>\n
Product pages<\/h3>\n
Persona or solution pages<\/h3>\n
Measuring success<\/h2>\n
![\"measuring](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_MeasuringSucsess_01@2x.png\")
<\/p>\nWhat is the purpose of your landing page?<\/h3>\n
\n
A\/B testing<\/h3>\n
Words of caution for A\/B testing beginners<\/h3>\n
\n
What to test<\/h3>\n
\n
Have a plan for the rest of the journey<\/h2>\n
![\"know](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_TheJourney_01@2x.png\")
<\/p>\nWhat happens when the visitor drops their email address?<\/h3>\n
\n
Retargeting if the visitor leaves<\/h3>\n
Landing page resources<\/h2>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_LandingPageInspiration_01@2x.png\")
<\/p>\nUnbounce<\/a><\/h4>\n
Instapage<\/a><\/h4>\n
Leadpages<\/a><\/h4>\n
Land-book<\/a><\/h4>\n
Webflow<\/a><\/h4>\n
Crazy Egg<\/a><\/h4>\n
Examples of landing pages<\/h2>\n
1. Stripe<\/h3>\n
![\"Stripe](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_stripe.png\")
<\/p>\n2. Notion <\/h3>\n
![\"notion](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_notion.png\")
<\/p>\n3. Framer <\/h3>\n
![\"framer](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_framer.png\")
<\/p>\n4. Hotjar <\/h3>\n
![\"hotjar](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_hotjar.png\")
<\/p>\n5. Proof <\/h3>\n
\nNote: Proof are showing off their own product on their landing page as it pops up in the bottom left-hand corner. <\/p>\n![\"proof](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_useproof.png\")
<\/p>\n6. Basecamp<\/h3 \nBasecamp<\/a> uses a clever visual hierarchy to draw the eye down towards the green \u2018try Basecamp\u2019 box. They take the opportunity to show off their brand personality with illustration and casual copy. <\/p>\n
![\"basecamp](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_basecamp.png\")
<\/p>\n7. Clearbit<\/h3>\n
![\"Landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_clearbit.png\")
<\/p>\n8. DigitalOcean<\/h3>\n
![\"digital](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_digital%20ocean.png\")
<\/p>\n9. RightMessage <\/h3>\n
![\"right](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_rightmessage.png\")
<\/p>\n10. On RoadMap<\/h3>\n
![\"roadmap](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_onroadmap.png\")
<\/p>\n11. Buffer<\/h3>\n
![\"buffer](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_buffer.png\")
<\/p>\n12. Asana <\/h3>\n
![\"asana](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_asana.png\")
<\/p>\n13. Tability <\/h3>\n
![\"tability](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_tability.png\")
<\/p>\n14. Mailchimp <\/h3>\n
![\"Mailchimp](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_mailchimp.png\")
<\/p>\n15. TransferWise<\/h3>\n
![\"transferwise](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_transferwise.png\")
<\/p>\n16. Libra <\/h3>\n
![\"libra](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_libra.png\")
<\/p>\n17. Trulia <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_trulia.png\")
<\/p>\n18. CharlieHR <\/h3>\n
![\"charlieHR](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_charliehr.png\")
<\/p>\n19. Shopify<\/h3>\n
![\"Shopify](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_shopify.png\")
<\/p>\n20. Airbnb<\/h3>\n
![\"airbnb](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_airbnb.png\")
<\/p>\n21. Wistia <\/h3>\n
![\"Wistia](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_wistia.png\")
<\/p>\n22. Canva <\/h3>\n
![\"canvas](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_canva.png\")
<\/p>\n23. Squarespace<\/h3>\n
![\"Squarespace](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_squarespace.png\")
<\/p>\n24. Netflix <\/h3>\n
![\"Netflix](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_netflix.png\")
<\/p>\n25. Masterclass <\/h3>\n
![\"masterclass](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_masterclass.png\")
<\/p>\n26. Coursera <\/h3>\n
![\"coursera](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_coursera.png\")
<\/p>\n27. WeWork<\/h3>\n
![\"WeWork](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_wework.png\")
<\/p>\n28. Feast It<\/h3>\n
![\"website](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_feastit.png\")
<\/p>\n29. Marvel App<\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_marvel.png\")
<\/p>\n30. WeTransfer <\/h3>\n
![\"great](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_wetransfer.png\")
<\/p>\n31. Slack<\/h3>\n
![\"amazing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_slack.png\")
<\/p>\n32. Monzo <\/h3>\n
![\"bold](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_monzo.png\")
<\/p>\n33. Apple <\/h3>\n
![\"apple](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_applexr.png\")
<\/p>\n34. Revolut <\/h3>\n
![\"revolut](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_revolut.png\")
<\/p>\n35. Gremlin <\/h3>\n
![\"excellent](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_gremlin.png\")
<\/p>\n36. Bugsnag<\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_bugsnag.png\")
<\/p>\n37. Baremetrics <\/h3>\n
![\"bare](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_baremetrics.png\")
<\/p>\n38. Atlassian <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_atlassian.png\")
<\/p>\n39. ProfitWell <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_profitwell.png\")
<\/p>\n40. Sketch <\/h3>\n
![\"website](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_sketch.png\")
<\/p>\n41. Airtable <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_airtable.png\")
<\/p>\n42. Chargebee <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_chargebee.png\")
<\/p>\n43. Recurly <\/h3>\n
![\"website](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_recurly.png\")
<\/p>\n44. Close <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_close.png\")
<\/p>\n45. Cultured Code <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_culturedcode.png\")
<\/p>\n46. WebinarNinja <\/h3>\n
![\"website](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_webinarninja.png\")
<\/p>\n47. Curated <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_curated.png\")
<\/p>\n48. FreshBooks <\/h3>\n
![\"high](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_freshbooks.png\")
<\/p>\n49. Front <\/h3>\n
![\"website](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_front.png\")
<\/p>\n50. FullStory<\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_fullstory.png\")
<\/p>\n51. Kalo <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_kalo.png\")
<\/p>\n52. Kayako <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_kayako.png\")
<\/p>\n53. Pipedrive <\/h3>\n
![\"high](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_pipedrive.png\")
<\/p>\n54. Square <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_square.png\")
<\/p>\n55. Typeform <\/h3>\n
![\"landing](\"https:\/\/static.gosquared.com\/images\/liquidicity\/19_06_28_Landing_Page_Guide\/19_06_28_typeform.png\")
<\/p>\n