Finding inspiring landing page designs is something we do every day, but it’s easy to lose sight and go blank wondering where to get ideas from. That got us thinking, where else better to look than the top 21 tools that we personally use in our business.

So, we set out to review all those landing pages to give you some more tips.

We felt that expanding on the previous post would make a great follow up and expand your knowledge in order to apply to your own landing page and sales page designs.

If you’re an avid reader of our blog, you will have noticed the common theme of design and page structure is constantly discussed in each article and how they all link together.

In this article, we’re going to take each of the 21 websites and briefly discuss the common traits they all have, what makes their page stand out for the customer and some suggestions on what you could change or try.

By the end of this article, you will have gained a complete understanding of the common design elements that make a great landing page and more importantly, how you can avoid these common landing page mistakes that kill your conversions.

Take lead from the big boys!

Please Note: The screenshots below were taken as we see them. Some of the sites will be split testing their pages, headlines, colours and more. 

Want to jump around the post?

Use this menu to skip to the landing page examples below.

1. Amazon S3

Landing Page Examples from Top Tech Companies | Amazon Web Services Application

At the top of the page, you’ll notice a feature area that includes a toggle. The first toggle contains the most important element, asking for customers to ‘create a free account’.

In previous articles, we addressed the importance of making sure each landing page does ‘one job’ in order to make it easier for customers to take the necessary action required. Amazon does this very well by making sure the most important element is at the top and centre of the page.

Landing Page Examples from Top Tech Companies | Amazon Web Services Explore our products

Overall, Amazon does a great job here by limiting the use of text to explain the product and instead, opting to use icons and images. A website doesn’t need to be text heavy. Having key pages and 750 words of text can still work.

Things to consider:

  • Too many images – While images are great for limiting words on a page, there is a fine line between using too little or too many images. May be worth testing this on your page to see how far down your visitors scroll. If you discover that there’s a cutoff point the further down the page is scrolled, then it may be worth looking at using less imagery and testing other elements.
  • The main font is too small – When building a page, it’s always important to consider using a fairly large font size to cater to all types of vision. Some customers may find it difficult to read, which could force them to leave your page.

TIP: Don't clutter your landing page with images.

Download our 21 landing page tips checklist.

2. Asana

Landing Page Examples from Top Tech Companies | Asana Application

Asana makes a big emphasis here by focusing on ‘contact and communication’. In marketing, it’s commonly said that ‘the money is in the relationship you build with your email list’.

Asana has made sure to include an email form at the very top of the page along with a contact form for one-to-one communication. Essential for building that all important relationship with your prospects and customers.

Landing Page Examples from Top Tech Companies | Asana Social Proof Section

Asana also does a great job here of limiting the use of text and keeping it as minimalistic as possible. Again, opting for imagery and recognised brands to build authority and trust with the customer.

Things to consider:

  • Too many fields – Ideally, it’s always best to keep fields to a bare minimum. In this case, having a chat box beside an email opt-in form could potentially affect opt-in rates, and therefore not getting the most out of the traffic coming to the landing page.
  • Sub-Headline font too small – Make fonts as large as possible to cater to all types of visitors.
  • Remove Menu Bar – This may be a bit overkill, but having a menu bar could potentially limit conversions. May be worth split-testing this on your own pages to get the best results.

TIP: Make your sub-heading big enough to read.

Download our 21 landing page tips checklist.

3. Authorize.net

Landing Page Examples from Top Tech Companies | Authorize.net Application

Authorize.net uses a nice background image of a shop to help illustrate the idea that it’s ‘open for business’ and quickly establishing itself as a service provider.

Also, note the 2 buttons that instantly pop out of the page; making sure that the colours differ from the overall colour theme of the website to help it stand out.

Things to consider:

  • Use Images that accommodate text colour – Background images are crucial for explaining the theme of the website. However, it can make it difficult to read when using specific text colours.
  • Too many buttons – Wherever possible, try to include one button that does the job of what the page was built for. Any more than one could potentially confuse the customer.

TIP: Use consistent colours combinations to match your brand.

Download our 21 landing page tips checklist.

Note: The common theme of using minimal text and opting for imagery on the page. A common pattern that you will begin to notice as we progress further in our landing page analysis.


4. Buffer

Landing Page Examples from Top Tech Companies | Buffer Application

What’s interesting to note here, is that Buffer has opted for a well-designed image to again, illustrate what their service provides, with a sign-up button below.

