Show HN: Brutalist Hacker News – A HN reader inspired by brutalist web design | Hacker News Reader

Show HN: Brutalist Hacker News – A HN reader inspired by brutalist web design

brutalisthackernews.com

101 pointswkyleg181 comments

I've developed a Hacker News reader that draws inspiration from Brutalist Web Design, the open web, Cyberpunk Aesthetics, and glitch art.

The entire project is crafted in Vanilla JavaScript, contained within a single index.html file, eschewing any external libraries. It features support for theming, including the use of third-party themes. Additionally, users have the capability to create and apply their own themes directly within the site.

Moreover, the application is designed as a Progressive Web App (PWA), enabling it to be downloaded and used as an app on most devices.

I'm eager to receive feedback on both the implementation and design aspects, particularly from the Hacker News community. Mobile device testing remains a priority for further refinement, so insights in this area would be particularly valuable.

For more detailed information and to explore further:

- Project details are available at https://github.com/wkyleg/brutalist-hacker-news

- To add or experiment with themes, please visit https://github.com/wkyleg/brutalist-hacker-news/blob/main/th...

Open articleView on HN

Thanks for the feedback!

I'm planning a few changes pending feedback right now:

- Removing the glitch navigation on the top nav bar. People seem to think it's too annoying, and I will concede it's not technically Brutalist although it only takes a few lines of CSS

- Changing the default theme to one of the greyscale themes, which are easier to read and arguably more functionally brutalist, and more aligned with the aesthetics of concrete Brutalist architecture - Better handling of back button on Android devices - A color theme inspired by Windows 3.1

To address concerns about whether this design is truly brutalist I recommend first revisiting the principles of Brutalist Web Design, as well as more contemporary usages of the term.

