Ask HN: Examples of great landing pages? |
Ask HN: Examples of great landing pages? |
Simple, and conveys the meaning. Also provokes the curiosity.
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.
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.
(Not my blog and I have no affiliate relationship - just a reader)
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.
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.
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.
Also took me awhile to design the forum thread https://bitcointalk.org/index.php?topic=3220677
Edit: the scrolling is also janky, I think as a result of the node garden rendering/processing.
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.
Simple, explains the product well, looks beautiful!
Our landing page for our new launch!
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 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
Likewise, if you spend 40 hours on the landing page and only 10 hours on the product you're selling...
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?
You might need a bit of HTML/CSS here and there to customize things, but you should be able to get by without it.
- 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
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.
Everything about their product and design is great, but they also have an informative landing page.
(Also, props to the Seinfeld references)
All rock
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?
You get the explanation, the selector and the recommendations all in one 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.
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
People often confuse visually pleasing with financially pleasing.
Willing to put a bet down you could 3x traffic/conversion with design improvement.
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
Price is a data point a customer needs to make the decision.
Give them all data points you can.
If I can't be convinced your product is worth my time, does price even matter at that point?
Does a great job of demonstrating the value of the product.
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.
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.
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."
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 :)
I really hope that the idea will catch on, and that it will gain traction (and actual roasts as a result).
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
Loads nothing on Firefox without Javascript ...
Connection not secure error box ...
<slow clap> Nicely done.
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.
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.
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.
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.
The first impressive landing page I saw with video/gif screencast was SublimeText: https://www.sublimetext.com/
"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/
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?
Both. The latter is the reason for the former.
Just make sure you don't steal bits that fall under copyright
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.
https://cdn.dribbble.com/users/688456/screenshots/4273785/at...
People can also get disengaged by too much distraction I would guess (at least I do).
Also I enjoy https://onroadmap.com/
It is so amazing and beautiful. I wonder what technologies they use to build the front end.
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.
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.
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.
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 really like Notion...
> 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.
Whoever did the writeup for that one - you have all my respect.
“StackOverflow: How to add numbers”
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!
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).
https://github.com/riley-martine/inappropriate-notifications
- "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)"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.
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.
And it's free. No brainer. Yes, this app is great.
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 :)
Request desktop site fixes it, though the loading screen is annoying AF.
FF 58 Android.
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.
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.
I have an i3 with unimpressive specs and it runs perfectly smooth on chrome.
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.
Particularly if you sell to enterprises. Many companies will make more money by sizing them up and giving them an optimal custom price.
They have 18 decimal places.
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.
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.
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.
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.
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.
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.
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.
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).
Looks like we're reading different HNs.
Not sarcasm or passive agreesivesness. I'm genuinely interested in the data from someone in an agency.
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...).
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.
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.
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.
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.
