Hacker News new | comments | ask | show | jobs | submit login
Ask HN: Examples of great landing pages?
566 points by iampaul 10 months ago | hide | past | web | favorite | 231 comments



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.

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.

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.

edit: apparently HN disagrees


Spot on. The highest converting landing page I have ever done was downright ugly. However, it made thousands of dollars with just a headline, a paragraph, and a buy now button.

People often confuse visually pleasing with financially pleasing.


Partially agree.

Willing to put a bet down you could 3x traffic/conversion with design improvement.


Without knowing any existing pages or stats from the original page this claim is weak bravado.

I worked out one time Ive more than 300 million online sales/signups/downloads under my belt. I like to think that gives me some credibility. And I agree with OP that simple, basic and even ugly pages can be extremely effective.


Even more than bravado, I’ve dedicated my entire life’s work to this claim.

Design is incredibly undervalued on HN, and I make contrarian claims to not only ruffle a few feathers, but because it’s a fundamental thesis of mine.

Note aesthetics are also a functional beauty to me, I enjoy both refactoring code and typesetting a landing page as part of the design process.


I feel like my original answer ended up playing to that tendency to undervalue design here. Which ain't great. I guess my point was that it's super easy to look at a design and feel like it looks great and miss the fact that design is developed closer to the conclusion of a process that begins with developing a compelling message and story. Because folks miss that, "what's a great landing page?" is a question that usually ends up delivering a lot of landing pages that look the dopest, appeal to the most people, whose design and message is accessible, rather than landing pages that are actually successful at doing what they need to do (which may fly right by folks not in the intended audience).

Fwiw, I think you're right. 3x is probably what the match of design and message results in, especially because a lot of what software does can't be described merely in words. It needs design to put the accent on the right things, or else will fail to communicate (most of the time).


> Design is incredibly undervalued on HN

Looks like we're reading different HNs.


Not really. I can concur with HN and developers in general not giving a shit about design. I can’t tell you how many developers I’ve spoken to who tried launching their own product only to go silent after I sent them a design proposal. Devs seem to have a very limited understanding of value of design.


Could you provide some concrete examples? I see you work at a marketing agency in SF. That probably means you could have some good ones to share. Like a/b comparisons of pages that saw such improvements.

Not sarcasm or passive agreesivesness. I'm genuinely interested in the data from someone in an agency.


No aggression perceived.

