8 ms·

Stripe front end developers are a true inspiration. I know the linked project isn't anything revolutionary, but as someone with a decade of experience in the fi

Stripe front end developers are a true inspiration. I know the linked project isn't anything revolutionary, but as someone with a decade of experience in the field, it's impressive to see such attention to detail. Their work somehow manages to be the right combination of cutting-edge flashiness (think Apple product landing pages) and a very down to earth usability. I can't quite put my finger on it, but it's rare to see interfaces that don't compromise one or the other at least slightly. If any of you are reading this - congratulations, you should be really proud.

pcurve 9y ago
I agree. It's refreshing to see a company not jumping on the completely flat, mono-color bandwagon.
sillysaurus3 9y ago
In the linked page on the right, is that a video? https://i.imgur.com/qloK4xE.png https://i.imgur.com/qloK4xE.png I was just wondering how they made that.
- athyuttamre 9y ago
  It's all CSS animations!
  - kumaraman 9y ago
    I am very curious to how exactly they made these animations! Surely they didn't hand type all of the transforms. I see a lot more of similar animations appearing on the internet. Are there tools that people use to help with the animations?
    - indexerror 9y ago
      It can be done using Adobe After Effects and the Bodymovin plugin.
      - squiggy22 9y ago
        ..except you will end up with a 300kb js file and a massive Json file. Whilst this plugin generates magic your speed suffers with it.
    - Cenk 9y ago
      I’ve used BounceJS in the past: http://bouncejs.com http://bouncejs.com
    - afloatboat 9y ago
      Most tools put out a lot of unnecessary code and often rely on JavaScript, so my guess would be that this is handwritten. The animation consists of three phases for each element, which they reordered using pixel value transforms. The background containers are fixed in place and the opacity is changed depending on stage 1/2/3. To ensure them not having to adjust any values for smaller devices, they scaled the parent element to fit the browser size. Time consuming, but the best way to get the performance you need.
    - corford 9y ago
      http://animista.net/ http://animista.net/ is quite handy for quickly putting something together.
austenallred 9y ago
Every time I see a Stripe page I just stop and stare for a minute. They're always so, so well done.
- bpicolo 9y ago
  Stripe is gorgeous, though they have one of my pet peeve UI issues on the front page: The nav Menu buttons are hover elements, and clicking them closes the menu. So if your first instinct is to navigate to "Developers" by clicking it (and it probably is), you're rewarded with a brief view of the menu before it fades back away. AWS has the same issue on their "My Account" button. ;_;
mathattack 9y ago
Sometimes simplicity doesn't seem revolutionary, but a beautiful attention to detail combined with customer empathy can yield dramatic results.
- jdhzzz 9y ago
  The converse of: “I didn't have time to write a short letter, so I wrote a long one instead.” ― Mark Twain
crehn 9y ago
It brings me a lot of joy to see companies like Stripe and Apple put so much effort into polishing their products. Most companies can't even build their fucking landing pages without inconsistencies in design and content. I believe a healthy obsession with detail reflects a company's overall attitude and pervades much deeper than visuals. Thank you Stripe! <3
colordrops 9y ago
Minor nitpick: there's no way to see the tooltips on the checklist at the bottom on android for more than a second.
- ghughes 9y ago
  And on iOS there’s no way to see them without triggering the copy/paste menu.
stevoski 9y ago
To add to the praise for Stripe, their API docs are a pleasure to use.
- speedplane 9y ago
  I feel like half of the internet copied Stripe's REST API documentation design. They were the first to make them a pleasure to read, now almost everyone's docs are pretty.
TeMPOraL 9y ago
Oh God, yes! I love the attention to small details they're giving here. It's the kind that I absolutely admire but so rarely see. For example, in the section "Less code. Fewer edge cases." - a) the code "image" scrolls in the direction you scroll, and b) the code is actual code, made to look that way through use of a font (Flow-Circular). They could have went with a nonsense PNG with horizontal lines, but instead, they put actual code. They even went as far to leave this in the HTML just above that place:  Hats off to them.
- Angostura 9y ago
  Not to mention the correct use of 'Less' and 'Fewer'. Well done copywriters.
  - pc86 9y ago
    Stripe has some great copy writing for sure, but I don't think correct grammar should be listed as one of the reasons why. :)
- mstade 9y ago
  Wow, that's a pretty cool easter egg! I copied the "image" and pasted into Sublime, and there you go: actual code! Very cool little detail, color me impressed!
  - khalilravanna 9y ago
    Yeah super cool! It's apparently just done by using a font called "Flow-Circular" that comes out looking like that.