The most notable description was set forth by David Bryant Copeland (see https://brutalist-web.design):

- Content is readable on all reasonable screens and devices.

- Only hyperlinks and buttons respond to clicks.

- Hyperlinks are underlined and buttons look like buttons.

- The back button works as expected.

- View content by scrolling.

- Decoration when needed and no unrelated content.

- Performance is a feature.

Another common interpretation of brutalism is aesthetic, reacting to overly complicated user interfaces by creating simpler, more direct ones. Tailwind CSS (https://tailwindcss.com), one of today's most popular CSS libraries, promotes this approach in its component examples. There's also a neat library I've seen recently called "Neobrutalism Components" for React that I like (https://neobrutalism-components.vercel.app), providing components with a similar look and feel to Gumroad. This might more accurately be called 'Neo-Brutalism,' as noted in the comments.

A more engineering-centric interpretation of Brutalism focuses on form, structure, and efficiency, drawing significantly from brutalist architecture principles. Apart from the user interface itself, most mobile, desktop, and web applications are extremely bloated and often perform worse than sites from 10 years ago did. While one HTML file might be "less brutalist" than the original HN site, it is substantially more brutalist than any HN mobile app in existence, and offers nearly identical functionality.

A broader interpretation of brutalism, which could be termed 'Meta-Brutalism,' is embodied in the overall experience on this site through UX flows. Yes, in the strictest sense, the original HN site is more Brutalist in many ways, but it only shows 30 articles at a time and does not function as a PWA. For this site, the experience of reading 10 stories is arguably less brutalist, but for quickly browsing through several pages and skimming articles (which is how I read HN) it is a lot faster, and in my opinion, more Brutalist.

My primary inspiration was addressing software and tool bloat in UIs rather than strictly adhering to every principle set forth by David Bryant Copeland. I don't find it convincing that this site "isn't brutalist" compared to really any other experience apart from the Main HN site, and I would argue the overall experience is more brutalist in its performance and scrolling behavior.

As a side note: I generally don't like Brutalist architecture that much although I believe it is unfairly maligned. I visited the Salk Institute once and enjoyed it though (https://www.archdaily.com/61288/ad-classics-salk-institute-l...).

>>The back button works as expected

Hmm on Android it doesn't. Chrome on Samsung galaxy note. I am using the standard built-in back gesture/button on bottom right of phone UI. It works on all other sites including of course HN, but it does not take me from comment page back to list page on your site - FYI, FWIW :)

Yes, I need to fix this part. I don't use Android often and I missed this in testing. The top close button does work though

Human! Don't get rid of the colors! Are you changing it because people are criticizing it as not 'concrete' enough? Who cares! You created what you want. Stick with that! Trust that! Let their concrete minds come around to it in time, or not. Stick with trust yourself!

I know the criticism on HN can be brutal, but don't back down. Use it to solidify your stance, not to pander to armchair commenters in the stands, who aren't invested, who aren't playing on the field. Go your own way! Fuck their greyness hahaha! :)

(unless you really want that for you, but do you? Because you created colors. You don't have to be what they say is wrong. They're wrong, because they don't see it. Just because they can't stretch their minds, don't give in. Stay your stance, and you can even consider: that's the way to honor the better part of them, by not giving in to their worst natures, by retaining the opportunity of your original art to stretch their minds.)

You got people losing their minds over a website? You're winning! Don't back down now. Ride that storm!!!

Thanks!

I didn’t no so many people would be offended by this but perhaps that’s a sign that it’s working

I was actually planning on switching to grey already. The colors come from a version of this I made 7 years ago https://minimal-hn.firebaseapp.com/ that this project came out of

I did want to honor the colors of the original project, but I also have genuine concerns with accessibility and would like the default theme to be more accessible. I also like some of the grayscale themes, they remains me somewhat of 80s Macs

Yeah, man. I get you. Cool. Can you have an option, tho? ^^

> Performance is a feature

contradicts with brutalism IMO. like someone already said, brutalism is when form follows function and without much frivolity, and one of the functions of a website is being usable by loading smooth and fast (the wingdings are not it).

this is not necessarily a dunk on you, this is more of a dunk on David Bryant Copeland; I'm really sick of developers and programmers who co-opt design movements or other design-adjacent terms, make up a definition or principles that seem like they could fit but then fail when inspected closely. Someone here already mentioned Gumroad as an example of (neo) brutalist web design; Figma is another great example. The sites here https://brutalistwebsites.com/ are great typography-driven examples. This could even count as brutalist https://solar.lowtechmagazine.com/ especially because their goal, as a site running on solar power, is to be as well performing (and low bloat) as possible while still satisfying expectations of functionality.

I think my advice to you would be, look outside of the developer/programmer sphere when building out design. Brutalism is not only "the least lines of code", it's also a lot about intention when it comes to function, and then, form.

> My primary inspiration was addressing software and tool bloat in UIs rather than strictly adhering to every principle set forth by David Bryant Copeland. I don't find it convincing that this site "isn't brutalist" compared to really any other experience apart from the Main HN site, and I would argue the overall experience is more brutalist in its performance and scrolling behavior.

It may be nearer to brutalist than nearly every other site out there, but to call The submission brutalist would remove most meaning from the term. I don’t know what the magical threshold is for something to be brutalist, but this ain’t it, I think. If adhering to principles of brutalism wasn’t a priority, why label it that?

What you need to keep in mind that this is a PWA and functions as mobile/tablet/desktop app too

This is a lot more brutalist than needing to download an app from a restricted App Store that one can’t view the source code of without trusting a 3rd party

I built this really as a cross platform reader tailored to how I personally read HN

It's still not brutalist. Though I agree with the ideas expressed on https://brutalist-web.design, I don't believe it's brutalist either.

> My primary inspiration was addressing software and tool bloat in UIs rather than strictly adhering to every principle set forth by David Bryant Copeland.

You could have made it faster and less bloated in just plain HTML, an entirely unecesary level of bloat for a page like this. Your page makes 71(!) requests (compared to HNs 7) and is about ~158kB of data, not far of 3x more data than HN.

You've made something, but not something brutalist, performant or bloat free.

The thing is this page couldn’t be made with just HTML It could be generated on a server, but that server would be doing a version of what the HN API already does for free That also wouldn’t function as a progressive web app and work as a mobile app, which I think is how most actually people read HN

» Performance is a feature.

So it takes several seconds of gratuitous jank to load the page? Really obnoxious first impression.

I mean that’s pretty brutal you have to admit! The animation obscure this somewhat though The HN api doesn’t allow for programmatically loading full chunks of stories, so one needs to use either lazy loading (I used intersection observers), or wait to load requests for N stories in parallel, which can be slow The janky approach loads information to the user as fast as possible and the animations I do make this constraint of the API seem intentional for artistic effect

Don't let these people fixated on Doherty Thresholds give you flack you have delivered on spec let the pedantic etymologists eschew obfuscation around how to define brutalism - you didnt invent the word but could quote from Cameron [1] "This project recalls the visual aesthetics from an era when it was expected that personal spaces would always be under construction."

By the way, aesthetics are a red herring -- the real brutality here is seeing HN as a naked text headline feed with no signal given on votes, comments, source, even date !!! My bet is it unnerves people who are used to clicking on a fuzzy measure of these things alone so deciding without them is too far out of a comfort zone. It provokes a visceral dread and gets taken out on response times, api calls, and vocabulary.

Stay Brutal! It Rocks !

[1] https://www.cameronsworld.net/

Love the link, thanks!

If you store the latest state on your server it would load instantly, and you would not be wasting electricity by repeating the work on all your users’ devices. Using artistic flourishes to cover up bad engineering is decidedly not brutal: brutalism is all about the engineering itself being the artistic flourish.

I mean doing it on a different server would just be useless, that’s what the original site already does. I’m also not really sure how this would work do to all of the cache invalidation issues that would occur as comments are added.I don’t really have the financial backing to run a real time in memory cache of all HN for free, which in effect is what HNs API already does. I recommend actually reading the docs on how their API works and it’s quirks. Besides the point, this wouldn’t be able to be hacked into 1 HTML file which I wanted to do for the challenge

Also, if my site is “wasting electricity” that means every other HN reader is too because that’s how their API works! This is by far the silliest comment I have received!

The whole point of this project is also that there is NOT a server, and the site I created functions as a mobile/tablet/desktop app too

See https://hckrnews.com/ for a working example

Thanks for sharing your thought process on calling it brutalist.

Honestly I don't see anything brutalist with https://brutalist-web.design either. To me it seems like they just describe minimalism. Also the red / yellow on hover is pretty horrible. My eyes gave up trying to read the words.

I dislike the constant flickering on the top line/menu. I don’t think it adds any value since it’s quite distracting. I also dislike those (seemingly ASCII 0x80 to 0xFF) weird characters that take a noticeable while to render to the actual text. Style wise, I don’t see enough line spacing to distinguish between topics.

To be honest, I think Hacker News is already very brutalist :)

Old dos and windows interfaces were brutal af.

I get a strange flickering ? On the title bar, makes it impossible for me to enjoy/use to be honest

Same. I guess it's on purpose? Ugly = cool or something, I'm too old

I tend to agree pend a lot of testing with users to now only the logo flickers

To my mind this it a step back from HN in two respects. One you have to enable JavaScript to view it; Two I need to worry about cloudflare insights getting hold of my data/browsing habits.

I like the idea though.

Appreciated I took a different view in the sense I wasn’t trying to emulate the original site so much as I built a PWA that also works as mobile app and desktop app in around ~4400 lines of code

Since everyone is debating what brutalism could mean in web design, I'd like to throw the "Prof. Dr. Style" into the debate:

http://contemporary-home-computing.org/prof-dr-style/

Interesting!

This page even requires to enable DRM - very brutal :-)

