I am very impressed with the hidden gems of stripe's landing page. Here's[1] a post I wrote that analyzed the drop down animation they use. I've never seen it anywhere else.<p>[1]<a href="https://dev.to/kyleparisi/making-web-animations-9ng" rel="nofollow">https://dev.to/kyleparisi/making-web-animations-9ng</a>
IMO Stripe’s design isn’t great. It’s polished but thats orthogonal I think. There are too many unnecessary animations, effects, random diagonal patterns, and the whole thing feels the opposite of “snappy”. Well, then what’s an example of a good website design - I personally really like <a href="https://sourcehut.org" rel="nofollow">https://sourcehut.org</a><p>Drew writes about his spartan approach towards design: <a href="https://drewdevault.com/2019/03/04/sourcehut-design.html" rel="nofollow">https://drewdevault.com/2019/03/04/sourcehut-design.html</a><p>These things are subjective though. Stripe’s design is decorative. Besides, “Decoration is crime” cliches, deep down inside I personally belong to the functional design or “no design” camp.
Their marketing site is amazingly beautiful. Their actual application sites are barely customized bootstrap templates.<p>And I wouldn't have it any other way. Marketing websites should be flashy to draw people in. But, when the rubber hits the road, I want functionality, power, and performance.
The most impressive thing about Stripe's website is IMO their documentation. I've tried to replicate it using tools like widdershins and slate, but can't get it as beautiful or functional.
It's worth taking a look at Stripe's revised color palette after a ton of fascinating research - <a href="https://stripe.com/blog/accessible-color-systems" rel="nofollow">https://stripe.com/blog/accessible-color-systems</a>
Just an anecdote - almost every aspiring graphic / web designer I know has designed a stripe inspired website.<p>Stripe's landing page is the peak of flat 2.0 web design, and to my knowledge, hasn't been overtaken yet by any other website yet.<p>It's funny reading engineers talk about design. Imagine if business people made comments on the elegance of lisp:<p>> I personally prefer JAVA. You can hire a lot more engineers that know it and it does the same thing. If you can't make money off of it, it's not real engineering. Let's keep things practical and functional, shall we?
There's another part to Stripe.com. Their payment processing works flawlessly. My employer has used them for a few megabucks of revenue over the past few years, with not one glitch due to them. The attention to detail in UI is totally worthwhile: I didn't have to train my colleague in A/R how to use Stripe. He just used it.
You can do all the visual things mentioned in this article and still very easily end up with a lousy landing page. Your goal is to convince people to become your customers, and the visual design is there to play a <i>supporting</i> role. At the risk of sounding corny, Stripe's landing page carries out a <i>conversation</i> with the reader, with the typography and layout acting to draw their eyes to where they need to look next. Until they change their ad copy, the conversation goes something like this:<p>Reader: WHY SHOULDN'T I CLOSE THE PAGE RIGHT NOW? YOU HAVE THREE SECONDS!<p>Page, in big letters: "The new standard in online payments"<p>Reader: That sounds potentially relevant to me. You have... a few more seconds. Make haste!<p>Page: "Stripe is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world."<p>Reader: Good, good. I want to accept online payments, and it's comforting to know that this place does non-trivial transaction volume. Rejoice, for I'm now willing to read an entire paragraph without closing the tab. Go!<p>Page: "Stripe builds the most powerful and flexible tools for internet commerce. Whether you’re creating a subscription service, an on-demand marketplace, an e-commerce store, or a crowdfunding platform, Stripe’s meticulously designed APIs and unmatched functionality help you create the best possible product for your users. Millions of the world’s most innovative technology companies are scaling faster and more efficiently by building their businesses on Stripe."<p>Reader: Your value proposition has become sufficiently compelling that I'm now willing to scroll down. My worry, though, is that the API is going to involve faxing COBOL to a batch-mode IBM S/360 or something.<p>Page: "[...] you can get up and running with Stripe in just a couple of minutes." And here's some really clean runnable example code! Press here to try it!<p>Reader: Ooh, nice! Okay, I'm sold. How do I get started?<p>Page: We put another "Start Now!" button at the bottom in the hope that you'd be thinking that.<p>--<p>Most landing pages that I see have decent-looking visual design, but fall flat because they weren't written with a skeptical and impatient stranger in mind. The really good ones like Stripe are the exceptions, and when I read articles like this I'm not sure if people realize why they're so much better.
I've been wanting to re-create my blog & about/personal page. Are there similar write-ups for beautiful blogs/resume/about pages?
Is it just me or the site doesn't stand out as something special? It looks good, don't get me wrong, but it isn't "beautiful" in the deeper sense of the word
> However, I did find a gist containing the font which you can mess around with.<p>I noticed in the linked gist that the fonts have been base64 encoded so that they can be loaded directly from the CSS file. I've never seen fonts loaded like this before - is it a common and/or recommended practice?
It is remarkable how iconic the Stripe marketing design has become over the past 10 years and how often it has been copied. I don't see it aging super well, it's not gonna be a design classic by any means -- but it really, really resonates with the Zeitgeist.
> We can utilize the text-rendering CSS property to allow us to choose quality over speed, as well as some vendor specific properties to make our font sharper.<p>Please don't abuse antialiasing for making your text "look sharper" :/
Posting about design on hackernews is going to be tough haha. I think some sort of merge between stripe and gov.uk is the ideal design experience generally, and then flavor depending on the intent of the product