Again making sure that it does ‘one job’ and letting the customer know what to do next in order to get started.

Landing Page Examples from Top Tech Companies | Buffer Social Proof Section

Buffer also cleverly includes an image containing small thumbnails of all of their current customers using their platform, which is a great way of illustrating social proof and building authority/trust.

For more information on Social Proof and other ways to generate influence read ‘Influence: The Psychology of Persuasion’ by Robert Cialdini.

Things to consider:

  • Better image placement – While it’s difficult to determine whether Buffer has split tested their landing page. It may be worthwhile including the main image below the headline and opt-in form and not above it.

TIP: Test image placement on your page around CTA buttons and forms.

Download our 21 landing page tips checklist.

5. Disqus

Landing Page Examples from Top Tech Companies | Disqus Application

Disqus has focused on very minimal design; opting for flat colours, basic imagery and limited use of text in order to again keep things clear and concise. Again, notice the clear call-to-action by telling their visitors what to do next.

Things to consider:

  • Use one call-to-action – Having more than one call-to-action button will greatly reduce the number of actions done by a customer due to confusion and lack of targeting. As we discussed in an earlier article, your page should be focused on one job. Any more than that would greatly limit the potential of your page.
  • Remove menu bar – Having a menu on your landing page could potentially limit opt-ins. Wherever possible, try to remove the menu and only have a page containing one call to action.

TIP: Use whitespace on your page making elements easier to read.

Download our 21 landing page tips checklist.

6. Web Clipper from Evernote

Landing Page Examples from Top Tech Companies | Evernote Application

As with Asana, Evernote has focused on communication and lead capture, including a basic headline and an email form in order to capture their visitor’s email address.

On first glance looking at the site, Evernote has made it very clear what their service is about and has done so by including as little wording as possible. Again, a common theme we’ve seen so far and will continue to see as we progress onward.

Things to consider:

  • The headline is unclear – Evernote uses the “Succeed Together” headline. But what the customer would succeed with is unclear and should get mentioned. Perhaps using a more compelling headline like “Get More Organised With Our Powerful File Sharing Tools.”

TIP: Make your headline message clear and easy to understand what the offer is.

Download our 21 landing page tips checklist.

7. G Suite (Formerly Google Apps)

Landing Page Examples from Top Tech Companies | GSuite Application

Google has made sure the use of columns is used effectively when laying out their page. As with the earlier pages, we’ve just analysed. Google also focused on imagery, clear call-to-action and limited use of text.

Landing Page Examples from Top Tech Companies | GSuite Features

Google has also brilliantly showcased a few video case-studies of existing customers to again help build social-proof, credibility and authority in the eyes of their visitors and prospects.

Things to consider:

  • Use consistent colours – While Google do a great job at the general layout of the page, they make use of keeping colours and design consistent. Again limiting the distractions and barriers that would prevent your visitors from taking the necessary actions.

TIP: Test using white backgrounds making a clean appearance.

Download our 21 landing page tips checklist.

8. Google Docs

Landing Page Examples from Top Tech Companies | Google Docs

As with their G Suite page, Google has again opted for minimalism and a clear call-to-action. What’s also very interesting here is they’ve included an animated headline live on the page, which helps capture the visitor’s attention.

We recently included this feature in our exclusive PlusPack plugin. See this written and video tutorial on how to implement an animated headline on your pages.

TIP: Try animated headlines to hit more points and keep people longer on the page.

Download our 21 landing page tips checklist.

9. Google Drive

Landing Page Examples from Top Tech Companies | Google Drive

Here’s another example of their Google Drive page. Again using an identical design theme.

Things to consider:

  • Split-test static and animated headline – While animated headlines are all the rage at the moment. It is always advised to test multiple headline styles to see if this makes a difference in your target market.

TIP: Split test your static headlines.

Download our 21 landing page tips checklist.

10. imember 360

Landing Page Examples from Top Tech Companies | iMember360 Membership Software

imember 360 uses a nice animated video, complete with a yellow call-to-action button that uses a different colour variation of the overall colour scheme of the page.

They also use short and clear wording and icons to explain what their service is about.

Looking at the page on first glance, it’s clear that imember succeeds with explaining exactly what their service is about whilst using as little space on their page as possible, again adhering to the minimalist theme as we’ve discussed earlier.

Things to consider:

  • Too many colours – The first thing that stands out is the use of colour. Too many colour variations can become very distracting and hard to look at. Always use 2-3 colour variations.
  • Call-to-action button too small – imember360 is spot on with using a button that’s a different colour to the main theme of their website. However, it seems too small and could be enlarged to help make it more prominent.

TIP: Use animated explainer videos to get your message across and explain what your product does.

Download our 21 landing page tips checklist.

11. Infusionsoft

Landing Page Examples from Top Tech Companies | Infusionsoft Application

Again, Infusionsoft opts for a minimalistic design with a clear headline and call-to-action. When designing your own headlines for your own pages, focus on simplifying it as much as possible by using as little text as possible. Here, Infusionsoft gets this spot on with a description of their service that’s only 10 words long!

Things to consider:

  • Unclear headline – The headline from a visitor’s perspective doesn’t make sense. What does “Growth” mean exactly? How does it benefit their customer? Becoming clear on the benefits and adding it in the headline will serve to retain more visitors and encourage them to take the necessary steps.

TIP: Try a benefit driven headline using 140 characters and not something vague.

Download our 21 landing page tips checklist.

12. Jing

Landing Page Examples from Top Tech Companies | Techsmith Application

Again, staying with the theme of minimalism, clever use of text and a clear call-to-action. Jing places their button on the top right of their page, making it clear and precise for their prospects in getting them to take the necessary actions. In fact, the entire page simply has this top section with another small section containing icons and a brief description of their service.

Things to consider:

  • Headline too small – Jing nails it with the headline description. However, it’s far too small and gets lost in all the other elements on the page. Making it larger and using its own colour would really help it stand out.
  • Larger call-to-action button – The button could be made larger, again to help make it more prominent and have it stand out, as with the previous consideration.

TIP: Make your primary headline large enough to stand out and grab attention.

Download our 21 landing page tips checklist.

13. ScreenFlow

 

Landing Page Examples from Top Tech Companies | Telestream Application

ScreenFlow incorporates images in a clever way by showing a laptop screen of the software user interface to give visitors a visual representation of what their service looks like.

Our latest update allows you to use images of laptops and devices to showcase your videos.

Things to consider:

  • Complex background image – ScreenFlow opted for a background image that contains various colours and other images, which looks too involved. This can distract the visitor from taking the required action.
  • More than on call-to-action – ScreenFlow should ideally remove the “Watch the video” button underneath the opt-in form, to help get the maximum opt-in rates on the page.

TIP: Try a FREE Trial call to action button rather than join or sign up.

Download our 21 landing page tips checklist.

14. Skitch from Evernote

Landing Page Examples from Top Tech Companies | Evernote Application

For the Skitch software, Evernote opted for a simple squeeze page. Again focusing on a brief description, simple green call-to-action button, and a compelling image to help the visitor take the next steps.

Also, notice the social media icons on the bottom right of the page. It’s important to also include any social media links to your social media accounts to get your visitors to follow you, which will help with relationship building.

Things to consider:

  • No main headline – Skitch opts to not use the main headline for their page, which could potentially confuse the first time visitor. Opting instead to explain the tools using their sub-headline, which uses a small font and is difficult to read. This can be improved by adding a short and clear headline and removing the sub-headline completely.
  • Remove the social icons – Again, keeping to the rule of ‘one page, one job’, removing the icons would allow the visitor to focus on taking the core action of downloading the tool and taking the next steps.

TIP: Don't add social icons that take people away from the page.

Download our 21 landing page tips checklist.

15. Skype

Landing Page Examples from Top Tech Companies | Skype Application

Skype’s biggest selling point is conversation and interaction over VOIP (Voice over IP) For their landing page, they’ve opted for a background image to emphasise community and interaction. They’ve also gone the minimum text route by including a simple headline and a call-to-action button at the top of the page.

Things to consider:

  • Too many elements – Looking at the page, there appear to be far too many elements and images, which makes it difficult to focus. Skype, however, does get it right by using a large headline that makes sense. Maybe with removing/reducing some images and keeping ones that are only necessary to use.

TIP: Minimise other elements that distract people form the primary action.

Download our 21 landing page tips checklist.

16. Slack

Landing Page Examples from Top Tech Companies | Slack Application

