Hacker News Reader

Comment by MatekCopatek | Hacker News Reader

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.

View on HN

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.

Not to mention the correct use of 'Less' and 'Fewer'. Well done copywriters.

Stripe has some great copy writing for sure, but I don't think correct grammar should be listed as one of the reasons why. :)

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!

Yeah super cool! It's apparently just done by using a font called "Flow-Circular" that comes out looking like that.

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

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

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

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

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

The converse of:

“I didn't have time to write a short letter, so I wrote a long one instead.”

― Mark Twain

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

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.

In the linked page on the right, is that a video? https://i.imgur.com/qloK4xE.png

I was just wondering how they made that.

It's all CSS animations!

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?

It can be done using Adobe After Effects and the Bodymovin plugin.

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

I’ve used BounceJS in the past: http://bouncejs.com

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.

http://animista.net/ is quite handy for quickly putting something together.

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.

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

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

Reply on news.ycombinator.com