How Stripe Designs Websites | Hacker News Reader

How Stripe Designs Websites

leejamesrobinson.com

484 pointsleerob104 comments

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/? (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.

You might enjoy this read: https://medium.com/@chopeh/the-state-of-design-ff5142fb806

I did! Perhaps it was inspired a little by http://uncyclopedia.wikia.com/wiki/AAAAAAAAA! (the baby always kills me)...

Reminds me of an episode of Fraiser where he is all gung-ho about some painting and telling everyone about the greatness of the artist and her artwork, only to find out later that's it is a fake.

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

I lost it at the top highlight.

That was an enlightening read.

Are you sure you want to exist?

RE: DraftSend landing page

When the page loaded, I was greeted with:

> Create and Share Interactive Presentations With Just a PDF and Your Voice

I have no idea what this means. Apparently this startup takes "a PDF" and "my voice" and combines them into... something. An Interactive Presentation. Something I'm narrating? What are these good for? What even are they?

After reading the rest of the page I feel like I got it (maybe), but hoo boy does that header text need work. An example would be even better.

Other than that, I think the visual design is nice, though it's a bit dark/moody for the product goals IMO.

This post is worthless your only point seems to be "Other people make websites too!"

If you think "Stripe's design isn't great design" why not tell people why you think that? That would at least be worth reading and worth writing.

I can appreciate why you feel my post was worthless.

I had a couple points:

1) There's a halo effect surrounding Stripe right now, due to which fairly common stuff that they do will be treated as if it's outstanding, and deserves extra adoration and respect.

2) This = "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."

What do you think now?

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

Isn't true that this point is valid for draftsend.com too ?

Besides, I'm ONE amongst 'those certain people' WHO LIKE Stripe's design.

Since we've starting discussing not only about Stripe's design, but also brought draftsend.com to compare with, here is my humble opinion:

With due respect to draftsend.com's designer, it has just few pages with very basic information and resembles a familiar wordpress or bootstrap theme. No doubt that draftsend.com is a GOOD DESIGN. But, it is NOT a GREAT DESIGN EITHER! And draftsend.com is in no way comparable to Stripe's design with its width, breadth and volumetric information.

Now going over the Stripe's design... below are good points about Stripe's design:

1. it has a dynamic and fluid theme which keeps the visitor engaged through out the page(s).

2. encourages further readability.

3. design theme and colour is so appealing that continued visit as well as repeated visit(s) don't appear to be boring and brings some sort of freshness each time, though - it's the same design and content.

4. it creates a better image about the company (Stripe).

5. and, it conveys the following:

5.a. the company is meticulous which can be expected from their other deliverables (either product/service).

5.b. the company is adapted to new and emerging trends in design, hence the same could be expected from their other deliverables.

5.c. the company is professional.

5.d. the company can afford to the heavy lifting of such a wonderful and modern design.

5.e. the company is NOT sticky with traditional design.

5.f. the company does NOT fall into a stereo type.

...and others could say a lot as well as better about Stripe's Design!

I mostly agree with your point that two designs being the same, the bigger more established brand might garner more attention / praise than the other. However, I think design is also easier to get right when you have a good product.

Skimmed the blog because it seemed to be mostly fluff and presumably the author does not work at Stripe, but I do consider this a good design for the following reasons (some aesthetic, some practical, not exhaustive):

- Dead simple call to action & it speaks to two core audiences. Either you're a developer and you know how this works (create an account), or you're an executive and you know you want to talk to somebody (contact sales).

- The diagonal lines are cool because they stand out on the web (filled with vertical and horizontal lines) and they create movement within the design to draw your eyes over to the little illustrations.

- The illustration/hero image itself is nice because there's not so much detail that you get bogged down in the solution yourself, but the variety of big brands and different sorts of user experiences allow you to visualize your brand with a slick checkout experience right next to those "big players".

- Well-executed typographic contrast. Think colors, sizing, weights, and variation between title-casing and uppercase. This is important because it creates a visual hierarchy, so if you don't want to read the whole page, at least visually you "know" what is important.

- Color palate is well suited to the industry. Too lazy to find facts, but in general blues are known to be calm/soothing and green communicates or gives the perception of trust/success. Whether that is your success as a potential customer, or Stripe's success, idk; Just a vague designerish feeling.