Slack’s page is very basic and simple. Using flat colours, a clear headline with an opt-in form asking for the visitor’s email address. I like how they use the asterisk (star symbol) around the word work* I feel it forces you to read on and locate the explanation of the word. This page has changed since we recorded the Slack teardown template.

Things to consider:

  • Vague Headline – On first glance, the main headline seems very confusing with no clear explanation as to what the service is really about or how it will benefit the customer. What’s interesting is how Slack remedies this by reserving the sub-headline to explain the main headline. Ideally, it’s always best to make the main headline as clear as possible to save from having to do this. Keeping things clear and simple is always advised.
  • Remove the footer – The footer menu contains too many links to other pages, which can cause distractions from the page’s main goal in capturing email addresses. If possible, remove as many distractions as you can to help maximise your email optin rates.

TIP: If you have footer links on your landing page keep them to a minimum.

Download our 21 landing page tips checklist.

17. Vimeo Pro

Landing Page Examples from Top Tech Companies | Vimeo Application

Vimeo’s focus has always been providing a service to content creators to upload videos to their platform. They’ve opted for an image of a photographer overlooking mountains to help describe their business as a platform for ambitious movie creators.

Landing Page Examples from Top Tech Companies | Vimeo Testimonials Section

They’ve also added a testimonial slider, which can easily be added using our very own testimonial slider element in our PlusPack plugin.

Things to consider:

  • Use a simple background image – Having a beautiful background image can at times, distract the visitor. In an ideal world, reducing this and instead opting for a more back colour background will encourage the visitor to focus on what’s necessary on the page. Perhaps split-testing different variations and seeing what gets the best result.

TIP: If you use background images keep them simple like landscapes that tell a story.

Download our 21 landing page tips checklist.

18. Voxer

Landing Page Examples from Top Tech Companies | Voxer Application

Voxer has gone for a more corporate look with their design by using words like ‘workforce’ as part of their headline. They’ve also chosen to use the mobile phone display route by showing their user interface to their visitors to help describe and demonstrate their service.

Things to consider:

  • Headline lacking key benefits – As previously discussed, a website must always answer the key question “What’s in it for me?” This does get covered in the sub-headline. Ideally, it should be short and make an impact when a visitor first comes to the page. Voxer can make improvements by removing the sub-headline completely and explaining the core business using a short and powerful headline.

TIP: Make your primary CTA stand out with a bold colour.

Download our 21 landing page tips checklist.

19. Visual Website Optimizer (VWO)

Landing Page Examples from Top Tech Companies | Visual Website Optimizer Application

VWO has always had a great user interface for customers and is infamous for providing one of the best AB testing tools in the business. With this in mind, we assume without a doubt that VWO is split testing this page. VWO has focused on showcasing their platform using video along with a basic page design and call-to-action.

If you’re a software company and have a proven track record with customers, use video to best showcase what your software has to offer.

Things to consider:

  • Sub-headline should be the main headline – VWO nails the sub-headline by explaining exactly what their tool does and how it benefits the customer. This can be improved by removing the main headline and replacing it with this. Also, opting for a larger and bold font could help it stand out more.

TIP: Answer a common questions immediately like stating your starting plan price.

Download our 21 landing page tips checklist.

20. Woocommerce

Landing Page Examples from Top Tech Companies | WooCommerce Application

Woocommerce has also gone for the laptop display image with the Woocommerce platform displayed. Looking at their page, it’s clear what their business is about with a clear headline and call-to-action.

Landing Page Examples from Top Tech Companies | WooCommerce Support Section

What sets Woocommerce apart here is that they’ve included an image of all of their support team to let their visitors and customers know that there’s a ‘real’ team behind the scenes that are on board and waiting to help. Again, building trust and credibility with their visitors.

Things to consider:

  • Larger headline font – Woocommerce does a nice job with the headline, but could be made better using slightly larger text to help make it pop out of the page and easier to read.

TIP: Add line height spacing around your headlines making them easier to read.

Download our 21 landing page tips checklist.

21. Zendesk

Landing Page Examples from Top Tech Companies | Zendesk Application

The sub-headline here is direct, clear and described in no more than 7 words.

Landing Page Examples from Top Tech Companies | Zendesk Optin Area

Zendesk’s main message here is to ‘keep customers happy’ with a call-to-action of asking the visitor’s name and email address for more information on how to achieve it, which would inevitably lead to the promotion of their service.

Zendesk again opts for a minimalist approach with a relevant background image to help visually describe the business.

