
How Stripe Designs Websites (2017) - saadalem
https://leerob.io/blog/how-stripe-designs-beautiful-websites
======
nargella
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. 

[1][https://dev.to/kyleparisi/making-web-
animations-9ng](https://dev.to/kyleparisi/making-web-animations-9ng)

~~~
at-fates-hands
in the early aughts I remember "mega" menu's were all the rage.  Most have been
abandoned because they were too hard to make responsive.  Cool to see stripe
went for it utilizing some pretty interesting CSS properties.  It's cool they
were able to keep it responsive down to 670px. 

I also liked your analysis of how the perspective property worked in this
case. 

------
fermienrico
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
[https://sourcehut.org](https://sourcehut.org)

Drew writes about his spartan approach towards design:
[https://drewdevault.com/2019/03/04/sourcehut-
design.html](https://drewdevault.com/2019/03/04/sourcehut-design.html)

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. 

~~~
jaywalk
I think sourcehut's site looks like a cluttered, ugly mess.  I'm glad that your
opinion is in the minority, because I like that the web has moved far beyond
late 90s-early 2000s design. 

~~~
yeezul
Agreed. 

If I somehow end up on a similar looking website, I'd often close it and move
on to the next result on Google. 

My brain automatically associate that UI with an archive website that probably
hasn't been uploaded since 2005ish. 

~~~
badsectoracula
> My brain automatically associate that UI with an archive website that
> probably hasn't been uploaded since 2005ish. 

If you know that your brain is wrong then why aren't you actively trying to
teach it not do that association? 

------
013a
Their marketing site is amazingly beautiful.  Their actual application sites
are barely customized bootstrap templates. 

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. 

~~~
jksmith
Functionality, power, perfomance, no unicorns, no FUD, low bs factor:
[https://www.berkshirehathaway.com/](https://www.berkshirehathaway.com/)

And a fraction of the design costs! 

~~~
nine_k
Not mobile-friendly. 

Otherwise, nicely communicates the idea to be from 1990s. 

~~~
niknetniko
Works for me, what's not mobile friendly about it? 

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

~~~
leerob
Especially their new documentation format:
[https://twitter.com/patrickc/status/1253031147459604482](https://twitter.com/patrickc/status/1253031147459604482)

~~~
boromi
super nice.  Wonder how it's implemented

~~~
leerob
I believe they said it's completely custom. 

~~~
jnsie
Yup.  They said it was homemade when asked.  A few people on that twitter thread
asked for it to be open sourced, but so far no response...

------
teej
It's worth taking a look at Stripe's revised color palette after a ton of
fascinating research - [https://stripe.com/blog/accessible-color-
systems](https://stripe.com/blog/accessible-color-systems)

~~~
callmeal
I don't know about everyone else but with my eyesight, the text on that page
is pretty much impossible to read. 

Strange for a blog post url that begins with "accessible". 

~~~
Operyl
I have pretty terrible eyesight, but I did not find the font or color
difficult to read here. 

------
spyckie2
Just an anecdote - almost every aspiring graphic / web designer I know has
designed a stripe inspired website. 

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. 

It's funny reading engineers talk about design.  Imagine if business people
made comments on the elegance of lisp:

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

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

------
pjscott
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 _supporting_
role.  At the risk of sounding corny, Stripe's landing page carries out a
_conversation_ 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:

Reader: WHY SHOULDN'T I CLOSE THE PAGE RIGHT NOW?  YOU HAVE THREE SECONDS! 

Page, in big letters: "The new standard in online payments"

Reader: That sounds potentially relevant to me.  You have... a few more
seconds.  Make haste! 

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

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! 

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

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. 

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! 

Reader: Ooh, nice!  Okay, I'm sold.  How do I get started? 

Page: We put another "Start Now!"  button at the bottom in the hope that you'd
be thinking that. 

\--

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. 

~~~
jberm123
Agreed.  I think content plays a much more significant role than aesthetics in
what makes a site "great".  I mean, look at the site we're on now.  HN's
aesthetics are clearly outdated and "unsleek" by all modern comparisons.  But
the site facilitates bringing the relevant content to its users well, like
Stripe's website.  That's the differentiating thing Stripe does well -- its
visual design is not the difference maker. 

~~~
Zenbit_UX
HN is the exception not the rule, it's half full of devs with irrational
hatred towards javascript frameworks and half full of devs with irrational
devotion towards javascript frameworks.  The two groups have found a tenuous
peace by agreeing to direct their hatred towards designers. 

As a designer, I use one of the many alternative HN clients made for my
people. 

~~~
nojvek
I don’t think we hate designers.  I think they are great. 

The best designers are those who are absolute maniacs at trying to figure out
the essentials, ensuring every little thing has a purpose, design that helps
the user get their job done.  It’s fast, it’s simple, it’s readable and
delightful. 

I think what I as a dev loathe is bloated design, animations without a
purpose, megabytes of crap that slow things down.  Those social sharing buttons
no one clicks. 

I have a job to do, I have little patience, don’t make me feel like an idiot. 
Just get the job done. 

------
boredgamer2
I've been wanting to re-create my blog & about/personal page.  Are there
similar write-ups for beautiful blogs/resume/about pages? 

~~~
leerob
I have a few links that might help. 

    
    
      - Web Design in 4 Minutes https://jgthms.com/web-design-in-4-minutes/
      - Beginner’s Guide to the Programming Portfolio https://leerob.io/blog/beginners-guide-to-the-programming-portfolio
      - Improving My Next.js MDX Blog https://leerob.io/blog/mdx
    

There's also a great directory of personal sites here:
[https://personalsit.es/](https://personalsit.es/)

~~~
swyx
great links, thank you! 

------
ComputerGuru
Previous discussion for reference:
[https://news.ycombinator.com/item?id=15838270](https://news.ycombinator.com/item?id=15838270)

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

------
amelius
Looks very "Bootstrappy" like most of the web. 

~~~
leerob
How does Stripe look "Bootstrappy"?  Could you provide a specific example? 

~~~
amelius
Hey, I'm not a designer so not sure what you would like to see.  But as a user,
it's the general "feel" I get when I visit a website.  I'm thinking that the
web is converging to a specific style which was initiated by Bootstrap, and
Stripe's style is mostly a step in that same direction and certainly not
orthogonal to it.  Just my opinion of course. 

~~~
leerob
This post was originally written in 2017.  Since then, many sites have copied
Stripe's design––almost exactly in some cases.  I'd argue they started a trend
and others have since followed.  Yes, Bootstrap helped introduce specific
patterns.  But Stripe's execution of those design patterns was 10x. 

~~~
amelius
I'm certainly not going to argue about who was first, but if they really want
to stand out design-wise perhaps it's time for a new style? 

~~~
leerob
Check out their new documentation format:
[https://twitter.com/patrickc/status/1253031147459604482](https://twitter.com/patrickc/status/1253031147459604482)

They're using their design resources on product & documentation updates, which
I can appreciate. 

------
rococode
> However, I did find a gist containing the font which you can mess around
> with. 

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? 

~~~
leerob
It's not very common.  If you want to learn more about fonts on the web, this
is an excellent resource: [https://www.zachleat.com/web/comprehensive-
webfonts](https://www.zachleat.com/web/comprehensive-webfonts)

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

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

Please don't abuse antialiasing for making your text "look sharper" :/

------
sulairris
I’ve always love their visual design language, looks so good but still
professional

------
ape4
Does `text-rendering: optimizeLegibility;` really do anything? 

~~~
leerob
Yes! [ https://developer.mozilla.org/en-US/docs/Web/CSS/text-
render...](https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering)

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

~~~
wurst_case
Tough indeed.  BTW just checked gov.uk on mobile and had to close three banners
at the top before I could even see the content of the page.  Yikes. 

~~~
antigirl
Well that cookie banner is on every website.  The other banner is pretty
critical as it’s about covid.  Not sure which third you’re speaking of? 

------
mlacks
As a non-programer, what is the best way to find someone to re-draw my simple
property management site using these principles? 

~~~
njsubedi
You could try hiring a front end designer from Freelancer or Upwork. 

------
ryanwaggoner
Just curious: why was the title changed for this?  Does the word “beautiful”
violate the HN guidelines? 

------
QuantumGood
Stripe's top edge menus fail for me on Chrome; work on Firefox. 

------
kalaracey
No RSS feed for this blog? 

~~~
leerob
Author here – No RSS feed yet.  It's on my shortlist of features to add. 

------
ChrisArchitect
2017?  come on

previous:
[https://news.ycombinator.com/item?id=15838270](https://news.ycombinator.com/item?id=15838270)

