13 ms·
Guidelines for Brutalist Web Design (2018)
- self_awareness 3y agoI find brutalist architecture, designs and aesthetics as a regression in design. I really hope this trend will end someday.
- sebastianconcpt 3y agoLiterally a brutal regression.
- bediger4000 3y agoOnly links and buttons respond to clicks, and buttons look like buttons - finally! Flat design is moronic, and this smartphone thing of magic zones to stroke is awful.
- Semaphor 3y agoThe only successful submission of this was in 2018 with 312 comments: https://news.ycombinator.com/item?id=17478133 https://news.ycombinator.com/item?id=17478133
- andrewstuart 3y agoI thought brutalist went design was about a visual aesthetic.
- throw_m239339 3y agoBrutalism is a word that means something when it comes to architecture, and is just used as a catchy word for hipsters in webdesign communities, there is nothing more to that, it's yet another design fad like "flat".
- kergonath 3y agoThere’s more to it. The philosophy behind the architecture (functionalism, simplicity, and keeping the raw material’s appearance instead of hiding it) maps very well to a philosophy of web design. The main difference is that “raw” now refers to (roughly) the HTML code rather than concrete. The other points, simplicity and the utilitarian character of the layout and of the underlying code, and buttons that look like buttons (analogous to doors that look like doors) are very similar. In contrast, “flat” is just a visual style.
- deleted 3y ago[deleted]
- antegamisou 3y agoWebdevs trying to ruin everything as always.
- wesapien 3y agoSo kinda like a "Suckless" Web Design Guide
- hammyhavoc 3y agoIt's about functionalism.
- atoav 3y agoAs a webdesigner this is something I subscribe to, with one exception: websites where falling out of the norm in a certain way is part of the point that needs to be communicated (e.g. an artist portfolio). The ML in HTML stands for "markup language". Too many frameworks produce garbage markup, which is why for typical CMS systems I write my own themes that use HTML as it was intended to be used. One of my favourite German hacker/nerd blogs uses more or less the browsers defaults for ages now and it is so blazingly fast that it is my regular "does the internet work"-website: https://blog.fefe.de/ https://blog.fefe.de/
- k-ian 3y agoI'm a big fan of https://brutalist.report https://brutalist.report for this "The day's headlines delivered to you without bullshit."
- rbanffy 3y agoThe British government has issued a visual design system for their government websites that embraces this philosophy (in their case, for accessibility and speed more than aesthetics). https://design-system.service.gov.uk/ https://design-system.service.gov.uk/
- okeuro49 3y agoThe design to me looks simple, yet aesthetic. Brutalism looks simple, but horrible and anti-human, especially in Britain's climate, where it tends to get stained by damp and moss.
- rbanffy 3y ago> where it tends to get stained by damp and moss I actually like that - nature easily integrates it back into itself. That can't happen with glass towers. As for the anti-human, I always read it as a reminder that there are things bigger than human, which may be why brutalism is so popular with governments.
- okeuro49 3y ago> I actually like that - nature easily integrates it back into itself. That can't happen with glass towers. Moss and vines look great on Britain's Georgian and Gothic architecture. On Brutalist flat surfaces, it just looks dirty. Brutalism is an academic justification of the brutalisation of the working class, who invariably were the ones who ended up living in cheaply constructed Brutalist architecture. The middle and upper classes (and the architects) keep to their pretty Georgian Neo-classical houses.
- _dain_ 3y ago>Brutalism is an academic justification of the brutalisation of the working class, who invariably were the ones who ended up living in cheaply constructed Brutalist architecture. The middle and upper classes (and the architects) keep to their pretty Georgian Neo-classical houses. Yep, and they'll pull out the "umm well akshually 'brutalism' comes from the french betón brut, it doesn't mean 'brutal'", but they're wrong; the word "brutalism" itself wasn't coined by the French, it was coined by a bunch of too-clever-by-half Anglophone students. They knew exactly what double meaning it would have; it was always a mean-spirited pun.
- arpa 3y agoYes, please.
- crooked-v 3y agoIs it really brutalist if nothing is visibly and unappealingly weather-stained?
- jevgeni 3y agoShameless plug, but I've designed my own website as a love-letter to the honest, content-first design of very early 90s: https://jevgeni.tarassov.ch/ https://jevgeni.tarassov.ch/
- gidorah 3y agoFor a bit of a laugh, I wrote a Brualist ecommerce platform called Bruce https://bruce.huginn.uk/ https://bruce.huginn.uk/ I worked for an ecom company (in finance) and we were looking at replatforming. I wondered two things: how hard is it to write an ecom store, and could it be much more performant. I suppose main problem with going too brutal would be that many people would find it hard to trust.
- totetsu 3y agoI find it hard to trust a site that sells cat by the pint.
- gidorah 3y agoYou might be able to tell that I wrote a script to generate products. Product name * Unit of measure
- mhd 3y agoTo each their own. I've been looking for a good source for bonsai kittens for over 20 years now!
- talideon 3y agoIndeed! They should be sold by the litre, what with cats being liquids...
- hgsgm 3y agoPint is liquid measure.
- cnity 3y agoI really like interfaces like this honestly. If it included the product images and clicking the image opened the full image in a new tab (the normal browser way by linking to the image source) it would be perfect.
- 3y ago
- Poppys 3y ago| "Only the act of design can make the content less readable" I disagree with this, HTML in it's raw rendered state is not pleasant to read. You have to apply some rules (or specify the rules in your browser) to get the text to a state where it is pleasant to read.
- antiframe 3y agoWell, it's not going to get less readable if you do nothing, which I think was the point. You're getting at being able to make it more readable with design, which is possible, and addressed a few sentences later. But, the defaults aren't too bad: black text on white, blue or purple hyperlinks with underlines, larger headings, responsive, etc. The one thing I would always do is enforce a maximum line length for larger monitors.
- drooopy 3y agoI miss the times when this was considered the standard for web design.
- agys 3y agoWhile I agree with the sentiment (and motivation) the layout (and hence the readability) suffers: the hierarchies are off (for example the gigantic "Colophon" at the end), section titles too big and there is visual noise due to "permalink" scattered around, etc. All this could still be fixed without adding elements or styles but just by choosing the correct weights and slightly better rules.
- alfor 3y agoIn the same way as this was a mistakes for building (beauty matter) it is too for website. We human respond to more than the "content" or raw function of things. We have an emotional connection with everything. The visual cues, the color, the composition all affect how you are perceive and use a product or house. The brutalist look shout to other this place is about business/information, I despise beauty and think it’s a waste of time.
- cultureswitch 3y agoI despise form that gets in the way of the function. Beauty is in designing practical and effective things in a creative way.
- baumgarn 3y agoThis is not really what brutalism is about. Brutalism in architecture is often very playful and indeed more like a poetry and celebration of the raw materials and structure, not at all about the pure functionality absence of any aesthetic as formulated in that text. Brutalist buildings often neglect functionality in favour of architectural idiosyncracies. Like for example Trellick Tower: the elevators are in a separate tower outside the building and only serve every third floor. Brutalism celebrates raw form over function, and mostly people really don't enjoy living in these buildings.
- FrankyHollywood 3y agonever heard of it, very stimulating! https://www.architecturaldigest.com/gallery/most-beautiful-brutalist-buildings-world https://www.architecturaldigest.com/gallery/most-beautiful-b...
- Brendinooo 3y agoDunno about anyone else, but there are maybe only one or two buildings on this list that I think look okay, and some are outright hideous. Even the ones that look okay (the first one in particular) could be easily imagined to look better if they used more lively materials.
- ioslipstream 3y agoIt’s definitely a case of beauty in the eye of the beholder. I looked at this list and wished more architecture was similar.
- FrankyHollywood 3y agoit's a different kind of 'beauty' :) In some strange way it reminds me of Koyaanisqatsi, now 40 years old (https://news.ycombinator.com/item?id=35764584 https://news.ycombinator.com/item?id=35764584) I saw it in a movie theater a long time ago, the images where exiting, the music unlike anything I had every heard... It was stimulating and at the same time uncomfortable, I remember I was glad to finally see the credits after 1.5 hours of a bombardment of sound. Still it made a big impression on me and made me discover a whole new genre of music and composers.
- gambiting 3y agoHonestly, without irony - this is peak web design for me.
- johnchristopher 3y agoI am all for the design proposals here and I wish the web looked more like that. But: > A website is neither an application nor a video game. It is for content, and so its design must serve that purpose. No, a website is for selling something, anything, to someone, anyone. So on most sites it follows that design is built/tortured to achieve this goal.
- SPBS 3y agoDon't agree that links should be underlined. When there are a lot of links, underlining them makes the paragraph look very messy and hard to read [1]. Wikipedia for example does not underline its links. Just keep them blue. [1] https://ux.stackexchange.com/a/7068 https://ux.stackexchange.com/a/7068
- zichy 3y agoWell, if we're talking about links in continuous text, they should definitely be underlined. Otherwise, they fail the WCAG success criterion 1.4.1.[1] [1]: https://www.w3.org/TR/WCAG20-TECHS/F73.html https://www.w3.org/TR/WCAG20-TECHS/F73.html
- hjkl0 3y agoSomeone else already commented about how this has nothing to do with brutalist architecture. But it also has nothing to do with brutalist websites. There’s really no relation between this list of guidelines for brutalism and between sites that actual people would describe as brutalist. That term has been kicking around for a few years now. Personally, I always felt it a very evocative definition for these kinds of sites: https://brutalistwebsites.com/ https://brutalistwebsites.com/ A few other key words that come to mind are “artsy”, “experimental”, perhaps “post-modern”. And also “barren”, “self-important”, “hostile”. What the guidelines in this article have in common is not that they lead to brutalist websites, it’s that the lead to good websites. So why hijack a confusing term?
- mariusor 3y ago"hostile" for a website that doesn't force its users to download megabytes of javascript and images to be usable? That's not quite what I would say.
- sebastianconcpt 3y agoBrutal honesty here: My eyes! Waiting for this trend to go extinct. That guide and website is the least worst I've see in this style, but the general brutalist web-design makes me want to turn off the computer.
- throwaway689236 3y agoI think that they should change the font, other than that it would be ideal.
- sebastianconcpt 3y agoI'm not even criticising that website which honestly isn't that bad, but the trend.
- every 3y agoWorks nicely on lynx[1] and does exactly what it says on the tin[2]... [1] https://en.wikipedia.org/wiki/Lynx_(web_browser) https://en.wikipedia.org/wiki/Lynx_(web_browser) [2] https://en.wikipedia.org/wiki/Does_exactly_what_it_says_on_the_tin https://en.wikipedia.org/wiki/Does_exactly_what_it_says_on_t...
- ajcp 3y ago| "A website is not a magazine, though it might have magazine-like articles. A website is not an application, although you might use it to purchase products or interact with other people. A website is not a database, although it might be driven by one." This feels overwrought. A website is a collection of documents (webpages). That's it. A document is just a vehicle to store and/or transmit information. They can be made to be pretty and engaging to make that information easier to consume.
- silvestrov 3y agoIf a website is only a collection of web pages then you cannot have Amazon, hotels.com or any other site where the user pays money and receives something physical as a purchase. So the document metaphor is too simple as it only describes what happends at the html/css level but not how the user interacts with the site and the purchases that result from this interaction.
- ajcp 3y agoBut it's not a metaphor, it's literally how browsers as clients relate to webpages. Your browser is essentially just a very specialized document viewer. It's capability to enable those documents to dynamically incorporate other internet resources (like Amazon or Hotels.com do) even has "document" in it's name: Document Object Model. Sure, those other resources can be a component of the site, but they're mostly useless without that document providing interaction with them.
- anthk 3y agoIf your web doesn't work under Dillo, it's not brutalist.
- onewheeltom 3y agoWhatever it is called, I like it. I would love to stop seeing “click here” hyperlinks
- everybodyknows 3y agoAt least on my iPad's Safari, the below is presented in blue on a black background, barely readable due to long-understood asymmetries in the human retina's response to color: > Content is readable on all reasonable screens and devices. The site fails to meet its own stated design criteria.
- rodolphoarruda 3y agoIs there a similar approach to this for web applications UI/UX?
- tough 3y agoCurrently, "basement" exemplifies the pinnacle of brutalist website design.
- sputter_token 3y agoDoes anyone have any examples of baroque web design?
- amcaskill 3y agohttps://linear.app/ https://linear.app/ From Wikipedia: “The Baroque style used contrast, movement, exuberant detail, deep colour, grandeur, and surprise to achieve a sense of awe.” Fits IMO.
- deleted 3y ago[deleted]
- JohnFen 3y agoBrutalist web design is, I think, the best web design. Or at least, it's the sort that I find works the best for me. One of my problems with most modern web design is that it's so full of unnecessary visual fluff and frippery.
- turtledragonfly 3y agoI don't know, I might enjoy Roccoco web design — it seems what we have today is just plain user-hostile. Dystopian web design?
- mock-possum 3y agoIt's a fun exercise, from my (hazy) memories of college lectures, Brutalism is roughly: - structural elements aren't obscured by decoration - infrastructure (cabling, conduits, piping, ductwork, etc) is likewise 'left exposed' - building materials also left unadorned - physical shapes are building-blocky, not 'finished' - visual design elements are strictly utilitarian, or incidental to materials I've gotta say while I mostly agree with the author, this article's "A website's materials aren't HTML tags, CSS, or JavaScript code" claim really rubs me the wrong way right off the bat - the structural elements are absolutely HTML and CSS and JS. HTML is the physical architectural structure, CSS is the visual treatment, and JS is the infrastructure that allows interactivity. If anything, default browser styles would seem to be the nearest we've got to "HTML (structural elements) aren't obscured by decoration (CSS)." No rounded corners, no drop shadows, no parallax. Which makes "The default visual appearance of a button is often unpleasant or clashes with the visual language of the site" - I think under Brutalism, the clash would essentially be accepted as a hazard of "building materials left unadorned." Maybe you could sneak it in under "visual design elements are strictly utilitarian," as visual design is an incredible tool for usability Leaving the infrastructure (JS) out in the open is a little trickier, though I guess you could point to open sourcing your codebase and not obfuscating your production code so it's easily reviewable in the Dev Tools as a way to satisfy that ideal. Static HTML sites also seem like they'd be a little more in line with Brutalism than SPAs I suppose.
- cultureswitch 3y agoObligatory http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/
- CaesarA 3y agoHilarious! this was amazing to read.