12 ms·

How Stripe Designs Websites

484 points by leerob 9y ago

zaptheimpaler 9y ago
Great post!
- leerob 9y ago
  Thank you!
everdev 9y ago
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.
- leerob 9y ago
  That's a great way to put it. Especially when the website is very content heavy (e.g. Amazon). Glad you enjoyed the article!
- MuffinFlavored 9y ago
  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 9y ago
    https://www.algolia.com/ https://www.algolia.com/
    - richardknop 9y ago
      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.
  - shash7 9y ago
    https://discordapp.com/ https://discordapp.com/
joliv 9y ago
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.
- davidivadavid 9y ago
  It's funny to see how pretty much everybody has been copying Stripe's style over the last few years/months — that top navigation in particular.
- gog 9y ago
  Regarding the dropdowns in the top down, they are only smooth if you have a new computer. It's not a smooth experience on my Late 2013 Macbook Pro and the fans kick in.
  - deftturtle 9y ago
    Lol how in 2017 our yardstick of bad performance is fans kicking in. If even a 2013 can't handle code from today, that's way too complex and computationally demanding.
    - marenkay 9y ago
      2016 MacBook Pro and a 2017 PC. Lots of fanning and lagging on those pages.
- KaoruAoiShiho 9y ago
  >- The transition between dropdowns in the top nav. Really smooth, and something you won't see anywhere else. It's unique and pretty but I kinda hate it. Makes no sense from an information hierarchy perspective. Instead of it being 2 separate drawers opening and closing like typical dropdowns it's 1 drawer merging into another, wut?
tabeth 9y ago
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.
- leerob 9y ago
  I'm not sure - I don't believe so. I'm guessing no one would copy their design verbatim for fear of being called out. It would probably be obvious since they have a unique look. However, I'm sure we'll see other sites with designs that have been inspired by Stripe.
- HatchedLake721 9y ago
  www.mixpanel.com - here’s a big co using Stripe’s design as “inspiration”
  - leerob 9y ago
    Yeah, that is very similar. Especially the dropdowns.
  - scrollaway 9y ago
    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...
    - deleted 9y ago
      [deleted]
  - siddharthdeswal 9y ago
    Stripe's current design went live sometime in September 2016. Mixpanel's went live somewhere in Jan 2017. For a design overhaul of this scale, it's unlikely there was any 'inspiration'.
- deleted 9y ago
albertgoeswoof 9y ago
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.
- leerob 9y ago
  They've definitely taken a developer first approach compared to their competitors. I think it's what helps set them apart.
  - richforrester 9y ago
    This is not just developer-first, even though they say it. Their design shows that all you have to do is copy paste a snippet and it'll work. Also, to OP; that IS design. Design is choosing what to display where, based on a why. Don't confuse design with art. The artistic merits of this work are rooted in opinion. The design of it either solves issues or doesn't :) That's why you can learn design.
    - leerob 9y ago
      That's a really great point I hadn't considered.
- usaphp 9y ago
  > 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 9y ago
    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
northernman 9y ago
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 9y ago
  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.com/ https://web.archive.org/web/20111007130738/https://stripe.co...
  - fgonzag 9y ago
    I like that design even better. It explains up front what stripe is and why you should choose it, without any fluff getting in the way.
  - Denzel 9y ago
    He's probably referring to this: https://www.quora.com/What-did-the-first-version-of-Stripe-look-like-How-did-they-get-it-to-work-in-production-for-the-first-users https://www.quora.com/What-did-the-first-version-of-Stripe-l...
  - northernman 9y ago
    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 9y ago
      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.
frihani 9y ago
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 9y ago
  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 9y ago
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.
- Double_a_92 9y ago
  Yes, but flat design! hipster screech
- JoeSloth 9y ago
  Yup, and most items on their site of no focus state, which is bad for accessibility.
pablo-massa 9y ago
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 9y ago
  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.
throwaway613834 9y ago
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
- meowface 9y ago
  Same issues here regarding CPU usage. Beautiful and well-designed site, but it makes my 2016 MBP slow to a crawl. https://stripe.com/atlas https://stripe.com/atlas in particular feels like it's on the verge of crashing my browser (Chrome). However, I am not seeing any issues with blurriness. This is what my menu looks like: https://i.imgur.com/nsflU9f.png https://i.imgur.com/nsflU9f.png
  - throwaway613834 9y ago
    Yeah it's probably just a different rendering algorithm on Windows than Mac.
    - tmnvix 9y ago
      I don't think this is OS specific. I came across this problem a while back and had to revise my approach because of it. I can't remember the exact circumstances only that it involved chrome and transform:translate() along with some other variable. I'm actually amazed that stripe have compromised their design by overlooking this.
- k3a 9y ago
  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.
efficax 9y ago
Just a warning, :hover on buttons breaks them in iOS (they require two taps, users get confused. Sad!).
stevenj 9y ago
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
interfixus 9y ago
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.
jnpatel 9y ago
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
siddharthdeswal 9y ago
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 9y ago
  You might enjoy this read: https://medium.com/@chopeh/the-state-of-design-ff5142fb806 https://medium.com/@chopeh/the-state-of-design-ff5142fb806
  - siddharthdeswal 9y ago
    Thank you! Best laugh I've ever had on HN.
    - dvlsg 9y ago
      I lost it at the top highlight.
  - NetOpWibby 9y ago
    That was an enlightening read.
_mrmnmly 9y ago
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?
jimnotgym 9y ago
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!
sAbakumoff 9y ago
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 9y ago
  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.
cessor 9y ago
Is... is this an ad for stripe?
- leerob 9y ago
  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/.
