How Stripe Designs Websites (2017)(leerob.io)
leerob.io
How Stripe Designs Websites (2017)
https://leerob.io/blog/how-stripe-designs-beautiful-websites
166 コメント
in 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.
I also liked your analysis of how the perspective property worked in this case.
I also love the transition between different menu items, especially using the keyboard tab navigation.
IMO 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
Drew writes about his spartan approach towards design: 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.
Drew writes about his spartan approach towards design: 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.
SourceHut's page looks like someone's side project, or the stereotypical open source project that sometimes is proud to not care about design. Again, this might work for the target audience, developers.
But I'm also a developer, and I know that decently looking themes are a dime a dozen these days on Theme Forest. So having a very spartan design (unless it's a brand new project) just looks incomplete to me.
Sure, Stripe is the other extreme. I've actually tweeted to Stripe that their stuff is so nice, that I go there to look at pretty things rather than their product. But a polished website (and polished APIs) help fuel the perception that the product is really well thought out, whether it is or not (and in Stripe's case, it clearly is well thought out).
But I'm also a developer, and I know that decently looking themes are a dime a dozen these days on Theme Forest. So having a very spartan design (unless it's a brand new project) just looks incomplete to me.
Sure, Stripe is the other extreme. I've actually tweeted to Stripe that their stuff is so nice, that I go there to look at pretty things rather than their product. But a polished website (and polished APIs) help fuel the perception that the product is really well thought out, whether it is or not (and in Stripe's case, it clearly is well thought out).
What if we think of design as not what something looks like, but rather how it works?
> Again, this might work for the target audience, developers.
Why?
> So having a very spartan design (unless it's a brand new project) just looks incomplete to me.
Why? What's wrong with something that "looks" incomplete if it meets all goals that you want to achieve? If the layout is clear, documentation is accurate and the website loads fast, works across various screens, it is accessible, what more do you want?
I don't think you've substantiated the refutal of source hut besides "It looks like a side project that sometimes is proud to not care about design". I suggest taking a hard look at why we design things instead of surrendering to your experiential biases (aka this is how its done and that's how it should be).
> Again, this might work for the target audience, developers.
Why?
> So having a very spartan design (unless it's a brand new project) just looks incomplete to me.
Why? What's wrong with something that "looks" incomplete if it meets all goals that you want to achieve? If the layout is clear, documentation is accurate and the website loads fast, works across various screens, it is accessible, what more do you want?
I don't think you've substantiated the refutal of source hut besides "It looks like a side project that sometimes is proud to not care about design". I suggest taking a hard look at why we design things instead of surrendering to your experiential biases (aka this is how its done and that's how it should be).
Here's some things I notice at first glance that contribute to it's incomplete feel, imo:
- Lack of hierarchy among elements
- Inconsistent layout from page to page
- No typesetting, paragraphs are squished together in a dark font
- No indication of what the current page is beyond the browser tab title
- Heavily contrasting colors in certain areas like call to actions (white-on-blue) that will bleed on cheaper displays
These are all things that if fixed would improve usability while adding zero decoration.
- Lack of hierarchy among elements
- Inconsistent layout from page to page
- No typesetting, paragraphs are squished together in a dark font
- No indication of what the current page is beyond the browser tab title
- Heavily contrasting colors in certain areas like call to actions (white-on-blue) that will bleed on cheaper displays
These are all things that if fixed would improve usability while adding zero decoration.
As a developer with a poor design sense I noticed all that, also (the rest applies to my mac display, FF developer):
things are not perfectly aligned, the menu on the top is a little out of alignment with the button on the right.
the white box in the middle of the blue area is moved out of alignment with everything else, also the text above the white is a little smushed.
quotes could use some padding.
If all these things were fixed I would say Spartan design, I like it.
As it is now I find it a little annoying and ugly, of course without this post to add to I would never have tried to figure out what exactly I didn't like but that's how it goes I guess.
things are not perfectly aligned, the menu on the top is a little out of alignment with the button on the right.
the white box in the middle of the blue area is moved out of alignment with everything else, also the text above the white is a little smushed.
quotes could use some padding.
If all these things were fixed I would say Spartan design, I like it.
As it is now I find it a little annoying and ugly, of course without this post to add to I would never have tried to figure out what exactly I didn't like but that's how it goes I guess.
I just spent the last year or so doing WCAG2 work for a large government project. Everything you point out is something we got dinged for and had to change in the app we were building.
There was a lot of myself and the other dev saying to each other, "Really? Is this really a big deal?" Now you just see it all over the place because you have an eye for it.
There was a lot of myself and the other dev saying to each other, "Really? Is this really a big deal?" Now you just see it all over the place because you have an eye for it.
Is this how you feel about your home or office? Completely spartan, only the necessary objects and nothing else? I suppose some people do only want a purely spartan, necessities only environment. But I like a little pizazz, a little splash of color here and there a little comfort. And I feel the same way about the software I use. As long as the decoration doesn't get in the way of course.
I'm much more skeptical of decorations on web sites because of how hard it is to exert control over them compared to how hard it is to exert control over the decorations in my home or office.
If I don't like my houseplant, I can move it or get rid of it.
If I don't like your little splash of color or little pizazz, maybe even find it distracting and in the way, what can I do?
In both cases, the userbase's opinions matter. My home has a very small userbase I can pretty easily poll quite thoroughly. Is the same true of a public website?
If I don't like your little splash of color or little pizazz, maybe even find it distracting and in the way, what can I do?
In both cases, the userbase's opinions matter. My home has a very small userbase I can pretty easily poll quite thoroughly. Is the same true of a public website?
Get Tampermonkey, I suppose.
> What's wrong with something that "looks" incomplete
If this is where you are starting from, then I'm not sure what kind of conversation you are hoping for. Requiring that we substantiate our definitions of good design while you try to pass off "looking incomplete" as inconsequential to design is an unfair offer.
> what more do you want?
I want it to look complete.
If this is where you are starting from, then I'm not sure what kind of conversation you are hoping for. Requiring that we substantiate our definitions of good design while you try to pass off "looking incomplete" as inconsequential to design is an unfair offer.
> what more do you want?
I want it to look complete.
I second that source hut looks like a boring, bland website. Sure, it's spartan, the menus work, and it explains exactly what it's doing but it really doesn't scratch that itch of a beautiful website. It's functional, but not beautiful.
Sourcehut looks like an engineer made it. Same with building design.
Sourcehut looks like an engineer made it. Same with building design.
> What if we think of design as not what something looks like, but rather how it works?
Wouldn't that be UX and not necessarily UI?
Wouldn't that be UX and not necessarily UI?
So design is not purely about function, for that is engineering. Design is not purely about aesthetics, for that is Art.
Design, as I understand it, is to produce pleasing interactions with a function that empowers you to achieve what ever task is at hand.
In the example cited by the OP, and by you, there is a clear and obvious difference between the two.
Let's start with a simple cross compare
Brief: I, as a user, wish to visit the home page to understand what it is.
Stripe's page manages that in about a second. The visual hierarchy makes the two core messages stand out and directs my eye to them. "the new standards in payments" and "the complete toolkit for internet business" - should those messages trigger a need, a job to be done, a want, an urge then it very effectively functions.
As I scroll through, the messaging is clear, the design is delightfully simple, but with lovely, unnecessary touches, that communicate quality, care, craft and respect towards the customer.
Sourcehut however draws my eye to announcing the source hut project hub, but i'm not yet sure what sourcehut even is. I scroll a little more. I read a lot of words I understand as a developer, but the answer of "what is it?" elludes me. I scroll back to the opening paragraph "Welcome to sourcehut! This suite of open source tools is the software development platform you've been waiting for. We've taken the wisdom of the most successful open-source communities and turned it into a platform of efficient engineering tools." Okay, so jargon word soup aside, and given that both sites are engineer focused, why is this so hard to parse? What tools do i want? Or not know I want?
I see website that has been made simply, quickly, and for one purpose, which seems to be to exist as a page for those who know and understand what it is, already, to live somewhere. It does not communicate care, craft, ease of use, and it seems to look like the sort of sites we downloaded printer drivers from back in the day.
The purpose of beautiful sites, software, apps, whatever, is to celebrate the world, to create something wonderful, to be empathetic to our users, our fellow humans, to make something that makes us smile, that delights for no reason than it can.
This is not an experiential bias, it is a core element of society, that aesthetics matter to many for a multitude of reasons, and perhaps, it is a bias that you have that chooses to reject it, for reasons I can only hope are not rooted in rejecting it's purpose within humanity because "it doesn't make sense to you".
Design, as I understand it, is to produce pleasing interactions with a function that empowers you to achieve what ever task is at hand.
In the example cited by the OP, and by you, there is a clear and obvious difference between the two.
Let's start with a simple cross compare
Brief: I, as a user, wish to visit the home page to understand what it is.
Stripe's page manages that in about a second. The visual hierarchy makes the two core messages stand out and directs my eye to them. "the new standards in payments" and "the complete toolkit for internet business" - should those messages trigger a need, a job to be done, a want, an urge then it very effectively functions.
As I scroll through, the messaging is clear, the design is delightfully simple, but with lovely, unnecessary touches, that communicate quality, care, craft and respect towards the customer.
Sourcehut however draws my eye to announcing the source hut project hub, but i'm not yet sure what sourcehut even is. I scroll a little more. I read a lot of words I understand as a developer, but the answer of "what is it?" elludes me. I scroll back to the opening paragraph "Welcome to sourcehut! This suite of open source tools is the software development platform you've been waiting for. We've taken the wisdom of the most successful open-source communities and turned it into a platform of efficient engineering tools." Okay, so jargon word soup aside, and given that both sites are engineer focused, why is this so hard to parse? What tools do i want? Or not know I want?
I see website that has been made simply, quickly, and for one purpose, which seems to be to exist as a page for those who know and understand what it is, already, to live somewhere. It does not communicate care, craft, ease of use, and it seems to look like the sort of sites we downloaded printer drivers from back in the day.
The purpose of beautiful sites, software, apps, whatever, is to celebrate the world, to create something wonderful, to be empathetic to our users, our fellow humans, to make something that makes us smile, that delights for no reason than it can.
This is not an experiential bias, it is a core element of society, that aesthetics matter to many for a multitude of reasons, and perhaps, it is a bias that you have that chooses to reject it, for reasons I can only hope are not rooted in rejecting it's purpose within humanity because "it doesn't make sense to you".
To the people making good looking sites like Stripe — I would appreciate feedback on https://Qbix.com and https://Qbix.com/platform
The good, the bad and the ugly. We want to make it not look like a side project by open source guys but actually make people excited like Stripe does.
Only thing I ask is be extremely specific and give immediately actionable advice. We support desktop and mobile browsers.
The good, the bad and the ugly. We want to make it not look like a side project by open source guys but actually make people excited like Stripe does.
Only thing I ask is be extremely specific and give immediately actionable advice. We support desktop and mobile browsers.
On design:
Don't switch between dark/light and light/dark text. It's jarring.
Your use of red/yellow/green/blue makes it look like you're ripping off Google. That's skeezy.
Your sizes and placements are all over the place. Tiny text. Giant text. GIANT screenshots. Shit thrown all over the place. The key to good design is planning. It looks like you didn't have a plan.
On content:
Phrases like "Empowering people", "Uniting communities", and "help people get things done in the real world" are all meaningless fluff that tell me literally nothing about what service or product you provide. The very first thing I see when loading your page should be a PRECISE statement of exactly what you do for me.
On tech:
Navigation performance is terrible and things are interactive for no reason. I don't need or want a rendered globe that spins around when I drag on it. But if you're going to do it anyway, at least make sure that it's not super janky.
There's some extreme layout pop when mousing around your navbars.
On advice:
Practically speaking, nobody cares about someone else's shitty side project. If you want it to look nice, hire someone with even a modicum of aesthetic sense.
Don't switch between dark/light and light/dark text. It's jarring.
Your use of red/yellow/green/blue makes it look like you're ripping off Google. That's skeezy.
Your sizes and placements are all over the place. Tiny text. Giant text. GIANT screenshots. Shit thrown all over the place. The key to good design is planning. It looks like you didn't have a plan.
On content:
Phrases like "Empowering people", "Uniting communities", and "help people get things done in the real world" are all meaningless fluff that tell me literally nothing about what service or product you provide. The very first thing I see when loading your page should be a PRECISE statement of exactly what you do for me.
On tech:
Navigation performance is terrible and things are interactive for no reason. I don't need or want a rendered globe that spins around when I drag on it. But if you're going to do it anyway, at least make sure that it's not super janky.
There's some extreme layout pop when mousing around your navbars.
On advice:
Practically speaking, nobody cares about someone else's shitty side project. If you want it to look nice, hire someone with even a modicum of aesthetic sense.
I'm stuck with slow internet for now and can say this: The images on the site are far too large in terms of file size. I had to download over 10 MB to view the homepage according to Firefox's dev tools.
https://qbix.com/img/welcome/communities.png is a photo encoded as a PNG. That's a bad idea that will lead to unnecessarily large file sizes (1.9 MB). Use JPG or a newer format like WebP. Better yet, eliminate this image entirely as it's a boring stock image that adds nothing.
https://qbix.com/img/mainVideo.png is also huge (2.1 MB) but doesn't need to be. If it's a video frame then why make it 2,654 px by 1,490 px?
Other huge images on the homepage:
https://qbix.com/screenshots/conversations.png
https://qbix.com/screenshots/desktop.png
https://qbix.com/screenshots/personal.png
https://qbix.com/screenshots/profiles.png
https://qbix.com/screenshots/rides.png
At the very least lazy load these.
https://qbix.com/img/welcome/communities.png is a photo encoded as a PNG. That's a bad idea that will lead to unnecessarily large file sizes (1.9 MB). Use JPG or a newer format like WebP. Better yet, eliminate this image entirely as it's a boring stock image that adds nothing.
https://qbix.com/img/mainVideo.png is also huge (2.1 MB) but doesn't need to be. If it's a video frame then why make it 2,654 px by 1,490 px?
Other huge images on the homepage:
https://qbix.com/screenshots/conversations.png
https://qbix.com/screenshots/desktop.png
https://qbix.com/screenshots/personal.png
https://qbix.com/screenshots/profiles.png
https://qbix.com/screenshots/rides.png
At the very least lazy load these.
Use space to separate sections:
Remove all the boxes and drop-shadows. They look very outdated. Use full-width for the hero and remove the whole box-shadow around the lower sections.
Now using space to separate the sections. For example, adding a vertical padding of 64px to the "We build apps" section automatically makes it look like a Stripe-like site. An example: https://onepagelove.com/smash-lite
Use bullet points:
On the "Are you still sending emails?" section just use bullet points. Remove the border and background color on that table with odd-even colors. And add actual bullets. You already used <ul> and <li>, now let people know that those are bullet points. Add some padding between each bullet point.
HTML bullet points already make it better to read. If you want to look cute, use bullet point images that catch the eye. Similar to how this template does: https://onepagelove.com/devbook
Use visual hierarchy:
For the section titles, use a larger font size, like 36px. Add some padding to the bottom to make it stand apart from the text. Users will use this to their advantage to scan your page.
You're already using bold for the bullet point titles, so you're aware that they're important. Make them pop more by putting the title in its own line and make it a bit bigger. I'd try to use less copy. Drop the effect that collapses the text when you click it.
Be consistent:
Designers are very consistent when it comes to spacing. Try to stick to multiples of 8px: 8px, 16px, 24px, 36px, 48px, 64px. Try to avoid using multiple fonts and colors for things that are in the same hierarchy.
I think you get the gist. Alternatively, just get a free template like the ones I linked, it's much easier than designing things from scratch.
Remove all the boxes and drop-shadows. They look very outdated. Use full-width for the hero and remove the whole box-shadow around the lower sections.
Now using space to separate the sections. For example, adding a vertical padding of 64px to the "We build apps" section automatically makes it look like a Stripe-like site. An example: https://onepagelove.com/smash-lite
Use bullet points:
On the "Are you still sending emails?" section just use bullet points. Remove the border and background color on that table with odd-even colors. And add actual bullets. You already used <ul> and <li>, now let people know that those are bullet points. Add some padding between each bullet point.
HTML bullet points already make it better to read. If you want to look cute, use bullet point images that catch the eye. Similar to how this template does: https://onepagelove.com/devbook
Use visual hierarchy:
For the section titles, use a larger font size, like 36px. Add some padding to the bottom to make it stand apart from the text. Users will use this to their advantage to scan your page.
You're already using bold for the bullet point titles, so you're aware that they're important. Make them pop more by putting the title in its own line and make it a bit bigger. I'd try to use less copy. Drop the effect that collapses the text when you click it.
Be consistent:
Designers are very consistent when it comes to spacing. Try to stick to multiples of 8px: 8px, 16px, 24px, 36px, 48px, 64px. Try to avoid using multiple fonts and colors for things that are in the same hierarchy.
I think you get the gist. Alternatively, just get a free template like the ones I linked, it's much easier than designing things from scratch.
This sentence:
"We build apps for all kinds of communities."
Should be towards the top of your page so that visitors can get context immediately.
Keep in mind, a lot of visitors won't watch your video.
Watching the video is a larger investment of time than simply reading. And they may be in an environment without headphones.
I recommend adding a tool like Hotjar to your site so that you can watch video of actual usage.
That way you'll discover more tidbits yourself.
That would be more efficient than asking us for feedback, since we're not your customers.
"We build apps for all kinds of communities."
Should be towards the top of your page so that visitors can get context immediately.
Keep in mind, a lot of visitors won't watch your video.
Watching the video is a larger investment of time than simply reading. And they may be in an environment without headphones.
I recommend adding a tool like Hotjar to your site so that you can watch video of actual usage.
That way you'll discover more tidbits yourself.
That would be more efficient than asking us for feedback, since we're not your customers.
Just FYI, I wanted to go to your second URL from the first, but I mistyped "platform," and ended up here:
https://qbix.com/communities/platfrom
Which isn't the most well-put-together 404 (well, from the message, looks like a 412) page, but hey, I'm not a designer. :)
https://qbix.com/communities/platfrom
Which isn't the most well-put-together 404 (well, from the message, looks like a 412) page, but hey, I'm not a designer. :)
To me, sourcehut's page looks well thought-out and providing affordances that "no design" would not, like scrollable wide tables on a narrow mobile screen. It has almost zero visual noise while communicating the structure, which is no small feat for any design.
It's devoid of flourish, but for its purpose this is entirely adequate. I wish more sites could be as pragmatic and usable.
It's devoid of flourish, but for its purpose this is entirely adequate. I wish more sites could be as pragmatic and usable.
I think sourcehut's site looks like a cluttered, ugly mess. I'm glad that your opinion is in the minority, because I like that the web has moved far beyond late 90s-early 2000s design.
Agreed.
If I somehow end up on a similar looking website, I'd often close it and move on to the next result on Google.
My brain automatically associate that UI with an archive website that probably hasn't been uploaded since 2005ish.
If I somehow end up on a similar looking website, I'd often close it and move on to the next result on Google.
My brain automatically associate that UI with an archive website that probably hasn't been uploaded since 2005ish.
> My brain automatically associate that UI with an archive website that probably hasn't been uploaded since 2005ish.
If you know that your brain is wrong then why aren't you actively trying to teach it not do that association?
If you know that your brain is wrong then why aren't you actively trying to teach it not do that association?
[deleted]
About five to eight years ago, there was a huge push to get out of the "bootstrap" fever that everybody was using. A lot of places tried (unsuccessfully) to emulate sites like Reddit, Hacker News and other minimalist site designs, thinking they could design something similar.
The sad thing is there's a lot of modern tech they're using under the hood; which a majority of people will never see or appreciate.
It's like my buddy used to say, "I gave you the capabilities to design a beautiful Ferrari; and you gave me a Toyota Corolla instead."
The sad thing is there's a lot of modern tech they're using under the hood; which a majority of people will never see or appreciate.
It's like my buddy used to say, "I gave you the capabilities to design a beautiful Ferrari; and you gave me a Toyota Corolla instead."
As I said, "ugliness" is subjective. I also don't think it is particularly beautiful.
I actually kind of like it. Not beautiful, certainly, but more usable, and loads lightning fast. I'm not really a fan of the bloated re-designs we're seeing these days.
> I personally really like https://sourcehut.org
This is honestly horrible. Extraordinarily poor typography, my eyes don't know where to focus. And the visual polish is amateur hour.
Come on...we're talking about Stripe...a $36B company that accepts payments around the world. You can't just drop a random website in here and claim it's an example of "good" when it doesn't even take into account context.
This is honestly horrible. Extraordinarily poor typography, my eyes don't know where to focus. And the visual polish is amateur hour.
Come on...we're talking about Stripe...a $36B company that accepts payments around the world. You can't just drop a random website in here and claim it's an example of "good" when it doesn't even take into account context.
> Come on...we're talking about Stripe...a $36B company that accepts payments around the world. You can't just drop a random website in here and claim it's an example of "good" when it doesn't even take into account context.
I would like to counter your point with this website of a company that has over $700B in assets and can probably buy a Stripe every single year for the next 20 years...I present to you Berkshire Hathaway: https://www.berkshirehathaway.com
I would like to counter your point with this website of a company that has over $700B in assets and can probably buy a Stripe every single year for the next 20 years...I present to you Berkshire Hathaway: https://www.berkshirehathaway.com
I hate this meme.
Berkshire's website doesn't serve the same purpose as Stripe's.
This is exactly what I'm talking about wrt context and design.
Berkshire's website doesn't serve the same purpose as Stripe's.
This is exactly what I'm talking about wrt context and design.
It's almost disheartening that there are folks out there that like the clump, cluttered busy mess that is sourcehut.org over the clean, beautiful design of the Stripe website.
The Stripe website (just checked it out) might be visually clean, but it is also clean from information what it is all about. SourceHut in comparison is packed with inforformation. I mean, compare the two side by side (i had to scale them down because at 100% they believe i'm using a mobile phone - damn, how much i hate "responsive" CSS, all it responds to is to assumptions its web developers make):
https://i.imgur.com/kdKK3cY.png
On the left side SourceHut has almost everything you want to know, on the right side Stripe has... a couple of background images, one button to "START NOW" (start what?) and to contact sales (for what?).
Stripe's site is a classic case where form took precedence over function.
https://i.imgur.com/kdKK3cY.png
On the left side SourceHut has almost everything you want to know, on the right side Stripe has... a couple of background images, one button to "START NOW" (start what?) and to contact sales (for what?).
Stripe's site is a classic case where form took precedence over function.
I feel like we're looking at the images reversed!
When I look at Stripe's website, I immediately read: "The new standard in online payments". Ok, they handle online payments, that's really clear.
When I look at Sourcehut, the first thing I read is that Drew DeVault posted: "Announcing the SourceHut project hub". Ok? Is that really the first thing I should know? Then I read further and still have zero idea what the actual tools are until I actually dig deeper.
The whole point of the Stripe website is to make people want to use Stripe. That's the function, and if a lot of form helps with that, the function achieved. And I'm pretty sure the Strips homepage is doing a good job drumming up business considering their success.
When I look at Stripe's website, I immediately read: "The new standard in online payments". Ok, they handle online payments, that's really clear.
When I look at Sourcehut, the first thing I read is that Drew DeVault posted: "Announcing the SourceHut project hub". Ok? Is that really the first thing I should know? Then I read further and still have zero idea what the actual tools are until I actually dig deeper.
The whole point of the Stripe website is to make people want to use Stripe. That's the function, and if a lot of form helps with that, the function achieved. And I'm pretty sure the Strips homepage is doing a good job drumming up business considering their success.
Stripe's website doesn't tell you anything about what exactly it provides though. At best you can infer that they provide some sort of API for accepting payments based on the code snippet they have at the bottom, but beyond that nothing else is there - and even that is something you have to infer.
SourceHut's site tells you what it does, how it does it, what features you can find in there and a bunch of other things. It is packed with information.
SourceHut's site tells you what it does, how it does it, what features you can find in there and a bunch of other things. It is packed with information.
Communicating "information" is not at all important, communicating __value__ is. Stripe does that exceptionally well, and sourcehut does not.
What does that even mean?
When i want to learn about what something is, i want information about what that something is.
When i want to learn about what something is, i want information about what that something is.
Not necessarily. You don't (well, most people) want to know what a product is, you want to know what it can do for you.
In other words, the value it offers you. How it enables you to achieve what you want to achieve. That's what matters, the technical functionality does not.
I don't care that Nike uses vulcanized rubber and cotton, I care that my friends will think they look cool, and thus make me look cool.
So they focus on communicating that value proposition rather than an info dump about the product.
Sourcehut says "lots of open source mini services that work without JavaScript". Cool, why do I care? Is there a cost saving? Would my devs prefer this? Can it do something other paid services can't? Why should I use it?
This is sales, not engineering.
In other words, the value it offers you. How it enables you to achieve what you want to achieve. That's what matters, the technical functionality does not.
I don't care that Nike uses vulcanized rubber and cotton, I care that my friends will think they look cool, and thus make me look cool.
So they focus on communicating that value proposition rather than an info dump about the product.
Sourcehut says "lots of open source mini services that work without JavaScript". Cool, why do I care? Is there a cost saving? Would my devs prefer this? Can it do something other paid services can't? Why should I use it?
This is sales, not engineering.
It's disheartening to me that there are people out there that like the busy yet low-density over-designed mess that is stripe.com over the simple, functional design of the sourcehut website.
It's particularly disheartening to me because those people seem to include all web designers.
It's particularly disheartening to me because those people seem to include all web designers.
You 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.
The minimal "spartan" design of Sourcehut probably works great for their audience. The same design approach would not work for Stripe.
sourcehut 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.
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.
The lack of any vertical rhythm or spacing, at least in mobile, is atrocious.
> 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/
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.
Are you talking about this page? 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.
The information hierarchy is unclear because they did not use best practices in design. As the other commenters said, you have to read it like a book. A better site would have larger, bold headings with darker text than the body text. There would be more padding between the sections. There would be a jumbotron at the top that identifies the top 1-3 reasons for me to use this site, so I can understand in 5 seconds if I want this service and don't have to spend 3 minutes reading the entire text.
There's some pretty low-hanging fruit on sourcehut's landing page (like vertical spacing) but it really does take 5 seconds to learn why to use sourcehut. It's right at the top with a bold header that says "welcome to sourcehut" and a literal bullet list of reasons.
i had to read your comment to understand that banner wasn't the user registration banner. Because of the huge input fields on the right, and the same gray background, i had the feeling this whole section was popin in for user registration.
This is an example of a total misunderstanding of one of the most basic graphical design principle : you don't group together information that is not related.
This is an example of a total misunderstanding of one of the most basic graphical design principle : you don't group together information that is not related.
> but there are design fundamentals that are non-negotiable.
Only within a given culture, and only within a given span of time.
Unless designers think that some cultures are wrong, of course.
Only within a given culture, and only within a given span of time.
Unless designers think that some cultures are wrong, of course.
> You can disagree with the design you prefer, but there are design fundamentals that are non-negotiable.
And what those fundamentals are changes with the fashions of the era.
For example, frames were once good design, and proper.
Image maps were once good design, and proper.
Both of those things are forgotten now.
And what those fundamentals are changes with the fashions of the era.
For example, frames were once good design, and proper.
Image maps were once good design, and proper.
Both of those things are forgotten now.
Frames and image maps were technical implementation details, not design choices.
It was possible to do both bad and good design with them.
It was possible to do both bad and good design with them.
Don't forget cultures. The designers, it seems, haven't told all countries what they should and shouldn't like.
I found the sourcehut page really hard to look at because there's no sense of visual hierarchy. Everything is at the same equal "level" for attention, so your eye just goes all over trying to find something to anchor to but it can't find it, so you feel overwhelmed.
Good page design should lead you to certain actions and organize the content into some sort of hierarchy.
Good page design should lead you to certain actions and organize the content into some sort of hierarchy.
Terrible hierarchy of elements on sourcehut, I don't know how to read this website efficiently
I honestly don't understand this comment, what is wrong with reading it from top to bottom? The very top of the landing page has a list of high-level reasons to use sourcehut, and then the rest of the landing page is just a detailed list of features. Is there some other "efficient" way to read a website that involves some non-linear sequence of jumps around the page?
> Is there some other "efficient" way to read a website that involves some non-linear sequence of jumps around the page?
Yeah, it's called skimming and scanning [1].
This is why things like information hierarchy [2] and vertical rhythm [3] are emphasized in modern design.
[1] https://en.wikipedia.org/wiki/Speed_reading#Skimming_and_sca...
[2] https://zevendesign.com/designers-guide-to-visual-hierarchy/
[3] https://zellwk.com/blog/why-vertical-rhythms/
Yeah, it's called skimming and scanning [1].
This is why things like information hierarchy [2] and vertical rhythm [3] are emphasized in modern design.
[1] https://en.wikipedia.org/wiki/Speed_reading#Skimming_and_sca...
[2] https://zevendesign.com/designers-guide-to-visual-hierarchy/
[3] https://zellwk.com/blog/why-vertical-rhythms/
I've opened it 3-4 times now and still don't know what it does because it requires me to read it from top to bottom like an article. There's no intuitive way to quickly get a grasp of what it does.
I ignored the section you're describing since my eyes are looking for something tangible that draws my attention but since there is nothing I just ignore everything and don't read a single word.
I ignored the section you're describing since my eyes are looking for something tangible that draws my attention but since there is nothing I just ignore everything and don't read a single word.
The sourcehut landing page has ~300 words on it. Those words could be literally arranged in a giant spiral and still not require 3-4 genuine attempts to learn what sourcehut does. This comment is a total caricature of the actual and tangible benefits of a well-thought-out UI.
Sourcehut is an engineering tool and its landing page is not designed to harvest registrations and clicks. The lack of design is not a failure of design, it’s just that design is not that important on this particular website.
You misunderstand the problem here. I haven't done 3-4 genuine attempts. I've opened and closed the site multiple times while reading this thread back-and-forth and only afterwards realized I still don't know what the service does. It fails to convey the message in an immediate way.
And I'm not even talking about the brutalist design here. As many others have pointed out there are good minimalist non-designed landing pages (pinboard, tarsnap).
And I'm not even talking about the brutalist design here. As many others have pointed out there are good minimalist non-designed landing pages (pinboard, tarsnap).
You misunderstand my point, which is that only “genuine attempts” matter in this particular case. Sourcehut is clearly working to stay away from the lightspeed, attention-shaping, zillions of fundamentally distracted users zeitgeist. You’re critiquing it from within a paradigm that it’s somewhat explicitly separating itself from. This is the whole reason sourcehut looks the way it does and that we’re even having this conversation. What you’re saying is 100% correct in terms of design but also missing the forest for the trees.
> You misunderstand my point, which is that only “genuine attempts” matter in this particular case.
I'm sorry but you don't get to decide what matters.
Users will decide that for you. And the truth is nobody gives a fuck about sourcehut or whatever other project enough to honor it with a "genuine attempt".
Nobody is going to slow down to wade through the unreadable, mess of information splattered on the page just because it's there and available.
So if that's the assumption you're building with, you'll be hosed.
It's important to design for how people actually use things, and how people actually behave, and the information customers are actually looking for.
I'm sorry but you don't get to decide what matters.
Users will decide that for you. And the truth is nobody gives a fuck about sourcehut or whatever other project enough to honor it with a "genuine attempt".
Nobody is going to slow down to wade through the unreadable, mess of information splattered on the page just because it's there and available.
So if that's the assumption you're building with, you'll be hosed.
It's important to design for how people actually use things, and how people actually behave, and the information customers are actually looking for.
It's the principle of "if Muhammad won't come to the mountain, bring the mountain to Muhammad". Or whatever other name you prefer, same principle.
The hubris of the technologically competent, one so often spied on this website, is to believe that those unwilling to join them on the top of the mountain don't deserve the mountain, rather than that a ski lift should be installed.
It's as though the democratisation of technology over the past thirty years has completely escaped their attention.
The hubris of the technologically competent, one so often spied on this website, is to believe that those unwilling to join them on the top of the mountain don't deserve the mountain, rather than that a ski lift should be installed.
It's as though the democratisation of technology over the past thirty years has completely escaped their attention.
In this case the mountain is web-hosted git repos? This particular mountain already has at least 3 ski lifts you might have heard of called GitHub, GitLab, and Bitbucket.
When I say “matter” I’m not being normative, I’m saying that this particular tool’s value add has nothing to do with its discoverability on the World Wide Web. Sourcehut’s website is a signpost not an advertisement. The set of users who are put off by the design but would have otherwise used the tool is negligible. Comparing sourcehut’s design to Stripe is like comparing a Camry to a dune buggy.
I don't know how many times I've clicked on the list link thinking I'll go to the mailinglist of the project I'm inspecting just to be directed to the global mailinglist page.
Still, communicating through visual design is foundational to marketing your business. Sourcehut's design is fine for it's audience, that is to say people who don't give a shit about how something is presented as long as it works well.
Other classic HN examples:
https://pinboard.in/ https://www.tarsnap.com/
> Stripe’s design is decorative.
Of course, you already admitted the subjectivity of it all. I accept that. But at the same time, there is a reality that we all exist in, a reality heavily dictated by what we see and what we feel, and design has the ability to affect and influence those at a "pre-attentive" level -- ie before the efficacy of a product can be known or evaluated. So when I land on stripe.com, and I know nothing about it, I can at a minimum infer that there is a team of competent, professional, smart people behind the product judging by how the website looks and feels. I'm also associating a sense of happiness, wonder, and enthusiasm with the brand through my interactions on the website. I am seeing the bright colors, the crisp lines, and the smooth animations and I am, in my mind, creating a narrative about Stripe - that they have a high quality bar, that this product will be enjoyable, that there is craftsmanship here. There are many more people in this world that are attracted to beautiful things and intriguing stories than people who aren't.
> deep down inside I personally belong to the functional design or “no design” camp.
I assume this is just about software. Of course, we all love decoration in other parts of our lives. We love our little icons, we love our desktop wallpapers, we love our avatars. At a broader scale, the presentation of food on a plate. A favorite t-shirt. Gardens. Book covers. The color of your car. The color of your house. What type of furniture you choose to own. Movies. Music. All of these, from functional objects to artistic expression rely on some sense of decoration. There is inherently an "excessiveness" to all enjoyable things that makes them more emotionally charged than the sum of their atoms (or code) alone. I'm sure we can also agree on that.
Sorry for the diatribe. I hope it doesn't feel like an attack on you, OP, but I just find the overall sense on HN that things like a color palette or some animations are meaningless.
Of course, design can be used to disguise bad products. That's the bad kind. Stripe, as an example, isn't in that category.
Other classic HN examples:
https://pinboard.in/ https://www.tarsnap.com/
> Stripe’s design is decorative.
Of course, you already admitted the subjectivity of it all. I accept that. But at the same time, there is a reality that we all exist in, a reality heavily dictated by what we see and what we feel, and design has the ability to affect and influence those at a "pre-attentive" level -- ie before the efficacy of a product can be known or evaluated. So when I land on stripe.com, and I know nothing about it, I can at a minimum infer that there is a team of competent, professional, smart people behind the product judging by how the website looks and feels. I'm also associating a sense of happiness, wonder, and enthusiasm with the brand through my interactions on the website. I am seeing the bright colors, the crisp lines, and the smooth animations and I am, in my mind, creating a narrative about Stripe - that they have a high quality bar, that this product will be enjoyable, that there is craftsmanship here. There are many more people in this world that are attracted to beautiful things and intriguing stories than people who aren't.
> deep down inside I personally belong to the functional design or “no design” camp.
I assume this is just about software. Of course, we all love decoration in other parts of our lives. We love our little icons, we love our desktop wallpapers, we love our avatars. At a broader scale, the presentation of food on a plate. A favorite t-shirt. Gardens. Book covers. The color of your car. The color of your house. What type of furniture you choose to own. Movies. Music. All of these, from functional objects to artistic expression rely on some sense of decoration. There is inherently an "excessiveness" to all enjoyable things that makes them more emotionally charged than the sum of their atoms (or code) alone. I'm sure we can also agree on that.
Sorry for the diatribe. I hope it doesn't feel like an attack on you, OP, but I just find the overall sense on HN that things like a color palette or some animations are meaningless.
Of course, design can be used to disguise bad products. That's the bad kind. Stripe, as an example, isn't in that category.
I do not think sourcehut's UI/UX is nearly as good as tarsnap or pinboard. As other's have pointed out, the hierarchy is unclear in sourcehut.
I enjoyed reading your response. Stripe definitely is beautiful and well polished. To be honest, Source Hut looks aesthetically ugly. I just feel that that Stripe's design isn't "great" by any means. To me a high benchmark of excellence in design is from print mediums, specifically, Josef Muller Brockmann and Elliot Noyes. They made print design (before we had digital screens) unadorned and highly functional.
Can you please show at least one example that you consider to be "great"? I'm curious.
Grid system by JMB: https://www.niggli.ch/en/grid-systems-in-graphic-design.html
SourceHut's homepage is almost objectively mediocre design. It does very little to cue you into the most important parts of the page and help you parse and scan it quickly.
For example, let's look at the spacing. The padding and margin in each section are inconsistent, almost random. It forces you to do mental work to separate them in your mind, and it doesn't allow you to take mental breaks, because it's hard to find your place if you look away, almost like reading a book. The header literally just runs into the body of page, like a single wall of text. And at what benefit? Slightly less scrolling? Scrolling is trivial.
Copywriting is part of design. Tell me, what purpose does this copy serve? "Welcome to sourcehut! This suite of open source tools is the software development platform you've been waiting for. We've taken the wisdom of the most successful open-source communities and turned it into a platform of efficient engineering tools." Most of this is useless and can be cut. People skim on the Internet. Give them bite-sized and useful info, not a paragraph that says welcome.
SourceHut is capitalized in three different ways: SourceHut, sourcehut, and Sourcehut. This is not really communicating to me great attention to detail or professionalism. If you think that's not important, then you probably don't understand why restaurants with clean floors and well-maintained exteriors inspire more trust in diners than dirty or dilapidated restaurants. We look at exteriors to get an idea of what's going on behind the scenes.
Typography is important, too. There's no main heading on the page, nothing to call your eye to, except the blog post at the top. I have to hunt to figure out where to start reading, and I'm almost guaranteed to start in the wrong place and then adjust. The headings in the main body also aren't sufficiently bold to stand out and draw your eye. Even the indentation of the testimonials is inconsistent. Why aren't they indented along with the bullet points to convey that they fall under the headings?
Where color is used, it's distracting and misleading. My eyes are drawn toward random links and testimonials rather than to important parts of the page that I should read first. (For comparison, look at how Stripe.com uses color to draw your eye to headings.)
The clickable buttons are tiny. The images are tiny, too -- far too small to be useful. They also lack captions, and clicking on them takes me to random and confusing places. Compare to the highly readable code examples on Stripe.com.
I could go on. It's not a terrible homepage. It's functional. I've seen much worse. But it has many obvious major design flaws that make it a worse experience for reading.
Developers have a norm of loving minimalistic, simplistic, text-heavy, old-school, nostalgic interfaces. That's fine. I'm partial to them, too. But it's important not to get, "I like this," confused with, "This is good design." It's not. A good rule of thumb is that if you have to be inculcated with the beliefs of a particular tribe in order to find something good, and everybody outside that tribe finds it repulsive, it's probably not good.
EDIT: I spent 10 minutes in the dev tools and made a better version: https://i.imgur.com/AoOy50x.png
For example, let's look at the spacing. The padding and margin in each section are inconsistent, almost random. It forces you to do mental work to separate them in your mind, and it doesn't allow you to take mental breaks, because it's hard to find your place if you look away, almost like reading a book. The header literally just runs into the body of page, like a single wall of text. And at what benefit? Slightly less scrolling? Scrolling is trivial.
Copywriting is part of design. Tell me, what purpose does this copy serve? "Welcome to sourcehut! This suite of open source tools is the software development platform you've been waiting for. We've taken the wisdom of the most successful open-source communities and turned it into a platform of efficient engineering tools." Most of this is useless and can be cut. People skim on the Internet. Give them bite-sized and useful info, not a paragraph that says welcome.
SourceHut is capitalized in three different ways: SourceHut, sourcehut, and Sourcehut. This is not really communicating to me great attention to detail or professionalism. If you think that's not important, then you probably don't understand why restaurants with clean floors and well-maintained exteriors inspire more trust in diners than dirty or dilapidated restaurants. We look at exteriors to get an idea of what's going on behind the scenes.
Typography is important, too. There's no main heading on the page, nothing to call your eye to, except the blog post at the top. I have to hunt to figure out where to start reading, and I'm almost guaranteed to start in the wrong place and then adjust. The headings in the main body also aren't sufficiently bold to stand out and draw your eye. Even the indentation of the testimonials is inconsistent. Why aren't they indented along with the bullet points to convey that they fall under the headings?
Where color is used, it's distracting and misleading. My eyes are drawn toward random links and testimonials rather than to important parts of the page that I should read first. (For comparison, look at how Stripe.com uses color to draw your eye to headings.)
The clickable buttons are tiny. The images are tiny, too -- far too small to be useful. They also lack captions, and clicking on them takes me to random and confusing places. Compare to the highly readable code examples on Stripe.com.
I could go on. It's not a terrible homepage. It's functional. I've seen much worse. But it has many obvious major design flaws that make it a worse experience for reading.
Developers have a norm of loving minimalistic, simplistic, text-heavy, old-school, nostalgic interfaces. That's fine. I'm partial to them, too. But it's important not to get, "I like this," confused with, "This is good design." It's not. A good rule of thumb is that if you have to be inculcated with the beliefs of a particular tribe in order to find something good, and everybody outside that tribe finds it repulsive, it's probably not good.
EDIT: I spent 10 minutes in the dev tools and made a better version: https://i.imgur.com/AoOy50x.png
I think it is important to separate different aspects of design. E.g. you can have a great user experience in terms of the users being able to fulfill tasks efficiently with an unappealing visual design, and you can have a visual design that alone evokes emotions in visitors, but the navigation is horrible and everyone gets lost. Or both, or neither.
If you look at minimalist, functional design in the "real world", there is often an enormous amount of work and many iterations behind it to get to that final stage where nothing more can be removed. It is not designers just not doing anything.
And at least from my perspective having a couple of iterations from the basic idea, is what sourcehut is missing.
My first impression opening the page and the screenshots is, that it is very messy and nervous. Even though on a a bit closer look the information structure seems to be well thought out. It could benefit tremendously from a designer going over it an making adjustments to typography and use of white space.
Not adding anything, no animations, no fluff, but tidy and straighten things up. Arguably on the website itself I would remove a lot. Should be way more spartan in my opinion.
If you look at minimalist, functional design in the "real world", there is often an enormous amount of work and many iterations behind it to get to that final stage where nothing more can be removed. It is not designers just not doing anything.
And at least from my perspective having a couple of iterations from the basic idea, is what sourcehut is missing.
My first impression opening the page and the screenshots is, that it is very messy and nervous. Even though on a a bit closer look the information structure seems to be well thought out. It could benefit tremendously from a designer going over it an making adjustments to typography and use of white space.
Not adding anything, no animations, no fluff, but tidy and straighten things up. Arguably on the website itself I would remove a lot. Should be way more spartan in my opinion.
I don't know why many praise sourcehut's design, to me it lacks clarity and everything looks like it was smashed together. A little more CSS and structure can make it go a long way.
There are functional aspects that go beyond those you consider though. For example, rounded corners are, from a functional perspective, unnecessary (and maybe even confusing! Are the corners clickable?), but it turns out there's actually a bit of psychology and evolutionary weirdness that make humans more comfortable with rounded corners than sharp ones.
Other sites have marketing needs. They might colors or motifs to evoke positive associations with related brands. Or avoid negative associations with others. Or just to avoid looking too much like a competitor.
A lot of this is hard to articulate for most. Heck, even some designers can't explain why another design feels right and another doesn't. It just comes across as "that one looks nicer". But there are often (though certainly not always) deeper, functional purposes behind what seems to just be an aesthetic.
Other sites have marketing needs. They might colors or motifs to evoke positive associations with related brands. Or avoid negative associations with others. Or just to avoid looking too much like a competitor.
A lot of this is hard to articulate for most. Heck, even some designers can't explain why another design feels right and another doesn't. It just comes across as "that one looks nicer". But there are often (though certainly not always) deeper, functional purposes behind what seems to just be an aesthetic.
I think one aspect of Stripe design that I find distracting and bothersome is all of the rotated elements with 3D transforms and the diagonal lines. I find it jarring and unnecessary to see all of these elements and images positioned at strange angles. It just decreases readability and feels tiring on the eyes.
For a website it's almost too beautiful, diverse with different elements, colorful, etc. It's something I want to put on my wall or see in a brochure, not something that's ideal for digesting content. I need something that's 50% Stripe, 50% Craigslist.
Anyway, I certainly look to them for inspiration in my work, but if the entire internet looked like Stripe, I think it would get old very quick.
For a website it's almost too beautiful, diverse with different elements, colorful, etc. It's something I want to put on my wall or see in a brochure, not something that's ideal for digesting content. I need something that's 50% Stripe, 50% Craigslist.
Anyway, I certainly look to them for inspiration in my work, but if the entire internet looked like Stripe, I think it would get old very quick.
One thing I find amusing is that Stripe's CEO's webpage is a lot closer to Sourcehut in design than Stripe: https://patrickcollison.com/
Those links are a bit small and close together, though.
Stripe looks great but after actually using it the performance is terrible - the api docs and the dashboard especially. Makes me wish they had gone with a css file 95% shorter and spent that effort on making the experience faster.
I understand that design preference is subjective but come on, that SourceHut page is horrendous. If they're going for the brutalist/minimalist look they could at least make the UX good.
[deleted]
Stripe's UX is pretty bad for my workflow because at a browser width of 960 pixels, horizontal scrolling is necessary to use their UI. There's plenty of room for everything to fit, but gratuitous white space wastes it and requires the horizontal scrollbar.
I've reported the issue to their support multiple times over the last three years and they've agreed it was an issue but as far as I can tell, have no plans to fix it.
I've reported the issue to their support multiple times over the last three years and they've agreed it was an issue but as far as I can tell, have no plans to fix it.
I'm in agreement. I personally really like https://pinboard.in
[deleted]
[deleted]
Too bad Atlassian can't learn a thing or two from that Sourcehut article.
Their 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.
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.
Functionality, power, perfomance, no unicorns, no FUD, low bs factor: https://www.berkshirehathaway.com/
And a fraction of the design costs!
And a fraction of the design costs!
Not mobile-friendly.
Otherwise, nicely communicates the idea to be from 1990s.
Otherwise, nicely communicates the idea to be from 1990s.
Works for me, what's not mobile friendly about it?
Communicates intense boomerism.
> And a fraction of the design costs! Indeed
> And a fraction of the design costs! Indeed
OMG. You made my day. Beautiful.
I'll add data-density to the application site wishlist. I wish it were easier to customize Bootstrap in that direction.
What does data density mean? Having as much data as possible per unit of space?
Yes, 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.
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.
Yea, I'm having the same problem with a React-MaterialUI business dashboard that I'm building.
Is there a good framework for this?
Is there a good framework for this?
I’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/
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.
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.
The 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.
Especially their new documentation format: https://twitter.com/patrickc/status/1253031147459604482
Nitpick: Scroll down to the bottom, then hit the Home key. Should take you to the top but doesn't.
It's worth taking a look at Stripe's revised color palette after a ton of fascinating research - https://stripe.com/blog/accessible-color-systems
I 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".
Strange for a blog post url that begins with "accessible".
I have pretty terrible eyesight, but I did not find the font or color difficult to read here.
The page has 86(ish) WCAG contrast errors mostly related to link colors: https://wave.webaim.org/report#/https://stripe.com/blog/acce...
I found it pretty difficult to read because it is so bright and uses lighter font color.
I 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?!
From the second sentence: "Good contrast makes it easier for people with visual impairments to use products."
Agreed. The background is too white I think. It's blinding and I even have flux on. haha
I agree, the font is way too light.
Just 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?
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?
There'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.
You 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.
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.
Agreed. 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.
HN is the exception not the rule, it's half full of devs with irrational hatred towards javascript frameworks and half full of devs with irrational devotion towards javascript frameworks. The two groups have found a tenuous peace by agreeing to direct their hatred towards designers.
As a designer, I use one of the many alternative HN clients made for my people.
As a designer, I use one of the many alternative HN clients made for my people.
I don’t think we hate designers. I think they are great.
The best designers are those who are absolute maniacs at trying to figure out the essentials, ensuring every little thing has a purpose, design that helps the user get their job done. It’s fast, it’s simple, it’s readable and delightful.
I think what I as a dev loathe is bloated design, animations without a purpose, megabytes of crap that slow things down. Those social sharing buttons no one clicks.
I have a job to do, I have little patience, don’t make me feel like an idiot. Just get the job done.
The best designers are those who are absolute maniacs at trying to figure out the essentials, ensuring every little thing has a purpose, design that helps the user get their job done. It’s fast, it’s simple, it’s readable and delightful.
I think what I as a dev loathe is bloated design, animations without a purpose, megabytes of crap that slow things down. Those social sharing buttons no one clicks.
I have a job to do, I have little patience, don’t make me feel like an idiot. Just get the job done.
I think I phrased my comment wrong. I didn't mean to imply that what you actually see on the screen and how content is presented to you are unimportant. I meant aesthetically pleasing elements (like nice colors and brilliant animations) are less important components to "great" design than actually feeding content to users in the most intuitive way possible. Great designers are still very much needed to achieve the latter in my opinion.
I'm not a hater of designers :)
I'm not a hater of designers :)
Thanks for this breakdown, it's actually very helpful and explains some of the shamefully high bounce rates I've seen on some of my side projects in the past.
I've been wanting to re-create my blog & about/personal page. Are there similar write-ups for beautiful blogs/resume/about pages?
I 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_Yvu...
[1] https://www.youtube.com/playlist?list=PLDVpvW8ghDr9tasku_Yvu...
I 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
great links, thank you!
You 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=13337948 https://news.ycombinator.com/item?id=17787816 https://news.ycombinator.com/item?id=18788244 https://news.ycombinator.com/item?id=19114037 https://news.ycombinator.com/item?id=21100377 https://twitter.com/gwern/status/1092221945427517440
FWIW, my own site's writeup is at https://www.gwern.net/About#design
https://news.ycombinator.com/item?id=12804406 https://news.ycombinator.com/item?id=13337948 https://news.ycombinator.com/item?id=17787816 https://news.ycombinator.com/item?id=18788244 https://news.ycombinator.com/item?id=19114037 https://news.ycombinator.com/item?id=21100377 https://twitter.com/gwern/status/1092221945427517440
FWIW, my own site's writeup is at https://www.gwern.net/About#design
Previous discussion for reference: https://news.ycombinator.com/item?id=15838270
Is 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
Looks very "Bootstrappy" like most of the web.
How does Stripe look "Bootstrappy"? Could you provide a specific example?
I'd argue that the design language they pioneered has now become ubiqitous as everyone seeks to emulate them.
"Pioneered" might be a bit generous …
IIRC Bootstrap was the first responsive framework that exploded when everyone was struggling to get mobile compatible websites.
There were others but Bootstrap was lightweight and easy to use, so much so that I, with no frontend experience at the time, could use it to hack together pages for some of my projects.
There were others but Bootstrap was lightweight and easy to use, so much so that I, with no frontend experience at the time, could use it to hack together pages for some of my projects.
Hey, 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.
Bootstrap is just a set of building blocks. If you look at the bootstrap examples page (https://getbootstrap.com/docs/4.4/examples/), you'll see 8 different pages that all look very different. The only thing that unites them is a color scheme.
This comment seems to me like going to the bookstore and lamenting that all the books look the same because they have their spine on the left, barcode on the back, and a blurb about the author on the inside back cover.
This comment seems to me like going to the bookstore and lamenting that all the books look the same because they have their spine on the left, barcode on the back, and a blurb about the author on the inside back cover.
This 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.
I'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?
Check out their new documentation format: https://twitter.com/patrickc/status/1253031147459604482
They're using their design resources on product & documentation updates, which I can appreciate.
They're using their design resources on product & documentation updates, which I can appreciate.
Bootstrap is just a set of building blocks. If you look at the [bootstrap examples page](https://getbootstrap.com/docs/4.4/examples/), you'll see 8 different pages that all look very different. The only thing that unites them is a color scheme.
This comment seems to me like going to the bookstore and lamenting that all the books look the same because they have their spine on the left, barcode on the back, and a blurb about the author on the inside back cover.
This comment seems to me like going to the bookstore and lamenting that all the books look the same because they have their spine on the left, barcode on the back, and a blurb about the author on the inside back cover.
The navbar, "new" badge, hero banner, and (slightly) rounded colorful buttons are all individually similar to how you often see those components used in Bootstrap.
But in general and in one word, I think it's padding. Most modern design systems spread things out a good bit, and we see that in the navbar items and in the space around the hero. In total they are showing 6 links, 3 sentences, and 2 buttons, and are taking up a full screen. That's not something you'd see on a 2010 website.
But in general and in one word, I think it's padding. Most modern design systems spread things out a good bit, and we see that in the navbar items and in the space around the hero. In total they are showing 6 links, 3 sentences, and 2 buttons, and are taking up a full screen. That's not something you'd see on a 2010 website.
> 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?
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?
It'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
It 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.
> 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" :/
Please don't abuse antialiasing for making your text "look sharper" :/
I’ve always love their visual design language, looks so good but still professional
Does `text-rendering: optimizeLegibility;` really do anything?
Posting 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
I'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.
Tough 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.
Just curious: why was the title changed for this? Does the word “beautiful” violate the HN guidelines?
Stripe's top edge menus fail for me on Chrome; work on Firefox.
2017? come on
previous: https://news.ycombinator.com/item?id=15838270
previous: https://news.ycombinator.com/item?id=15838270
[1]https://dev.to/kyleparisi/making-web-animations-9ng