12 ms·
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 t
by fermienrico 6y ago
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 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 agoThe 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.
- jckzlg 6y agoThere'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.
- bsaul 6y agoi 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.
- arcturus17 6y agoThe lack of any vertical rhythm or spacing, at least in mobile, is atrocious.
- msla 6y ago> 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.
- ratww 6y agoFrames and image maps were technical implementation details, not design choices. It was possible to do both bad and good design with them.
- 0xdeadbeefbabe 6y agoDon't forget cultures. The designers, it seems, haven't told all countries what they should and shouldn't like.
- msla 6y ago> 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.
- schoolornot 6y agoToo bad Atlassian can't learn a thing or two from that Sourcehut article.
- wrnr 6y agoI 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.
- bytematic 6y agoTerrible hierarchy of elements on sourcehut, I don't know how to read this website efficiently
- jckzlg 6y agoI 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?
- ratww 6y ago> 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_scanning https://en.wikipedia.org/wiki/Speed_reading#Skimming_and_sca... [2] https://zevendesign.com/designers-guide-to-visual-hierarchy/ https://zevendesign.com/designers-guide-to-visual-hierarchy/ [3] https://zellwk.com/blog/why-vertical-rhythms/ https://zellwk.com/blog/why-vertical-rhythms/
- Kiro 6y agoI'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.
- jckzlg 6y agoThe 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.
- Scarbutt 6y agoI 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.
- jaywalk 6y agoI 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.
- fermienrico 6y agoAs I said, "ugliness" is subjective. I also don't think it is particularly beautiful.
- yeezul 6y agoAgreed. 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.
- badsectoracula 6y ago> 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?
- deleted 6y ago[deleted]
- LordAtlas 6y agoTo me, it looks like some default Wordpress theme.
- mewpmewp2 6y agoDefault WordPress themes look 100x better.
- at-fates-hands 6y agoAbout 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."
- atonse 6y agoSourceHut'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).
- fermienrico 6y agoWhat 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).
- albedoa 6y ago> 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.
- yeezul 6y ago> 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?
- hbosch 6y agoStill, 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://pinboard.in/ https://www.tarsnap.com/ 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.
- fermienrico 6y agoI 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.
- taway555 6y agoIt'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.
- twic 6y agoIt'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.
- badsectoracula 6y agoThe 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 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.
- superhuzza 6y agoI 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.
- Kiro 6y agoI 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 6y ago[deleted]
- andrewfong 6y agoThere 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.
- tossmeout 6y agoSourceHut'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 https://i.imgur.com/AoOy50x.png
- deleted 6y ago[deleted]
- smoe 6y agoI 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.
- Guest0918231 6y agoI 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.
- askafriend 6y ago> I personally really like https://sourcehut.org 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.
- pupdogg 6y ago> 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 https://www.berkshirehathaway.com
- askafriend 6y agoI 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.
- btrettel 6y agoOne thing I find amusing is that Stripe's CEO's webpage is a lot closer to Sourcehut in design than Stripe: https://patrickcollison.com/ https://patrickcollison.com/
- saagarjha 6y agoThose links are a bit small and close together, though.
- rsify 6y agoStripe 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.
- allenu 6y agoI 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.
- gatleon 6y agoI'm in agreement. I personally really like https://pinboard.in https://pinboard.in
- AlchemistCamp 6y agoStripe'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.
- deleted 6y ago[deleted]