te_chris 9y ago
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 9y ago
  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.
phantom_package 9y ago
> 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!

484 points by leerob 9y ago

zaptheimpaler 9y ago

Great post!

leerob 9y ago
Thank you!

everdev 9y ago

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.

leerob 9y ago
That's a great way to put it. Especially when the website is very content heavy (e.g. Amazon). Glad you enjoyed the article!
MuffinFlavored 9y ago
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 9y ago
  https://www.algolia.com/ https://www.algolia.com/
  - richardknop 9y ago
    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.
- shash7 9y ago
  https://discordapp.com/ https://discordapp.com/

joliv 9y ago

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.

davidivadavid 9y ago
It's funny to see how pretty much everybody has been copying Stripe's style over the last few years/months — that top navigation in particular.
gog 9y ago
Regarding the dropdowns in the top down, they are only smooth if you have a new computer. It's not a smooth experience on my Late 2013 Macbook Pro and the fans kick in.
- deftturtle 9y ago
  Lol how in 2017 our yardstick of bad performance is fans kicking in. If even a 2013 can't handle code from today, that's way too complex and computationally demanding.
  - marenkay 9y ago
    2016 MacBook Pro and a 2017 PC. Lots of fanning and lagging on those pages.
KaoruAoiShiho 9y ago
>- The transition between dropdowns in the top nav. Really smooth, and something you won't see anywhere else. It's unique and pretty but I kinda hate it. Makes no sense from an information hierarchy perspective. Instead of it being 2 separate drawers opening and closing like typical dropdowns it's 1 drawer merging into another, wut?

tabeth 9y ago

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.

leerob 9y ago
I'm not sure - I don't believe so. I'm guessing no one would copy their design verbatim for fear of being called out. It would probably be obvious since they have a unique look. However, I'm sure we'll see other sites with designs that have been inspired by Stripe.
HatchedLake721 9y ago
www.mixpanel.com - here’s a big co using Stripe’s design as “inspiration”
- leerob 9y ago
  Yeah, that is very similar. Especially the dropdowns.
- scrollaway 9y ago
  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...
  - deleted 9y ago
    [deleted]
- siddharthdeswal 9y ago
  Stripe's current design went live sometime in September 2016. Mixpanel's went live somewhere in Jan 2017. For a design overhaul of this scale, it's unlikely there was any 'inspiration'.
deleted 9y ago

albertgoeswoof 9y ago

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.

leerob 9y ago
They've definitely taken a developer first approach compared to their competitors. I think it's what helps set them apart.
- richforrester 9y ago
  This is not just developer-first, even though they say it. Their design shows that all you have to do is copy paste a snippet and it'll work. Also, to OP; that IS design. Design is choosing what to display where, based on a why. Don't confuse design with art. The artistic merits of this work are rooted in opinion. The design of it either solves issues or doesn't :) That's why you can learn design.
  - leerob 9y ago
    That's a really great point I hadn't considered.
usaphp 9y ago
> 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 9y ago
  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

northernman 9y ago

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 9y ago
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.com/ https://web.archive.org/web/20111007130738/https://stripe.co...
- fgonzag 9y ago
  I like that design even better. It explains up front what stripe is and why you should choose it, without any fluff getting in the way.
- Denzel 9y ago
  He's probably referring to this: https://www.quora.com/What-did-the-first-version-of-Stripe-look-like-How-did-they-get-it-to-work-in-production-for-the-first-users https://www.quora.com/What-did-the-first-version-of-Stripe-l...
- northernman 9y ago
  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 9y ago
    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.

frihani 9y ago

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 9y ago
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 9y ago

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.

Double_a_92 9y ago
Yes, but flat design! hipster screech
JoeSloth 9y ago
Yup, and most items on their site of no focus state, which is bad for accessibility.

pablo-massa 9y ago

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 9y ago
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.

throwaway613834 9y ago

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

meowface 9y ago
Same issues here regarding CPU usage. Beautiful and well-designed site, but it makes my 2016 MBP slow to a crawl. https://stripe.com/atlas https://stripe.com/atlas in particular feels like it's on the verge of crashing my browser (Chrome). However, I am not seeing any issues with blurriness. This is what my menu looks like: https://i.imgur.com/nsflU9f.png https://i.imgur.com/nsflU9f.png
- throwaway613834 9y ago
  Yeah it's probably just a different rendering algorithm on Windows than Mac.
  - tmnvix 9y ago
    I don't think this is OS specific. I came across this problem a while back and had to revise my approach because of it. I can't remember the exact circumstances only that it involved chrome and transform:translate() along with some other variable. I'm actually amazed that stripe have compromised their design by overlooking this.
k3a 9y ago
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.

efficax 9y ago

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

stevenj 9y ago

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

interfixus 9y ago

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.

jnpatel 9y ago

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

siddharthdeswal 9y ago

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 9y ago
You might enjoy this read: https://medium.com/@chopeh/the-state-of-design-ff5142fb806 https://medium.com/@chopeh/the-state-of-design-ff5142fb806
- siddharthdeswal 9y ago
  Thank you! Best laugh I've ever had on HN.
  - dvlsg 9y ago
    I lost it at the top highlight.
- NetOpWibby 9y ago
  That was an enlightening read.

_mrmnmly 9y ago

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?

jimnotgym 9y ago

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!

sAbakumoff 9y ago

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 9y ago
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.

cessor 9y ago

Is... is this an ad for stripe?

leerob 9y ago
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/.

te_chris 9y ago

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 9y ago
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.

phantom_package 9y ago

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