The best client example is Groove (https://www.groovehq.com/). In 2014 they hired us to take the existing site (https://web.archive.org/web/20141223145657/https://www.groov...) and make it attractive to serious customers who can "trust" their company based on the site. Went from 1M ARR to 5M in 18 months.

A more concrete personal example is when we ranked "HTML Color Codes" with essentially zero feature improvements beyond nice UI/UX. Now ranked #1 in Google for several queries...making $5k/mo passively. More detailed write up on Indie Hackers (https://www.indiehackers.com/interview/growing-to-1-300-mo-b...).


Nice that you posted client examples.

I think your examples do not really prove the role of visual design conclusively because in the 18 month time-frame, the folks at Groove must have had several efforts running concurrently with the explicit goal of increasing revenue. The web site facelift you were engaged for happened to be one of the steps they took towards that goal.

For instance, they would have intensified sales, marketing, customer success, fixed bugs in the product etc in addition to the revamped website, so we can't really pin the significant jump in revenue from $1m to $5m on visual refresh alone.

Not trying to diminsh the work that you did, merely trying to put things in perspective because our tendencies as humans is to misattribute causation, which is bound to happen if all contributing factors to a thing's success are not properly considered.


Agreed.

Client examples are indeed impossible to determine direct outcomes. But to add context, they added two team members in that time but the largest change came from landing larger clients, which was the whole point of the redesign.

Also added the personal example as a more controlled experiment to show the value that design can have.


I really like your phrasing, "serious customers who can "trust" their company based on the site." Design isn't a "bell and whistle," it's the first impression of your product and the first opportunity to stand out. Someone who invests in good design has shared values with me, is willing to make permanent investments in there company, and is confident in their image and their product.


Hey Moe its ok if you are not comfortable answering this. What would be the ballpark budget for this kind of work.


The fact that you ask disqualifies you.


While I do think your design is good. I think the main reason you got more conversions are that you put more focus on social proof, so instead of showing technical details you show how many are using the software as well as a smiling face of satisfied customers.


can you elaborate on colors (Groove)? Why does the landing page has orange, green + two shades of blue? Blue is in their logo, but red is missing. Instead there are orange and green. I have little to no experience in visual design. But intuitivelly I would expect fewer colors and better adjusted to match brand colors.


agree


Just the other day I threw together a landing page for a whale watch crypto app and posted about it on Facebook. It had a conversation rate of 70%, an oddity I’ve never before accomplished. Point being, it’s all about relevance to a very very specific audience.


I agree that the messaging and story are the most important components. But you still need to have a clean and elegant design to get people to consume the story and message. You can make the content more digestible by making use of white spaces, having adequate line height and line width, including appropriate imageries and graphics, and using lots of bullets. If the page is too ugly or too overwhelming with texts, more readers will bounce.


What are your thoughts about showing pricing on the landing page?


Depends on what you're selling, how complicated the pricing structure is and whether price is likely to be a major factor in people saying "yes" to your product.

And above all whether the goal is to get people to click the "buy" button, to get people trying the service to see how much they might need it or to get people to contact your enterprise sales team


I feel like most of the time, pricing decisions involve a lot of information and it feels like a digression to have it all on one page. For simple apps and pricing structures, it's doable — my Rdio-to-Spotify app was $5, and said so up front – but the point of the landing page is to help someone decide if you're useful to them or not. Get them to the "yes, if" stage before showing them pricing, imo.


Be upfront with your price.

Price is a data point a customer needs to make the decision.

Give them all data points you can.


It's not that simple. Some businesses would lose a fortune if they started pricing this way.

Particularly if you sell to enterprises. Many companies will make more money by sizing them up and giving them an optimal custom price.


As long as your explicitly factor in the number of sales being lost in the calculation


Bad advice. While this works in some cases, you’d lose a lot of money on some products because the would be customer has not realized the full value of your product. A product generating 500% roi may mean $100 to one business and 1 million to another - should they pay the same price?


Like andkon said, convince me that your product is something I need or compel me to need it. I might hit your landing page with little to no prior information.

If I can't be convinced your product is worth my time, does price even matter at that point?


Wait.. Heroku has a Landing page?


https://muzzleapp.com/

Does a great job of demonstrating the value of the product.


Note they are using real people's faces without permission (through randomuser.me / uifaces.com) for the avatars in those 'funny' sample notifications.

https://twitter.com/ohhoe/status/970753038406373377


They do have permission though. The people used granted permission when they submitted their face to uifaces.com, in fact they even went so far as to submit their faces to the "authorised" section on uifaces

> those awesome folks allow their faces to be used on live products

They might not have ever imagined that their faces would be used in this manner, but they did give their permission.


If you read further down the Twitter feed, it's clear that this particular person didn't think she'd granted such permission, and the whole setup looks questionable on other grounds as well.

Putting someone's face next to suggestions of serious problems like drug abuse or STIs on a public site without their knowledge or explicit consent at least raises ethical questions, and then trying to argue that it's obviously a joke when apparently the person in question has been receiving concerned mail from friends who didn't know that makes it pretty clear that any joke has gone too far. The dismissive attitude of the site developer just makes it worse.


I did read the entire thread, the site developer offered two different solutions. But the other commenters seemed to dismiss both suggestions, preferring to fetch their pitchforks instead.


His “solution” would be to hack it to avoid that specific person's image, which is not really solving anything, other than the site author’s own problem.

The footer of uifaces still says _mockups_ and the FAQ/TOS haven’t been available for a while. This is clearly playing legal sword fighting and unethical.


I'm not sure I'd consider anything he suggested a good solution, though.

What he's done, and the aggressive/dismissive way he's handled a perfectly reasonable request afterwards, are what very expensive defamation lawsuits are made of. That is as it should be, IMHO, given that notwithstanding the developer's personal opinions about visitors understanding, the consequences of his actions demonstrably did reach someone close to the person whose photo was used and cause real distress and concern.


> Putting someone's face next to suggestions of serious problems like drug abuse or STIs on a public site without their knowledge or explicit consent at least raises ethical questions

This was the plot of a Friends episode like 20 years ago. Joey's face is used in a herpes ad in the subway.

I think he got paid but the issue is the same. Give someone carte blanche to use your likeness and there might be some negative consequences.


Give someone carte blanche to use your likeness and there might be some negative consequences.

But clearly in this case the lady didn't believe she'd given carte blanche to use her likeness even in such an obviously offensive manner, as she repeatedly mentions only expecting it to be used in mockups.

Moreover, such evidence as anyone has linked to from that Twitter feed seems to support her side of the story more than his so far. There is no explicit licence available anywhere that I can see, apparently there used to be some sort of separate area where people offered their photos for production use as well, but that no longer seems to exist, the FAQ no longer seems to be working, and there's no indication that this particular lady's photo was in that section.

In any case, the onus is definitely on the guy whose site is posting her photo next to that kind of content to justify his actions here. It doesn't take a genius to realise that this could seriously upset someone even if he is covered legally, and so far it's not even clear that he is covered legally. As I said in another comment, this is what very expensive defamation lawsuits are made of.


"YouPorn: Billing issues"

Whoever did the writeup for that one - you have all my respect.


Not as good as -

“StackOverflow: How to add numbers”


For anyone who hasn't seen it yet:

http://i.imgur.com/Q3mkcnl.gif


This is great. Nowadays, we would replace "there's a jQuery plugin for that" with "there's an NPM module for that".


All communities that depend on upvoting/downvoting summarized in a nut-shell. :P


Try and add 2 ethereum amounts correctly without using a library.

They have 18 decimal places.


DECIMAL(38, 18) in SQL should do nicely for that.


I hadn't seen that before - I really need to brush up on my jQuery!



hahaha i thought this was a billing issues landing page for YouPorn which was well designed, couldn't find it!


Cute app but I have to share something I learned a week or so ago: you can silence all notifications if you click the Notification icon in the top right corner. Then scroll UP and turn on Do Not Disturb.


Actually you can Alt (Option) click that icon to enable Do Not Disturb without actually opening the notifications center :).


