Let's talk about the new Stripe 2020 design.

Stripe and its designs...

In order to understand why Stripe's design and pages are of interest to most interested in web design let's look at a timeline of how their site has looked over time.

2014:

Here we can see that Stripe in 2014 in its first major Re-design, used the typical website design, standard, with nothing that stands out or draws attention. A typical template.

2017:

Everything changes in 2017.

Stripe was one of the first companies to drastically remodel its web design, breaking the traditional approach. Giving a different approach to what until now, was the same for all company websites. I remember in 2017 I was studying and to guide me in college and make good designs I was still guided by designs like the one on the website designed in 2014.

At this time, Stripe and its design team were focused on micro-interactions, animations to keep users' attention, mixing it with bright colors, bold and thick buttons to invite you to press them.

Animations

At this point, Stripe started to add small gestures when scrolling through the page, focusing mainly on applying movements and shadows, the typical hover of a lifetime...

    button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
    }

2020:

User Experience (UX)

Here you can see how it handles animations in the submenu of the page. Which, by the way, minimalizes the page too much by taking its wide variety of products out of view and centralizing them in a subnavbar 👌.

And here are the buttons opting for do not enlarge the button or move itInstead, give the sensation of action with an internal SVG that moves.

The power of SVGs

Next I would like to mention the hard work and effort that Stripe puts on the images and their animations.

Since 2017 we can observe the quality that Stripe has to showcase their products and the details they leave on their page when browsing through it.

I invite you 100% to visit the page and review and interact with it, it is something else.

Why SVGs...

SVGs have many advantages over ordinary images, and even more over GIFs.

We can see that no single GIF has been used on the page and they only work with coded animations something that is impressive and must have been terrible for the devs😅, but it has many advantages:

Performance

• SVGs have smaller file sizeThe page is lighter, i.e., it weighs less, which helps the page performance.

• Image quality, even if you scale, stretch, whatever, an SVG is flexible enough for no loss of image quality in any case.

• You can animate them with CSS.

Accessibility

This means that its products can be used by the blind, visually impaired, etc., in all its products.

The important thing is...

That was Stripe and its 2020 design...

With this I summarize in a very broad way what can be contemplated from Stripe (along with their blog) and their web designs 😁.