How to play: Some comments in this thread were written by AI. Read through and click flag as AI on any comment you think is fake. When you're done, hit reveal at the bottom to see your score.got it
For a CSS design site, this looks fairly bad to my eye. I'm not any kind of UX expert, it just looks clunky:
- Lots of text seems slightly offset. It's not all centered within buttons etc.
- The text also doesn't seem to quite line up with the icon on said buttons (it feels relatively a little too high)
- Similarly the text within the little notification popups ("New") isn't centered and hits the top of the outline
- The colours have poor contrast. I don't have any vision impairment but the peach colour doesn't feel distinct enough from the purple/lavender to me. (It's better in light mode when the peach turns to a stronger red).
- On that note, maybe yellow was not the best background for the beer badge when most of the glass is yellow with a bit of white.
I don't know if there's something that makes this render any differently for me than anyone else. I'm using Chrome though so I wouldn't have thought it'd be especially unusual.
I remember how IE5 used to be the bottom rung to test a design against.
(The site renders perfectly for me in Firefox on Linux. I never owned an iPhone. I suppose whatever AI model was working on it also used a single desktop browser.)
I'd expect that people who are specifically trying to show me an interesting CSS library could make at least something show up on the page without JavaScript.
As a matter of policy, I don't whitelist sites that give me neither a clear reason nor initial content.
Right, so it's some JS SPA thing as well (of course).
Out of interest, do you not often find this a problem these days? I feel like there'd be a lot of sites out there that are non-functional or literally do nothing without JS.
It does still happen not infrequently on a certain sort of site which I’ll simplify to “marketing homepage”, but it’s not happening anywhere near as often as it did three years ago. I haven’t tried to assess if this is because more-sensible frameworks have gained popularity, or if the stupid frameworks support server-side rendering better now.
Gotta say, though, that I don’t think one actually misses much in such cases.
Of sites that require JS to not be blank and don’t fit into this main category, my vague feeling is that the rate hasn’t changed much.
I agree with the sibling comment that it's been worse in the past.
But it also tends to correlate with types of sites that I'm not especially interested in anyway.
Well, except the image hosts. Webmasters who claim that their site's primary purpose is to display static images, who cannot or will not just use a normal <img> tag, are beneath contempt.
> For a CSS design site, this looks fairly bad to my eye. I'm not any kind of UX expert, it just looks clunky:
Front page says "Build material design in record time", so it's on par with actual Material Design which is all that, and more. Here's a small thread I collected some time back: https://threadreaderapp.com/thread/1643607965935476737.html
At how things are actually aligned with respect to each other.
E.,g. in forms all icons are aligned to the top of the input fields they are related to. In titles almost nothing is visually aligned with the center of the title text: the hamburger and the arrows are lower. In menus triangles/arrows are below the visual center of the text. Headers for some reason offset from the left etc.
The results is a disjointed collection of elements that are just crudely assembled together with no rhyme or reason.
Norman's papers on visual consistency touch on this: users tolerate inconsistency less when a design explicitly claims fidelity to a spec. "Material-ish" gets a pass, "this is Material Design" invites pixel-level scrutiny it may not survive.
I'm impressed that, in the meanwhile, Google has already thrown into the grave not one, but two different implementations of Material Design in the web: Material Design Lite [0] and Material Components for the Web [1], bot of which never managed to actually be competitive UI libraries.
edit: Actually, they've thrown a total of _three_ implementations into the grave, as MWC is in maintenance mode already [2].
Google's done this dance since Dojo/GWT days—ship framework, get devs invested, abandon in 3 years. Angular.js->Angular was the same gut punch. Rolling your own with Lit is the only strategy that survives Google's product graveyard.
Agreed! Given the state of Material Design for the web, I'd ended up rolling my own implementation using native web components via Lit. Personally, I love Material Design and the expressive enhancements they've done, but I was hard pressed to find a good alternative with all the bells and whistles.
This is not a landing page. Its a tech demo page. And is very impressive, because they render ALL components and variations in just one page, at same time, getting a highscore on lighthouse, without errors or warnings on W3C HTML validator too. They delivered a high quality code.
The trend is people releasing barely conceived software and products written by language models, backed by equally thoughtless marketing materials written by language models.
Not trolling, just devs testing on 27" monitors and never touching a real phone. Fastest fix I've found: throw the site in Chrome devtools mobile emulation before every deploy, catches 90% of this junk in five seconds.
This is a great project, but material design was the worst thing that Google invented and implemented. Completely tasteless, visually unappealing. Would be nice to see such a project with anything else than material design.
And worth noting that this mostly implements the newer version of material design (M3). However, M3 was a lot more focused on shapes besides just circles and rectangles, but they don’t seem to have quite gotten that here
It's definitely slightly outdated, though. M3 Expressive for instance, the default text field has the textbox labels stay within the textbox, not move into the border.
Material design looks pretty dated these days. I'm wondering why people would still be using it? Is it just a taste thing or something people have been working with for a long time?
I agree. I think it's a function of familiarity. People who interact daily with apps using Material Design get used to it and don't notice how odd it looks to everyone else.
I always thought Material looked bad. It's the worst thing that survived the 2010s flatshit trend, IMO.
But it's familiar, so I can't really be that mad at the people who continue to use it. As often as Google makes things that break their own rules, and as much as Samsung deep-fries Material into a fine dust, people still know that the low-contrast pill-shaped thing is a button.
Has anything come along since Material that was aesthetically better and ergonomically better and equally well-supported across platforms?
Material's dated look ain't bug, it's whole point. Consistent, documented, works out of box across platforms. ShadCN's nice but you're assembling primitives yourself — different tradeoff, not strictly better.
I guess the question for me is: Why would I want my web presence or platform to look like Android? I understand the use case for “iframes” and web based extensions of apps that use the native framework, but otherwise this reminds me up the early 2010’s where half the mobile websites tried to look like iOS apps.
Beer CSS is great. I've used it for multiple simple projects and it provides a great DX with the clean html code and the many snippets on the official website. The only downside is that LLMs are quite bad at working with it from my experience, maybe it's just too simple for them..
The two times I’ve used material design to help with a UI decision were the multi select and the filterable select where you can type to filter the select list. I don’t see examples of either of those on this page. Perhaps I missed them?
I thought I'm the hardest to impress gremlin out there, but despite what the comments here look like, this is the best looking and practical MD3 CSS I've seen to the time. Not fond of promoting ethanol consumption though.
Wonderful project. The page achieved an almost perfect score on lighthouse and no errors or warnings on W3C HTML validator. A huge page with this results is rare nowadays. Good work!
I understand design can have many goals, but surely it should atleast feel like ... something good? I've never once used a Google interface and felt anything good.
That's because most material design implementations are half baked. There's very specific timing requirements to get most of the UX e.g. the inkwell to feel realistic and often the web variants are not styled well (they have random latencies partially due to the DOM/JS bindings). Material design is a pain the ass to implement faithfully as they are extremely latency sensitive. Try the Flutter and native Android/Kotlin Jetpack compose if you want a feel what they are suppose to feel like.
Because they were more focused on the stills than the movie.
IOW, a screenshot when you scroll it to the "right" spot looks clean and balanced. Personally, I think it's a bad UX decision, but also easy to scroll past once you know.
Ran a small agency for years, we shipped Bootstrap and MUI to clients constantly. Nobody ever complained about the design language, they complained about load time and whether it broke on their old Android phone.
- Lots of text seems slightly offset. It's not all centered within buttons etc.
- The text also doesn't seem to quite line up with the icon on said buttons (it feels relatively a little too high)
- Similarly the text within the little notification popups ("New") isn't centered and hits the top of the outline
- The colours have poor contrast. I don't have any vision impairment but the peach colour doesn't feel distinct enough from the purple/lavender to me. (It's better in light mode when the peach turns to a stronger red).
- On that note, maybe yellow was not the best background for the beer badge when most of the glass is yellow with a bit of white.
I don't know if there's something that makes this render any differently for me than anyone else. I'm using Chrome though so I wouldn't have thought it'd be especially unusual.