Another company makes good product, no funding, unknown, no brand, hires good designers... no one cares.
So, what do people here think of the design of https://draftsend.com/? (I have no affiliation)
Can someone break it down into the absolutely incredible design that it is?
Rant over, here are my points:
- Lots of good designers out there, creating well-thought, delightful experiences.
- Lots of good marketers and copy-writers out there, creating smart, thoughtful copy that makes sense to their target audience.
- Someone asked, "what are other websites that are in the same league as Stripe's?". Oh, tons of them. See the websites of advertising agencies, design agencies, go look up "beautiful websites list" on a search engine of your choice. And, I'm sure everyone here realizes there's no objective measure of "same league as Stripe", or even Stripe's league.
Stripe's design isn't great design. It's design that a certain people like. If you're saying it's great, then define for whom.
When the page loaded, I was greeted with:
> Create and Share Interactive Presentations With Just a PDF and Your Voice
I have no idea what this means. Apparently this startup takes "a PDF" and "my voice" and combines them into... something. An Interactive Presentation. Something I'm narrating? What are these good for? What even are they?
After reading the rest of the page I feel like I got it (maybe), but hoo boy does that header text need work. An example would be even better.
Other than that, I think the visual design is nice, though it's a bit dark/moody for the product goals IMO.
If you think "Stripe's design isn't great design" why not tell people why you think that? That would at least be worth reading and worth writing.
I had a couple points:
1) There's a halo effect surrounding Stripe right now, due to which fairly common stuff that they do will be treated as if it's outstanding, and deserves extra adoration and respect.
2) This = "Stripe's design isn't great design. It's design that a certain people like. If you're saying it's great, then define for whom."
What do you think now?
Isn't true that this point is valid for draftsend.com too ?
Besides, I'm ONE amongst 'those certain people' WHO LIKE Stripe's design.
Since we've starting discussing not only about Stripe's design, but also brought draftsend.com to compare with, here is my humble opinion:
With due respect to draftsend.com's designer, it has just few pages with very basic information and resembles a familiar wordpress or bootstrap theme. No doubt that draftsend.com is a GOOD DESIGN. But, it is NOT a GREAT DESIGN EITHER! And draftsend.com is in no way comparable to Stripe's design with its width, breadth and volumetric information.
Now going over the Stripe's design... below are good points about Stripe's design:
1. it has a dynamic and fluid theme which keeps the visitor engaged through out the page(s).
2. encourages further readability.
3. design theme and colour is so appealing that continued visit as well as repeated visit(s) don't appear to be boring and brings some sort of freshness each time, though - it's the same design and content.
4. it creates a better image about the company (Stripe).
5. and, it conveys the following:
5.a. the company is meticulous which can be expected from their other deliverables (either product/service).
5.b. the company is adapted to new and emerging trends in design, hence the same could be expected from their other deliverables.
5.c. the company is professional.
5.d. the company can afford to the heavy lifting of such a wonderful and modern design.
5.e. the company is NOT sticky with traditional design.
5.f. the company does NOT fall into a stereo type.
...and others could say a lot as well as better about Stripe's Design!
Skimmed the blog because it seemed to be mostly fluff and presumably the author does not work at Stripe, but I do consider this a good design for the following reasons (some aesthetic, some practical, not exhaustive):
- Dead simple call to action & it speaks to two core audiences. Either you're a developer and you know how this works (create an account), or you're an executive and you know you want to talk to somebody (contact sales).
- The diagonal lines are cool because they stand out on the web (filled with vertical and horizontal lines) and they create movement within the design to draw your eyes over to the little illustrations.
- The illustration/hero image itself is nice because there's not so much detail that you get bogged down in the solution yourself, but the variety of big brands and different sorts of user experiences allow you to visualize your brand with a slick checkout experience right next to those "big players".
- Well-executed typographic contrast. Think colors, sizing, weights, and variation between title-casing and uppercase. This is important because it creates a visual hierarchy, so if you don't want to read the whole page, at least visually you "know" what is important.
- Color palate is well suited to the industry. Too lazy to find facts, but in general blues are known to be calm/soothing and green communicates or gives the perception of trust/success. Whether that is your success as a potential customer, or Stripe's success, idk; Just a vague designerish feeling.
- Finally, I think it would good given the points above - but the interactive elements really give it the kind of polish that would make me call it "great". IMO, these types of flourishes are signalling quality. Take them away and the site is just fine, but as the author mentions - to most people they give a sense of delight. Not over the top; just subtle, playful little elements.
Regarding the link you mentioned; I don't think it's a bad design, but not on the caliber of Stripe's. For me the typography is quite dull, and having read all of the text on the page; it's not really clear to me what valuable service they are providing. My impression is that it's a white-brandable video hosting site, with maybe some version control? I'm not exactly sure because I only gleaned that info from the 2 of the 5 bullet points, which are identical to the other 3 generic features.
Anyways, I'm just some guy who flunked out of design college - so take all this crap with a grain of salt.
- Diagonal lines are cool because they stand out... can't really comment on that. Have seen such points before on Smashing Magazine, back in like 2007 or 08, where certain elements break commonly accepted design paradigms and therefore standout.
- Illustration/hero image is nice because not too much detail... see this one I feel is force-fitted. You could say that about most hero images and you'd be right.
- Well executed typographic contrast... I'll look at it in detail again. Didn't notice some of those points, as opposed to websites of other funded tech companies.
- Color palate well suited to industry... read those points too, but I'm wary of them because they're like people's taste in wine, music or art.
- Interactive elements giving polish.... YES, this I 100% agree with. The mark of great craftsmanship is an incredible attention to detail and execution.
- Design I mention... just google "best landing pages" and took the first example in the first result.
Don't know what the product is, all I see is a big page asking for my email address, sign ups and $10 a month.
I'd highly suggest that you add some more illustrations/videos/sample on the main page to understand what this is about. Your product needs to look really useful and really good if you want people to sign up on a whim.
Maybe replace the "sign up now" link/button with a "see how company X doubled their engagement or sign up now" links. There is nowhere to go from the main page except pay or leave.
I don't think it's as good as it should be though, to get users to register and pay.
We were talking about "design". It can designate many things. Look. Colors. User experience. Conversion.
Check out the Wayback machine to see early versions of their website.
i.e. all UI is design, but not all of design is UI.
He's been instrumental in leading their design efforts. Ben's their secret sauce in the design department and why they've always had a great design-focused UI/UX.
My point is that Stripe's success was primarily driven by the excellent quality of their api and documentation, and not by fancy website design.
That success allowed them to subsequently devote the resources needed to produce the current incarnation of their website.
Compare that with the obvious established competitor, PayPal, who have made a fortune from letting people collect money by putting a simple button on their site with just the slightest level of integration needed, but whose APIs and documentation have changed over time and yet remained consistently awful for developers wanting to do more substantial integrations to meet more demanding requirements.
I'm not even a Stripe customer but I already have a favorable view of the company because of its design
Every other payment provider (at least until stripe came along) buried the code examples (if there were any) in some detailed spec doc after you had already signed up and were basically already committed.
Putting code on the landing page shows that their API genuinely is simple and time saving.
Isn’t that exactly what a good design is? The main job of a Good designer’s is to present a bunch of information in a most accessible way to end user possible
One other reason why Stripe's landing pages are so beautiful is to let prospects know that the payment form they will put into their application (and therefore will be a part of their UX) will look good by default
Their design shows that all you have to do is copy paste a snippet and it'll work.
Also, to OP; that IS design. Design is choosing what to display where, based on a why. Don't confuse design with art. The artistic merits of this work are rooted in opinion. The design of it either solves issues or doesn't :) That's why you can learn design.
This blog post focused on the visual design, but you're right that design is so much more, and Stripe understands that.
Its former CTO explained how /dev/payments became Stripe: https://www.quora.com/How-did-Stripe-come-up-with-its-name
- The transition between dropdowns in the top nav. Really smooth, and something you won't see anywhere else.
- Semi-consistent and sufficiently different color schemes for the different products. See the difference between https://stripe.com/atlas and https://stripe.com/us/sigma.
- Subtle box shadows. They've done this by cranking the blur way up around 30px. For comparison, the Google search bar uses a blur around 1px or 2px.
It's unique and pretty but I kinda hate it. Makes no sense from an information hierarchy perspective. Instead of it being 2 separate drawers opening and closing like typical dropdowns it's 1 drawer merging into another, wut?
Now regarding the aesthetics themselves... the menu text is blurry too, which makes me want to poke my eyes out. 
Not sure what the issue is but I'm guessing these fancy web fonts doesn't support "high" DPI properly. Just use normal font rendering for everyone's sake.
They are making a kind of masterpiece to be presented on a gallery than websites useful for everyday use.
Also I have mixed feeling about the whole single page application era. They are impressive on one side and bloated and slow on the other. I liked more when web used to be content (text/image) sharing platform than apps. Browsers today are like operating systems on top of operating system. :( That's both good and terrible.
However, I am not seeing any issues with blurriness. This is what my menu looks like: https://i.imgur.com/nsflU9f.png
How the Stripe team write the message thinking on explain clearly what the product does to a specific target audience, how they design a solid and organized information architecture of the site to make it simple and fast to find things, how they work on performance to give a good browser experience, how they work on SEO to increase discoverability, this is a really important part of the design too.
The design community sill have the 2000s phantom of "design is to make it look nice", it is, but many other decisions can create a good user experience design that aren't asthetics.
For example, Dribbble, it captures some part of UX design; the visuals, aesthetics, shapes, use of colors, empathy and more can be seen reflected in those little shots. However there is another large part related to the strategy, information architecture, planning, sketching, etc. that Dribbble can't cover, and that's fine.
On Medium you can find some good and complete UX case studies to tell you more stories about design.
Also don't forget that this is a desktop environment analysis of the visual design, phones is a different story, different context and has constraints that sometimes didn't allow you to express visually like in desktop.
I would really like to see more UX articles aimed at developers - I think that would help combat the "design is only looks" attitude you mentioned, it's a bit more logical/rational than pure graphic design, and doing it well requires a good dose of empathy.
There could be good reasons for not changing the application side but the differences are pretty noticible.
Stripe’s design team does good work for sure, but what’s really striking is how most people building things for screens still ignore all the best practices that have been established over the past 35 years.
At the end of the day, they're not quite competing for same market.
Also, fonts are not copyrighted! Only the data used to create the font, but not the font itself. Thanks to some very old laws (partly to do with not being able to copyright the alphabet) look that one up. :)
In a similar topic. The fonts renderers are copyrighted too. Maybe you remember some weird-looking unsmooth text on a java app running on the openjdk, that's why.
Last but not least. No, you can't create derivatives just because you want to. Derivation is very well covered by the law.
P.S. By "copyrighted", I mean whatever legal protection applies to these things, which may not be copyright law.
Just google it. If you find a counter argument, it's likely misinformed, you may have to dig to find the truth.
Any and all technical specs and software are copyrigtable, but not the shape of letters.
More I can't think of right now...
So even if Comic Sans (in hot pink) is your favorite font, you would agree that it produces the wrong emotion on, say, a gravedigger's website. Not that I wouldn't absolutely love to see that.
Taste is very personal yes, but successful designs are more than expressions of taste - they're about solving problems.
Noteable example: FastMail, itself a good exponent of said qualities.
Based on this quote and the article, I think that when you say "design" you mostly mean "the way it looks" or "graphic design". That's just one design skill among many, and arguably the least critical one to the success of a product (don't skimp on it, though!).
When you talk about the product being "easy to use", that's because it was designed to be easy to use. Intentionally. Probably through a lot of trial, error, prototyping, and user testing. That's 100% design.
Anyways, taking your writeup as more of a critique purely of the graphic/interaction design, here are some thoughts:
- I would love to have seen more exploration of how Stripe approached the typographic choices. Is there a system there? What are the roles of the different bits of typography on the screen? Are they using 20 distinct font/color/weight pairings, or 3? What about the emotional impact of the font? Why do you think Stripe (very consciously) chose this font to present themselves? The world of typography is fascinating and quite accessible.
- The "hovering" behavior on the buttons is more "Interaction Design" than "User Experience". I think these are skillfully done - emotive, but not ridiculous - subtle, but not invisible. It would be interesting to see how the experience gets better/worse as you start fucking with the animation curves/colors.
- Agreed, they have a great color palette. I would love to have seen your thoughts on why they picked these colors. Is each used in a specific role? See above questions on typography. Also, keeping with the "practical" slant of the article, maybe link to one of the better color palette generators out there?
I think you'll notice that even on the aesthetic level, a lot of the above questions are aimed at teasing out some kind of a "design system" that lived in the designers heads and produced the website you're critiquing.
Good design is never an accident, and if you want to help people design better websites, the most useful thing you can do is help them understand how great design happens. By looking at the tradeoffs and struggles and decisions from other (successful) design projects, you gain some new lenses through which to view your own work.
Anyways, thanks for taking the time to put this together, and please keep writing about design for a developer audience!