This is not correct, what DRM do you believe it requires?

Widevine? What else of a DRM could Firefox possibly ask about enabling after some seconds of using that website?

I have no idea what you're talking about.

You can see all of the code in the GitHub repo, which is contained in one file. There aren't even any dependencies

https://brutalist-web.design/

Some kind of manifesto.

This looks like actual brutalism, it prioritizes function over the form - as opposed to the submission. I’m guessing the goal of the latter was to look like brutalist works, without caring for the UX.

I'm more focused on the bloat of web design and lack of free software. This site is also a PWA and can be used as a mobile or desktop app

To me this seems punk and glitch, but not brutalist.

Arguably HN is already pretty brutalist. As a second exemplar, I consider https://brutaldon.org pretty brutalist.

It seems plausible that you can't be brutalist and be inaccessible without javascript enabled.

It seems plausible that themes are the antithesis of brutalism. The point is to show the underlying structure. Not to add pretend structure.

I've always liked; https://brutalist.report/

I don't like brutalism in buildings, but this so-called "brutalist" web site seems pretty user-friendly to me.

In terms of buildings, I've always had the impression but brutalism wasn't so much about being unhelpful, but more about making the users feel small and unimportant...

... Which in a weird way describes some rather snazzy websites with inconsistent content policies and Kafkaesque appeals.

Since it's hidden, it's a kind of cryptobrutalism, to (perhaps unnecessarily) coin a new term.

Yes, I think the main text layout with Links has this effect

The “purpose” (for lack of a better word) of brutalism was never to make people feel small and unimportant—though individual architects might have had different motivations from time to time. Rather, the style is about making buildings that are true to their purpose, simple and without ornaments, and that show the materials (concrete mostly) they’re made of.

This specific website we’re discussing is actually quite full of flourishes, and so not brutalist in the architectural sense.

I think Christopher Alexander has some good arguments that modern “functional” architecture is the least functional of all. So while the stated aim is to be functional without ornaments, instead, it lays bare how irrelevant the human experience is, in the name of supposed functionality.

I don’t really see that site as really brutalism even in this sense. If anything, it hews a lot closer to the Small Web, such as what one might find in Gemini space.

On the surface that seems correct. But let me go on a tangent. Brutalism is functional in the sense that a space is designed only with the task at hand in mind. In a narrow sense, a library should be a place to come to and read and borrow books. Nothing else matters, so bare concrete surfaces are the efficient ideal. But critics would justifiably point out that there's more to a library than that. It's a place of community, imagination, inspiration. If we see the purpose as fostering those things, then the architecture should be visually stimulating, culturally resonnating, architecturally consistent with the buildings around it, etc.

But this is a bit of a charicature of brutalism. In reality it does consider human experience, but it perhaps values different aspects of it. Brutalist paces are built to facilitate flows of people, to make it easy to get done what you need to. But it is also a reaction to traditional architecture styles which carries with them a lot of baggage: often certain social structures such as stratification, empire, patriarchy, racial inequality, etc. When we consider brutalism as an act of opposition to these, the humanistic intent behind it shines through, even though it make the building no more appealing.

Brutalist spaces can in my opinion be welcoming and inviting if furnished correctly. To me they have a nostalgic and hopeful connotation because I walked through them growing up. Nowadays they're a refreshing change from the kind of corporate glass and plastered concrete spaces of today.

> But it is also a reaction to traditional architecture styles which carries with them a lot of baggage: often certain social structures such as stratification, empire, patriarchy, racial inequality, etc.

So kind of like the positive-spin version of "this entity doesn't care who you are", in that it has no particular bias or judgement.

GP mentions brutaldon.org and I cannot understand how to use it or what it is. I spent ~30sec there and it was not enough to learn how to use it. Doesn't look as user-friendly for me.

It's a Mastodon client. You click the only button on the site and login.

The GP I was responding to liked to https://brutalist.report/

The mastodon client was OK.

That amazing. It makes me immediately want to fuck off and do something useful.

This reminds me of RSS.

Mostly nice but looks like their setup needs a tweak on what counts as ‘bullshit’:

“The Shortcut

$100 PlayStation gift card deal, Disney+ password crackdown, New Matrix movie, Budget AirPods, Samsung TVs [10h]”

(Hn saving you from all the emoji in that headline too…)

I like this, but it makes me sad: there would be no point to this if RSS was still widely supported by both the publications and clients. You could subscribe to the ones you want and read them with the local formatting you want. That was the case ~two decades ago and we've fallen far.

Sure, RSS readers do still exist, but they are anything other than brutalist. Janky UI/UX combined with rent-seeking subscription models, ultimately doing little or nothing that your native client couldn't have done.

Don't get me started on the fact that apps like Feedly are now trying to add AI/ML to the mix, entirely missing the point that if I'm using an RSS reader it's because I want to be the one to choose what I read and how.

Then even if all of that wasn't an issue, most publications wouldn't want to make it any easier to avoid their advertising and tracking interactions.

Yeah and the glitches are distracting and precisely the kind of fluff brutalism argues against.

Not to say I don't like the work here but it's definitely more about esthetic in my opinion

Yeah, to me this is a significant step away from brutalism compared to HNs default look.

I love https://blog.fefe.de/

A German hackers blog, he wrote the webserver behind it himself. The styling is as brutalist as it gets. And it just works.

This is my goto "do I have access to the internet"-website because it is so damn fast.

I think there's also the understandable response that's going on: there's the idea that people who have created brutalist works in their own work, and are proud of their participation in art history as a result of that, and proud of their work's expression of those principles (say, in the particular design they've used in a piece of UI, an app, a product, has been discussed, gauged and aimed for internally to be brutalist), will feel this work "Brutalist Hacker News" challenges the pride that they have in their own brutalist works because they feel it calls into question their achievement, and the definitions they base that on.

But it doesn't call it into question! It only expands the historical tapestry of what they're already a part of. It enriches it! But perhaps it enriches it in ways they don't like? That's ok. You don't have to like every work. It's not a flag you march under, but a big house. But perhaps so big as to be unmanageably incomprehensible, at a glance. So there's confusion - but where isn't there? But what can be said to be different of any encompassing human endeavour? The multitudes, highly differentiated, multi faceted. And would you really want to call yourself part of something that doesn't have that richness and that depth?

Works like this, that stretch the historical tapestry, only enrich your own works that are part of the same. They don't diminish them, they only make them part of something bigger. You may not like them, but nevertheless you benefit from them. By trying to restrict the living definition of brutalism to something less, you end up only diminishing your own work. Celebrate the differences, even if you dislike them, I suppose. Tho it may be jagged little bitter and colorful pill to swallow. Hahaha! :)

Thank you!

I feel the original HN is much more brutalist than this demo. Bold colors and saturated gradients are not at all a part of that artistic movement.

"Brutalist buildings are characterised by minimalist constructions that showcase the bare building materials and structural elements over decorative design." says Wikipedia. The closest thing to this definition is the original https://motherfuckingwebsite.com/ and not one of its later variations.

One day I did some contract work at Giorgio Armani's offices in Milan, and, ignorant of brutalism, I thought it was the ugliest building I've ever been in. The entire interior was naked grey concrete. The floor, walls, ceiling. Everything was grey concrete. Now I know that it was brutalist in design, and as an art style it usually is pretty ugly, bare and quite gray.

I agree. On reading 'brutalist', I thought it would be grey, or purely black and white, more "concrete" and slightly depressing.

I’ve always thought of brutalism as the ultimate “function over form.” It’s brutal in the sense that it “brutally” strips away the form until all that’s left is the function. It’s like minimalism without the vanity.

I have been operating with the same working definition for a long time. I think the author is misusing the term.

Might want to look it up before getting set on your definition. Sibling comment has it (mostly) right: it’s literally “raw concrete”.

Learning moment. Thanks for the clarification.

Brutalism actually comes from the French word for concrete, "beton brut"; not English "brutality".

https://en.wiktionary.org/wiki/Brutalism

Unfinished concrete, specifically. I would translate "brut" as "bare" or "unrefined" here. English brutality is related to French brut, but in French it means more like crude, unrefined, raw, blunt, with no particular sense of animalistic or violent.

Brut is raw. Brute or brutal is related to violence.

Perhaps we should be right-click->view-source'ing for the true brutalist experience.

e: ah, in this very thread https://secretgeek.github.io/html_wysiwyg/html.html

It's called brutalism because brute is the French word for concrete. To many being made out of concrete would be a defining feature of brutalism, to others it's the exposed building materials without façade.

It's called brutalism because brute is the French word for concrete.

Umm...the French word you're looking for is "beton". The rest of the thread has plenty of (correct) definitions of "brut" for reference.

Agreed. And I really wanted to like it. I guess the weird colors are the glitch + cyberpunk influence?

This is true from the 'looking back' point of view of how the term's been used in the past, but there's currently a re-appropriation of brutalist experience re-interpreted by a younger, forward looking very creative movement producing these types of experiences that incorporate elements of glitch, retro, video-game saturated colors. You can understand it a bit by seeing how compared to modernslick web design, these creations invoke something similar to the spirit of brutalist.

No, not at all. If anything, the flashy, glitchy BS seems pretty anti-brutalist. Brutalism is about functionality, pure and simple. It doesn’t have decorative elements. It’s not cool,except in temperature. It doesn’t have to be ugly, but the beauty of brutalism is minimalist, at best.

Label is being re-appropriated, IMO doesn't make a lot of sense when it goes against core tenets. But alot of GenZ aesthetic are fun, but their naming hardly makes sense, or doesn't even try to with the iconography/typography being used. It's mostly vibes or labelling for the sake of categorization. See Frutiger Aero.

Whatever. It's fine as long as they don't get upset when we ignore their clearly misguided labeling and hand them a dictionary to look up "brutalism".

I think my definition is better and much more inline with what most users want and how open web standards actually work Pure HTML sites with no JavaScript are to archaic and web technologies have improved significantly. A better standard of comparison is current HN mobile and desktop apps, or other popular websites that use large frameworks and obscure their functionality to end users Beyond this, I made a HN reader for the way I personally browse HN with absolute minimal lines of code and maximal cross platform utility so I can use this on desktop, mobile, my iPad, etc. I really don’t care that much about adhering to pedantic definitions of brutalism and a lot more about making something that I like using

Gen Z have done this to a few things. Another notable example is redefining breakcore from “extreme technical noisy breakbeats” to “atmospheric ambient drum and bass”

This is exactly what I was going for

And you achieve it! :) Don't worry, buddy. I get you! :)

