Have you ever visited a website and been completely in awe of the elegance and simplicity of its design?

Stripe is such an example for me.

Stripe is a company that allows people and businesses to accept payments online and in mobile apps. That doesn’t sound like a company that would have an exquisite website design, but look at how Stripe describes themselves on their about page:

“We think that building an internet business is a problem rooted in code and design, not finance.”

Let’s examine the tips and tricks used to make Stripe’s website design a notch above the rest.

The article is about how Stripe creates their beautiful designs and gives some tips and tricks to web designers and developers alike.

1. The Design

  • Crisp typography
  • Stunning color palette
  • High-quality images
  • Bold call-to-action buttons

2. User Experience (UX)

Whatever needs to be clicked, looks like a clickable element.
Whatever is clickable, moves slightly when hovering your mouse over it, further reinforcing the action.
The article has links to specific code which achieves this effect.

3. Color Palette

Well, don’t ask me, for me colors are colors. I know when something looks right, but it’s hard to choose those “right” colors to play well with each other.

For well-balanced palettes, use something like COLOURlovers or Color wheel from Adobe.

This two tools helped me countless times. It makes a difference between “a few individually nice colors which somehow look weird on one page” and “this looks just right.” Subtle, yet difficult

4. Utilizing SVGs

Use SVG (Scalable Vector Graphic) images instead of normal .png or .jpg files whenever possible. This has a multitude of benefits.

  • Smaller file sizes
  • Allows the ability to animate the image using CSS
  • Looks crisp on any size display from mobile to desktop

5. Animations

The extra polish on top of an already beautiful design. Throughout all of Stripe’s pages, you’ll find a variety of animations. Some are more subtle than others, but each serves a purpose.

That’s it. Now you should be better equipped to create a great experience for your own website.
Good simplicity is hard. The article makes it a little bit easier.

 

How Stripe Designs Beautiful Websites



PS.
There’s a great resource by Stripe. The code examples for their beautiful checkout forms: Elements examples.

Use it as an inspiration for your own forms. This is beauty, simplicity, and proven effectiveness, all in one. For both desktop and mobile.

Here are a few: