Ask HN: What are some well-designed websites?
What are some well-designed websites in term of design, look & feel, and usability? The Apple website might be an example.
86 コメント
https://www.mcmaster.com/ is a hardware retailer. Their website is a joy to use.
This is almost a perfect example of truly good design. Usually when we think of design, we think of trends, aesthetics, etc. But in this site the design just falls away to the background and it makes it feel very easy to use. I love this.
Couldn't agree more. Reminds me of https://www.rockauto.com/ – if you're looking for modern aesthetics you'll be disappointed. But it's the easiest store that I know of to actually find very specific parts that you're looking for. It's a joy to use.
[deleted]
Their catalog is also brilliant. Often companies seem to struggle balancing marketing desires (“HEY CHECK OUT THIS THING!!”) with serving users what they’re looking for efficiently. Mcmaster leans heavily to the latter in the catalog AND web, to the joy of their users and perhaps the frustration of their marketing team? Great stuff.
This is really nice. Interesting, they use a sprite for all the images in a collection, like it is used for a character in games.
Agree, this site looks like it is tailored closely to its users' needs.
However, I don't envy the developers that need to keep this ASP.NET web parts site up to date.
However, I don't envy the developers that need to keep this ASP.NET web parts site up to date.
idk about legacy asp.net, but modern C# is very nice to work with. Every job I've had since my C# job, I keep thinking to myself how much easier it would be if I could rewrite the company's products in C#
Very much agree with you. C# is a great language and the .net runtime(s) are really productive. I'm speaking specifically about Web Parts which is a pretty old toolset a la legacy WebForms.
Ironically, legacy .NET toolchains like Web Forms and Web Parts can be very productive and very easy to maintain, if designed well. Most of the pain comes from the MS vendor lock-in and lack of continuing support. Microsoft has moved on from these technologies so they are no longer well supported and don't have a very defined upgrade path to more "modern" approaches.
Ironically, legacy .NET toolchains like Web Forms and Web Parts can be very productive and very easy to maintain, if designed well. Most of the pain comes from the MS vendor lock-in and lack of continuing support. Microsoft has moved on from these technologies so they are no longer well supported and don't have a very defined upgrade path to more "modern" approaches.
A masterclass in Information architecture design.
This is so good and easy to navigate it made me want to buy in it!
Nice one
i love this
I'll throw https://www.gov.uk/ into the ring here. Heard it's one of the best designed websites for disabled accessibility.
Cookie disclaimer that takes 80% of the page on mobile and you have to tap twice to dismiss it.
Nah.
Nah.
It was very easy to find wills for my deceased relatives however in trying to set up an account to see my national insurance record it wants a UK postcode that I do not have since I have lived abroad for many years.
Great individual pages, but I'm not convinced the site's great. Not the best possible IA, IMO. Probably a bit of Conway's Law creeping in.
Probably the best investment by the gov that's paying off in spades.
If you are looking for web sites that look fancy like apple.com
https://godly.website/
But people here, and myself, are going to tell you that those are not well designed sites. Well designed sites are mostly text, good typography, follow all accessibility guidelines, etc.
https://godly.website/
But people here, and myself, are going to tell you that those are not well designed sites. Well designed sites are mostly text, good typography, follow all accessibility guidelines, etc.
I'm a minimalist but I don't think that well designed necessitates "mostly text."
The main concepts that I look for are:
- Speed / performance - does the website load and finish rendering quickly?
- Focus - does the website guide my eye & attention to the most important/relevant information first? Or does it instead distract me with superfluous information.
- Accessibility - This is a broad topic that doesn't just only mean "friendly for screen-readers." It includes things like: is the website easy to read and navigate? Does it not interfere with native browser functionality (websites that prevent the right-click context menu or do not play nicely with the back button are not accessible IMO). This is all in addition to being accessible for special needs users.
- Intent - similar to focus but more specific to message and communication: do I immediately understand the purpose of this website and what value it offers me? A lot of marketing websites, IMO, completely fail on this point for me.
There's probably more, but I think the above describes the general categories. As I try to think through other examples they tend to fit nicely as a sub-point/example of one of the above.
The main concepts that I look for are:
- Speed / performance - does the website load and finish rendering quickly?
- Focus - does the website guide my eye & attention to the most important/relevant information first? Or does it instead distract me with superfluous information.
- Accessibility - This is a broad topic that doesn't just only mean "friendly for screen-readers." It includes things like: is the website easy to read and navigate? Does it not interfere with native browser functionality (websites that prevent the right-click context menu or do not play nicely with the back button are not accessible IMO). This is all in addition to being accessible for special needs users.
- Intent - similar to focus but more specific to message and communication: do I immediately understand the purpose of this website and what value it offers me? A lot of marketing websites, IMO, completely fail on this point for me.
There's probably more, but I think the above describes the general categories. As I try to think through other examples they tend to fit nicely as a sub-point/example of one of the above.
[deleted]
I've always found https://gov.uk generally well put together.
That's a pretty good middle ground!
I suspect you're not going to find much consensus on HN. Being a more developer-heavy community I suspect many people will tell you that Craigslist is the height of design and anything containing a gradient is a wasteful mess.
"well-designed" is a very subjective term.
"well-designed" is a very subjective term.
Design is about more than cosmetics. Usability and layout is key and engineers have a great perspective on that.
I'd strongly question whether engineers have a great perspective on usability. Some certainly do but in my experience there's no substitute for a highly qualified designer who can think specifically about a project's usability.
The thing about this point of view is that it seems like it would indicate that the top companies do not hire designers. Website usability has really deteriorated in the last 20 years or so. Or maybe they aren't designing for usability? Netflix is an awful website for example, it takes so long to find something to watch you might as well just give up and not watch anything. The changes and addition to gmail and google docs (Drive now!) have all been usability regressions. Facebook used to be really useful for keeping in touch and finding events around you. Nothing Microsoft has ever made has been usable. So where are all of these designers creating great usable experiences, since its not at Billion and Trillion dollar companies apparently.
Craigslist is a website so elegantly designed that I know 80 year olds that can use it just fine.
Craigslist is a website so elegantly designed that I know 80 year olds that can use it just fine.
> Or maybe they aren't designing for usability? Netflix is an awful website for example, it takes so long to find something to watch you might as well just give up and not watch anything.
Yeah I'd argue Netflix absolutely aren't designing for usability. The most usable UI they could offer starts with a big button saying "continue watching the last show you were watching" but that runs the risk of you stopping watching once you're done with that show. They want to push new stuff at you constantly.
> Nothing Microsoft has ever made has been usable
I'd argue Windows Phone 7 was one of the purest examples of usable UI I've ever interacted with. Then it all got destroyed. The sad reality is that good, usable design is never the top priority.
Yeah I'd argue Netflix absolutely aren't designing for usability. The most usable UI they could offer starts with a big button saying "continue watching the last show you were watching" but that runs the risk of you stopping watching once you're done with that show. They want to push new stuff at you constantly.
> Nothing Microsoft has ever made has been usable
I'd argue Windows Phone 7 was one of the purest examples of usable UI I've ever interacted with. Then it all got destroyed. The sad reality is that good, usable design is never the top priority.
> I'd argue Windows Phone 7 was one of the purest examples of usable UI I've ever interacted with. Then it all got destroyed. The sad reality is that good, usable design is never the top priority.
Very much agreed. WP7 was a nearly perfect platform for communication.
Very much agreed. WP7 was a nearly perfect platform for communication.
My entire career has been spent fixing engineers perspective on design.
The vast majority of engineers do not have good ideas about UX or design, sadly.
What's worse is the vast majority of engineers somehow think they understand UX and design by mistakenly extrapolating their engineering expertise into domains which their engineering expertise does not apply. They end up in this hubris-fueled Dunning-Kruger feedback loop of creating software with a bad user experience.
If you're an engineer who does understand the user and what makes a good experience for them, you have a power few possess and you can make some seriously profitable and useful things.
What's worse is the vast majority of engineers somehow think they understand UX and design by mistakenly extrapolating their engineering expertise into domains which their engineering expertise does not apply. They end up in this hubris-fueled Dunning-Kruger feedback loop of creating software with a bad user experience.
If you're an engineer who does understand the user and what makes a good experience for them, you have a power few possess and you can make some seriously profitable and useful things.
> Usability and layout is key and engineers have a great perspective on that.
No.
No.
Still can't get over the sound post, best blog hands down.
This is one of my favorites and I'm happy to see it mentioned so fast. The subjects are truly well explained and the coding for all the interactive illustrations is exquisite and almost all done by hand. I look forward to his next article.
Let's plot websites onto a plane where "look & feel" is the x-axis and "usability" is the y-axis.
I suspect most of the websites suggested here will lie in the top left corner. This is exemplified by websites of tech / SaaS companies, with the universal header, a centered display-sized black-weighted heading in Inter, the various screenshots, testimonials, all responsively arranged and come with dark mode, and (possibly falling out of vogue) squishy-squashy Memphis corporates. These are the playgrounds of Tailwind, Vercel, Linear.app, Shopify, PlanetScale, Supabase, etc. Modern at first sight, but quickly dull the senses. Passable for their supreme usability (the Vercel dashboard works better on mobile than many websites on desktop).
On the bottom right corners are the grandiloquent, the pompous, the extravagant. See them on Awwwards. Somehow, I feel a sizeable of Web3 websites fall into this, though I have only superficial exposure to them, with their overuse of transitions and animations.
It's hard to find the exemplary websites, the residents of the top right corner. Some suggest the apple.com website, which I feel is certainly worthy of consideration but whose style I don't really grok. I shall leave here some suggestions, whose merits I hope is clear upon the first visit:
- https://build.mmm.page
- https://excalidraw.com
- https://laracon.net
- https://krasjet.com/rnd.wlk/julia
- https://wise.com
- https://cal.com
- https://freefaces.gallery
I suspect most of the websites suggested here will lie in the top left corner. This is exemplified by websites of tech / SaaS companies, with the universal header, a centered display-sized black-weighted heading in Inter, the various screenshots, testimonials, all responsively arranged and come with dark mode, and (possibly falling out of vogue) squishy-squashy Memphis corporates. These are the playgrounds of Tailwind, Vercel, Linear.app, Shopify, PlanetScale, Supabase, etc. Modern at first sight, but quickly dull the senses. Passable for their supreme usability (the Vercel dashboard works better on mobile than many websites on desktop).
On the bottom right corners are the grandiloquent, the pompous, the extravagant. See them on Awwwards. Somehow, I feel a sizeable of Web3 websites fall into this, though I have only superficial exposure to them, with their overuse of transitions and animations.
It's hard to find the exemplary websites, the residents of the top right corner. Some suggest the apple.com website, which I feel is certainly worthy of consideration but whose style I don't really grok. I shall leave here some suggestions, whose merits I hope is clear upon the first visit:
- https://build.mmm.page
- https://excalidraw.com
- https://laracon.net
- https://krasjet.com/rnd.wlk/julia
- https://wise.com
- https://cal.com
- https://freefaces.gallery
Aah, that's always a controversial question, on one hand, some universal rules of usability do exist, but on the other hand, everyone's habits, taste and use cases are very different.
The most neutral definition of a "well designed" website, without any further context, could be "created in a way that helps users achieve intended goals efficiently, while keeping max number of users happy about its look".
Again, different audiences will have very different answers. Here at HN, sites like https://www.mcmaster.com/ and https://www.craigslist.org win – because HN users appreciate old look and how efficient these sites are.
https://www.apple.com/ is an industry standard of a marketing site for consumer tech. It's not universally "well designed".
Other examples of well done marketing pages: https://www.sketch.com/ ; https://statamic.com/ ; https://linear.app/ got its share of hype recently.
Other times, a website is well designed because its content is awesome and is easy to consume. See https://ciechanow.ski/ and https://www.joshwcomeau.com/
Is https://github.com/ well designed? As an amateur developers, I'd say yes.
Is https://htmx.org/ well designed? Hmm, at a glance, there's no design at all. Is no design also design? That's a rabbit hole.
P.S. I often hear my website is well-designed :-)
The most neutral definition of a "well designed" website, without any further context, could be "created in a way that helps users achieve intended goals efficiently, while keeping max number of users happy about its look".
Again, different audiences will have very different answers. Here at HN, sites like https://www.mcmaster.com/ and https://www.craigslist.org win – because HN users appreciate old look and how efficient these sites are.
https://www.apple.com/ is an industry standard of a marketing site for consumer tech. It's not universally "well designed".
Other examples of well done marketing pages: https://www.sketch.com/ ; https://statamic.com/ ; https://linear.app/ got its share of hype recently.
Other times, a website is well designed because its content is awesome and is easy to consume. See https://ciechanow.ski/ and https://www.joshwcomeau.com/
Is https://github.com/ well designed? As an amateur developers, I'd say yes.
Is https://htmx.org/ well designed? Hmm, at a glance, there's no design at all. Is no design also design? That's a rabbit hole.
P.S. I often hear my website is well-designed :-)
> Aah, that's always a controversial question, on one hand, some universal rules of usability do exist, but on the other hand, everyone's habits, taste and use cases are very different.
That's right! To me, personally, a well-designed website is: - Quick and responsive - Easy on the eyes - Easy on the mind - Doesn't yell at me with unpleasant effects, oversized videos, or nervous ads - Doesn't surprise me
That is universal for any kind of website.
That's right! To me, personally, a well-designed website is: - Quick and responsive - Easy on the eyes - Easy on the mind - Doesn't yell at me with unpleasant effects, oversized videos, or nervous ads - Doesn't surprise me
That is universal for any kind of website.
I should have said "objective", not "universal" probably. E.g. "Doesn't surprise me" will be different for different people.
Tbh I don't think craigslist is well designed. I love craigslist from an artistic perspective, but in terms of design there's a lot of confusing aspects.
slightly tangential, but where do people get awesome landing pages like linear(https://fig.io/. has similar landing page) etc. Do they build them in-house or buy templates somewhere? Many of the recently launched YC companies have awesome landing pages. eg. https://automorphic.ai/,
I guess people get awesome landing pages the same way they get any other pages :-)
* either build them in-house if there are skills;
* or buy a template and customise it;
* or hire a designer/developer/team to do it. The awesomeness of the result directly depends on clarity of requirements, I think.
As an example, I recently designed a website for BinaryNights [0], and we did use Linear.app as a starting reference, but during the discussions quickly shifted towards more minimalistic approach.
[0] https://binarynights.com/
* either build them in-house if there are skills;
* or buy a template and customise it;
* or hire a designer/developer/team to do it. The awesomeness of the result directly depends on clarity of requirements, I think.
As an example, I recently designed a website for BinaryNights [0], and we did use Linear.app as a starting reference, but during the discussions quickly shifted towards more minimalistic approach.
[0] https://binarynights.com/
A lot of them pay external design houses to do it. There are several design houses that I know of that are ex YC founders so the connection is already there.
I really love the website of Brutus, a popular men's culture/fashion magazine in Japan. It manages to be both busy and minimalist at the same time. Plus it just looks so different from most of what you see on similar sites.
https://brutus.jp
https://en.wikipedia.org/wiki/Brutus_(magazine)
https://brutus.jp
https://en.wikipedia.org/wiki/Brutus_(magazine)
For me Stripe is the peak for a product/company website:
https://stripe.com/
I heard some people admire https://linear.app/ but I don't see the appeal myself
Majority of websites often fall into one of two categories:
1. Traditional off the shelf template
2. Look cool but fail when it comes to usability and robustness (those featured on awwwards)
https://stripe.com/
I heard some people admire https://linear.app/ but I don't see the appeal myself
Majority of websites often fall into one of two categories:
1. Traditional off the shelf template
2. Look cool but fail when it comes to usability and robustness (those featured on awwwards)
The lichess.org UI is snappy af especially in comparison to the chess.com one. No idea how anyone manages to play low time controls on chess.com.
It depends. A well designed site for Apple isn't a well designed site for Lichess.
I would recommend browsing through some of the critques on the DesignCourse channel. On some videos people submit their site for critique, and he often live edits them to make them better. https://m.youtube.com/@DesignCourse
I would recommend browsing through some of the critques on the DesignCourse channel. On some videos people submit their site for critique, and he often live edits them to make them better. https://m.youtube.com/@DesignCourse
Craigslist, Wikipedia, Hacker News. The best designs are fast and functional.
Off topic but one of life's most simple joys is starting at a topic on wikipedia and then reading and following links to see where you end up.
Really makes one appreciate the interconnectivity of our world.
Except with Wikipedia's (slight) redesign it was actually a regression, especially on mobile. But with an extension for clicking links from the keyboard, it's (still) a joy to navigate.
I've been shopping around for banking services and settled on https://wise.com. Best usability of the banks I've tried. So I decided to use Wise as my primary service to pay bills, receive payments, transfer money, and keep savings.
Honorable mentions go to:
- https://www.capitalone.com
- https://www.sofi.com
Honorable mentions go to:
- https://www.capitalone.com
- https://www.sofi.com
Personally, I love the Stacks Project webpage (https://stacks.math.columbia.edu/); they way it is laid out, the font, the seamless integration of LaTeX in the test (https://stacks.math.columbia.edu/tag/0A2U) has made me rethink mathematical text for the web.
https://steamdb.info/
I love this website so so much.
I love this website so so much.
> The Apple website might be an example.
Ironically, apple.com doesn't even support dark mode!
Also, the hover menus are a usability nightmare: https://underpassapp.com/news/2023-2-9.html
Not to mention that apple.com has a long history of terrible scrolljacking.
Ironically, apple.com doesn't even support dark mode!
Also, the hover menus are a usability nightmare: https://underpassapp.com/news/2023-2-9.html
Not to mention that apple.com has a long history of terrible scrolljacking.
> Ironically, apple.com doesn't even support dark mode!
The wording if this makes it sound like supporting dark mode is table stakes. I don't think this is really the case. Personally, I don't expect a site to support dark mode by default.
I was ready to say that I guess that most users don't really know dark mode exists, but apparently over 80% of users prefer dark mode according to "studies" described at the links below. However, the methodology of any of these studies isn't really described, so I'm not at all sure of these results.
https://thesmallbusinessblog.net/dark-mode-users/ https://marketsplash.com/dark-mode-usage-statistics/
The wording if this makes it sound like supporting dark mode is table stakes. I don't think this is really the case. Personally, I don't expect a site to support dark mode by default.
I was ready to say that I guess that most users don't really know dark mode exists, but apparently over 80% of users prefer dark mode according to "studies" described at the links below. However, the methodology of any of these studies isn't really described, so I'm not at all sure of these results.
https://thesmallbusinessblog.net/dark-mode-users/ https://marketsplash.com/dark-mode-usage-statistics/
> > Ironically, apple.com doesn't even support dark mode!
> The wording if this makes it sound like supporting dark mode is table stakes. I don't think this is really the case. Personally, I don't expect a site to support dark mode by default.
The irony is that Apple invented dark mode, so I do expect that site to support dark mode by default.
> The wording if this makes it sound like supporting dark mode is table stakes. I don't think this is really the case. Personally, I don't expect a site to support dark mode by default.
The irony is that Apple invented dark mode, so I do expect that site to support dark mode by default.
> The irony is that Apple invented dark mode
Do you have a source for that? Windows had dark mode in 2016, macOS in 2018 and iOS/Android in 2019.
Do you have a source for that? Windows had dark mode in 2016, macOS in 2018 and iOS/Android in 2019.
I'm talking about on the web.
Apple proposed the standard: https://github.com/w3c/csswg-drafts/issues/3299
Safari 12.1 was the first browser to ship with color-scheme and prefers-color-scheme support: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...
Apple proposed the standard: https://github.com/w3c/csswg-drafts/issues/3299
Safari 12.1 was the first browser to ship with color-scheme and prefers-color-scheme support: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...
Craigslist worked well 15 years ago and still works well today.
- There's no "user" persona - Craigslist doesn't develop their site to be addicting.
- There are no ads
- The buttons for doing basic actions have not moved
- You don't need to reveal any personal information to use the service
- It does two things, and only two things well - helps buyer buy shit and helps sellers sell shit
- There's no "user" persona - Craigslist doesn't develop their site to be addicting.
- There are no ads
- The buttons for doing basic actions have not moved
- You don't need to reveal any personal information to use the service
- It does two things, and only two things well - helps buyer buy shit and helps sellers sell shit
For a long time CL worked great without javascript, but today you just get a blank page. Upon enabling javascript, I fail to see any worthwhile improvement in its functionality over the pre-js days actually justifying why it must be enabled.
It also takes a lot longer to load now, try using it on a slow link. Despite being all text on the main page, it's not instantaneous.
It also takes a lot longer to load now, try using it on a slow link. Despite being all text on the main page, it's not instantaneous.
Craigslist is a business model which should be copied:
https://www.rd.com/article/how-does-craigslist-make-money/
https://www.rd.com/article/how-does-craigslist-make-money/
>- There are no ads
Seems a bit disingenuous when the content purely is advertisements.
I agree that Craigslist is a unique asset and a worthwhile service and ultimately a well designed website.
Seems a bit disingenuous when the content purely is advertisements.
I agree that Craigslist is a unique asset and a worthwhile service and ultimately a well designed website.
Craigslist is about as good of an "ad-free" marketplace as you can get, there are no sponsored posts, external advertisers, bad postings can be flagged for removal, etc.
I think we both know what "there are no ads" means...so why be so pedantic about it?
I think we both know what "there are no ads" means...so why be so pedantic about it?
>I think we both know what "there are no ads" means...so why be so pedantic about it?
I'm just stating I don't see it as an "ad free" site which I understand to be like most of the other websites mentioned. I don't see me as being pedantic but OP playing fast and loose with definitions.
I'm just stating I don't see it as an "ad free" site which I understand to be like most of the other websites mentioned. I don't see me as being pedantic but OP playing fast and loose with definitions.
Let me help out by asking two questions
What are the problems with sites with lots of ads? Does Craiglist have any of those problems?
What are the problems with sites with lots of ads? Does Craiglist have any of those problems?
[deleted]
Disingenuous no, they mean the site isn't lighting your eyes on fire with ads in the all the white space. Everyone knows craigslist is personal advertisement and it feels like you're taking it out of context on purpose.
No 3rd party ads. No ads served by Goggle for example. No remarketing ads. None of that shite.
The only "ads" on CL are for things on CL.
The only "ads" on CL are for things on CL.
I, also, was going to say mcmaster but since that’s already been mentioned…
I really do think lesswrong is a beautifully done site. Minimal, light design without gimmicks and a very functional comment threading system.
I don’t read much content there but it’s always a pleasure when I do.
I really do think lesswrong is a beautifully done site. Minimal, light design without gimmicks and a very functional comment threading system.
I don’t read much content there but it’s always a pleasure when I do.
[deleted]
I think https://lichess.org is wonderful and always bring it up as an example of a great UI
[deleted]
https://www.awwwards.com/ showcases some pretty websites
https://news.ycombinator.com of course!
Chipotle and Starbucks apps work great. If you have go-to items you want to order and pickup.
lichess.org