So basically brutalism just means "distantly referential to the past?

> incorporate elements of glitch, retro, video-game saturated colors

This doesn't seem related to the ethos of "real" brutalism, nor Neo-brutalism.

> modernslick web design, these creations invoke something similar to the spirit of brutalist.

How? Because people generally find them unappealing?

Brutalism is a minimalist movement characterized by showing the raw construction and function over superfluous elements and design flourishes.

Neo-brutalism is a similarly minimalist design style that focuses more on color and layout, but caries with it the simple and clear construction, with simple shapes and typography.

Adding "glitch" and retro video game references seems directly opposed to the core intent of both movements, both the minimalist nature, and the shying away from superfluous decorations. Even the user of Emoji iconography instead of plain text is non-brutalist. Neo-brutalism the re-imaginated design movement carries the original ethos with its focus on the raw elements that make up the design (eg. typography) over decoration. The classic gumroad example is a perfect demonstration - clear, focused typography, boxes with simple, stark borders to delimit various UI elements, etc.

I feel like I can say this because I'm Gen-Z, and not some old man yelling at the clouds, but let's not use the name of random styles to reference new and unrelated styles.

I'm gen Z too (and a designer) and I agree with everything you've said in this thread. This invokes a retro indieweb DIY type of vibe, not the sharp and clear intention that is behind brutalism.

I would argue it does much more so functionally because my constraint was building something cross platform with no libraries, one html file, that can also be installed as an app on all devices So perhaps less in the most absolute sense regarding the UI, but in the overall approach it does

I think there's an overly binary (perhaps engineering 0s and 1s based?) viewpoint here of people that think that brutalism is either this, or it is that. Can it not be both? More than just 0 and 1?

Can it not be more than what you imagine it to be? Can it not grow with the times? Can its forms not adapt? Its definition not encompass more than what was previously imagined?

Or do you believe it be like "the static dictionary" of art history? where everything, once established, remains unaltered forever? To me, that seems kind of ahistorical, things change and grow. Isn't that what's going on here? Hahaha! :) I think it is!

History is peculiar in that it doesn’t change once it happens. You can study it and learn new things, but we have a concrete understanding of what brutalism was at inception. Brutalism was a style 50+y ago. It’s over now. You can’t redefine history.

Things can grow and change, and language especially can change too. But even as things change, language is still used to convey meaning, and if words can be used to mean anything at any time, it no longer becomes a tool to convey meaning. Maybe one day we’ll say the color of the sky is “green”. But the first guy to point to the sky and call it “green” should expect a lot of people telling him that actually it’s “blue”. Isn't that what's going on here? Hahaha! :) I think it is!

On a more serious and academic note, things change, and styles and movements and definitions change. This is known and accepted, and not really the goal of this debate. But styles and movements are defined by a collective, they’re contemporary to a time and place and group of people. One guy self-labeling his work on HN is not the evolution of a movement. Movements are defined by a group of people working together (or at least interacting) to define their movement. There is a social discourse amongst them, and collective understanding - even if it changes over time.

Neo-brutalism is a movement that is happening now, across the internet, by a lot of people. It is distinct from the 1950s brutalism (hence the new name). Most of those people have clear and overlapping idea of what they’re creating - many literally publish goals and definitions of what it means to them. Those people are the ones engaging in a contemporary discourse around design and style, and defining their movement… while a lone HN post is using their name but not their discourse.

The design style is more accurately labeled "neo-brutalism", which is characterized by these bold colors.

gumroad is one of the most popular examples: https://gumroad.com/

Neo-Brutalism is an accurate way to describe GumRoad's design, but not the OP.

Neobrutalism adds color and bold design to brutalism, but maintains the simple focus on structure and function. NB features prominent and simple shapes to delimit UI elements and buttons, and bold and prominent typography.

NB is not "Retro" nor "cyberpunk", and it doesn't add in superfluous details and decorative elements. You wouldn't use Emoji in NB when a simple bit of plaintext would do.

Good for the OP for working hard to create something very fun and unique, but it is not Brutalism nor NeoBrutalism.

I was a little loose with definitions but wanted something aesthetically similar to a site like Gumroad or Tailwind in terms of Neo-brutalism

Otherwise, I was more concerned with the approach to software development and bloat

