22 ms·
Guidelines for Brutalist Web Design
- toss1 8y agoLove the function-first design approach -- e.g., "start with left-aligned black text on a white background, and to apply styling only to solve a specific problem."! But I'm not sure that "Brutalist" is the best name for it, as it carries a connotation of harsh, even ugly architecture designed around the materials, which brutalizes the user, whereas this web design is all about presenting the content in the best, least distracting way for the user ("When in doubt, do what Tron does: fight for the users."). Sure the name is edgy & gets attention, but...
- oh_sigh 8y agoPeople don't need to know what the name of a style is in order to enjoy it or not enjoy it.
- tzahola 8y agoBrutalism doesn’t “brutalize” anyone... “The term brutalism is derived from the French betón brut, meaning “raw concrete”.”
- pseudalopex 8y agoThe French is where the name comes from, but the English is how a lot of people feel about it.
- LarryL 8y agoI completely agree, I was about to write the same: that name is VERY badly chosen, it conveys the wrong idea to anybody who has not read the origin of the term, and makes it sound horribly pretentious (something I hate). Whereas the ideas are quite sound (and common sense). I also find it weird, to say the least, that so many people seem to rediscover those ideas that have been known -and advocated- FOREVER by people with a clue (look at Jacob Nielsen for an example). I also enjoy the irony that the writer uses a VERY BIG font for the titles (H1), that "brutalizes" (LOL) my eyes, especially the HUGE title of the article: they are MUCH too big. BTW, it's "béton brut" not "betón brut", the typo makes it seem really weird for french people. Cf. https://en.wikipedia.org/wiki/B%C3%A9ton_brut https://en.wikipedia.org/wiki/B%C3%A9ton_brut .
- buildbuildbuild 8y agoThe term is not the author's (though perhaps it was misunderstood), it is a fairly established style in current web design culture: http://brutalistwebsites.com/ http://brutalistwebsites.com/ https://www.google.com/search?q=web%20brutalism https://www.google.com/search?q=web%20brutalism
- tzahola 8y agoThese are the exact opposite of what the original post is advocating for.
- alvah 8y ago"Look at Jacob Nielsen for an example" Indeed - my copy of his "Designing Web Usability" was published in 2000, and the OP is basically a re-statement of the principles in this book.
- adamnemecek 8y agoBrutalism is the worst architectonic style. I spent quite a bit of time in brutalist buildings and they impact you negatively. Idk why anyone would want to reference that.
- monocasa 8y agoIDK, brutalist architecture is great when done right.
- smrk007 8y agoI’m not so sure about that. At my university (University of Texas at Dallas) we are “blessed” with a legacy of brutalist architecture [1], which I’ve been told won its fair share of architecture awards. [?] (I’ll assume that means it’s been done “right”. As you can see, it’s been really great for our mental health :) [2]. I can appreciate this style of architecture from an intellectual level, but to be around these kinds of buildings daily is a little exhausting. Sources: [1]https://www.flickr.com/photos/ericejohnson/6344277129/in/photostream https://www.flickr.com/photos/ericejohnson/6344277129/in/pho... [?] Word of mouth. [2]https://www.princetonreview.com/college-rankings?rankings=least-happy-students https://www.princetonreview.com/college-rankings?rankings=le...
- Bromskloss 8y ago>I can appreciate this style of architecture from an intellectual level Indeed. There are many things – not only architecture – that are interesting to look at for a bit, maybe on paper, but that I would never want to actually have around me in my life. It seems that some people do not consider this difference. Architecture is particularly troublesome, since others force it upon you. You cannot choose it like you can choose what music to engage with, for example.
- monocasa 8y agoI feel like this is a perfect example of how correlation isn't necessarily causation.
- 8y ago
- billysielu 8y agoI generally agree with the principles. There's so much bloat and poor usability around that it's worth going back to basics. However, part of the pleasure of using a website is the design - put a 'brutalist' site and a 'brutalist with a design pass' infront of people and see which they prefer...
- TekMol 8y agoThe design of this page is a breath of fresh air. I wish the web would be more like this in general. It's totally enjoyable to read the content on that page. Even the ad is ok. And I would expect it to perform better then the average Adsense ad.
- Yhippa 8y agoI liked how scrolling actually worked, there was minimal jank, the text was large enough, flow was predictable, and it felt fast. I know places have to keep the lights on which requires a u-turn from this but it was surely refreshing.
- baybal2 8y agoThe "Web 2.0" design is cancer Well, I owe few years that kickstarted my career at a very nice income level to it, but all 3 years as a webdev I hated with passion every request of squeezing js animation into every part of the page. God thanks web development is a thing of the past for me Though, that dude who incessantly pushes his imaginary "design trend" to every major website is not much a "lesser evil" It is an "ingenious" business model to raise up hype over "the new great design trend" nobody heard about, and then sell your expertise in it and your design "services" at six digits per project
- fredley 8y agoJS is fine, as long as it has purpose. I think the original idea of progressive enhancement needs a renaissance: use little bits of JS to improve the lives of people who have it enabled (e.g., by autocompleting an input, filtering a large form), but add it after you've made it work without JS.
- fastball 8y agoOnly for sites whose primary purpose is text content delivery. Which isn't really the majority of useful sites these days.
- fastball 8y agoThe idea of a more interactive web is not "cancer". The issue is that sites which are primarily content delivery platforms adopted Web 2.0 principles as well, which was completely unecessary. But I think you'd agree that Facebook and Trello and Google Maps are all good uses of a web that has moved beyond Hypertext.
- baybal2 8y ago>The idea of a more interactive web is not "cancer". I specifically refer to the design trend that spun off from the greater concept. In 9 out of 10 webdev projects, and how it is understood by "business dudes" web 2.0 is only a some kind of design trend, no more. And a kind with 20 animation scripts per page.
- djhworld 8y agoI like the idea, but the weird mixed sizing of the headings throws me off a bit I suppose a weird mix of sizings is a key characteristic of brutalism though!
- duckfruit 8y agoGreat read. This could have just as well been titled "Guidelines for Web Design That Respects The User" or "Web Design that Doesn't Suck" Summarizing: 1. Don't break accessibility 2. Clearly label hyperlinks 3. Make sure your buttons look like buttons 4. Dont paginate for the sole purpose of padding engagement numbers 5. No to decorations that distract from the content 6. Dont break the back button 7. 'Performance is not a feature'
- victor106 8y ago> 7. Performance is a NOT a feature. I think you meant to say "Performance IS a feature." (That is what the page says as well)
- yayana 8y agoI have no idea what that section is trying to say? It isn't a feature but a requirement is the common argument. It isn't a primary feature but a result of following minimalist criteria is another.. The example that a long book of text downloads in a second seems to be saying the latter..
- inopinatus 8y agoIt's saying that low TTI is an emergent property of this style.
- freshhawk 8y ago> It isn't a feature but a requirement is the common argument. An argument that no one listens to, which is why the web isn't performant and is instead full of bloated junk. They are acting like performance isn't even a feature, like users don't care about it and shouldn't have it. This is wrong. ^-- Is what that section is saying.
- pmlnr 8y agoPerformance should not be sold as a new feature; it should be one of the main drivers from the beginning. I remember reading the verge redesign article where they raged about the speedups compared to their previous site - and the new was still bloated.
- tzahola 8y agoWhen I saw the title I thought to myself: yet another pretentious art student with an unreadable website. But then I opened the link and was pleasantly surprised: finally a website that uses the term “brutalist” properly!
- sixhobbits 8y agoObligatory link to [0] (has some profanity) which looks good to me and loads fast on my edge connection and has about 7 lines of css. [0] http://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com
- brailsafe 8y agoTachyons, the CSS component library he used, has a fucking gorgeous website. http://tachyons.io/ http://tachyons.io/
- unicornporn 8y agohttp://www.elementscss.com/ http://www.elementscss.com/ seems very appropriate.
- matthewmacleod 8y agoSee, I don't like this. Shit floating all over the place, poor contrast, bad font sizes. I see what it's getting at and I can understand why you'd like that general style, but I don't think this is a good example of it.
- brailsafe 8y agoUpon second look, I might agree with you. At least on mobile, I'm only really fond of the yellow section.
- firefoxd 8y agoBecause of Spam, I give a bogus link by default to all forms, then update it to the correct one with JavaScript. I still log all post requests. After five years I've gotten less than 10 non spam submissions to the bogus link.
- dustingetz 8y agohttp://www.hyperfiddle.net/ http://www.hyperfiddle.net/, an exotic fullstack web framework, enforces brutalist design! (cofounded by me) Database effects are buttons and navigation is links, and the rest too. What do you think, HN, does it work?
- lsiebert 8y ago"A friend gave me design advice once. He said to start with left-aligned black text on a white background, and to apply styling only to solve a specific problem. This is good advice. Embrace this, and you embrace Brutalist Web Design. Focus on your content and your visitors will enjoy you and your website. Focus on decoration or tricking your visitors into clicking ads, and your content will suffer, along with your visitors." That's something I'm going to keep in mind.
- pmlnr 8y agoThis is a very good advice indeed.
- Filligree 8y agoPlease don't. Pure-white pages are painful to look at, let alone try to read -- just because our monitors can go all the way to #fff doesn't mean that's a good color to use more than once in a (rare) while.
- aloner 8y agoYou're saying this because black on white hurts your eyes? Because if I'm reading something, I really don't care about what the text looks like and that's what black on white is good at: distraction free reading.
- m3rc 8y agoThen that's a problem that you can solve, typically with a single line in your stylesheet. Doesn't damn the concept by any means.
- solatic 8y agoI feel like this is an idea for a simple browser plugin. If the site is #000 text on a #fff background, apply a stylesheet with lower contrast. If high contrast is painful to look at, and you can't control web designers throughout the world, but you can control your own web browser... then why are you still suffering?
- patkai 8y agoCould we somehow estimate how much electricity unnecessary design - mostly meaning unnecessary js running on pages - costs the planet? I guess it was done already...
- amiga-workbench 8y agoJavascript is probably second only to bitcoin from a carbon footprint standpoint.
- wgx 8y agoYes! I would argue this steers away from brutalism into a much more sensible, usable place. Definitely the kind of UI I advocate strongly in my book. <shameless type=“plug”> http://uxbook.io http://uxbook.io </shameless>
- duxup 8y agoIs this really brutalist or just ... simple?
- krapp 8y agoI don't think this is Brutalist. At best it's minimalist. The problem is, the design here is comfortable and pleasant to read, but every example of Brutalist architecture I've seen exudes... well.. brutality. Those buildings look like they come from a dystopian future where fascist robots took over. It's a good guide, but poor branding. To me, an actual Brutalist website would be what you see when you view a site's source - raw, unparsed HTML, left to the viewer to make sense of.
- duxup 8y agoMaybe a good example would be a "site" / server you have to visit with Postman ;)
- buildbuildbuild 8y agoIn my opinion the author's suggestions are more minimalist than brutalist. Design aesthetics currently in play at Businessweek and The Outline are more commonly categorized as "brutalist" - but categorizing any style or design trend is a subjective exercise. Off the top of my head, these are my impressions of what "brutalist web style" means at the moment: - Playful departure from what western web society considers "good design" in 2018 - Experimental execution of white space occasionally using zero margins, less line spacing, unusual or no grids - Limited color palettes, black with neon splashes of color - Text frequently overlaps images (negative margins) - Nostalgic of early web aesthetics with frequent nods to zine print design
- tomcooks 8y agoGotta call them something unpleasant, so they don't have the same fate of "minimalism" a couple years ago.
- zebraflask 8y agoThis is a gem. Love it.
- k__ 8y agoLighthouse from Google can help to achieve some of the points and others not listed.
- achairapart 8y agoIf you look at this backwards, brutalist web design is not a merely “back to basic” because at dawn of the web there was no CSS, neither JS and very little tools at your disposal. HTML pages back then looked too brutal to our eyes, so we visually borrowed from what it was more aesthetically close: Print Design. We used data tables to design layouts. We used print design tools (PhotoShop, etc) to design shapes, shadows, gradients, custom fonts, even rounded corner (Web 2.0 all-rounded trend came out when browser implemented the border-radius propriety). Nowadays CSS let us design complex layouts without the need of graphic software. But more than that, in all these years we developed a common “web aesthetic”: Today HTML looks less brutal to our eyes than 27 years ago. This was true even for photography: it took almost 100 years before it was seen as something else other than an “art for failed painters”.
- wgjordan 8y agoI like the general design philosophy, but I think this website as an example is weakly executed and shows the author's poor commitment to his own philosophical ideals. Specifically, the author claims to maintain a 'Truth to materials', which is summarized on the Wikipedia page he links to as "any material should be used where it is most appropriate and its nature should not be hidden". However, he then goes on to include hidden JavaScript tracker code in the footer of his page: $ xidel https://brutalist-web.design -s --css='script' var _gauges = _gauges || []; (function() { var t = document.createElement('script'); t.type = 'text/javascript'; t.async = true; t.id = 'gauges-tracker'; t.setAttribute('data-site-id', '5aff5aa154a1b97a229142e1'); t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif'); t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(t, s); })(); Note that this injects a _further_ JavaScript blob into the DOM (https://d2fuc4clr7gvcn.cloudfront.net/track.js https://d2fuc4clr7gvcn.cloudfront.net/track.js). Anything but 'truth to materials' here. Beyond this, the author also minifies his 'built by hand' HTML and includes a few other blobs of webpack-bundled JavaScript code. Sure, this is all not-unexpected for run-of-the-mill websites these days, I was just expecting a better example from a web-design manifesto advocating the exact opposite.
- albertgoeswoof 8y agoThose examples are not design related...
- wgjordan 8y ago> Those examples are not design related... I disagree. I'll grant that if you narrowly idealize 'the visitor' to be a content-consumer who never chooses to 'view source' (let alone use a command-line user-agent to interact with a website), minifying/bundling HTML/JS doesn't affect the 'visitor experience' design. However, hidden tracker JavaScript definitely impacts every visitor's experience, and directly betrays the 'honest and transparent interaction with a visitor' the author desires: > a button agrees to submit the visitors information to the server. Hiding this interaction behind a hyperlink or unadorned text betrays the core nature of a website. The JavaScript tracker hides its interaction behind the browser's JavaScript engine, which is a much greater betrayal than any poorly-styled hyperlink or button.
- thosakwe 8y agoThis page slapped me in the face... But in a good way. I’m not much of a designer, so I wonder what the main differences between “minimalism” and “brutalism” are. To me, I’m ok with sites running analytics and an ad or two, so long as I can read all the content in one go without the page stuttering on my phone or redirecting me suddenly.
- foobarchu 8y agoI'd say minimalism is characterized by trying to remove as much non-content as possible, while this philosophy is more about everything serving a purpose. A minimalist might want to get rid of ads because they are not content, while this kind of brutalism prescribes designing the ad in a way that doesn't detract from the content.
- enra 8y agoI generally agree that websites should be simple. Website for me means that it’s a page that shows mostly static information and there is minimal or no interaction other than reading. For that I think having simple or event brutalist design works fine. But now, lot of “websites” are actually apps, where there are complex interactions, dynamic information, complex workflows and tools. I don’t think the same approach works anymore I don’t think anyone who complains about the complex or visual designs of web apps, complains that same way about their native or mobile apps. Do you really want your desktop windows to be all full screen boxes on white background, every action as a blue underlined link? Do you want your programming ide look this way? Do you want that every time you change a view in your apps there is a full page reload of the content? This is where the complex designs, react, animation, data and state management comes in to make the user experience more fluid, enjoyable, understandable, and hopefully meeting the needs of the users. There is some fair critisim that some or many websites are over designed and over engineered for various reasons. I also see that lot of the web frontend basics are now forgotten or ignored, you just create everything with JavaScript, and then spend half of the time trying fix or rebuild the functionality browsers provide with html out of the box.
- repsilat 8y agoNobody complains about Google Docs being "an app". If a program like that doesn't have "normal scrolling" and a functional "back" button people will tend to forgive them. Most sites aren't that, though, even if their devs think they are. LinkedIn and Twitter and Reddit are just plain old boring mostly-static collections of pages. They might have a few good reasons to screw up their UI anyway, though: - They can attract devs who want on the bandwagon, - The "man on the street" might actually like crap like the Reddit redesign. Let's not blindly assume that our aesthetic preferences are shared by the public, even if they seem like a clear moral good to us (and especially if that moral intuition is informed by a technical background that is not widely shared.)
- kungtotte 8y agoThe counter to that is, does everything really need to be an app? Take reddit for example, it was perfectly usable and in fact worked great when it was a static page without any JS going on. The current app-like "new reddit" is by comparison less usable and noticeably slower.
- krzrak 8y agoGreat idea, but the source of the website is in opposition to it: it's completely unreadable one-liner.
- cmjqol 8y agoThat was one the clearest guideline description I've ever readen in my life. Obviously I'm not surprise this was written by an Engineer , it's very clear about what to do and what not. Usually trainings and guidelines made from Designer are useless to developer , they talk about emotion , colors , moods etc... Which is key for marketing and UX but does not help a developer improve it's skill in UI .
- deltron3030 8y agoSkill in UI, or if something should work generally for everybody, or optimized for a specific audience, is audience dependent. Design is basically cultural anthropology, extracting real world types and positioning products to adress those types. Technically it's tough to sperate both worlds, because layout (grids) and behavior (transitions, animations) have strong stylistic implications. This then means that a developer skilled in UI (making it work generally) can't adress specific audiences, most likely racing to the bottom (too many others doing the same and competing for the same general audience).
- Proven 8y agoI like it. Sick and tired of the fancy white space shit where the back button doesn't work and so on
- lurcio 8y agoSuch a relief: basically, Safari Reader view.
- cheezymoogle 8y agoWe desperately need this and similar ecologically-sound programming philosophies in high places right now. Just considering news--Moby Dick is 1.2mb uncompressed in plain-text. That's lower than the "average" news website by quite a bit--I just loaded the New York Times front page. It was 6.6mb. that's more than 5 copies of Moby Dick, solely for a gateway to the actual content that I want. A secondary reload was only 5mb. I then opened a random article. The article itself was about 1,400 words long, but the page was 5.9mb. That's about 4kb per word without including the gateway (which is required if you're not using social media). Including the gateway, that's about 8kb per word, which is actually about the size of the actual content of the article itself. So all told, to read just one article from the New York Times, I had to download the equivalent of ten copies of Moby Dick. That's about 4,600 pages. That's approaching the entirety of George R.R. Martin's A Song of Ice and Fire, without appendices. So all told, if I check the NY Times just 4 times a day and read three articles each time, I'm downloading 100mb worth of stuff (83 Moby-Dicks) to read 72kb worth of plaintext. Even ignoring first-principles ecological conservatism, that's just insanely inefficient and wasteful, regardless of how inexpensive bandwidth and computing power are in the west.
- nradov 8y agoThat's one of the reasons why so many mobile users prefer to get their news through Facebook now: the articles simply load faster.
- pmlnr 8y agoFaster, sure, once you have facebook loaded. Unless, of course, you have a news app, which loads the RSS feeds, which, by nature, is way faster than both.
- briandear 8y agoApple News is even better and you don’t have it building a profile about your interests with the purpose of tracking you across the web.
- srtjstjsj 8y agoThe NYT has photographs. Moby Dick with photographs would use more bytes. Moby Dick doesn't use photographs, because the user has to do all the work to create the images. NYT does what users want, trading cheap bytes to save human processing time.
- ilovecaching 8y agoI hate brutalism in architecture. You can have usability without losing warmth. That said, I love minimalism on the web (and not just because I’m a programmer and not a designer). I love plain html sites, and I think spending all your design time on typography can yield a really zen and snappy website. Unfortunately, what the web really lacks is uniformity across sites, which can be confusing to users. I’d much prefer everyone use semantics tags and let the user decide on the styling, or use a browser default. CSS shouldn’t even be a thing.
- carapace 8y agoTwo things: 1. I wish they had mentioned not messing with the "visited" color of hyperlinks. It's so useful and so many sites set it to the same color as unvisited links. 2. "The Non-Designer's Design Book" by Robin Williams[1] is fantastic and I highly recommend it. It's not specifically about website design but it pretty much all applies. [1] Not the actor/comedian, she just has the same name. She also wrote a manual for PageMaker (remember that!?) that was so good I still enjoy reading it today, years after the program it's for has been left in the dust.
- abraae 8y ago1. True, but "visited" is much less use on dynamic sites, where you may have visited the page, but the page itself has changed since then.
- casabarata 8y agoI wish there was a brutalist browser that just turns every website into a brutalist designed page. It’d make me me suoer happy. Might even pay for it.
- thesmok 8y agoYou can enable reader mode for all websites in Safari. On iOS, just hold the reader mode icon and select 'always enable'. I do it when reading news.
- makecheck 8y agoIf you’ve never tried, load something like "lite.cnn.io" and be amazed at how quickly you can see 50 different headlines and links, on any type of device. Similarly, "old.reddit.com" and other simplified designs. I now strictly bookmark only what I consider the “sensible” versions of a site. And if there isn’t a sensible version, I stop using the site entirely. Also, in 2018 you are doing yourself a disservice on the desktop if you don’t have the best content blockers installed. (I use "uBlock Origin" and "uMatrix", not because I want sites to suffer but because web browsing IS intolerable without a blocker.)
- lui8906 8y agoDo you have any good resources for the light versions of websites?
- jackfrodo 8y agoI use this to always redirect reddit to old.reddit.com https://github.com/tom-james-watson/old-reddit-redirect https://github.com/tom-james-watson/old-reddit-redirect
- _emacsomancer_ 8y agoI wondered the same thing. I found this: https://github.com/mdibaiee/awesome-lite-websites https://github.com/mdibaiee/awesome-lite-websites
- slazenger_one 8y agonote that the link to hackernews in this lite-site list is just a link to the normal hackernews
- a3n 8y ago"... See recursion."
- Ezhik 8y agoA couple of days ago I threw together [a barebones extension](https://github.com/SilverEzhik/ReaderMode https://github.com/SilverEzhik/ReaderMode) that removes all of a website's CSS and replaces it with just something very minimal. Honestly tempted to go further with it and turn it into some sort of a web 'debloater', something that would not just strip CSS, but also where possible redirect people to no-bullshit versions of websites - e.g. news websites to their lite text-only versions.
- hapnin 8y agoA friend's site: https://loveanddeathincharlottesville.com https://loveanddeathincharlottesville.com
- foxhop 8y agoI made this on behalf of family on last Friday. https://ourmemorysite.com/richard-james-grote/ https://ourmemorysite.com/richard-james-grote/ Thinking about offering a free static hosting for obituaries and other life events. First theme is pretty brutal and newspaper like. Minimal and HTML5. Disclosure: Guest book is powered by Remarkbox, a project I'm bootstrapping. If you need to host an obituary, send a pull request. https://github.com/russellballestrini/ourmemorysite.com https://github.com/russellballestrini/ourmemorysite.com I'm thinking about setting up a trust to make sure this site stays online for as long as the Internet is a thing. No link rot, etc.
- motohagiography 8y agoThe idea that text can be essentially meaningful without a medium that demonstrates competence or craft is an expression of contempt for the reader. Brutalism as an architectural movement was about creating anti-human symbols that exalted totalitarian institutions, and was a naive mockery of human experience. Brutalist buildings are abominations we only keep around to serve as a reminder of our capability for hubris. I can only assume brutalist web design serves the same purpose.
- skymt 8y agoDo you have any specific complaints about the design of the linked page? Because you seem to be assuming that the properties of Brutalist architecture that you hate would necessarily be inherited by a web design style named after it. I see no reason that should be the case. We have an example of the style directly at hand, so why not speak in specifics?
- startupdiscuss 8y agoThis is how it begins. You want a simple blog just to share your ideas and that’s it. Okay, will add one email sign up form so people can know when I update the blog. Oh, if they prefer Twitter I should have a link to my twitter so they can add that and know when I update. Well, I retweet stuff of interest so I should have a small twitter feed on the side, adds content. How will people find my old stuff? I’ll put an archive link. Oh, there are so many topics I should link by topic and organize it in a tree structure. Well some links are way more popular so I’ll style them so people see them. I should also have a search. What if people want to sort according to their own criteria? How about a feedback rating? Might need nested comments.
- badbug 8y agoNone of this stuff violates the "rules" defined in the article. This isn't minimalism, it seems to be about making the formatting simple and purposeful. The sites that do the things you list are horrid because they just throw libraries at the problem.
- sosuke 8y agoI love the idea but was anyone else aware of just how much the different font styles stood out? There seemed to be 3 or 4 styles, different kerning, sans and it was distracting. Funny how something usually in the background makes such a big impact. Is there any reason to switch so much? Would not switching be better? I’m not sure either way.
- Bromskloss 8y ago> That was an ad for one of my books. It was clearly marked I thought it was an example belonging to the text. I had to click it to check.
- leibnitz27 8y agoTwenty points for him linking to a site (his non-brutalist stitch-fix link) that gave me an aneurysm after trying to scroll for a few pages. Not sure what he's trying to say there. "I learned how not to respect my user"? ( https://algorithms-tour.stitchfix.com/ https://algorithms-tour.stitchfix.com/ , should you also want to punish your cortex ).
- tomxor 8y ago> brutalist buildings often reflect back the forms used to make them I like the core concept of brutalism, but I see problems with brutalism in general and in applicability to web design... The problem I see with brutalism in general is that it doesn't go far enough! removing the veneer and doing away with facades is the first step, the point is to be honest; not to intentionally make things aesthetically displeasing. Once it's honest you can focus on good function and beauty emerging from within. This principle isn't entirely incompatible with web design, however there is a significant difference that needs to be understood: With web design the aesthetics are not completely separable from the function, because in the most fundamental way - you operate a web page by looking at it. Because of this, I prefer to focus on minimalism and typography when it comes to creating highly functional, no bullshit web design. In other words, look at how books have been doing it for the past 1000 years, because beyond having to turn a page their basic function is very similar.
- hashmal 8y agoThe problem I see with brutalist webdesign is that it focuses on the result instead of the process. Applying brutalism principles on the process (the upfront design and the actual code) would let beauty emerge by itself indeed, in a much more honest way.
- HelloNurse 8y agoThe process is what is focused on the result: if you carefully avoid putting useless cruft in your pages, you get clean pages. It isn't a trivial principle because it has to be applied to a great variety of design choices with a great variety of technical means to meet a great variety of purposes.
- robin_reala 8y agoin the most fundamental way - you operate a web page by looking at it. I highly disagree with this. The most fundamental aspect of web design is that style is a layer that can be disabled, and that content is accessible to all, even if their access method is different from the norm (for example a screen reader presenting the information as an aural experience to the user).
- KirinDave 8y agoWhile I like the sentiments here, a few things stand out is very weird and counter-productive to the message: 1) This is obviously hosted on some kind of dynamic site. Producing 8kb took over 20ms, with most of it in TTFB. Even clearly static resources had this. 2) The stylesheet is 2x the size of the page and contains tons of extraneous content. 3) For a brutalist style, it's quite fiddly about letting userscripts touch its styling. The stylesheet contains a ton of directives with !important and not all are about positioning. (If accessibility and performance really are features, it feels like the author didn't care to work too hard on those features even in the simplest case.) 4) Also: I do not appreciate seeing ANY tracking pings from something like gaug.es. You certainly didn't inform me that you were sharing my presence with a third party that doesn't recognize any of my rights. If you're gonna do this, at least do it on your compute and I/O time and don't waste someone else's. Have your server pass connection details up to your analytics. That also limits the amount of fingerprinting the tracking ping can do to me, were I not blocking it.
- dagenix 8y ago> This is obviously hosted on some kind of dynamic site So? It still loaded fast for me. > The stylesheet is 2x the size of the page and contains tons of extraneous content. The article is about what the author terms Brutalist design - not minimalism code gold. The author doesn't say anything about producing the smallest possible CSS file. And the CSS file is 14KB with 7KB of content - that is quite tiny. > For a brutalist style, it's quite fiddly about letting userscripts touch its styling. I'm not sure where in the article he talked about avoiding !important or about Brutalist style involving making it easy for a user to customize the website. > Also: I do not appreciate seeing ANY tracking pings from something like gaug.es Fair enough - but, that has nothing to do with any point that the article made. I don't see how any of your complaints relate to the article.
- gruez 8y ago>1) This is obviously hosted on some kind of dynamic site. Producing 8kb took over 20ms, with most of it in TTFB. Even clearly static resources had this. If you check the headers, it's served from s3 via cloudfront. At the bottom of the page, there is a link to a github page that confirms it's a static site. >2) The stylesheet is 2x the size of the page and contains tons of extraneous content. >3) For a brutalist style, it's quite fiddly about letting userscripts touch its styling. The stylesheet contains a ton of directives with !important and not all are about positioning. It looks like it contains at least 2 frameworks, which could explain why. I'm guessing they're needed for the "normal" website comparisons. >4) Also: I do not appreciate seeing ANY tracking pings from something like gaug.es. You certainly didn't inform me that you were sharing my presence with a third party that doesn't recognize any of my rights. Your "rights? You're being a little melodramatic here. If you don't want random code to be executed, you should have disabled javascript. I use noscript and it works fine without scripts. >If you're gonna do this, at least do it on your compute and I/O time and don't waste someone else's. Who cares? It's not like they're mining cryptocurrencies. They wasted maybe $0.000001 worth of your precious computing resources. >Have your server pass connection details up to your analytics. That also limits the amount of fingerprinting the tracking ping can do to me, were I not blocking it. not really viable for a static website hosted on S3
- robbrown451 8y agoI wish there was an easy way (e.g. browser feature or extension) for people viewing a siteto get the best automated approximation of this for any web site. (actually my firefox extension Aardvark kinda tried/tries -- since 2005! :) -- there's a way of selecting and area of the page and hitting "b" to go black and white, but it also sort of normalizes font sizes, etc and gives most sites something pretty close) I also wish that web publishers could customize this behavior, possibly simply by have a different css file for it. It would be great if users could choose to view the web this way as a default, but I don't know if I would choose that option. And I can't get on board wishing every site, or even most sites, were like this. It would be like living in a neighborhood where all the houses were the same shade of white, or that every meal I had was the same thing. I find colors and fonts and graphics appealing, even if they are subtle and played-down like Hacker News. If you like this look, that's great, but I wouldn't advise it for a web site that wants lots of viewers/users. (aardvark still works as a bookmarklet: http://www.karmatics.com/aardvark/ http://www.karmatics.com/aardvark/ )
- dweekly 8y agoRelevant bit from Dieter Rams: good design... Is innovative Makes a product useful Is aesthetic Makes a product understandable Is unobtrusive Is honest Is long-lasting Is thorough down to the last detail Is environmentally friendly Involves as little design as possible
- jlg23 8y agoYes. No. Short: Good advice, if you include your expectations as a "default" or "reset" style that is applied before. Long: This advice only works as long as browser vendors or users don't take up the liberty the specs grant them: to build a completely customized default ostyle (as mentioned in another comment "white page, left-aligned, black text").
- jgtrosh 8y ago> The term brutalism is derived from the French betón brut, meaning “raw concrete”. I guess that's true in the case of brutalist architecture ; but more importantly it takes it one step further than « brut » and refers to « brutal » to take the idea into violent territory. Having a raw experience which pays too much attention to the well-being of its users is not brutalist, it's just minimalist.
- deleted 8y ago[deleted]
- srtjstjsj 8y agoThat's a myth, based on a coincidence of the words and the post-hoc fact that people found concrete to be ugly.
- blt 8y agoAs much as I hate bloated page sizes, breaking the back button is the absolute worst thing a website can do. It is a disgusting violation of the user's experience. It's like locking the door behind a customer when they enter your store and then forcing them to jump through the window if they want to leave.
- taeric 8y agoThis is, not surprisingly, overstated. In all of the cases where you used the back button and it didn't work. Yes. That sucked. There are, however, plenty of places where you did not even attempt to use the back button, and more than a few where it would be nonsensical. Purchased something? Want to repeat the purchase? What about sending an email? Yes, much of this is covered by "posts can't be 'backed' to." However, the point is still that there is a lot of scenarios where the back button doesn't work that you flat out don't notice. (And I say this as someone that hates the "forever scroll" pattern we seem to have adopted.)
- blt 8y agoYes there are certainly situations where the back button becomes nonsensical. I'm talking more about things like a 30-image slideshow generating a trail of 30 URLs in the history, or (mainly) outright "dark pattern" sites that purposefully make it impossible to leave.
- taeric 8y agoAgreed. My only assertion was that the position was over stated. Not that I disagreed with it. :)
- Raidion 8y agoIf designing around the back button is a pain point because you have to implement some fairly complicated solution is a good sign your design needs work. I'm working on a corporate site now and it's a mess of buttons going to modals or just loading content in place, and getting the back button to work is a HUGE pain and I really wish the designers thought about functionality and not just how stuff looks.
- matheusmoreira 8y agoReminds me of: http://motherfuckingwebsite.com http://motherfuckingwebsite.com http://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com https://thebestmotherfucking.website https://thebestmotherfucking.website > Websites aren't broken by default, they are functional, high-performing, and accessible. You break them. Always puts a smile on my face.
- ModernMech 8y agoI feel like that last one misses the point. The first two were good, but the last one has colors everywhere, links every other word, random pictures in text, random images, all this random small text. It's pretty much what the original motherfuckingwebsite was lambasting, minus the jquery. For example: "It uses some cool technologies like JavaScript JavaScript logo, CSS3 CSS3 logo and HTML5 HTML5 Logo" Okay.... why? Why does this site need JS? Or CSS? What do those technologies do that furthers the message of this site? You're using them just because they're cool? That's the opposite of the point of motherfuckingwebsite. Is this site trying to parody itself and I'm missing the joke?
- MinusGix 8y agoThe third link is just extending the second website's idea to include JS, and some other nice things. Though, I don't see how it goes against the point of motherfuckingwebsite? The point of motherfuckingwebsite was to keep it accessible and fast, which the third site certainly does. Sure it doesn't need JS, but it can certainly help make the site better. (The JS is for the inverted view button, and some text that shifts through colors. I wish more sites had a dark mode.)
- ModernMech 8y ago> Though, I don't see how it goes against the point of motherfuckingwebsite? The point of motherfuckingwebsite was to keep it accessible and fast, which the third site certainly does. No, I don't think that was the point. The point of the original was that all the extra stuff the "best" version added to improve the orignial is unnecessary in the first place. For example, from the original: "You thought you needed media queries to be responsive, but no. Responsive means that it responds to whatever motherfucking screensize it's viewed on. This site doesn't care if you're on an iMac or a motherfucking Tamagotchi." From the "best" "Every asshole that visits this website can use it without any problem well, kind of" "It's accessible, so everyone can enjoy it but not everyone can read this - this text is Ant-Accessible" "It doesn't use a single media query well, not really" All of the above seems to be explicitly against the aesthetic of the original. The original was 6Kb, while the "Best" is 600% larger, and really doesn't have much more content wise. Certainly not 600% more. And what do you get with all that bloat? Nothing that makes the site more accessible or easier to read than the first. Everything about this "best" is worse than the first and second. This has got to be parody or else it makes no sense. > The JS is for the inverted view button, and some text that shifts through colors. I wish more sites had a dark mode.) If more sites focused on just content the way motherfucking website advocates, it would be easy to style it however you please. It shouldn't be the website's job to adjust itself to your preferred reading conditions. It should give you the content, and then you can decide on fonts and colors. Opera does this right, with a mode that will strip out the stylesheet and replace it with your own, so you can invert any website you like. The problem is, it doesn't work well on sites that get too fancy with JS and CSS.
- anothergoogler 8y agoThis guy's not a professional designer and the typography on the page is not very good. What's he doing making design guidelines? I guess us programmers are experts in everything.
- scalablenotions 8y agoIt seems like a any particular fad in UI design has just enough time to get well-defined before it goes out of fashion.
- Havoc 8y ago>The term brutalism is derived from the French betón brut, meaning “raw concrete”. Really? I would have thought it's derived from the term brutal, which predates concrete.
- smt88 8y agoThe "raw concrete" etymology seems to be correct. https://www.wmf.org/project/british-brutalism https://www.wmf.org/project/british-brutalism
- Havoc 8y agoMultiple sites quoting the same soundbite doesn't make it correct. Plus even the supposed french origin (Béton brut) is derived from the word brutal...again predating concrete. Beton = Concrete, so even that "origin" is fairly recent.
- abrowne 8y ago> the word brutal...again predating concrete. I don't necessarily disagree with your main point — I don't know enough to say either way — but that statement isn't true unless I'm misunderstanding something. Concrete was used extensively by the Romans, and also before them. The earliest citations in the OED for "brutal" are 16th century (in English). (It also says "Compare French brutal, 16th cent.") It is derived from a Latin word, but even then it likely doesn't predate concrete.
- renox 8y agoThat's funny to see how so many people are pro-brutalist for buildings.. At work we have an on-site coffee bar, they used the "industrial-look": exposed pipes and ceiling, it's very annoying because it's very noisy, I suspect that many brutalist buildings are the same: very unpleasant for those who work there.
- Animats 8y agoMy older sites are like this. XHTML, even. Really fast loading, because they pull in nothing but the HTML page and their own images.
- tropicalcream 8y agohere's a nice critique of this 'brutalist web design' nonsense https://www.tommoody.us/archives/2018/05/29/et-tu-brutalist/ https://www.tommoody.us/archives/2018/05/29/et-tu-brutalist/
- yakshaving_jgt 8y agoI'm glad not everyone is drinking the Kool-Aid. This is pretentious nonsense. It was indeed satisfying to scroll to the bottom of the page and see the author's "Colophon". It immediately reminded me of the footer in Maciej Cegłowski's site, http://idlewords.com/ http://idlewords.com/. > This is where a douchier person would write 'colophon'
- nostalgeek 8y ago> The term brutalism is derived from the French betón brut it's "béton", not "betón". And I'm pretty sure the term comes from the word "brutal" because the style was deemed as such, figuratively, and not the use of concrete "brut", which makes no sense to begin with as buildings would be built with "béton armé" or "béton fibré".
- srtjstjsj 8y ago"béton armé" or "béton fibré" refer to the inside of the concret. "Béton_brut" referes tothe surface A concrete building can be both "brut" and "armé" at the same time. https://en.wikipedia.org/wiki/B%C3%A9ton_brut https://en.wikipedia.org/wiki/B%C3%A9ton_brut
- moron4hire 8y agoI consider my personal site to be Brutalist, in that it matches the features that people mean when they say "Brutalist web design" [0]. I didn't intend that when I made it, I just like my sites to match the system on which they run as much as possible and I got sick of maintaining overly complex sites, and went with"start with black text". [0] https://seanmcbeth.com https://seanmcbeth.com
- deleted 8y ago[deleted]
- rs86 8y agoFantastic stuff!!!
- deleted 8y ago[deleted]
- hestefisk 8y agoThis is plain old HTML as it was intended by W3C. It’s good to go back to first principles but no need for new nomenclatures such as “brutalist” to do that —- I find that slightly pretentious.
- thermodynthrway 8y agoI appreciate the throwback to more reasonable websites, but really these days you can get something quite good with Vue. Its not hard to get a site under 200 kb. Webassembly is bound to make sites even 2-5x smaller in the near future. The real problem is poliferation of ads and site owners that "don't care" if sites are hard to load on slow devices and connections. It's not something people really optimize for anymore. The real problem, which Google tried to "fix" with their dubious AMP program, is that search engines don't punish huge and dog slow websites. Basically every large site is optimized for ads and SEO. Something we wouldn't see if the largest search engine didn't base their business on the same. If a search engine half as good as Google appears that doesn't tolerate such trash in the search results all these slow sites will go away overnight
- anothergoogler 8y agoWhy would WASM reduce code size? WASM is quite low-level. JS has the advantage of a runtime already being present.
- thermodynthrway 8y agoIt's compiled bytecode, designed to be compact. JS is "minified" but there's limits to how far you can go. JVM and WASM bytecode is designed to use as little space as possible. Not sure about WASM but the instruction set in JVM bytecode is intentionally limited in a ton of ways to keep instruction length to 1 byte
- kowdermeister 8y ago"Webassembly is bound to make sites even 2-5x smaller in the near future." That's true if you hand code your webapp in WAST :) Otherwise there will be tons of libraries included from C++, Rust or god knows where from. So if you want to draw a few pixels, then prepare for 5 - 10x time size increases. It's not the goal of WebAssembly to replace JS and HTML/CSS.
- thermodynthrway 8y agoIt's not a goal but it will happen because the benefits are huge. JavaScript s "tree shaking" is a joke compared to a compilers ability to remove unused code. Since it's all compiled down to WASM bytecode it's possible to remove unused code no matter what the original language. Close to the holy grail
- Semiapies 8y agoThis is the first attempt (of the many attempts out there) at "brutalist" web design I've seen that seems to approach the actual ideas of brutalism.
- flycaliguy 8y agoI think brutalist web design would be different. These design elements like hyperlink styles, colours... these are not so much a representation of the cconstruction materials. They just feel like arbitrary design choices that through the power of ‘default’ become ubiquitous and so damn played out that they are offensive to the eye imho. The construction of websites these days would be revealed in visible responsive columns. Visible cookies... Visible scripts, indented into the page, modular html5 tags... Sticky nav bars are brutalist I think. Don’t they just feel brutalist? It’s the blocky additional toolbar vibe, it feels like a utilitarian UI choice. I guess what I’m trying to say is that the OP’s idea of brutalism feels a little lazy. It feels more anti-design then true to brutalism. The brutalist buildings in my city don’t feel like textfiles. They feel raw, geometric and useful.. kind of like the fan of my old PC tower... If nothing else, then for the sake of my eyes please just change your colours a bit and go to google fonts and switch it up. This isn’t Morse code. Also, there is no way a brutalist architect would put their profile picture at the base of their building.
- brianzelip 8y agoI get what you’re saying. But the OP addresses this argument, shifting attention away from code and more towards the purpose of the site: “A website's materials aren't HTML tags, CSS, or JavaScript code. Rather, they are its content and the context in which it's consumed. A website is for a visitor, using a browser, running on a computer to read, watch, listen, or perhaps to interact. A website that embraces Brutalist Web Design is raw in its focus on content, and prioritization of the website visitor.”
- betenoire 8y agosame for buildings though... You don't go to a brutalist building to experience the building. The building has the "content" you came for inside. The building houses the content. The webpage isn't the content, it also houses the content.
- kyledrake 8y agohttps://elementcss.neocities.org https://elementcss.neocities.org might qualify. I'll review. The main change I think is to underline links. Great idea! I've been hankering for simpler, cleaner web design for a while.
- slazenger_one 8y agothis is more like a guide to first principles web design -- giving it a name like brutalist web design is really needlessly complicating things. this is all great but what would be even better is if we could get some brutalist web browsers and some brutalist application layer protocols. html, javascript and css are terrible for 90 percent of the content that they are used to convey. they are bloated, too complicated, too open-ended and open the way for many security problems. also their complicated nature, mainly javascipt, makes implementing browsers too difficult which results in the current situation where there are only two browsers and neither is a reflection of what users want. for 90 percent of content on the web, we don't need a turing complete programming language or the infinite variability that is afforded by html and css. we need an application layer protocol that is designed around the discreet use-cases that have emerged now that the web is mature. once we have that we can have better browsers that benefit from competition. and once we have all that, brutalist web design might not be a waste of time.
- xor1 8y agoI like this. Kind of feels like a web page processed by Readability. Has anyone read his book?
- Theodores 8y agoAgreed on sentiments, critical discussion is important. The navigation uses anchor tags, these are identified by 'id' and not 'name', therefore not HTML5. This only works because some browsers are generous like that. The document is not complicated, there are H1 tags followed by lots of p tags in sections. There is no reason to use classes to style this content or to use a stylesheet that is 96% unused. There is also no need for a huge amount of normalise.css if you are not using forms or anything else 'tricky'. The content unstyled is still readable on some lame Internet Explorer browser, so normalise is not needed. Stuff can look different. That is allowed. For visual hierarchy those h1 tags could be h2 after the document title/heading. CSS grid would work nicely to get the white space right with a handful of lines of CSS. Such a trimmed stylesheet for this document could fit on a screen and could therefore be inlined, not externally loaded and made 20 times bigger than it should be. Actually if you look at the document outline it is all over the place. Things get nested deeper and deeper. The structure should look better than that but it gets thrown off by things like the advert in the middle making subsequent sections sub-sections of the advert according to the outline. A <nav> tag around the TOC would help with the document outline. The address tag should also be used for attribution at the bottom and the figure tag should be used for images if accessibility matters, coupled with picture and srcsets if you can magically generate them. A couple of points regarding the content of the article: I question the insistence on 'ask a designer' as I don't believe the best designers always call themselves 'designers'. Any 'ask a designer' comment is best qualified, e.g. 'ask an experienced user experience designer'. The premise of 'design for a small screen first' is a conversation that needs to be re-framed as 'design for all devices, all input methods and all orientations' rather than this wireframe for mobile and that wireframe for desktop approach. Responsive Web Design was a great idea five years ago but the game has moved on. Fluid typography, custom properties and other new HTML5 things such as CSS Grid can't be mocked up with Sketch or Adobe products. The design tools are stuck a generation behind what can be achieved, as are those that only know how to use said tools. It is fine to have that content as unordered lists and lots of sections whilst you are working on your document structure. It is no good thinking 'burger menu first'. It is as silly to working on a car engine and confining yourself to working in just the engine bay and not on the workbench guided by someone's drawing of what the car with the bonnet/hood closed looks like.
- deleted 8y ago[deleted]
- fastbmk 8y agoYou will love http://fastbmk.com/ http://fastbmk.com/ if you like Brutalist Web Design!
- aerialcombat 8y agoKeep it functional and beautiful. If you had to choose one, choose functionality over design. I believe that’s what this article is essentially saying. Bad design hurts functionality, in that case it’s better to have little to no design at all. If you can keep it functional while applying beautiful design do it by all means.
- didibus 8y agoWould wikipedia count as brutalist?
- kome 8y agoI did brutalist webdesign, before it was cool: http://mrtno.com/ http://mrtno.com/ (hire me for pure html+css wonders, no images) and I promise: it won't work on your silly smartphone!
- htor 8y agospot on article describing a cure to an illness spreading through the web designs of today. for those interested in actual examples of brutalist websites, scroll through http://brutalistwebsites.com/ http://brutalistwebsites.com/. and the obligatory http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ should be bookmarked right away!
- fredsted 8y agoI feel like the sites on http://brutalistwebsites.com/ http://brutalistwebsites.com/ aren't really what's described in the OP link, conversely they look full of redundant CSS and JS that hinders efficient reading. Now, http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ that fits very well, however.
- pickpuck 8y agoHN does not follow all these rules but I would wager it is a better experience. For example, if every link were underlined, the page would be very cluttered visually.
- deleted 8y ago[deleted]
- actionowl 8y agoSadly this site makes mo mention of the hell that is web fonts. Few things frustrate me more than loading a site, then waiting to read the content because the author thought I cared about whatever pretty fonts they wanted to use. I actually have a collection of screenshots of websites in this sad pathetic half-rendered state where you can make out where the text is supposed to be but is missing because the browser is downloading 10Mb of some font that looks barely different from the native font anyways...
- settings11 8y agoWhite sans-serif with occasional monospace, against black background is the best option, with `<meta viewport="width=device-width">`
- sebringj 8y agoThis is general good advice but isn't great advice. To explain, the 1st part is to get your message across which is really behind the good part. If you don't do that, you are missing the point so this author is stressing to only worry about point 1 which is good advice for most people as most people aren't super skilled. Great advice is to of course go with point 1 but also point 2 in that you should delight and amaze to pull them in after that point to have an emotional response. https://www.tesla.com/ https://www.tesla.com/ and https://www.magicleap.com/ https://www.magicleap.com/ are more extreme examples of point 2 as they have a stronger emotional play but most people focusing on point 1 will do just fine if that's all they ever did. Apple is probably the best example I can think of though all around in both point 1 and point 2.
- thebigspacefuck 8y agoCraigslist is a perfect example of this. I've seen a few competitors pop up like letgo on mobile but it's hard to beat Craigslist's simplicity. The downside to following this approach is that your website can end up looking like Craigslist, at least that's what this site reminds me of. It looks like CL is hiring a React and Mobile Developer, so it will be interesting to see if that leads anywhere new. Personally, I hope their site looks the same in another 20 years.
- everdev 8y agoThere are numerous Craigslist redesign projects on Behance that looks visually stunning down to the smallest details. But, I think there's something about mirroring the text-only aspect of newspaper classifieds that makes Craigslist feel familiar and appropriate. Obviously that plain text style wouldn't work for Facebook, but probably equally so a highly visual/slick look wouldn't with as well for Craigslist.
- McP 8y agoWhile I lived in Denys Lasdun's halls of residence at the University of East Anglia it was normal for complete strangers to climb through the kitchen window, as that was the easiest way to get around. I only take negative inspiration from Brutalism when I think of usability.