16 ms·
How Stripe Designs Websites (2017)
- jstummbillig 6y agoIt is remarkable how iconic the Stripe marketing design has become over the past 10 years and how often it has been copied. I don't see it aging super well, it's not gonna be a design classic by any means -- but it really, really resonates with the Zeitgeist.
- boredgamer2 6y agoI've been wanting to re-create my blog & about/personal page. Are there similar write-ups for beautiful blogs/resume/about pages?
- leerob 6y agoI have a few links that might help. - Web Design in 4 Minutes https://jgthms.com/web-design-in-4-minutes/ - Beginner’s Guide to the Programming Portfolio https://leerob.io/blog/beginners-guide-to-the-programming-portfolio - Improving My Next.js MDX Blog https://leerob.io/blog/mdx There's also a great directory of personal sites here: https://personalsit.es/ https://personalsit.es/
- swyx 6y agogreat links, thank you!
- dylann 6y agohttps://humans.fyi/ https://humans.fyi/
- a_wild_dandan 6y agoI like the Refactoring UI YouTube series.[1] Schoger takes a real website and makes incremental changes to make it gorgeous. He justifies his decisions and just generally gives you a good intuition for the why he makes a given tweak, which has helped me far more than any other tutorial or blog post I've followed. [1] https://www.youtube.com/playlist?list=PLDVpvW8ghDr9tasku_YvuTy_l0xPUtOHE https://www.youtube.com/playlist?list=PLDVpvW8ghDr9tasku_Yvu...
- gwern 6y agoYou could look through past HN discussions of site designs, particularly minimalist ones: https://news.ycombinator.com/item?id=12804406 https://news.ycombinator.com/item?id=12804406 https://news.ycombinator.com/item?id=13337948 https://news.ycombinator.com/item?id=13337948 https://news.ycombinator.com/item?id=17787816 https://news.ycombinator.com/item?id=17787816 https://news.ycombinator.com/item?id=18788244 https://news.ycombinator.com/item?id=18788244 https://news.ycombinator.com/item?id=19114037 https://news.ycombinator.com/item?id=19114037 https://news.ycombinator.com/item?id=21100377 https://news.ycombinator.com/item?id=21100377 https://twitter.com/gwern/status/1092221945427517440 https://twitter.com/gwern/status/1092221945427517440 FWIW, my own site's writeup is at https://www.gwern.net/About#design https://www.gwern.net/About#design
- amelius 6y agoLooks very "Bootstrappy" like most of the web.
- leerob 6y agoHow does Stripe look "Bootstrappy"? Could you provide a specific example?
- amelius 6y agoHey, I'm not a designer so not sure what you would like to see. But as a user, it's the general "feel" I get when I visit a website. I'm thinking that the web is converging to a specific style which was initiated by Bootstrap, and Stripe's style is mostly a step in that same direction and certainly not orthogonal to it. Just my opinion of course.
- leerob 6y agoThis post was originally written in 2017. Since then, many sites have copied Stripe's design––almost exactly in some cases. I'd argue they started a trend and others have since followed. Yes, Bootstrap helped introduce specific patterns. But Stripe's execution of those design patterns was 10x.
- amelius 6y agoI'm certainly not going to argue about who was first, but if they really want to stand out design-wise perhaps it's time for a new style?
- leerob 6y agoCheck out their new documentation format: https://twitter.com/patrickc/status/1253031147459604482 https://twitter.com/patrickc/status/1253031147459604482 They're using their design resources on product & documentation updates, which I can appreciate.
- 6y ago
- fermienrico 6y agoIMO Stripe’s design isn’t great. It’s polished but thats orthogonal I think. There are too many unnecessary animations, effects, random diagonal patterns, and the whole thing feels the opposite of “snappy”. Well, then what’s an example of a good website design - I personally really like https://sourcehut.org https://sourcehut.org Drew writes about his spartan approach towards design: https://drewdevault.com/2019/03/04/sourcehut-design.html https://drewdevault.com/2019/03/04/sourcehut-design.html These things are subjective though. Stripe’s design is decorative. Besides, “Decoration is crime” cliches, deep down inside I personally belong to the functional design or “no design” camp.
- leerob 6y agoYou can disagree with the design you prefer, but there are design fundamentals that are non-negotiable. The minimal "spartan" design of Sourcehut probably works great for their audience. The same design approach would not work for Stripe.
- bsaul 6y agosourcehut isn't minimalist, it's plainly disfunctional. The homepage is basically a book you have to read from top to bottom, without any content structure your eyes can hook up to to correctly extract important information. Hacker news is what i'd call minimalist, but your eyes can immediately identify the various content blocs and functions.
- ivanfon 6y ago> The homepage is basically a book you have to read from top to bottom, without any content structure your eyes can hook up to to correctly extract important information. Are you talking about this page? https://sourcehut.org/ https://sourcehut.org/ It seems like the opposite to me, each feature has a big heading that you can quickly read to get an overview of all the features, with smaller, more detailed descriptions below.
- geori 6y ago
- ComputerGuru 6y agoPrevious discussion for reference: https://news.ycombinator.com/item?id=15838270 https://news.ycombinator.com/item?id=15838270
- ChrisArchitect 6y ago2017? come on previous: https://news.ycombinator.com/item?id=15838270 https://news.ycombinator.com/item?id=15838270
- bytematic 6y agoPosting about design on hackernews is going to be tough haha. I think some sort of merge between stripe and gov.uk is the ideal design experience generally, and then flavor depending on the intent of the product
- wurst_case 6y agoTough indeed. BTW just checked gov.uk on mobile and had to close three banners at the top before I could even see the content of the page. Yikes.
- jonshariat 6y agoI'm a designer and I've been impressed with the discussions and interest of design on HN. Honestly, I've had more fruitful and interesting discussion on design here than on design news websites.
- draw_down 6y agoWhich comments in this thread would you say are particularly insightful? Maybe they just haven't arrived yet, because I sure ain't seeing it.
- gfrangakis 6y agoThe most impressive thing about Stripe's website is IMO their documentation. I've tried to replicate it using tools like widdershins and slate, but can't get it as beautiful or functional.
- 013a 6y agoTheir marketing site is amazingly beautiful. Their actual application sites are barely customized bootstrap templates. And I wouldn't have it any other way. Marketing websites should be flashy to draw people in. But, when the rubber hits the road, I want functionality, power, and performance.
- stronglikedan 6y agoI'll add data-density to the application site wishlist. I wish it were easier to customize Bootstrap in that direction.
- arcturus17 6y agoWhat does data density mean? Having as much data as possible per unit of space?
- stronglikedan 6y agoYes, exactly. E.g., a datagrid showing, say, only a dozen rows in a full screen browser on a 1080p screen, when it can easily show 2-3x that many and still be perfectly readable. For entertainment/marketing/whatever sites, a dozen rows may be fine, but for a business app, it's frustrating. And sure you can just zoom out, but you still have the same data-to-whitespace ratio, just with unreadably small text. It also seems like Bootstrap (at least previous versions) makes it unnecessarily hard to get good data density without heavily customized CSS - something that kind of defeats the purpose of using Bootstrap in a business app.
- arcturus17 6y agoYea, I'm having the same problem with a React-MaterialUI business dashboard that I'm building. Is there a good framework for this?
- madjam002 6y agoI’m using BlueprintJS for a startup I’m working on and it’s great for this reason, components that are purpose built for data density. https://blueprintjs.com/ https://blueprintjs.com/ It is not meant for mobile but can be made to work. If you want a mobile first experience I’d use something else though.
- typon 6y agoIs it just me or the site doesn't stand out as something special? It looks good, don't get me wrong, but it isn't "beautiful" in the deeper sense of the word
- kalaracey 6y agoNo RSS feed for this blog?
- leerob 6y agoAuthor here – No RSS feed yet. It's on my shortlist of features to add.
- OliverJones 6y agoThere's another part to Stripe.com. Their payment processing works flawlessly. My employer has used them for a few megabucks of revenue over the past few years, with not one glitch due to them. The attention to detail in UI is totally worthwhile: I didn't have to train my colleague in A/R how to use Stripe. He just used it.
- teej 6y agoIt's worth taking a look at Stripe's revised color palette after a ton of fascinating research - https://stripe.com/blog/accessible-color-systems https://stripe.com/blog/accessible-color-systems
- callmeal 6y agoI don't know about everyone else but with my eyesight, the text on that page is pretty much impossible to read. Strange for a blog post url that begins with "accessible".
- Operyl 6y agoI have pretty terrible eyesight, but I did not find the font or color difficult to read here.
- GordonS 6y agoI just had a look, honestly expecting you to be exaggerating... but wow, that really is strangely difficult to read! I don't know if it's the colour, the font, the weight, or the perfectly bad combination of all three?!
- champagneben 6y agoFrom the second sentence: "Good contrast makes it easier for people with visual impairments to use products."
- talmr 6y agoI found it pretty difficult to read because it is so bright and uses lighter font color.
- josefresco 6y agoThe page has 86(ish) WCAG contrast errors mostly related to link colors: https://wave.webaim.org/report#/https://stripe.com/blog/accessible-color-systems https://wave.webaim.org/report#/https://stripe.com/blog/acce...
- sdinsn 6y ago
- ape4 6y agoDoes `text-rendering: optimizeLegibility;` really do anything?
- leerob 6y agoYes! https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/text-render...
- nargella 6y agoI am very impressed with the hidden gems of stripe's landing page. Here's[1] a post I wrote that analyzed the drop down animation they use. I've never seen it anywhere else. [1]https://dev.to/kyleparisi/making-web-animations-9ng https://dev.to/kyleparisi/making-web-animations-9ng
- at-fates-hands 6y agoin the early aughts I remember "mega" menu's were all the rage. Most have been abandoned because they were too hard to make responsive. Cool to see stripe went for it utilizing some pretty interesting CSS properties. It's cool they were able to keep it responsive down to 670px. I also liked your analysis of how the perspective property worked in this case.
- darekkay 6y agoI also love the transition between different menu items, especially using the keyboard tab navigation.
- georgianar 6y agoThanks to Robinson buckler ..Email this great herbal doctor cured me from herpes virus and he brought my ex lover back via his email robinsonbucler@gmail. com ...........
- sulairris 6y agoI’ve always love their visual design language, looks so good but still professional
- rococode 6y ago> However, I did find a gist containing the font which you can mess around with. I noticed in the linked gist that the fonts have been base64 encoded so that they can be loaded directly from the CSS file. I've never seen fonts loaded like this before - is it a common and/or recommended practice?
- leerob 6y agoIt's not very common. If you want to learn more about fonts on the web, this is an excellent resource: https://www.zachleat.com/web/comprehensive-webfonts https://www.zachleat.com/web/comprehensive-webfonts
- QuantumGood 6y agoStripe's top edge menus fail for me on Chrome; work on Firefox.
- ryanwaggoner 6y agoJust curious: why was the title changed for this? Does the word “beautiful” violate the HN guidelines?
- pjscott 6y agoYou can do all the visual things mentioned in this article and still very easily end up with a lousy landing page. Your goal is to convince people to become your customers, and the visual design is there to play a supporting role. At the risk of sounding corny, Stripe's landing page carries out a conversation with the reader, with the typography and layout acting to draw their eyes to where they need to look next. Until they change their ad copy, the conversation goes something like this: Reader: WHY SHOULDN'T I CLOSE THE PAGE RIGHT NOW? YOU HAVE THREE SECONDS! Page, in big letters: "The new standard in online payments" Reader: That sounds potentially relevant to me. You have... a few more seconds. Make haste! Page: "Stripe is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world." Reader: Good, good. I want to accept online payments, and it's comforting to know that this place does non-trivial transaction volume. Rejoice, for I'm now willing to read an entire paragraph without closing the tab. Go! Page: "Stripe builds the most powerful and flexible tools for internet commerce. Whether you’re creating a subscription service, an on-demand marketplace, an e-commerce store, or a crowdfunding platform, Stripe’s meticulously designed APIs and unmatched functionality help you create the best possible product for your users. Millions of the world’s most innovative technology companies are scaling faster and more efficiently by building their businesses on Stripe." Reader: Your value proposition has become sufficiently compelling that I'm now willing to scroll down. My worry, though, is that the API is going to involve faxing COBOL to a batch-mode IBM S/360 or something. Page: "[...] you can get up and running with Stripe in just a couple of minutes." And here's some really clean runnable example code! Press here to try it! Reader: Ooh, nice! Okay, I'm sold. How do I get started? Page: We put another "Start Now!" button at the bottom in the hope that you'd be thinking that. -- Most landing pages that I see have decent-looking visual design, but fall flat because they weren't written with a skeptical and impatient stranger in mind. The really good ones like Stripe are the exceptions, and when I read articles like this I'm not sure if people realize why they're so much better.
- jberm123 6y agoAgreed. I think content plays a much more significant role than aesthetics in what makes a site "great". I mean, look at the site we're on now. HN's aesthetics are clearly outdated and "unsleek" by all modern comparisons. But the site facilitates bringing the relevant content to its users well, like Stripe's website. That's the differentiating thing Stripe does well -- its visual design is not the difference maker.
- saagarjha 6y ago> We can utilize the text-rendering CSS property to allow us to choose quality over speed, as well as some vendor specific properties to make our font sharper. Please don't abuse antialiasing for making your text "look sharper" :/
- mlacks 6y agoAs a non-programer, what is the best way to find someone to re-draw my simple property management site using these principles?
- njsubedi 6y agoYou could try hiring a front end designer from Freelancer or Upwork.
- spyckie2 6y agoJust an anecdote - almost every aspiring graphic / web designer I know has designed a stripe inspired website. Stripe's landing page is the peak of flat 2.0 web design, and to my knowledge, hasn't been overtaken yet by any other website yet. It's funny reading engineers talk about design. Imagine if business people made comments on the elegance of lisp: > I personally prefer JAVA. You can hire a lot more engineers that know it and it does the same thing. If you can't make money off of it, it's not real engineering. Let's keep things practical and functional, shall we?
- georgianar 6y agoThis kind Man brought my Lover back In less than 3 days, i saw wonders, my Lover came back to me and my life got back just like a completed puzzle… am so happy.. thanks to Robinsonbucler@ { gmail }. com for saving my life. Mr Robinson is the best I’ve ever met! Thanks, thanks thanks_____________