Things to consider:

  • Remove the contact button – The contact button should ideally be added to the footer or the main menu; away from the main page. The sole purpose is to get the visitor’s email address and must always have that one job.

TIP: Use images of people or your team to connect with your visitor.

Download our 21 landing page tips checklist.

Key Takeaways

Now that we’ve analysed each business landing page, you can now clearly see the common elements each of them contain that make a great landing page, that’s simple and clear to navigate.

Here are the key takeaways:

  • Keep the most important elements at the top of the page.
  • Use email capture forms to collect email addresses.
  • Focus on keeping text to a minimum.
  • Use basic colours and relevant images.
  • Use testimonials as much as possible to build credibility.
  • Use columned layouts for better page organisation.
  • If possible, display your user interface using laptops/mobiles etc.
  • Focus your page on ‘one job’.

At OptimizePress, we’ve made landing page design quick and simple using our powerful LiveEditor. We’ve also included a premium Marketplace, taking on board each of the above elements found in professional websites and allowing you to instantly buy and upload premium templates to get started quickly.

We would like to thank Onder from our support team for his contribution in writing this blog post. Look out for more content from him.

Action Steps

As we stated at the start of this post, most of these sites are probably split testing elements of their landing pages. If you would like to split test your own OptimizePress landing pages do this:

  1. Upgrade to Publisher or Pro
  2. Download the PlusPack Experiment plugin
  3. Follow this guide on how to get started creating your first split test
  4. Create an awesome sales funnel to grow your business

Have you enjoyed this article?

Please share you comments below!

Tell us your favourite landing page design and we'll show you how to make it using OptimizePress.



    16 replies to "21 Landing Page Examples From Top Tech Companies"

    • Ian Bass

      I think my favourite of the tips is number 20 – TIP: Add line height spacing around your headlines making them easier to read.

      The correct use of spacing around your content, focuses visitor attention on the key message you are trying to communicate. This leads to increased conversation rates which as website owners increases our happiness rates :-).

    • Guy Willett

      Keeping to a straight-forward singular mission seems obvious but in this shortcode enbedded world it’s easy to get blown off track!
      Thanks for the great principles to adhere to.

    • Steve Welsh

      Great post, however, everything you discuss is selling a “product or subscription” (even the pages that can be considered services are actually product services). How about doing some research specifically on service based pages. Using OP2 as a website, with service pages and blog. It would be nice to see best practices for those type of pages with a single CTA.

      • David Frosdick

        Yeah fair points Steve. We are slowly collating a list of customer sites to use as examples but with so many customers it’s quite a task.

        We also don’t track these sites so it’s really difficult to find the great designs selling “service” type products. Not everyone shares there sites even though we ask :)

        Look out for more customer examples and critiques coming soon.

        • Steve Welsh

          Totally understand David, as you say you have so many customers using OP2. However, the sites you interrogate are usually large companies which is fine as we all aspire to emulate the big boys with bigger resources to craft a page. I would like to hazard a guess that over 90% of your customers are small businesses, solopreneurs using OP2 as a website with landing pages, sales pages, squeeze pages etc. How about having a competition to your email database, FB group picking 5/10 sites that you do a before and after…is that value to your customers? Will that be value for your prospective customers? Just a thought…

          • David Frosdick

            That’s the plan with the critiques. We’ll suggest improvements for sites that get submitted. I’ll post about that in the group today.

            What’s your site? Can you send me a link?

            • Steve Welsh

              ndigitalmarketing.co.uk

            • David Frosdick

              Ah yes!! Your site is on my radar!! Difficult to critique that one as is very nice but you can be first if you like 😁 ?

            • Steve Welsh

              Thanks for the positive words, it’s ok you can be brutal, tear it apart, it’s all in a good cause :) even if its showing the good, the bad, and the ugly, lol.

            • David Frosdick

              You weren’t the first critique but will be next ;)

      • Onder Hassan

        Thank you for the feedback Steve :)

    • Duke Vukadinovic

      Great read once again David! The best part of this post, if you ask me, are your tips on how those truly beautiful landing pages could be further improved even though I don’t agree with the every suggestion you’ve made :)

    • Rogério

      Another publication that sheds light on my business. Especially the tips to be minimalists and not exaggerate in the number of fields to register very close to each other.
      The tip about increasing the font size to facilitate the user experience was critical. Congratulations on the matter!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.