When it works, it's not ugly but, vaguely inhuman and austere. A kind of modern Gothic, like a medieval cathedral, overwhelming with dread and awe. Perhaps unsurprisingly it's quite a popular style for modern cathedrals, as well as courthouses, etc.

My hometown, Toronto, is rather infamous for its fondness of brutalism: https://www.instagram.com/torontobrutalist/ I personally used to always hate it but some of it has grown on me.

It's funny that Toronto is a stronghold for brutalism, because if I had to name the most beautiful Canadian city, it would be Toronto.

I always liked the UofT Library.

But that's brutalist "web design" not architecture.

If somebody had asked me what design movement this was inspired by, my first answer would have been that it's an interpretation of Frutiger Aero [1] through the lens of Windows 3.1.

But if you change the theme to grayscale I can kind of see the connection to brutalism. The visible div borders around every comment are bare structural elements, and the huge skeuomorphic buttons are certainly closer to brutalism than HN's UI. HN is about the UI being minimalistic and muted, out of the way to the point of being nearly invisible. Brutalism on the other hand is about a kind of in-your-face minimalism, which this version does capture in a way.

1 https://aesthetics.fandom.com/wiki/Frutiger_Aero

Yes, I am going to change the default theme to greyscale

Do what you want but please don't do it because they're criticizing you: https://www.youtube.com/watch?v=VtvjbmoDx-I

A more brutal design would be news in plaintext.

This would be boring and also not function as a mobile/desktop app you can read the source code of

If the flickering is intentional it should come with a warning. If it's not intentional it should perhaps have been tested before being widely announced.

HN is already brutalist. This linked site is not brutalist. This is closer to a punk aesthetic, perhaps even verging on Dadaist.

agreed

The glitches hide the fact that every story has to be loaded async just to get the title and that this is very hard to do without some degree of jank OR a performance hit from loading as many requests are on the page in parallel The fact that you think this is entirely intentional is proof that it works!

Using scripting to deliberately introduce visual glitches is about as punk as buying pre-distressed jeans from Walmart.

Amazing! Thank you for sharing and making it open source

Would love to see a terminal/TUI version of this

Thanks!

This would be a bit hard to render in a terminal but a terminal browser like Lynx (https://en.wikipedia.org/wiki/Lynx_(web_browser)) might work for this site

Huh, this looks very neat. I like the effect that happens briefly while you scroll.

Thanks!

Cool, but I want those titles to be distinguishable

This is awesome!!

Thanks!

Classic gen z or whatever ephemeral disdain for history and context, no past, only existing in the now. All the comments here saying this isn't "brutalist", doesn't even surpass HN's own brutalism, and yet the creator applies and mixes the descriptions and terms alongside cyberpunk etc, so that they end with no meaning at all.

The past is dead and the future is yet to be. All that exists is now.

Sure, if we all had amnesia.. but we don't so we remember and reference the past and dream of a (better?) future..

The present is dead, the future is just a reheat of the past.

The is nothing new under the sun.

"To be ignorant of what occurred before you were born is to remain always a child"

Marcus Tullius Cicero, 1st century BCE

And I thought this was a piece of irony such that it didn't even need quotes. Silly me.

I never pass up on good bait

Your nervous system isn't pointlike, so all your senses are from the past. The 'now' you believe in is one you can never perceive.

It's adolescence. The past and the future feel flat because one still has no perspective.

It's prejudice and confirmation bias.

No need to bash gen z alongside correcting the inappropriate usage. Unless you want your behavior to be labeled as classic non gen-z?

Recently there's too much of this generational bashing, which is not any prettier than race, class, etc.

I'm actually not even a Gen Z -- which is funny per all the comments -- I'm one of the last millennials. I find Gen Z to be very level headed and practical and like them though. I'm not going to deny they can be a little quirky (and my aesthetic tastes indicate I probably like that about them) but I think they will prove to be an interesting generation

Hah. Damn our pedantic ways. I was about to come comment the same on brutalist. The author created something they are proud of but weren’t able to accurately describe.

Author; great work! Keep making things and you’ll figure the rest out along the way. No I wouldn’t buy or use it but I see the effort and potential you put in. Don’t stop.

Thanks!

I think it is a better definition of brutalism! One more in line with standards of the open web like PWAs, while ignoring some of its pitfalls like excessive JavaScript usage (no bundle or minified JS or react to render a simple button).

I don’t really care that much about mixing and matching terms or really see how it’s important. I had fun building something I liked! Adding cyberpunk elements actually hides a lot of the jank inherent from loading every story from the HN API async and makes it look intentional, if somewhat kitch.

The broader argument here seems to be that brutalism needs to be a simple html page with minimal styling (like Craigslist). The thing is, this style in itself is somewhat kitch in the sense it is anachronistic and useless to most users. JavaScript has won so thoroughly, and improved so much, that I don’t see this so roach as useful behind very simple static content

Using open web standards to their full potential (including JavaScript) is much more brutalist, with the possible corollary that “neo-brutalism” might technically be more accurate

The other thing is, HN is only a static site and doesn’t function as an app or PWA There are no comparable cross platform HN headers that can be installed as mobile or desktop apps written in 4000 likes of code Also, the user can also easily change the code itself fairly easily if they would like to change any behavior reply

It also doesn’t depend on walled platform App Store to install where users can inspect the source code Anyone can install this without restriction, easily understand what the program does if they’re vaguely technical, and change it as they please reply

I love this, this is so cool. Look at that aesthetic. The colors, gorgeous. Your GIF demo, perfect. A crazy desktop style early UI app for HN? Perfect.

Thank you for making this. So cool. I would love to throw a browser in there. I have a retro page for a browser, but it's not quite done: https://browse.cloudtabs.net/roses/macintosh_system.index.ht...

I just checkout out your live demo at https://brutalisthackernews.com/top?storyModalIdList=3995282...

It's even nice and useable. I love how stuff just opens. It's crazy, it's really cool. I love how you just like "abundant windows". So cool. This is like perfect desktop. The way it works, takes me back. So cool to see HN through the prism of this ancient technology with a modern/glitchy color aesthetic twist. Love it.

I hope you keep working on this :)

Thanks!

Came here expecting something like http://motherfuckingwebsite.com/ and was surprises (and almost blinded).

why does it keep winking at me?

Neat! Unfortunately Firefox doesn't allow rendering of the post page inside the Brutalist windows. I get the following error: https://support.mozilla.org/en-US/kb/xframe-neterror-page?as...

Works fine for me on Firefox.

Yep, exactly why this is not brutalist web design. The site behaviour is unclear and rather frustrating to use. The breaking of the back feature is also bothersome.

Some sites prohibit their content from being displayed in iframes, which his how I show them on the site.

When this happens you can click the up arrow to A) open in new tab if in browser or B) open in in browser window if browsing as mobile or desktop app from PWA

wow this is horrible, i love it

Arguably this is less brutalist than the current HN site; it has actually added ornamentation.

A brutalist site would probably just use the default browser or user styles.

I whole-heartedly agree. This adds animations, hover text, and so forth. It's more kitsch than brutalist.

Kind of like a Craigslist (CSS style / layout) + HN (which actually might be pretty awesome).

This follows fewer of the principles on the "Brutalist Web Design" link than HN does. In particular, it's slower, has less obvious links, breaks my back button, and has (imo) distracting unnecessary decoration.

I would also bet it uses JavaScript for the "hyperlinks" but haven't checked.

The entire site fails to load unless you have JS enabled, so that's a fair guess.

Interesting! At the same time, HN current design already looks kind of brutalist to me, it's crisp and sharp without fluff. That's what makes it intemporal and easily readable on every devices.

The ultimate brutalist website is a bare Apache directory listing. Functional, raw, ugly, with the structure exposed for all to see.

That’s a perfect example.

There's also this one which pops up on HN occasionally

https://secretgeek.github.io/html_wysiwyg/html.html

The glitchy effects are cool but I'm not sure I see the connection with brutalism.

I'm not sure I see any connection with readability.

This doesn't feel brutalist at all.

https://klikkentheke.com is a great directory of minimalist brutalist typographically driven websites.

Yours feels a little like a retro hacker UI.

https://klikkentheke.com/ is just a plain white page for me. Maybe it requires jQuery to render, but it's loading that from a Google domain (which I block by default). It's also running a couple third-party trackers.

By not being minimal, it's it's more "minimal" than they intended.

that's one of the most aggravating websites i've ever seen

To me the introductory text just covers the entire screen. If I scroll fast enough, it glitched enough that I can see the rest of the text scrolling behind some overlay.

The website you linked doesn’t work at all on iOS

Wow! It's a peach coloured blank screen! Slow news day? I'd call it minnimalist rather than brutalist.

What's that? Why yes, I do browse without Javascript. HN original works fine without it.

The is a PWA, which means it is a cross platform app that can be installed on most devices

I wasn’t really interested in catering to the 0.00001% of users who disable Javascript. I like the standards of the open web and think they’re worth building on.

While imperfect, there’s nothing comparable in building cross platform applications that are also secure, easy to develop for, easy to release, easily capable of being audited

* HTML is the standard of the open web.

* It's cross platform and doesn't need to be installed on any device.

* It doesn't need to be “audited”. It's secure. It's easy to develop for. It's laughably easy to release.

* You weren't interested in accessibility, or people with bandwidth restrictions or connection problems, or who are just tired of the relentless firehose of shit that comes in on the “javascript” channel.

This website is not a good example of brutalism and doesn’t contain content about brutalism. It’s like if I put up a page called ‘My French Web Site’ and it hosted articles about flowers written entirely in English. Always weird when words just stop meaning things.

The real shame though isn’t that the website is misnamed, it’s that it provides an objectively worse browsing experience than the original HN

I am confused Brutalist Web Design advocates for some simple rules which this thing doesn't seem to follow.

It has more Javascript and the back button doesn't work. So, compared to this, the original Hacker News is actually Brutalist.

Maybe I don't get it.

This is 'technically' true for a strict/literal (antiquated? heh:)) use of the term Brutalist. However, Brutalist as a term of art is being appropriated by a new crowd of retro aesthetic creators who like pixels, old UI styles and colors and glitch.

You can be generous with your interpretation by understanding, compared to modern bland slick web design, this stuff can be viewed as invoking a brutalist experience for the viewer/participant, which while differing in the letter of the previous usage, aligns in many ways with the spirit of it.

Of course, art is subjective experience and perception as well. I get if you feel differently and that's interesting! I'm sure you "get it" from where you stand. And that's perfectly valid I think. :)

Can you provide some other examples of artists who are “reinterpreting Brutalism”? Because it seems to me that they are completely missing the point.

Brutalism is about the expression of form follows function. A brutalist building is grey not because people love grey but because that's the color of naked concrete and painting over would be considered adding needless form.

Now, a color must be picked when you make a website, and it doesn't have to look grey, as pixels do not have an inherent color, unlike real world materials, such as concrete, wood or metals. But if you add useless animations (that glitchy thing at the top is obnoxious) that exist solely for the purpose of looking cool and not aid with understanding the UI, you are doing the absolute opposite of brutalism: form over function. This HN 'app' is several times worse to actually use over plain HN. It's not more legible, it's distracting, it breaks the back button etc.

I wouldn't call this "appropriation of brutalism" but "misunderstanding of brutalism".

It is definitely not ""antiquated"" to care about usability and removing distractions.

You needn’t pick a color: the browser has default styles. I personally find the idea of a “brutalist website” having any CSS - other than perhaps some simple rules for layout - absurd.

Browser defaults are the inherent form of a website. Picking a color yourself is adding ornamentation.

Well they say learn the rules before you abandon them, right? Before you improvise? :)

But you cannot distinguish between an artist appropriating and misunderstanding unless you know their level of understanding, that's your limit of understanding.

So I think you need to be generous and say, "Well it could cut either way, but they're probably reappropriating it"

There's also the idea that an individual artist could be unconscious of the historic perspective -- which is okay -- but part of a movement that is conscious of that, and are, together, reappropriating that historic perspectives.

I think all of these things are happening here, but with this artist I think they're aware of this stuff - not that i care, because I'm not judging their ability to participate in art/creation or the history of brutalism based on my grading of their knowledge of art history - haha! :)

But whatever you want to lock that definition of brutalism into -- and I appreciate your perspective -- it seems that a 'brutalist' definition of brutalism would be very pared back, rather than decorative with elaborately overly specific and burdensome definitions - ha! :) not that I'm saying yours is that -- what I'm saying is brutalism's brutalist definition would be practical and incorporate the realities of how artists' work and incorporate and reinterpret historical experience over time. Would it not? Wouldn't that be in the spirit of brutalism? Or do you hope brutalism dies in a particular invocation in the past, and is always stuck there, locked to its historical forms?

I think the best way to honor it is to let it grow with the times. And I think that's what's going on here. In fact the tension created by this work, speaks I think to how much it does reference the historical territory of brutalism, and the experience invoked by that -- because were it not operating within that territory, it's unlikely so many would-be brutalists on this thread, would feel so threatened by it as to become territorial. In other words, if all it was doing was throwing the word on there lightly, with no substance, there'd be barely a whimper. It would have no impact. The fact that it's resonated indicates it's doing much more than that. Would you not say so?

It has to have, for it to have caused this lively debate about the nature of brutalism itself. This is a good thing! Hahaha! :)

What do you consider “invoking a brutalist experience” to mean?

This, to me doesn't fit the "appropriated" version either.

To me there's no "brutalist experience" involved here, and what you describe doesn't seem to align in any way at all to the spirit of the original use.

I understand everyone's experience may be different. To me there very much is. YMMV! Hahahaha! :)

I guess...is it impossible for you to look through the lens that perhaps there is something brutalist about it?

Ditto. That site is brutal in its own sense, but it's not brutalist.

No, you absolutely get it, the author is using the term exactly wrong. They’ve created something with form over function.

Well you can install as a PWA, this is a form the HN site doesn’t have

I often use this site: https://brutalist.report to get a brutalist hacker news filter.

It's kitchy, not brutalist.

This might be great as an art piece, but I doubt it's something most HN users would use on a daily basis.

Usability and readability first!

Too much graphics for brutalist. Probably more 1990's GeoCities vibe.

The blinking thin can probably cause me a seizure.

No joke

Really? I didn’t realize something like this could cause seizures. I know bright flashing lights and screens can, but a flickering image can too?

This is much less readable than classic HN, which is already plenty brutalist.

This is cool! However I think the page is not interacting with the back button functionality correctly, at least on mobile.

Perhaps it works as "brutalism" (from french: 'beton brut', Concrete) if the fundamental Concrete of the web is imagined to be different. I do not think it fits the bill as it is.

I never thought you could make HN substantially worse designed, but apparently, here we are.

HN seems well designed to me, what do you mean?

Small fonts, very wide lines, small and non-obvious links for actions, bright backgrounds. I use https://www.modernhn.com/ to improve HN readability.

I was anticipating a WebGL series of built spaces with structural properties derived from the relative comment strength, intuited subject type (from title semantics) and/or intuited per-thread social or technical properties (# links, information density, participation level, controversy level, emotionality, etc.). Perhaps arranged on a faux-street grid arranged through time and eyeballs, with the origin being "front page now".

Pretty cool, I'm a fan of GenZ aethestics, but holy shit do I hate their naming schemes. I know Brutalist is referencing webdesign, but some of these vibes themes are not very readable. Preloading gibberish is neat.

> It's messy but it's kind of fun to build with a browser the way it was originally indented, which is really more like Self, Smalltalk, LISP, although this aproach doesn't scale very well

Reply on news.ycombinator.com