Mac pro tip: Option-click everything. It's remarkable how many secrets are lurking behind near every UI element.

And once you've option-clicked, also option-shift-click, command-click, control-click, etc.

An easy favourite is the Wifi menu bar item. Option-click to see all sorts of useful info about your current connection, including IP address, MAC address, connection speed (Tx Rate), the amount of noise, etc. And when you've option-clicked the menu, hovering over network names shows you the key info about that network.


Yeah, pretty much every icon in the menu bar has an Option-click alternative. I very often Option-click the volume button, which lets you select input and output devices without opening the sound preferences pane.


I don't get why Apple just doesn't provide more UI tips, like tooltips on first use of the UI. There are so many little things like this that would be great to know. For example on Windows Dialog popups, the labels for each option underline the letter for the keyboard shortcut. Did you know that Apple has keyboard shortcuts for dialog popups too, if you press CMD+letter? It took me years to figure that one out.


It sounds like the purpose of muzzle is to enable Do Not Disturb automatically so you don't have to remember.


I have a few qualms with this app: [1]

1. For a Linux user, you can already build such a system yourself quite trivially by writing a shell script, compiling your own custom X server, and then monitoring the screen state for full-screen apps. For Windows or Mac, you just remote desktop to your Linux box with built-in software.

2. It doesn't actually reroute the notifications. Most people I know want to be able to perform presentations without the visual clutter of notifications, but they still carry a phone to check their Instagram while presenting. This does not solve their notification issue.

3. It does not seem very "viral" or income-generating. I know this is premature at this point, but without charging users for the service, is it reasonable to expect to make money off of this?

[1] https://news.ycombinator.com/item?id=8863

---

In reality, this is a great landing page and a cool idea for an app. Also, I have nothing but respect for people who share their honest, thoughtful assessments on HN. The future is tough to predict.


if you think compiling a custom X server is "trivial", we must have very different ideas about what that word means


It's a running joke about DropBox. The giveaway is in the link in the parent's post.


I think you missed the joke.


> It does not seem very "viral" or income-generating. I know this is premature at this point, but without charging users for the service, is it reasonable to expect to make money off of this?

Does everything have to be a moneymaker? Like you said, this would be trivial to setup yourself. It's a nice piece of software that provides some advertising for his other products.


Go to the link in the comment...


Ah, I didn't realize that this was a reference to the Dropbox comment. Gotcha.


"...a week or so ago..."

That's awesome.

Seriously though. For those of us who need our chat on despite the frequent unpopular rants of our sister/brethren, I welcome this attempt to filter. Btw - excelent landing page!


Good tip, thanks.

The only reason I might like muzzle a bit more is that you don't have to remember to turn it on & off (according to the landing page, I have not yet tried it).


I almost want the reverse of this - fake hilariously embarrassing notifications.



That you can somehow trigger on someone else's machine while they're screen sharing!