- Finally, I think it would good given the points above - but the interactive elements really give it the kind of polish that would make me call it "great". IMO, these types of flourishes are signalling quality. Take them away and the site is just fine, but as the author mentions - to most people they give a sense of delight. Not over the top; just subtle, playful little elements.

Regarding the link you mentioned; I don't think it's a bad design, but not on the caliber of Stripe's. For me the typography is quite dull, and having read all of the text on the page; it's not really clear to me what valuable service they are providing. My impression is that it's a white-brandable video hosting site, with maybe some version control? I'm not exactly sure because I only gleaned that info from the 2 of the 5 bullet points, which are identical to the other 3 generic features.

Anyways, I'm just some guy who flunked out of design college - so take all this crap with a grain of salt.

- Dead simple call to action... agreed

- Diagonal lines are cool because they stand out... can't really comment on that. Have seen such points before on Smashing Magazine, back in like 2007 or 08, where certain elements break commonly accepted design paradigms and therefore standout.

- Illustration/hero image is nice because not too much detail... see this one I feel is force-fitted. You could say that about most hero images and you'd be right.

- Well executed typographic contrast... I'll look at it in detail again. Didn't notice some of those points, as opposed to websites of other funded tech companies.

- Color palate well suited to industry... read those points too, but I'm wary of them because they're like people's taste in wine, music or art.

- Interactive elements giving polish.... YES, this I 100% agree with. The mark of great craftsmanship is an incredible attention to detail and execution.

- Design I mention... just google "best landing pages" and took the first example in the first result.

Thanks to my tracker blockers, I don’t see anything better than 1993 Internet.

Summary: Looks like a scam asking for money.

Don't know what the product is, all I see is a big page asking for my email address, sign ups and $10 a month.

I'd highly suggest that you add some more illustrations/videos/sample on the main page to understand what this is about. Your product needs to look really useful and really good if you want people to sign up on a whim.

Maybe replace the "sign up now" link/button with a "see how company X doubled their engagement or sign up now" links. There is nowhere to go from the main page except pay or leave.

Not my product, neither am I affiliated in any manner. I just googled "beautiful landing pages" and picked the first one in the first result to make my point.

Understood. The look/theme is alright. It's a modern looking, 3 pages website like there are millions of it.

I don't think it's as good as it should be though, to get users to register and pay.

We were talking about "design". It can designate many things. Look. Colors. User experience. Conversion.

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.

I disagree. The design definitely has something to do with their success. It isn't everything, but it has an impact. First and foremost, their products are easy to use. That's #1. But right after that is the design of their products. That's not just visual design, either. It's also the user experience. I think you're underestimating how much good design affects you subconsciously.

For me, the documentation was a top selling point which included code and curl commands with your api key, ready to be copy and pasted if you were logged in.

That's an example of great design.

it's an example of great UX, of which good UI (design) is part.

Everyone has their own interpretation, but the predominant viewpoint is that "design" is the superset, with UI and UX both being subsets.

i.e. all UI is design, but not all of design is UI.

good to know, I stand corrected - I wasn't aware of that viewpoint.

Yeah, if it's qualified with graphical design, then will fit under UI (usually). But the argument goes that a product is "designed" (i.e. a plan of how it works, looks, and interacts with other systems), and thus has a "design", encapsulating everything from purpose through to visual look and feel.

no, both ui and ux are a part of design.

+100: "curl commands with your api key, ready to be copy and pasted if you were logged in."

That's design.

But not the kind of design the article talks about.

Very early on, they hired Benjamin De Cock: https://dribbble.com/bdc

He's been instrumental in leading their design efforts. Ben's their secret sauce in the design department and why they've always had a great design-focused UI/UX.

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

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.

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.

He's probably referring to this: https://www.quora.com/What-did-the-first-version-of-Stripe-l...

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.

Absolutely. I use and love Stripe in my projects for its excellent documentation and simple setup. Compared to the god-awfulness that is PayPal docs, it made life so much easier. I literally could not care less about their dropdown transitions or white text on a blue background.

