I've been a senior product marketer at Heroku and Realm (AKA the person responsible for leading the creation of product landing pages), and I gotta counsel y'all: when you're looking at landing pages, what makes them great has a lot less to do with the visual design, and a lot more to do with the story and message they tell.<p>They're fundamentally narrative media: a landing page proceeds serially from top to bottom. What you see first matters most; like every good story, it also needs to give you a reason to proceed down the page.<p>It's great when they converge — where the visual design, structure of the page and the copy itself all come together in a beautiful statement of the brand's values and the product's value propositions. But none of that can happen without a story that resonates powerfully with the people who it should matter to. On a cursory examination of landing pages, it's easy to forget that they're speaking directly to a specific group, and miss the real magic simply because you aren't in that group.<p>edit: apparently HN disagrees
<a href="https://muzzleapp.com/" rel="nofollow">https://muzzleapp.com/</a><p>Does a great job of demonstrating the value of the product.
Analyzing examples of great landing pages (in terms of marketing, not just design) is the subject of my blog, Your Landing Page Sucks!<p>This article is quite popular: <a href="https://yourlandingpagesucks.com/startup-landing-page-teardown-yc/" rel="nofollow">https://yourlandingpagesucks.com/startup-landing-page-teardo...</a><p>I also wrote a "Landing Page Cookbook" that got to the top of Product Hunt, and that contains a bunch of examples for every element you might want to put on your landing page.<p>Don't hesitate to message me/email me if you've got specific questions about your landing page.
I put together a browseable set of example high-quality landing pages here, ranging from startups to larger companies:<p><a href="https://design.crowdbotics.com" rel="nofollow">https://design.crowdbotics.com</a><p>These examples were originally selected by Kesler Tanner over at the Stanford Institute of Design. They represent what's going on as of mid-2017 in landing page design. The one shift that I've seen since this collection was last updated is the migration to bolder, more contrast-heavy color palettes that make use of more illustrations. Intercom and Dropbox's current sites are good examples here.
Here are a few resources for you to check out:<p><a href="https://hyperpixel.io" rel="nofollow">https://hyperpixel.io</a>
<a href="https://verynicesites.com" rel="nofollow">https://verynicesites.com</a>
<a href="https://onepagelove.com" rel="nofollow">https://onepagelove.com</a><p>And once you’ve finished design and build of your landing page, submit to <a href="https://roastmy.site" rel="nofollow">https://roastmy.site</a> to get feedback :)
Your landing page is going to depend highly on your target audience.<p>I worked at a place whose demographic was women aged 35+. Our landing page looked god awful -- super long, giant graphics and text, testimonials, autoplaying video, etc. But no matter how modern we tried to make it, the shitty eye-bleaching one always won out in A/B tests.
Quick question. Where do the designers / developers find assets? Or do they create them from scratch? One such 'assets' I've manage to find recently is <a href="https://mockuphone.com" rel="nofollow">https://mockuphone.com</a> (no affiliation), but apart from that there isn't much besides the usual. Fontawesome, pexels and the lot.
<a href="https://framer.com/" rel="nofollow">https://framer.com/</a><p><a href="https://www.figma.com/" rel="nofollow">https://www.figma.com/</a><p>The first impressive landing page I saw with video/gif screencast was SublimeText: <a href="https://www.sublimetext.com/" rel="nofollow">https://www.sublimetext.com/</a>
If you're looking to build a great landing page, I found this resource suuuuper helpful when designing our landing page: <a href="https://www.julian.com/learn/growth/landing-pages" rel="nofollow">https://www.julian.com/learn/growth/landing-pages</a><p>"I want you to think of landing page optimization from the perspective of desire:<p>Conversion = Desire (Increase this) - Labor (Decrease this) - Confusion (Decrease this)<p>It's less work to reduce a visitor's labor and confusion than to increase desire."<p>And here's our landing page: <a href="https://www.loopsupport.com/" rel="nofollow">https://www.loopsupport.com/</a>
For me, it’s all about the copy:<p><a href="https://sweep.cards" rel="nofollow">https://sweep.cards</a>
<a href="https://basecamp.com" rel="nofollow">https://basecamp.com</a>
There is this one site that lists a lot of great Landing Pages:<p><a href="https://land-book.com" rel="nofollow">https://land-book.com</a>
Look, here is my question: how is it that startups make such great websites? I try to make a website for my products, and they always look crap, even if I start with a template from themeforest, or use a single page site builder.<p>Is it necessary to pay to get someone to design it to make something look good, or do I just have naturally really bad skills at making things look attractive and convey a clear message?<p>What's the secret?
This one's just beautiful<p><a href="https://sentry.io/welcome/" rel="nofollow">https://sentry.io/welcome/</a>
I'm heavily biased but I think that Mozilla Firefox's landing page is pretty great. (I had nothing to do with designing it, but I do work for Mozilla.)<p><a href="https://www.mozilla.org/en-US/firefox/" rel="nofollow">https://www.mozilla.org/en-US/firefox/</a>
Concept for a New Zealand Surf Company.<p><a href="https://cdn.dribbble.com/users/688456/screenshots/4273785/attachments/975882/surf_fullsize.mp4" rel="nofollow">https://cdn.dribbble.com/users/688456/screenshots/4273785/at...</a>
shameless plug, I think you'll like it!<p><a href="https://www.launchaco.com/" rel="nofollow">https://www.launchaco.com/</a><p>Also I enjoy <a href="https://onroadmap.com/" rel="nofollow">https://onroadmap.com/</a>
I'm so impressed by the design of<p><a href="https://www.magicleap.com/" rel="nofollow">https://www.magicleap.com/</a><p>It is so amazing and beautiful. I wonder what technologies they use to build the front end.
Presuming it's OK to share own site: after countless iterations and lots of suggestions and feedback from HN and others, we're pretty happy with ours: <a href="https://neosmart.net/EasyRE/" rel="nofollow">https://neosmart.net/EasyRE/</a><p>Tells you what it does, tells a story, and then takes you right to the action. And it converts well for the market it serves.<p>Feel free to tell us what you think still sucks about it, constructive criticism > positive feedback.
I don't know if it has been mentioned already but I couldn't find it...<p>I really like Notion...<p><a href="https://www.notion.so/" rel="nofollow">https://www.notion.so/</a>
Shameless promo: I made a gallery that curates great landing pages, and sorts them according to section for easy reference.<p><a href="http://www.goodweb.design/" rel="nofollow">http://www.goodweb.design/</a><p>As a designer who sometimes works on landing pages, I’ve found it really helpful get a horizontal cross-section of what the best people are doing for a specific page section like pricing, feature overview, or hero.<p>Hope you find this useful too.
To supplement a landing page, consider an "About Us" page with this article's approach: <a href="https://kopywritingkourse.com/how-to-write-an-about-us-page/" rel="nofollow">https://kopywritingkourse.com/how-to-write-an-about-us-page/</a><p>(Not my blog and I have no affiliate relationship - just a reader)
My favorite was the New York Times from the early 2000's. Lots of information all concisely represented. <a href="https://web.archive.org/web/20010202075200/http://nyt.com:80/" rel="nofollow">https://web.archive.org/web/20010202075200/http://nyt.com:80...</a>
<a href="https://www.canva.com/" rel="nofollow">https://www.canva.com/</a><p>is probably my favorite I've seen? It has very little information I admit but I like how a site made for designers has a very unique design itself. I am not a designer myself but I was impressed enough that I still remember seeing it.
Good article on how to improve your landing page (with some great examples): <a href="https://medium.com/sketch-app-sources/improve-your-landing-page-by-learning-from-the-best-ddb431aa1c04" rel="nofollow">https://medium.com/sketch-app-sources/improve-your-landing-p...</a>
I imagine it's okay to share our own - we've gone through lots of iterations for ours at <a href="https://www.recapped.io" rel="nofollow">https://www.recapped.io</a>.<p>There are a lot of improvements that can be made (as with most sites), but we're pretty happy and get a lot of compliments.
Shameless self bump but I worked pretty hard on this.<p><a href="https://caratz.io" rel="nofollow">https://caratz.io</a><p>Also took me awhile to design the forum thread <a href="https://bitcointalk.org/index.php?topic=3220677" rel="nofollow">https://bitcointalk.org/index.php?topic=3220677</a>
I think it depends what you mean by landing page, and what you're hoping it'll achieve. Most of the pages listed in this thread so far are just good home pages. If you sent ad traffic to them, them will never convert as well as a page with no leaks other than the primary focus of your funnel.
<a href="http://goodweb.design/" rel="nofollow">http://goodweb.design/</a><p>Here's a great resource I reference often.<p>I prefer this rather than looking for inspiration on sites like Behance / Awwwards, which don't tend to tell design stories applicable to B2C / B2B audiences.
Landing page of the month
<a href="http://icelandingpagedesign.com/#blog" rel="nofollow">http://icelandingpagedesign.com/#blog</a>
<a href="https://anyshortcut.com/" rel="nofollow">https://anyshortcut.com/</a> A great productivity Chrome/Firefox extension
Take a look at <a href="https://onepagelove.com/" rel="nofollow">https://onepagelove.com/</a> if you haven't seen it.
<a href="https://webflow.com/ecommerce" rel="nofollow">https://webflow.com/ecommerce</a><p>Our landing page for our new launch!
Landing pages are awful. In 5 years we're going to be as embarrassed of them as we are now of the mid-oughts' "Skip Intro" buttons.<p>Landing pages fail at the Big Red Fez[1], and will eventually disappear with all the other attempts at giving the user "an experience" rather than a hypertext document.<p>1: <a href="https://www.amazon.com/Big-Red-Fez-Make-Better/dp/0743227905" rel="nofollow">https://www.amazon.com/Big-Red-Fez-Make-Better/dp/0743227905</a>
I don't have any specific examples but it really isn't all that difficult... anything you probably think is important...no one gives a shit about.<p>Simply explain why I should want to contact you with a unique selling proposition. Why should your customer care about talking to you. That is a single sentence. What are you offering and why does it have immediate value?
For e-book sales, Superhi's page is effective. The market is saturated, but design is their USP. And they acquire your email for TOC...<p><a href="https://www.superhi.com/learn-to-code-now-book" rel="nofollow">https://www.superhi.com/learn-to-code-now-book</a>
I learned a lot about landing pages through Justin Jackson. See for example his videos on YouTube:<p><a href="https://www.youtube.com/watch?v=roMpTWmhD6k" rel="nofollow">https://www.youtube.com/watch?v=roMpTWmhD6k</a>
<a href="https://cushionapp.com" rel="nofollow">https://cushionapp.com</a><p>Everything about their product and design is great, but they also have an informative landing page.<p>(Also, props to the Seinfeld references)
<a href="https://ninite.com/" rel="nofollow">https://ninite.com/</a><p>You get the explanation, the selector and the recommendations all in one page.
<a href="https://aprl.la/" rel="nofollow">https://aprl.la/</a><p>Simple, and conveys the meaning. Also provokes the curiosity.
I like this one: <a href="https://ohdearapp.com/" rel="nofollow">https://ohdearapp.com/</a><p>At a glance, it looks like that horrible browser error message about insecure SSL certificates, which is an interesting choice given the tool focusses on _fixing_ SSL related errors.<p>Simple, flashing red, it stands out imo.