Actually it isn't. It does not talk about a lot of important details/questions one might wonder before downloading the app, like:

    - "how does this app do it"
    - "how is this app any different than macOS's Do Not Disturb feature"
    - "where's the source code for this app, why would I trust this software with full access to my compute (it requires that)"


If there's one thing I realized as a technical person/programmer: it's that other people do not think like this at all. Barely anyone give a crap about source-code, it could be written in an amalgamation of COBOL, ActionScript, windows .bat files and C#/.NET to glue everything together. As long as it does what it does without causing major trouble, it's fine for them.

I guess you could add a link to a FAQ with answers to questions you might be interested in for those who do care.. and they do have that, so it's no problem whatsoever.


A lot of folks who may download this app are unlikely to care about any of those questions. They only care that their problem is solved. If they landed on this website during their searches for an app to snooze notifications, the above the fold first paragraph answers that succinctly, promptly followed by a download button.


That truly is a great landing page. The fake notifications were so entertaining I shared it with some friends.


I just fully belly laughed my way through that. So good


IMO the examples are ridiculously unlikely.

I’d very much focus on something more business-oriented and believable, like a question about a report and in an extreme case, possibly speaking about a client in a less than professional tone.

“meet me in the bathroom” is not within the realm of feasibility for anyone I know.


I don't think that's the point. Many of us have ourselves or seen someone we know go up to present and have private notifications be displayed as they hustle to turn on Do not Disturb. While they aren't as extreme as this, these are funny and make the viewer recall a time when they were in this situation, and perhaps see how much better they'd be if the downloaded the app.


Yeah, but then it wouldn't be funny.


So I get that you can Option + Click on the Notifications icon in the upper right to turn on Do Not Disturb... but I love that this does it automatically for you.

And it's free. No brainer. Yes, this app is great.


It's also one of the most entertaining landing pages ever.


alt + click on notification bar on top right (which looks like some notes, kinda the burger menu) gets it also done (for free). Nice page though.


That page was actually shit. The font is really small and the text to background contrast is really bad on mobile.


Very nice landing page. The funny notifications made me download it.


Did not realize this was a problem :-)


Best I've seen I think ever.


Funny release notes too.


CodeKit reviews stand their ground too.


Funny, but skip politics in your demonstrations, no need to limit your audience.


ahaha, nice one!


Nearly every release of a new Stripe product of feature has me amazed at what their frontend people can do.


Analyzing examples of great landing pages (in terms of marketing, not just design) is the subject of my blog, Your Landing Page Sucks!

This article is quite popular: https://yourlandingpagesucks.com/startup-landing-page-teardo...

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.

Don't hesitate to message me/email me if you've got specific questions about your landing page.


Uh, your landing page kinda sucks on mobile. CSS is all a-wonk and you have a gigantic email collector right at the top


That's odd, it's one of my best performing lead magnets. I'll look into it. Thanks!


I put together a browseable set of example high-quality landing pages here, ranging from startups to larger companies:

https://design.crowdbotics.com

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.


All I see is an orange screen and “Crowdbotics”…


It's one of those silly damned things that could and should be a static page but is served as JS instructions for building it in the browser instead.


No, I too see a massive title header occasionally of you scroll up you can glimpse a page of tiny images very briefly as it scrolls under the massive header.

Request desktop site fixes it, though the loading screen is annoying AF.

FF 58 Android.


Just wait a bit longer it is downloading 18MB, that might take a while ...


Nice page. Tough, I would make the whole picture clickable instead of just the eye icon. And, the "x" to dismiss is hidden unless I have the browser at full screen. Firefox dev 60.0b7


Thanks! I'll get these updated.


YES, BUT WHOSE SITES ARE THESE?

I had a tough time trying to find some of these websites, like "Scale." Which doesn't own scale.com or scale.io or any other derivative, but "scaleapp.com."


Here are a few resources for you to check out:

https://hyperpixel.io https://verynicesites.com https://onepagelove.com

And once you’ve finished design and build of your landing page, submit to https://roastmy.site to get feedback :)


Ah, the idea behind roastmy.site seems really cool, but the comments it gained so far seem really non-constructive. I didn't see any comment actually roasting the site, only compliments and one small suggestion (to add a comma somewhere).

I really hope that the idea will catch on, and that it will gain traction (and actual roasts as a result).


Hey, thanks for the feedback on Roast My Site!

It's actually my hobby project and I put it together in a couple days time. Its still in early development stages, a lot of things are missing and some are not working.

Also, since there was no official launch, there is no traffic or users to actually submit sites and/or roasts. But they are coming soon and I think its going to be fun :D