ksec 9y ago
Stripe and Apple. I thought i was the only one noticing these two. Out of all the other Major tech companies. They happens to be the least consumer Web focused and have the best Web page design. ( Stripe isn't really mass consumer facing Web Company, And Apple is more about their Hardware and Software Product rather then Web ) You cant say the same for Yahoo / Oath, Google, Facebook, Amazon or Ebay. I wish some could share how Apple design and what Apple uses in the Web Stack.

pcurve 9y ago

I agree. It's refreshing to see a company not jumping on the completely flat, mono-color bandwagon.

sillysaurus3 9y ago

In the linked page on the right, is that a video? https://i.imgur.com/qloK4xE.png https://i.imgur.com/qloK4xE.png I was just wondering how they made that.

athyuttamre 9y ago
It's all CSS animations!
- kumaraman 9y ago
  I am very curious to how exactly they made these animations! Surely they didn't hand type all of the transforms. I see a lot more of similar animations appearing on the internet. Are there tools that people use to help with the animations?
  - indexerror 9y ago
    It can be done using Adobe After Effects and the Bodymovin plugin.
    - squiggy22 9y ago
      ..except you will end up with a 300kb js file and a massive Json file. Whilst this plugin generates magic your speed suffers with it.
  - Cenk 9y ago
    I’ve used BounceJS in the past: http://bouncejs.com http://bouncejs.com
  - afloatboat 9y ago
    Most tools put out a lot of unnecessary code and often rely on JavaScript, so my guess would be that this is handwritten. The animation consists of three phases for each element, which they reordered using pixel value transforms. The background containers are fixed in place and the opacity is changed depending on stage 1/2/3. To ensure them not having to adjust any values for smaller devices, they scaled the parent element to fit the browser size. Time consuming, but the best way to get the performance you need.
  - corford 9y ago
    http://animista.net/ http://animista.net/ is quite handy for quickly putting something together.

austenallred 9y ago

Every time I see a Stripe page I just stop and stare for a minute. They're always so, so well done.

bpicolo 9y ago
Stripe is gorgeous, though they have one of my pet peeve UI issues on the front page: The nav Menu buttons are hover elements, and clicking them closes the menu. So if your first instinct is to navigate to "Developers" by clicking it (and it probably is), you're rewarded with a brief view of the menu before it fades back away. AWS has the same issue on their "My Account" button. ;_;

mathattack 9y ago

Sometimes simplicity doesn't seem revolutionary, but a beautiful attention to detail combined with customer empathy can yield dramatic results.

jdhzzz 9y ago
The converse of: “I didn't have time to write a short letter, so I wrote a long one instead.” ― Mark Twain

crehn 9y ago

It brings me a lot of joy to see companies like Stripe and Apple put so much effort into polishing their products. Most companies can't even build their fucking landing pages without inconsistencies in design and content. I believe a healthy obsession with detail reflects a company's overall attitude and pervades much deeper than visuals. Thank you Stripe! <3

colordrops 9y ago

Minor nitpick: there's no way to see the tooltips on the checklist at the bottom on android for more than a second.

ghughes 9y ago
And on iOS there’s no way to see them without triggering the copy/paste menu.

stevoski 9y ago

To add to the praise for Stripe, their API docs are a pleasure to use.

speedplane 9y ago
I feel like half of the internet copied Stripe's REST API documentation design. They were the first to make them a pleasure to read, now almost everyone's docs are pretty.

TeMPOraL 9y ago

Oh God, yes! I love the attention to small details they're giving here. It's the kind that I absolutely admire but so rarely see. For example, in the section "Less code. Fewer edge cases." - a) the code "image" scrolls in the direction you scroll, and b) the code is actual code, made to look that way through use of a font (Flow-Circular). They could have went with a nonsense PNG with horizontal lines, but instead, they put actual code. They even went as far to leave this in the HTML just above that place:  Hats off to them.

Angostura 9y ago
Not to mention the correct use of 'Less' and 'Fewer'. Well done copywriters.
- pc86 9y ago
  Stripe has some great copy writing for sure, but I don't think correct grammar should be listed as one of the reasons why. :)
mstade 9y ago
Wow, that's a pretty cool easter egg! I copied the "image" and pasted into Sublime, and there you go: actual code! Very cool little detail, color me impressed!
- khalilravanna 9y ago
  Yeah super cool! It's apparently just done by using a font called "Flow-Circular" that comes out looking like that.

ksec 9y ago

Stripe and Apple. I thought i was the only one noticing these two. Out of all the other Major tech companies. They happens to be the least consumer Web focused and have the best Web page design. ( Stripe isn't really mass consumer facing Web Company, And Apple is more about their Hardware and Software Product rather then Web ) You cant say the same for Yahoo / Oath, Google, Facebook, Amazon or Ebay. I wish some could share how Apple design and what Apple uses in the Web Stack.