The fact that it is simple to setup and has excellent documentation are both factors in UX design applied to an API. UX stands for user experience, animations are one small part of it.

You say that, but it seems to me that one of the key factors in Stripe's early success was being developer-friendly in a way that no other card payment service was at the time. Part of that in turn was coming up with a good API and clean integrations at the JS level, and then documenting all of that so well that many other sites have since adopted the same presentation style for their own documentation pages.

Compare that with the obvious established competitor, PayPal, who have made a fortune from letting people collect money by putting a simple button on their site with just the slightest level of integration needed, but whose APIs and documentation have changed over time and yet remained consistently awful for developers wanting to do more substantial integrations to meet more demanding requirements.

My impression of Stripe has always been colored by their design. Anytime I see Stripe on HN, I know the page I'll land on will be stunning to look at.

I'm not even a Stripe customer but I already have a favorable view of the company because of its design

This might be part of it, but good design must also be made a priority from the top for it to happen. If it’s not, even if the company is successful, good design will generally only be limited to the foremost marketing pages and quickly degrade after that.

stripes product dashboard designs are not nearly as nice as their marketing. maybe 50% of the way there

I agree, the website and the dashboard differ significantly in design quality. At times, the dashboard is also a little buggy (e.g. views don't update sometimes even if you've just updated an item).

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.

> 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

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

They've definitely taken a developer first approach compared to their competitors. I think it's what helps set them apart.

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.

That's a really great point I hadn't considered.

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

This blog post focused on the visual design, but you're right that design is so much more, and Stripe understands that.

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

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

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

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

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.

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.

2016 MacBook Pro and a 2017 PC. Lots of fanning and lagging on those pages.

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.

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

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.

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.

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

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.

Yeah, I agree with everything you said.

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

Yeah it's probably just a different rendering algorithm on Windows than Mac.

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.

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.

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.

https://discordapp.com/

https://www.algolia.com/

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.

That's a great way to put it. Especially when the website is very content heavy (e.g. Amazon). Glad you enjoyed the article!

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.

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.

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

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.

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?

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.

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

Yes, but flat design! hipster screech

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.

Basiclly everything that's created in the U.S. is under copyright, that includes HTML and CSS source code. Even if you wrote completely different code, but your design was a pixel-perfect reproduction you'd be violating copyright (I'm talking about a wholesale ripoff here, not one element like drop shadows being copied).

Can you explain to me how Discord was able to copy Slack with (seemingly) no backlash?

That really just comes down to business decisions. Sure, Slack could have gone after them. They probably would have a case. On top of a lengthy, expensive, distracting legal battle, the press around it wouldn't be ideal. Even if they are completely in the right, it's probably not the conversation they want around their product.

At the end of the day, they're not quite competing for same market.

You are partly correct. You can't copy verbatim, but you can create a derivative design.

Also, fonts are not copyrighted! Only the data used to create the font, but not the font itself. Thanks to some very old laws (partly to do with not being able to copyright the alphabet) look that one up. :)

Fonts are copyrighted. That's why you don't have Microsoft Office fonts on Linux for instance. Look at fonts from the 3 major OS, you'll notice that there is little overlap.

In a similar topic. The fonts renderers are copyrighted too. Maybe you remember some weird-looking unsmooth text on a java app running on the openjdk, that's why.

Last but not least. No, you can't create derivatives just because you want to. Derivation is very well covered by the law.

P.S. By "copyrighted", I mean whatever legal protection applies to these things, which may not be copyright law.

I really don't have the time to provide links. But you are not correct. Fonts were copied all the time by American printers in the earlier years. (from European sources) And there's court cases where Adobe tried to sue font artists for taking their fonts, and they lost. Because the law allows copying of fonts.

Just google it. If you find a counter argument, it's likely misinformed, you may have to dig to find the truth.

Any and all technical specs and software are copyrigtable, but not the shape of letters.

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.

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

A lot of b2b services have adopted that design style. https://www.octobat.com/ - https://baremetrics.com/ - https://www.intercom.com/

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

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

Yeah, that is very similar. Especially the dropdowns.

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?

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.

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.

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.

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

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!

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

Is... is this an ad for stripe?

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

Great post!

Thank you!

Reply on news.ycombinator.com