Has anybody ever submitted Roast My Site to itself?


I did! On page 2 or 3, no comments.

Interestingly, to my surprise, not many people actually post. Lots simply browse.

I should work more on engagement and commenting and make it easy


Yes, I saw it on page 3. It had 0 comments.


> https://hyperpixel.io

Loads nothing on Firefox without Javascript ...

> https://verynicesites.com/

Connection not secure error box ...

> https://onepagelove.com

<slow clap> Nicely done.


Yeah Hyperpixel is a JS heavy site it seems, not much I can do about that. But it works beautifully when you have all normal features enabled.

http://www.verynicesites.com/ <-- that was my fault, typed from mobile without checking if they had SSL or not. They didn't :)

OnePageLove works fine for me.


Your landing page is going to depend highly on your target audience.

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.


Anybody that's done a/b testing for a Japan audience can relate to this.

I'll never pretend to sympathize with the nation's need for ten million characters of 8pt font spaghetti sprayed over every page, but I have long ago accepted it.


Could you give us some examples of those? Since I don't browse websites in Japanese, I have no clue what that looks like. Thanks in advance.


Hah, YES! This will be fun :)

So, it's calmed down a bit, but here's the homepage for rakuten, the biggest ecommerce site in japan. Nothing too out line, except the very Japanese block-ads on the top of the page and running down the right side: https://www.rakuten.co.jp/

See also the "superdeal" page (this may expire) https://event.rakuten.co.jp/superdeal/?l-id=top_normal_flash...

Notice the quick scrolling banner, the word "DEAL" in english sprawled everywhere (with SUPAAAAA!!! in Japanese before it) lots of different color background blocks with white/black/red text over it. Very much the "assault the senses" style of Japanese advertisement.

The watch ad, for example. "50% OFF!" "ONLY UNTIL 4/2 9:59!!!" "GET 20% POINTS BACK!" "SUPER DEAL!!!!"

Here's the relatively more calm website for book-off, the largest retailer of books in Japan. I think reading is more popular in Japan as a hobby though I don't have empirical data as evidence, just my personal observation. Maybe I only think this way because the cities are more dense. Anyway: https://www.bookoff.co.jp/ scrolling banners with many colored backgrounds and different font colors, lots of "ZERO YEN!" kind of stuff, lots of different font stylings, sizes, etc. Controlled Chaos.

Notice also the prototypical "block style" ads all down the page. We probably think of them as "grids" or "cards" in the web dev world these days but they've been doing this on japanese internet since the 90s and it harkens to Japan print ads, magazines etc.

Ah, here we go, I knew Don Quixote (or Quijote) wouldn't disappoint. Right down to the url: "donki.com" lol http://www.donki.com/ not https note

GIANT banner ads scrolling at the top, as of now we've got a black and white one, sliced through with angled images. Simple model photo after that, another one but with a very blue background, then fourth one BOOM that classic Don Quixote eye assault, complex golden background with streamers, Japanese equivalent of comic sands with tilted font in all sorts of colors and sizes, the Don Quixote... penguin? screaming at you. Scroll down for more madness.

Thanks for asking me to do this, I haven't taken a peek at Japanese ecommerce sites in a while. In-person ads have hardly changed in Japan (I was there last week for the sakura) but it's clear to me that the web design styling has calmed down remarkably. If you ever get a chance to pick up some Japanese classifieds, you can get an even better sense of what we used to deal with :)


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 https://mockuphone.com (no affiliation), but apart from that there isn't much besides the usual. Fontawesome, pexels and the lot.


A bit of both.

Lots of designers/devs will use existing assets to save time. They often pull materials from asset packs that other designers publish, as you mentioned (The Noun Project also comes to mind).

On the other hand, a lot of designers make it a point of pride to make their own assets from scratch. I'm certainly in the later camp, though I have friends in the former. It's nice to be able to say "I made everything on the site", but there's a definite cost in time and effort and pain.


That's a nice project. I'll have to take a deeper look into it. Is there a central place where these types of projects pop up?


Most of the things I'm aware of just came up on HN, reddit, twitter, or in podcasts.

The best approach I've found is just to follow popular designers (on twitter, podcasts, etc). When they talk about something cool, dig in and learn who made it, and follow that person to see what cool things they talk about. Repeat.

Maybe start with @brad_frost and @vlh.


Added. Thanks.


dribbble.com and behance.net. That's more idea generation than asset generation but you can then mashup the ideas to generate your own assets


