DEV Community

Cover image for Quick UI Review - Stripe Homepage
Kyle Parisi
Kyle Parisi

Posted on

Quick UI Review - Stripe Homepage

Font

There are 7 fonts with 124(!) variations.

Alt Text

Sohne-var is the primary font. This was probably a ">= 5" figure decision for them to license this font. Here is some more detail about the font and similar types.

Alt Text

Colors

Alt Text

73 colors were used on that page. This is probably high because they make almost everything on the page an html element. This is highlighted by the fact that there are only 26 assets on the whole page.

Alt Text

Layout

Their previous design was 2 columns with a balance on the center line of the screen. This new design is 4 columns with a left aligned balance.

Alt Text

Notable

The animations are smooth and intricate as they were with the previous site. The animated text editor is pretty amazing.

Alt Text

The outlines I added to illustrate that it's not a gif but actual html elements. Looking at the source code it supports multiple languages, autocompletions, line numbers, a terminal area and more. I can only imagine this feature took considerable amount of time to make. Hopefully they open source it at some point.

Conclusion

There is a depth of knowledge with each new design that stripe uses. My previous post talked about the animation of the drop down from their previous version:

Top comments (4)

Collapse
 
marcellahaller profile image
marcellahaller

Great post, color is very important in home page design. Here's another cool post on creating home pages that explores the dynamism and emotionality of your homepage design, navigation, heading design and more - gapsystudio.com/blog/how-to-design....

Collapse
 
phaethon_p profile image
Phaethon Psichis

Thank you for a thorough analysis. What tools can we use to re-engineer the design?

Collapse
 
kyleparisi profile image
Kyle Parisi

Visual Inspect for aggregates and single element inspection.

WhatFont for font inspection

User CSS I use this with custom css rules to outline things and a few other tricks.

Browser Devtools

Collapse
 
phaethon_p profile image
Phaethon Psichis

Thanks for the reply