Putting together an A+ landing page can be tricky.
There are so many elements that a top-notch landing page needs, and making those elements the "best" they can be often depends on what your landing page goals are.
Take form length, for example. It's just one of the many components you need to optimize, but best practices will tell you that both short and long forms perform well -- it all depends on whether you want to generate a lot of (potentially) lower quality form submissions, or a smaller number of higher quality submissions.
So if you're looking to up your landing page game, it's helpful to know what goes into a great landing page and see a few examples of these nuanced elements in action. Surprisingly, when I started doing research into the latter, I realized there are hardly any sites out there with examples of modern, impressive landing pages that are more than just a sign-up form on a homepage. So we decided to compile a list of landing pages we love ourselves.
Big, big caveat here: I don't have access to any of the stats for these pages, so I can't tell you how well they convert visitors, leads, and customers. Still, these examples have some of the best combinations of those nuanced landing page elements I've ever seen. Obviously, if you feel inspired to try any of these tactics on your own site, the only way to know whether they'll work for you for sure is by testing them out for yourself.
15 Examples of Great Landing Page Design
First up is Wistia's landing page for their Free Plan. Right off the bat, you notice the one-field form to create your account -- the blue, minimally patterned section contrasts nicely with the bright white form field.
The length of the form field combined with the prominent placement eliminates nearly all friction to create an account ... but if you're having doubts, you can always scroll below to read answers to top FAQs. By separating these two sections with stark color contrast, Wistia makes it much easier for you focus on converting.
It's no surprise Unbounce is near the top of this list -- they've actually written the book on creating high-converting landing pages. Although there are lots of amazing things about this landing page, the two that I absolutely love are: 1) The directional cues from the headline and browser's fold, and 2) the really detailed information below the form.
The first helps direct attention to the goal of the page -- for you to fill out the form -- in a really obvious, yet fluid design. The second gives this page an SEO boost (search engines will have more content to crawl) and assuages any worry from folks who need to know more about a piece of content before handing over their information, all while not distracting people from the form.
Full disclosure: IMPACT is a HubSpot partner -- but that's not why they're included here. This landing page was what sparked the initial idea for this post. I love the whole layout of the page, from the banner in the top left that tells you this ebook was updated recently, to the rotating testimonials, to the outline that surrounds the form. This landing page has both beautiful and functional design -- what we all should strive to have on our landing pages.
While WebDAM's landing page has many neat features, my favorite (by far) is the form. The icons are all indicative of the information you need to put in -- just look at the ones next to "First Name" and "Last Name." The form has a blue background that stands out from the hero image behind it. And the "Submit" button? It features an orange background (a complementary color to blue), customized and compelling copy, and an arrow to signify that you'll progress to the downloadable guide. Top-notch work, WebDAM!
Like Unbounce, Basecamp has a really long, in-depth landing page with lots of information below the fold, but what won me over was that cartoon man pointing his finger to the form. Not only does it spruce up a somewhat minimal page, but it actually directs your attention to the form. Like IMPACT's design, this little picture is pleasing to the eye and helps landing page visitors convert on the form to the right. Can't get much better than that!
Often, people think landing pages are static pages on your website ... but with the right tools, you can make them interactive and personalized.
Take the example below from Bills.com. To see if you'd benefit from their consultation, you answer two questions before you are shown a form. I'm not sure how the algorithm works (or if there's one at all), but while I was filling it out, I had some anxiety about not qualifying. Once I found out I did, I was excited to fill out the form, which I'm sure most people who are in debt and using this tool are. By making this offer seem more exclusive before the form appeared on the landing page, I'd bet that Bills.com increased conversions pretty significantly.
According to data by Chartbeat, most people tend to spend the most time reading and engaging with content around and below the fold. So putting a form right at the fold could pay off. That's what Contently did in the example below. They give visitors the ability to dive into two different pages of content while the form placement stays put. I love how they've balanced giving visitors in-depth information with the front-and-center form placement.
With just a few tricks, you can make even the longest landing page feel short.
Webprofits' landing page below shows us how. Right at the top, there's a prominent form field for an email address -- with a nice contrast against the background so it stands out. If you want to convert right then and there, you can put in your email and, magically, the rest of the form field appears. By not putting that whole form field up front, they help reduce friction.
They also make it easy for you to figure out what Webprofits actually does. The rest of the page offers detailed information about what you'll get when you give over your information. Plus, it includes strategic CTAs throughout to take you back to the top to fill out the form.
Even though this HubSpot Partner site is in Spanish, you can still appreciate its conversion capabilities. My two favorite features of the page? The form stays in a fixed, prominent position as you scroll through the site. I also love the hands that serve as directional cues toward filling out the form and sharing the page with others.
Sometimes, you've just got to stop and admire a landing page for being beautiful. Using high-resolution photography and lots of white space, H.BLOOM's landing page is a pleasure to look at.
Besides its beauty, the page has some great conversions elements: an above-the-fold form, clear and concise description of what'll happen when you fill out the form, and even the bright orange "Submit" button. The only thing we'd change up? The copy on the "Submit" button -- that could be more specific to the offer at hand.
Sometimes the smallest details make the biggest difference. They're what make this landing page awesome, for example.
That small PDF symbol over the feature image helps set expectations for what format the download will be in. The arrow in the hero image's sign helps further direct your attention to the form (so you, you know, fill it out). And the orange background on the form's headers helps further direct your attention there. All of these small, seemingly insignificant details help bring together a solid, admirable landing page design.
12) Conversion Lab
Typically, I wouldn't include an example of a homepage with a form on it in a post about landing pages (click here to learn why), but this website is special. The homepage is the entire website -- the navigation links just take you to the information below. When you click "Get Contacted," the entire site moves over to make room for the form. I love how you don't have to leave the page to fill out the form, yet the form won't feel intrusive to casual website visitors.
Litmus sends one of my favorite email newsletters, but their landing page to promote these newsletters is just as remarkable. Their use of color is especially phenomenal.
Notice how the most important part of the landing page (where you need to give up your email address) has a dark background, making your eyes naturally gravitate toward it. The "Subscribe" button is also a complementary color to that background, making this area (and the form in general) pop even more. Litmus even animated the supporting images of the email newsletter, which is just the cherry on top of a terrific landing page.
Right off the bat, this landing page pulls me in with a compelling, punchy header: "Don't make me zoom." It directly speaks to a common experience most of us have had when we're browsing on our phones or tablets -- and it's a little sassy, too.
But that's not the only thing keeping me interested in this landing page. Notice how the color red is strategically placed: It's right at the top and bottom of the form, drawing you even closer to the conversion event.
Plus, this design is meta to boot -- it's looks and works great on mobile, too.
Like many of the other landing pages in this post, Shopify's trial landing page keeps it simple. The user-oriented headline is just a few words. The page relies on bullets, not paragraphs, to communicate the trial's details and benefits. There are only a few fields you need to fill out before you get started. All of this makes it easier for you to get to the point: creating your store.
The icing on the cake? This landing page looks gorgeous (and functional) on any device you're using. Responsive design for the win!
Which of these landing pages were your favorite? Let us know in the comments.
Editor's Note: This post was originally published in March 2014 and has been updated for accuracy and comprehensiveness.