You can find a lot of design assets at sites like graphicriver.net (from envato) and creativemarket.com. Both these sites feature textures, backgrounds, icons, fonts, customizable mock-ups etc.


https://framer.com/

https://www.figma.com/

The first impressive landing page I saw with video/gif screencast was SublimeText: https://www.sublimetext.com/


If you're looking to build a great landing page, I found this resource suuuuper helpful when designing our landing page: https://www.julian.com/learn/growth/landing-pages

"I want you to think of landing page optimization from the perspective of desire:

Conversion = Desire (Increase this) - Labor (Decrease this) - Confusion (Decrease this)

It's less work to reduce a visitor's labor and confusion than to increase desire."

And here's our landing page: https://www.loopsupport.com/


Some criticism: I don't really like the buttons style, but more objectively, you should center text and take a look at their size, it made me super uncomfortable when I opened the page. Also, the "Try us for a week" at the bottom is shifting the page in the background to the left, leaving 20px of white space or so in the right side (Windows, Google Chrome). The "Start Trial" button that appears after clicking on "Try us for a week" looks much better.


Thanks man! Really appreciate the feedback... sounds stupid, but we had trouble repro-ing that 20px whitespace bug.


There is this one site that lists a lot of great Landing Pages:

https://land-book.com



For me, it’s all about the copy:

https://sweep.cards https://basecamp.com


I'm a 'copy' guy too, and those are the first ones I thought of when thinking about 'great landing pages.'


I have to disagree on Sweep. The copy is good but it’s rather long-winded; they should really get to the point and show me their tool sooner.



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.

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?

What's the secret?


It takes a lot of practice. The beautifully-designed work that surrounds us was largely created by people who have spent years and years honing their craft. When you start off, there will be a gap between what you want to do and what you're able to do. It's important to just keep pushing through that, and especially to keep iterating. Iterate on your websites — take a moment every now and then to clean up some part of it, and after a few months or a year it'll be worlds better. Iterate on your process — find sources of inspiration, learn new techniques, try different ideas. I have seen people who were terribly unskilled, who felt like they were artless or inept or without taste or untalented, grow over the years to the point where they could make great work. It hurts a bit when you see people who are "naturally" good, but at best, that only means they had an easier go of things. It doesn't mean you can't eventually get that good too.


"It doesn't mean you can't eventually get that good too." I respectfully disagree. I'm an anesthesiologist. I can teach anyone commenting here — in 5 minutes — how to give a general anesthetic. To wake a person up without damage? That'll be three years of your life (after you finish medical school).


When you aren't / aren't working with a designer, the secret is to "draw inspiration" (copy) from landing pages that you like, and add/edit in a bit of your own flair (and of course your own copy). No need to entirely reinvent the wheel.

Just make sure you don't steal bits that fall under copyright


>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?

Both. The latter is the reason for the former.


Unless you decide to spend a ton of effort learning how to design, you're much better off hiring someone. (There's also the opportunity cost of not spending your time on your core competencies.)


You can start with good defaults like on SquareSpace and Instapage.


They probably have web designers.


https://snerx.com/ Minimal, in-line CSS, pre-formated HTML, etc.


This one's just beautiful

https://sentry.io/welcome/



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.)

https://www.mozilla.org/en-US/firefox/


Actually, that's downright terrible. I've used "Firefox" since it was called "Phoenix," but I know a lot of people that would click that link and go "huh? What is Firefox?"

The firefox homepage shouldn't be about advertising Quantum (which only applies to people already using Firefox and acutely aware of a new release (as it doesn't even introduce what Quantum is before diving in)), but rather about advertising Firefox itself.


Thanks for working for Mozilla! Important work



Hm ... I like the design and it's cool maybe for a product video or commercial, but I don't think it's a good landing page - not much information and too many moving parts.

People can also get disengaged by too much distraction I would guess (at least I do).


shameless plug, I think you'll like it!

https://www.launchaco.com/

Also I enjoy https://onroadmap.com/


Love the iconography and simple animations of the Roadmap landing page! The on-boarding experience of launchaco is phenomenal though.



I'm so impressed by the design of

https://www.magicleap.com/

It is so amazing and beautiful. I wonder what technologies they use to build the front end.


My god is that a laggy landing page if you haven't got a GPU behind your browser. Also I'm not sure what happened but just as I was closing the page I got a single note of what I believe to be electro(?) music

It was also clearly designed with access to smooth scrolling, I'm assuming Mac. The scroll is just awful without and the animations don't really play nicely.

I closed the page before I learned what Magic Leap is. Not the best for a landing page.


Dang. I have an MBP with an i7 and 16GB of RAM, and a landing page lags?! Hells no.

Also, I think it ate 1% of my battery in the blink of an eye. No thanks.

Update: 8MB for a landing page. Wait, waaattt?

I'll give you the first animation is somewhat cool, but a lot of visitors will definitely be turned off by the slow and sluggish experience, and I don't think it's the impression I want from a company (apparently) banking on Virtual Reality. I like my reality fairly instantaneous, thank you, so the goal would be to have my VR to behave in kind.


That's strange. I'm on a 4 year old Dell with integrated graphics and unimpressive specs and it runs perfectly smooth.


Probably a 'safari' thing.

I have an i3 with unimpressive specs and it runs perfectly smooth on chrome.


I'm in Chrome65. I didn't say anything about using Safari.

In any case, even w/o the lag, the page is still way too slow to load and quite heavy. Not really the best approach for conversion.


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: https://neosmart.net/EasyRE/

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.

Feel free to tell us what you think still sucks about it, constructive criticism > positive feedback.


I like the landing page. Its got the right balance between text and whitespace/images etc. Its a shame though, that when you click the links, you navigate to pages that adopt a different theme entirely. It would be better if all the site were themed the same.


Thanks for the reminder. We were seeing how the LP converted before updating the rest of the site.. several months ago :)

That goes with the job when you're marking a non-web service - the website is quite distinct from the product and so doesn't see the same kind of attention or have the same kind of urgency.


I don't know if it has been mentioned already but I couldn't find it...

I really like Notion...

https://www.notion.so/


Shameless promo: I made a gallery that curates great landing pages, and sorts them according to section for easy reference.

http://www.goodweb.design/

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.

Hope you find this useful too.


https://ninite.com/

You get the explanation, the selector and the recommendations all in one page.


I disagree, that page is way too crowded. I wanted to click off immediately. It still took me a minute to figure out what the offer was because of all the other stuff on the page.

That is the beauty of airbnb's landing page, you get a sense right off the bat of exactly what it is they are selling.


Chocolatey is better anyway


I had a look and can’t really see why. Why would you want to type out the names of all the apps you want? With ninite you tick a box and that’s it.


To supplement a landing page, consider an "About Us" page with this article's approach: https://kopywritingkourse.com/how-to-write-an-about-us-page/

