
How Stripe Designs Websites - leerob
https://www.leejamesrobinson.com/blog/how-stripe-designs-beautiful-websites/
======
siddharthdeswal
I suspect there's a huge amount of halo effect happening in this discussion.
Company makes good product, company gets funded,company hires good designers,
company spends a lot on marketing... people go "wow, amazing design!". Other
designers write blogs about it, analyzing and glorifying minute details.

Another company makes good product, no funding, unknown, no brand, hires good
designers... no one cares.

So, what do people here think of the design of
[https://draftsend.com/](https://draftsend.com/)? (I have no affiliation)

Can someone break it down into the absolutely incredible design that it is?

Rant over, here are my points:

\- Lots of good designers out there, creating well-thought, delightful
experiences.

\- Lots of good marketers and copy-writers out there, creating smart,
thoughtful copy that makes sense to their target audience.

\- Someone asked, "what are other websites that are in the same league as
Stripe's?". Oh, tons of them. See the websites of advertising agencies, design
agencies, go look up "beautiful websites list" on a search engine of your
choice. And, I'm sure everyone here realizes there's no objective measure of
"same league as Stripe", or even Stripe's league.

And finally: Stripe's design isn't great design. It's design that a certain
people like. If you're saying it's great, then define for whom.

~~~
WA
You might enjoy this read: [https://medium.com/@chopeh/the-state-of-design-
ff5142fb806](https://medium.com/@chopeh/the-state-of-design-ff5142fb806)

~~~
siddharthdeswal
Thank you! Best laugh I've ever had on HN.

~~~
dvlsg
I lost it at the top highlight.

------
northernman
Nice article, but please don't draw the conclusion that this design has
anything to do with Stripe's success. Rather, they can afford to put this
level of effort into the design as a consequence of their success.

Check out the Wayback machine to see early versions of their website.

~~~
aroman
I did just check the wayback machine, and as far back as I could find[0] their
design has been really solid. Am I missing something or were you just
guessing?

[0]
[https://web.archive.org/web/20111007130738/https://stripe.co...](https://web.archive.org/web/20111007130738/https://stripe.com/)

~~~
northernman
That's exactly what I was referring to. That page, while perfectly
respectable, doesn't use fancy fonts, drop down menus, etc. which the original
article highlighted.

My point is that Stripe's success was primarily driven by the excellent
quality of their api and documentation, and not by fancy website design.

That success allowed them to subsequently devote the resources needed to
produce the current incarnation of their website.

~~~
kayoone
That design is also from 2011, nowadays it looks quite simple but back then i
think it had a similar effect on people. Of course it isn't as detailed as the
current one, but they are a company that values design a lot (in all areas)
and it shows.

------
albertgoeswoof
IMO stripes design is not the important part, for me it’s the code snippets
that are right there on the landing page.

Every other payment provider (at least until stripe came along) buried the
code examples (if there were any) in some detailed spec doc after you had
already signed up and were basically already committed.

Putting code on the landing page shows that their API genuinely is simple and
time saving.

~~~
usaphp
> Putting code on the landing page shows that their API genuinely is simple
> and time saving.

Isn’t that exactly what a good design is? The main job of a Good designer’s is
to present a bunch of information in a most accessible way to end user
possible

~~~
albertgoeswoof
yes, but this article just talks about UI design (buttons, typography etc.)
which of course if valuable but pales in comparison to dropping snippets of
code on the landing page

One other reason why Stripe's landing pages are so beautiful is to let
prospects know that the payment form they will put into their application (and
therefore will be a part of their UX) will look good by default

------
stevenj
Off-topic: a somewhat unknown fact about Stripe is that it started as
/dev/payments.

Its former CTO explained how /dev/payments became Stripe:
[https://www.quora.com/How-did-Stripe-come-up-with-its-
name](https://www.quora.com/How-did-Stripe-come-up-with-its-name)

------
joliv
Some other design elements that stand out to me:

\- The transition between dropdowns in the top nav. Really smooth, and
something you won't see anywhere else.

\- Semi-consistent and sufficiently different color schemes for the different
products. See the difference between
[https://stripe.com/atlas](https://stripe.com/atlas) and
[https://stripe.com/us/sigma](https://stripe.com/us/sigma).

\- Subtle box shadows. They've done this by cranking the blur way up around
30px. For comparison, the Google search bar uses a blur around 1px or 2px.

~~~
victornomad
It might be pretty, but my computer just got crazy scrolling both sites. I
hope they would design for everybody. Not all of us have 32gb of ram and the
latest cpu + gpu combo...

~~~
marenkay
Well, I have that and those two sites still lead to CPU overload.

------
te_chris
As someone who has run a digital agency I was hoping for some insight into
their design process, prototyping, mocking, testing etc. Nope. Some CSS
properties. I can assure all of you who are unfamiliar with the process that
what is discussed in the article is not how they manage to build great pages.

~~~
leerob
To be fair, the actual title was "How Stripe Designs Beautiful Websites". I'm
not sure why it got edited. I could see how you made that assumption based on
the current title. I was more just briefly touching on how they spice up the
design, not the entire process. That could be a whole separate article.

------
throwaway613834
Their sliding-photo "About Stripe" page is making the fan on my i7 CPUs run
like there's no tomorrow. Over 2 CPU cores spiking up to 100% utilization. I
love a great design as much as anybody, but is it really worth the cost of
maximizing electricity usage?

Now regarding the aesthetics themselves... the menu text is blurry too, which
makes me want to poke my eyes out. [1] Not sure what the issue is but I'm
guessing these fancy web fonts doesn't support "high" DPI properly. Just use
normal font rendering for everyone's sake.

[1] [https://imgur.com/a/Akpi7](https://imgur.com/a/Akpi7)

~~~
k3a
That's exactly what I also hate. Sometimes mousing over a button makes the fan
spining crazily. Websites are more and more cpu and ram-intensive
unnecessarily.

They are making a kind of masterpiece to be presented on a gallery than
websites useful for everyday use.

Also I have mixed feeling about the whole single page application era. They
are impressive on one side and bloated and slow on the other. I liked more
when web used to be content (text/image) sharing platform than apps. Browsers
today are like operating systems on top of operating system. :( That's both
good and terrible.

~~~
throwaway613834
Yeah, I agree with everything you said.

------
everdev
I've been designing websites since 97 and it's amazing how hard it is to make
things look so simple. Great write up and inspiration for clean design.

~~~
MuffinFlavored
What are some other sites that are in the same league as stripe.com quality
wise? Maybe not necessarily the same "simple" design, but beautiful overall. I
find them quite inspiring whenever I land upon them.

~~~
leerob
[https://www.algolia.com/](https://www.algolia.com/)

~~~
richardknop
That's interesting. They seem to be using the same colour palette as Stripe.
But I find Stripe's website cleaner and more pleasant to the eye. So I think
Stripe got better design.

------
pablo-massa
The article put a lot of attention in the visual design of the page, how
Stripe "designs" websites didn't rely only in asthetics.

How the Stripe team write the message thinking on explain clearly what the
product does to a specific target audience, how they design a solid and
organized information architecture of the site to make it simple and fast to
find things, how they work on performance to give a good browser experience,
how they work on SEO to increase discoverability, this is a really important
part of the design too.

The design community sill have the 2000s phantom of "design is to make it look
nice", it is, but many other decisions can create a good user experience
design that aren't asthetics.

For example, Dribbble, it captures some part of UX design; the visuals,
aesthetics, shapes, use of colors, empathy and more can be seen reflected in
those little shots. However there is another large part related to the
strategy, information architecture, planning, sketching, etc. that Dribbble
can't cover, and that's fine. On Medium you can find some good and complete UX
case studies to tell you more stories about design.

Also don't forget that this is a desktop environment analysis of the visual
design, phones is a different story, different context and has constraints
that sometimes didn't allow you to express visually like in desktop.

~~~
phantom_package
For sure.

I would really like to see more UX articles aimed at developers - I think that
would help combat the "design is only looks" attitude you mentioned, it's a
bit more logical/rational than pure graphic design, and doing it well requires
a good dose of empathy.

------
jnpatel
Whether you like the way it looks or not, it's amazing how influential
Stripe's current aesthetic is:

[https://twitter.com/chopse/status/930935055274225664](https://twitter.com/chopse/status/930935055274225664)

------
frihani
While the landing, marketing, and documentation sites look quite polished,
does anyone using the site from app side agree that the design is lacking?

There could be good reasons for not changing the application side but the
differences are pretty noticible.

~~~
RobertRoberts
I use their app, and it's pretty good. It has a few very, very weird quirks in
very few places (some radio/menu option interface things are just bizarre and
non-standard) but 97% of it is just fine. Even superb design wise. Useability,
there's a few minor issues, but what system doesn't?

------
GuiA
Man it’s kinda crazy that in 2017, it’s worthy of attention when a design has
hover/touch down states for its buttons, but here we are.

Stripe’s design team does good work for sure, but what’s really striking is
how most people building things for screens still ignore all the best
practices that have been established over the past 35 years.

~~~
JoeSloth
Yup, and most items on their site of no focus state, which is bad for
accessibility.

------
tabeth
Is a design copyrighted? What's stopping someone from duplicating Stripe's
design? The CSS and HTML are both right there in the browser for everyone's
viewing. Given how nice Stripe's website is, it's a wonder why it's not copied
more often -- and other "nice" websites, for that matter.

~~~
HatchedLake721
www.mixpanel.com - here’s a big co using Stripe’s design as “inspiration”

~~~
scrollaway
A lot of b2b services have adopted that design style.
[https://www.octobat.com/](https://www.octobat.com/) \-
[https://baremetrics.com/](https://baremetrics.com/) \-
[https://www.intercom.com/](https://www.intercom.com/)

More I can't think of right now...

------
_mrmnmly
I see repeating threads about Stripe's design, but imho it's just a nice work,
not anything particularly astonishing (or maybe it's just a matter of
individual taste) - is it just me or anyone else think similar?

------
sAbakumoff
Wait..isn't "exquisite design" is very personal opinion and what would work
for one user does not work another? I am under impression that nowadays any
web-site with large audience always exists in multiple versions that are used
in A/B testing.

~~~
phantom_package
when you're critiquing design, you have to do it in the context of the design
goals the team had in mind.

So even if Comic Sans (in hot pink) is your favorite font, you would agree
that it produces the wrong emotion on, say, a gravedigger's website. Not that
I wouldn't absolutely love to see that.

 _Taste_ is very personal yes, but successful designs are more than
expressions of taste - they're about solving problems.

------
interfixus
It shows all the way. When I make a payment somewhere, and the process is
smoother and neater and very much better looking than we have generally come
to expect, most often it turns out to be a Stripe setup.

Noteable example: FastMail, itself a good exponent of said qualities.

------
phantom_package
> First and foremost, their products are easy to use. That's #1. But right
> after that is the design of their products.

Based on this quote and the article, I think that when you say "design" you
mostly mean "the way it looks" or "graphic design". That's just one design
skill among many, and arguably the least critical one to the success of a
product (don't skimp on it, though!).

When you talk about the product being "easy to use", that's because it was
designed to be easy to use. Intentionally. Probably through a lot of trial,
error, prototyping, and user testing. That's 100% design.

Anyways, taking your writeup as more of a critique purely of the
graphic/interaction design, here are some thoughts:

\- I would love to have seen more exploration of how Stripe approached the
typographic choices. Is there a system there? What are the roles of the
different bits of typography on the screen? Are they using 20 distinct
font/color/weight pairings, or 3? What about the emotional impact of the font?
Why do you think Stripe (very consciously) chose this font to present
themselves? The world of typography is fascinating and quite accessible.

\- The "hovering" behavior on the buttons is more "Interaction Design" than
"User Experience". I think these are skillfully done - emotive, but not
ridiculous - subtle, but not invisible. It would be interesting to see how the
experience gets better/worse as you start fucking with the animation
curves/colors.

\- Agreed, they have a great color palette. I would love to have seen your
thoughts on why they picked these colors. Is each used in a specific role? See
above questions on typography. Also, keeping with the "practical" slant of the
article, maybe link to one of the better color palette generators out there?

I think you'll notice that even on the aesthetic level, a lot of the above
questions are aimed at teasing out some kind of a "design system" that lived
in the designers heads and produced the website you're critiquing.

Good design is never an accident, and if you want to help people design better
websites, the most useful thing you can do is help them understand _how_ great
design happens. By looking at the tradeoffs and struggles and decisions from
other (successful) design projects, you gain some new lenses through which to
view your own work.

Anyways, thanks for taking the time to put this together, and please keep
writing about design for a developer audience!

------
jimnotgym
I implemented Stripe for an edge case at my day job and was impressed by the
design. Then it suffered from the _worst_ UI failing, they changed the menu
the week after I had written the documentation!

------
efficax
Just a warning, :hover on buttons breaks them in iOS (they require two taps,
users get confused. Sad!).

------
cessor
Is... is this an ad for stripe?

~~~
leerob
Not at all. I don't work for Stripe or have any affiliation with them. Just a
fan. I work at Workiva - [https://www.workiva.com/](https://www.workiva.com/).

------
zaptheimpaler
Great post!

~~~
leerob
Thank you!