(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. https://web.archive.org/web/20010202075200/http://nyt.com:80...


https://www.canva.com/

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.


Looks OK but it does suffer from the same problem as a lot of other sites. It wants you to commit before telling you what you are committing to.

Tell me what you offer and give me a rational as to why I should be interested. That's all I'm asking yet no one seems interested in answering those questions on a landing page.


I really like the mouse-following effect in the background. It's subtle enough to not be annoying, but playful. As an interaction designer, I love seeing these little hints of fun that sneak into otherwise "vanilla" projects.


Good article on how to improve your landing page (with some great examples): https://medium.com/sketch-app-sources/improve-your-landing-p...


I imagine it's okay to share our own - we've gone through lots of iterations for ours at https://www.recapped.io.

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.

https://caratz.io

Also took me awhile to design the forum thread https://bitcointalk.org/index.php?topic=3220677


Not sure if it's because I'm viewing it on a 1440p display, but the node garden animation in the background is super laggy. When I shrink it down to mobile size it looks nice though.

Edit: the scrolling is also janky, I think as a result of the node garden rendering/processing.


On iOS, it doesn’t scale correctly, and scrolling seems to be pretty broken


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.


http://goodweb.design/

Here's a great resource I reference often.

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.





Basically perfect. Any way to find out who this designer is?


Follow the comments in the OP https://news.ycombinator.com/item?id=10310265



Apple.com before any product launch is probably the gold standard here.


I actually dislike their use of whitespace and scrolling animations. Usually those landing pages are way overdone IMO.


Landing page of the month http://icelandingpagedesign.com/#blog


https://anyshortcut.com/ A great productivity Chrome/Firefox extension




I've always loved https://webflow.com/

Simple, explains the product well, looks beautiful!


Take a look at https://onepagelove.com/ if you haven't seen it.


This one is more focused on storytelling: https://www.heynishi.com


Not a landing page but generally good advice here: https://goodui.org


https://webflow.com/ecommerce

Our landing page for our new launch!


Some feedback for you: this is dreadful on mobile. Scrolling is broken, page took like 20 seconds to render what I assume was the main content (coloured blocks with text).


Sincerely--thanks for that feedback. Lots of different posts getting downvoted here and so little useful feedback. That's what we're here for, after all.

What mobile device and browser do you use? I'm on Safari on an iPhone 7 and it loads pretty quickly for me. We do have a CDN in front of it.


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.

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.

1: https://www.amazon.com/Big-Red-Fez-Make-Better/dp/0743227905


What do you guys think about having no landing page and taking the customer directly to the product !? If it's a web app.


dribbble.com comes with really lovely designs. You'll have to look for something fitting your product though...


Personally I like landing pages that are pretty. It makes me confident that some care went into the product too.


It should only make you confident that they either paid a designer to make something pretty, or that they have design skills. You can put a lot of care into a technical product and have no design skills or expendable income to make something "pretty."

Likewise, if you spend 40 hours on the landing page and only 10 hours on the product you're selling...


Have a look at http://lapa.ninja


Was about to suggest that, good source


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.

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?



Their forum is the fastest one I've ever seen!


For us less technical user, what do y'all recommend for creating great landing pages?


If you're mentioning "less technical" I assume you're talking about tools? You can make good landing pages in Wordpress using a page builder like Elementor (just drag & drop).

You might need a bit of HTML/CSS here and there to customize things, but you should be able to get by without it.


Thanks! Yes, referencing tools.


Focus on the content:

- explain in a few words what your product is, so it can be understood by everyone

- explain what your product does

- how your product is different from everything else

- pricing

I know it sounds obvious, but I often have no idea what the product is after reading a landing page


I've been working on this for a product launch we are trying to do and have had the problem you are talking about.

The problem is that explaining that without ending up mired in detail is much harder than people give it credit. I've found it very useful to actually write out the list of what I am trying to convey and look at it constantly while doing design work.

Also splitting out the work - the first forays have been what I realized was actually development work that I was hiding behind design. During design I put away the dev environment and just work with sketches.


Where can I find top notch designers who can create high quality landing pages?


you can check this out! https://www.launchaco.com/


I run a freelance web development company, if your interested i could shoot you a template of what your's could look like


I’d love to learn more about it! How can I reach you?


google.com ? At least when it came out first. Simple, intuitive and efficient.


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...

https://www.superhi.com/learn-to-code-now-book


I learned a lot about landing pages through Justin Jackson. See for example his videos on YouTube:

https://www.youtube.com/watch?v=roMpTWmhD6k


https://cushionapp.com

Everything about their product and design is great, but they also have an informative landing page.

(Also, props to the Seinfeld references)



What is the definition of a landing page?


> In online marketing, a landing page, sometimes known as a "lead capture page" or a "lander", or a "destination page", is a single web page that appears in response to clicking on a search engine optimized search result or an online advertisement. The landing page will usually display directed sales copy that is a logical extension of the advertisement, search result or link. Landing pages are used for lead generation. The actions that a visitor takes on a landing page is what determines an advertiser's conversion rate.

> — https://en.wikipedia.org/wiki/Landing_page



I love the irony of them showing their best website of the day with marks set to "0.00", unless Javascript is enabled.


Arena. www.are.na


ipfs.io ipld.io libp2p.io protocol.ai

All rock



IMHO only http://fairpixels.pro and http://airbnb.com are good. They both immediately tell me what they're selling and don't bombard me with visual information.

Stripe's page has so much detailed graphics and distractions on their site that it took me a moment to even realize I was on stripe's page. They even display a bunch of other product logos on their page more prominently (and in color!) than their own - as if intentionally trying to mislead me further [1].

Dropbox's page seems to have an identity crisis but they get away with it because people know what they really are. They're selling me some abstract "workspace" - I have no idea what that means and it's probably not what most people use dropbox for. They immediately want to sign me up for it though?

1: https://i.imgur.com/IcpYiOR.png


I feel the Dropbox redesign was horrible. The look & feel just doesn't make sense.


The colors, the fonts.. It's like they asked an eccentric fashion designer to make the webpage. Really, does anyone like it? o_o


I personally love http://fairpixels.pro those guys seem to understand design


www.typeform.com how's this post-rebrand?


Shamelessly plugging my product: https://archbee.io


https://aprl.la/

Simple, and conveys the meaning. Also provokes the curiosity.


It's simple alright, but their Twitter bio is more descriptive of their actual product than their entire web page.


I like this one: https://ohdearapp.com/

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.

Simple, flashing red, it stands out imo.




Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: