Hacker News new | comments | show | ask | jobs | submit login
Guidelines for Brutalist Web Design (brutalist-web.design)
728 points by andyjohnson0 10 days ago | hide | past | web | favorite | 309 comments

"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.

> Focus on your content and your visitors will enjoy you and your website. Focus on decoration

Yeah its time for that person to take a marketing class.

Despite my website having best-in-class content, it took a custom wordpress theme for people to begin taking it seriously/sharing. My conversion doubled overnight.

What's your site's topic? Is your site about sharing information or making money from one-time visitors?

Sharing information, google calories per dollar, thats the site.

It sounds like you applied styling to improve your conversion rates

> Despite my website having best-in-class content...

That's quite a claim. I'm not sure which website is your's so I can't dispute it. Personally, I frequent websites with higher quality content and avoid "gotta-sell-you-something" sites.

Also, as another commentor mentioned: > It sounds like you applied styling to improve your conversion rates

Please don't encourage people taking marketing classes. The internet needs less advertising not more.

Marketing != advertising

Call it what you want, it's all annoying to the person that received it.

This conversation is about the design of websites, which are pieces of marketing you only receive if you request one.

Are you annoyed that you just received Hackers News, which is a piece of marketing for Ycombinator?

Sites are not marketing, they are the shop itsself in most cases.

The point is that advertising is a subset of marketing, not another name for the same thing. In addition to advertising, marketing includes building websites and providing information, research to determine market demand, and determining optimal pricing.

Surely if companies all dropped their marketing budgets to 0, they will increase the profits enormously and provide way more value to their customers! They dont understand anything!!

That would be a wonderful world to live in. I can seek out the services/products I want and not have them thrust on me. Sounds like a win.

Yes, its called the 1900's, it was great.

People tried to sell just as much back then. But they were only about 2billion so the average person didnt have to wade through a swamp of thirsty advertising 24/7. Maybe the whole thing is unsustainable, maybe we can control ourselves, maybe we are better that bacteria in a closed system that multiply untill they kill themselves

"But that's the last 2 generations did things, I can't possibly imagine any other way for life to work"

Do the words "provide value" make anyone else puke in their mouth a little bit?

Who is against value??? What do you even mean??

I'm not against value, I'm against the term "provide value" because (to me, and I'm probably a huge minority in HN) it is a term loaded with capitalist meanings.

We don't talk about providing value in academia, I assume they don't talk about providing value in philanthropic organizations or political movements. Whenever I hear the term it essentially means "to make money".

I appreciate that this is my personal interpretation of this though

Good point. I will correct the above statement:

Please don't encourage people taking advertising classes. The internet needs less marketing not more.

This site does use styling to solve one specific problem: overlong lines on wide screens.

A sensible max-width and line-height can do wonders for readability, to the point that there are "reading mode" extensions that do pretty much just that.

This site has main.max-width = 34em and line-height = 1.5 which is a good choice in my opinion.

There also seems to be some nice vertical rhythm going on with the paragraph and title spacing.

This is a very good advice indeed.

> with left-aligned black text

ugh, please justify !

Please don't ever. Justified text is the hardest to read and it's meant for print anyways.

Do you have any citations for this claim? I can only find scholarly sources from the 1980s.

If it is the hardest to read, why is it used in print? What distinguishes print from electronic media that means that justification works in one place but not the other?

I would be particularly interested to read anything recent that considers legibility in print, the advent of high pixel density displays, and the impact of good justification such as that offered by microtype.

I'm slightly biased here: I believe that justification has got a bad reputation due to how badly web browsers (especially Chrome which doesn't even support hyphenation) handle it.

> What distinguishes print from electronic media that means that justification works in one place but not the other?

Browser are pretty bad typesetting engines. Word breaking doesn't work very well, they don't and can't do protrusion or expansion. The low resolution of displays means you microadjustments don't really work, because they at most slightly shift contrast from one anti-aliased edge to the opposing edge.

Justified text works very well if you're able to competently apply all those techniques (e.g. MS Word and similar document editors didn't do any of that for a long time).

Bad justification results in rivers, uneven spacing, broken edges etc.

Justification was used because people thought equal width columns looked better. Columns of text are generally unnessary in the digital world because you can have one infinitely long column.

In Grid Systems in Graphic Design (1981) the author argued against justification because he thought having spaces of different lengths between words created a poor rhythm (I will find the exact quote tomorrow).

But most publications using justification initially didn't use columns, e.g. books.

I do think multi-column layouts are sorely underutilised on the web. Modern websites make a mockery of desktop wide-screen displays where they use about a quarter of the screen and fill the rest with adverts.

Maybe I'm just a contrarian.

Don't books have 2 columns for each spread of pages? You still have the potential for there to be uneven columns.

You can use justified text, but if and only if you also use hyphenation. This way, you won't have varying widths of whitespace between each word. But hyphenation on the web is... not satisfying.

Hyphenation is technically not required. A low number of hyphenated words can be regarded as a quality metric of well justified text.

It is used in print to pack in the most letters into a single line, because the layout is fixed and words can be broken. It was simply economic to do so. Today we don't have that constraint and with tons of displays we can't be sure how the text will look fully justified.

Browsers are indeed bad at it, but we don't need fully justified text in the first place. For me personally, I prefer varying line lengths because I can easily keep track where the previous line was.



I was hoping for rigorous studies rather than opinions as I have plenty of those myself :)

Thank you for taking the time to respond, though. I had not heard the columns-as-line-separators argument before, but I'm not sure I buy it as most books are justified but do not use multiple columns.

> with tons of displays we can't be sure how the text will look fully justified.

This argument could be applied to ragged text, too. Are you saying that you can't be sure how it looks and therefore you can't justify it? The answer then seems to simply be "compute the layout on the client", as is done anyway.

There is none I'm aware of, but there are some quotes though :) I think we have justified text because of historic reason, it doesn't make much use on the web since it's a totally new medium.

> Are you saying that you can't be sure how it looks and therefore you can't justify it?

No, I'm saying it's unpredictable so we should avoid using it, while left aligned text is the default that works best in any circumstance.

”It is used in print to pack in the most letters into a single line”

Huh? I would think that, for every fully justified line there’s a left-justified one with the same content that is, at worst, equally wide, but typically less wide.

I think full justification traditionally is done for aesthetics, possibly with a bit of “look what we can do” added (it takes a better typesetter to set a line fully justified than it does to set a left-justified one with equal-sized spacing, even when both cases use kerning)

> for every fully justified line there’s a left-justified one with the same content

Justification makes sense when you can hyphenate words, that way you can pack more letters, otherwise the whole word would break into the next line.

You can hyphenate ragged lines, too. And that’s not frowned upon by typographers (at least not by all of them). https://practicaltypography.com/hyphenation.html:

”In left-aligned text, hyphenation evens the irregular right edge of the text, called the rag.”

Never justify text for the web

For accessibility it’s recommended to not justify text since it’s difficult to read for people with dyslexia.

Black text is always justified. And you can never go wrong with a pale blue background.

Please 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.

Oh look, changing the background color solves a specific problem. Just like the post you replied to mentioned.

Ultimately I'd prefer a slight tweak - for example eee/111 or similar but I'd still prefer fff/000 to the ridiculously low contrast foreground/background trend in recent years. Perfect example: https://peach-melpa.org/ - on my equipment and with my eye sight, that's literally unreadable.

Scrolling on that site on my phone is incredibly broken too

If it's really painful, make sure you lower your monitor's brightness. Basically, the white color on the monitor should be the of same brightness as a sheet of white paper near it.

At the expense of losing details in the blacks? I have some monitors where gamm adjustments only will take me so far.

Sounds like you have a cheap, low-quality monitor.

Is that relevant?

Then that's a problem that you can solve, typically with a single line in your stylesheet. Doesn't damn the concept by any means.

You'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.

If black-on-white is painful to look at, your monitor is too bright. Sadly, this is the case for the substantial majority of people, and so as web developers/designers/implementers we have to take it into account.

Laptops tend to have the ability to conveniently adjust brightness, but then everyone went with ambient light sensors, and because they’re really pretty terrible at getting it right, laptop and OS manufacturers opted for erring on the side of excessive brightness, and so laptop screens are normally somewhere between too bright and way too bright.

Desktop screens tend to be hard to adjust the brightness of, because the physical unit’s OSD approach to changing brightness is awful, and OS vendors haven’t hooked anything helpful into it for reasons that quite escape me. So most people still have their screens set at the default brightness level, which is way too bright for anything but direct sunlight.

I remember with fondness CRTs that had a physical brightness dial that you could turn. So much better than what we have now.

Phone screens… yeah, they’re normally too bright too for similar reasons to laptops. Again I criticise ambient light sensors.

I went to quite some length to get the screen brightnesses for my Windows laptop and the external displays I normally use even vaguely sane, involving obscure freeware from ten years ago and deep diving into Windows APIs; there are basically two different APIs for working with display brightnesses: laptops’ internal displays use one, and external displays use the other (the internal display is also available through the other, but it doesn’t actually work for changing brightness). Said other API which external monitors need is exposed absolutely nowhere in any UI at all. (Windows basically lies about being unable to adjust brightness of external displays in its Settings app.) Screen-brightness-adjusting keys don’t seem to be interceptable (no hooking onto XF86MonBrightnessUp and XF86MonBrightnessDown as I did on my previous, Arch Linux, laptop), so your only recourse for linking the external displays’ brightness would be detecting the internal monitor’s brightness changing and effecting. (Incidentally, the jump from 0% brightness to 10% brightness is consistently massive on LCDs; I worked around this on Linux by making a logarithmic scale wrapper around xbacklight, but I can’t fix that conveniently on this laptop.)

At present, I just type “b 0”, “b 40” or whatever into Command Prompt and it invokes a CLI-based external-screen-brightness-adjusting program.

In my home office, my external displays normally operate at 20–40% brightness during the day, though I’ve gone up to 70% on occasion before, and 0% brightness during the evening (and I’d prefer −20–−10%; most screens’ minimum brightness is unreasonably bright).

People use the brightness they use. They may have Reasons.

It’s not anyone’s job as a web designer to insist they're wrong.

They may indeed have reasons, but in the substantial majority of cases they don’t, or their reasons are badly flawed, and they would do well to reduce their brightness.

I will continue to recommend that people reduce their brightness in almost all cases. That’s my job as a friendly person.

As a web developer, though, there is little scope for insisting that they’re wrong, which is why I say we have to take most people’s badly configured monitors into account.

Lot of displays I encountered use PWM when you reduce the brightness. That causes the screen to flicker if it's not on 100% (see it yourself via a slow motion cam on you phone).

Good to know. I admit I haven’t seriously used anything but a good quality monitor for the last few years, and simple research suggests PWM is only likely to cause visible artefacts on LED backlights (TFTs are slow enough that they don’t dim completely when cycling quickly), which only became popular fairly recently, so that might account for my being unfamiliar with the probelm. Certainly there are still some types of patterns or of content which when scrolling look awful on LCDs and I understand that PWM (though I didn’t know that was the specific term) can be part of the problem there. Yet for reference, in my earlier teen years and before I always found it hard to cope with CRTs at 60Hz (it rapidly produced migraines, so I used polarising sunglasses to help; 80Hz was barely OK, 90Hz was acceptable and 120Hz which I could use on one monitor was lovely).

> It’s not anyone’s job as a web designer to insist they're wrong.

But this goes both ways. I've seen developers complain about the W3C accessibility standards on contrast because it looks too severe on their retina display full-brightness Macbook.

But the relative cost of having too much contrast (it's uncomfortable to read, but still perfectly legible) and the relative ease of fixing it (turn down your laptop brightness) is very minor when compared against the many people with crappy, low-light displays that can't adjust their brightness or fix the problem of low contrast text.

Often what people mean when they say to optimize for what people have is that they'd prefer to optimize for the highest quality devices first. But for a nontrivial number of websites and demographics, those devices are the minority, and in those situations high-contrast black-on-white text will look better on a wider variety of the devices that ordinary people are using.

I 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?

There's an extension for that. http://darkreader.org/

Some browsers (Chrome Android) don't support plugins.

Agree. Good proportion of us suffer from glare, pure white is literally painful to read. I usually reach for a dark mode just to be more pleasant. The whole premise of BWD is sound .... Content first, add bling only to solve a UX problem.

What's acceptable background/foreground color combinations that isn't painful to look at, but also not too low on contrast?

I tend toward color: #330; background: #fffff0;

Just off-black on a slightly creamy white.

May even stick with #000 for text.

Giving users ability to select a white, off-white, inverse, or solarised scheme is also useful.

See also https://contrastrebellion.com

That page is funny, I can only read the big text, the rest is too small and zooming is disabled. Message not really understood.

Most useful for the message, though I find it generally readable.

My variant:


Still too small text to read on my screen and can't zoom

Is it not computing to 16px for your screen? I feel like you must have problems on 99% of websites if 16px font does not render large enough for you to read. Heck, HackerNews renders at 10.6/12px for me.

If 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.)

Just to add to the list: the best way to access Facebook on a mobile device is "mbasic.facebook.com". It loads considerably faster than the alternatives and doesn't block you from using using the messages feature.

Facebook blocking Messages on their mobile site should be a top submission on /r/assholedesign. So obviously anti-user.

Not only that, but it works without Javascript on the desktop.

I have a throwaway account on reddit that I sometimes log in to, and it surprises me just how much worst the new reddit design is. It's so incredibly slow and seems to make my browser struggle.

Old reddit is silky smooth. I really don't get it

I was very active on reddit for the past 6 years or so, precisely because it was ugly and oldschool. Now, it feels more like a mainstream social media website. I don't know, man. Not a fan, I spend less and less time there.

If you login, hit the menu in the top right, there's an option to permanently revert to the old reddit style.

It's not just the new style, I don't like the general direction reddit is heading.

If you use an account, you can set the old style as default.

Not to mention the new design is buggy as hell.

Do you have any good resources for the light versions of websites?

I wondered the same thing. I found this: https://github.com/mdibaiee/awesome-lite-websites

A couple of days ago I threw together [a barebones extension](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.

note that the link to hackernews in this lite-site list is just a link to the normal hackernews

"... See recursion."

I use this to always redirect reddit to old.reddit.com https://github.com/tom-james-watson/old-reddit-redirect

A related tip for mobile users is Firefox Focus. It is a variant of Firefox that does the following:

"The new Firefox Focus automatically blocks a wide range of online trackers—from the moment you launch it to the second you leave it. Easily erase your history, passwords and cookies, so you won’t get followed by things like unwanted ads."

I.e. it has the aforementioned extensions built-in, and is a small binary. It's also light-weight in the sense that it has very limited support for broswer tabs—prevents you from mindlessly opening a ton of them.


Same for https://mobile.twitter.com/

It loads very fast even on a mobile browser.

Twitter recently added a huge amount of Javascript to it. On my computer, it's even slower than the desktop site.

Asks me to sign up or login with an annoying pop over every time I navigate. It isn't making me want to sign up if it's going to prevent me reading public threads.

Quota prevented me from reading the rest of a post yesterday too. Wouldn't let me continue without installing their app.

If they made consuming the content enjoyable without annoying me, I may login to contribute where I feel I can. Otherwise the desperation to track just turns me away.

Just browse Twitter with Javascript turned off. It asks you if you want to visit the "legacy" site.

Twitter is one of the slowest sites I encounter on a daily basis, using an old iPad 4.

On a rather fast Internet connection.

Especially when it's loading full-screen overlay interstitial nags.

You might like i.reddit.com.

I've created an embarassingly large number of Stylus CSS styles to tweak, or sledgehammer, site styling.

Doesnt uMatrix use the uBlock origin list? Why have both?

Umatrix gives semi granular control over individual classes of loaded assets sorted by class and source.

Isn't this what uBlock Origin's dynamic mode do?

uBlock does has the same if you enable advanced mode in the settings. IIRC it's based on uMatrix heavily.

To answer your point directly, no. uMatrix can block entire (sub)domains, but it does not import ad and tracking lists to block individual scripts. Therefore, both are needed, because most of the time you want ads and tracking to be automatically blocked, and sometimes you need precise control over what content from each domain is allowed. Different tools for different purposes.

I like to use uBlock Origin's element picker to remove parts of websites that I don't want to look at. I don't think uMatrix can do that, although it covers the most basic adblocker functionality.

Yeah, once you start using cosmetic filtering you wonder how you ever lived without it. I love killing "related article" panels in particular.

How do you make that persist?

When I tried it seemed I had to type stuff into an edit field, but I‘m probably wrong.

The lightning bolt "zapper mode" does not persist by design. The eye-dropper "element picker mode" persists.

You right click an element, select block element, in the dialogue that opens, you select pick, click on the element you want gone permanently, preview how the site will look and then click create.

Are those rules site/domain specific or do I have to be careful blocking #ads?

They're added as domain-specific if you use the element picker, but they don't have to be. They show up in the extension's control panel.

Using the element picker to block HN's footer generates a rule like this:

  ! 7/8/2018, 6:33:00 PM https://news.ycombinator.com/news
  news.ycombinator.com###hnmain > tbody > tr:nth-of-type(4) > td
The first line is just a comment informing you when and where you added it.

It takes two mouse presses to disable the blocker for the current domain, so if something seems off it's easy to check.

wow I must have selected an option somewhere to not have reddit's new design because it still loads the old version for me!

Try: https://www.reddit.com/r/hackernews.compact

It's a sad day when sites from 1995 are more usable than the newest 'dynamic' websites.

The lack of contrast between text and background + small font sizes make that a pain to read on my computer.

I 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.

I 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.”

same 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.

> 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.

The 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.

The 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.

in 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).

Screen readers are an exception, 99.9% of use (probably more) will be through looking at the page.

> that style is a layer that can be disabled

It cannot be disabled, only changed. By "removing" the author's style you are replacing it with the default style sheet included in your browser, if you remove the default style sheet you are using the default values for all the css properties built into the rendering engine of your browser when it was compiled. Even if you put the source code in your text editor instead, you are now using your editor and terminal styles instead.

My point is: in order to view text - it must be rendered, if it is rendered - it has a style, this is why the visually element is also a functional one, you cannot escape that unless you read text without your eyes.

I've done a fair amount of building architecture and design, as well as brochure and catalog design. I do frontend development now. These are my takeaways

Every building has more or less the same requirements - you have a given space, you need X items to fill that space that meet functional Y requirements, etc. Doesn't really matter what you are doing its all the same really. You find the interior design aesthetic that works for your consumer after laying out the foundational "functional" aspects of the building. E.g. where are the toilets, where is the entrance, where are the exits, how large of a space should each tenant want, open or closed design, etc. You understand the user requirements and what the long term vision is for the site.

Catalog, brochure, and book design preceded webdesign. I learned to appreciate the beauty of typography by understanding what problems people dealt with before the web. How do you manage to fit content with high density into a 8.5"x11" page or A4 size? What is the minimal font an average 18-30 year old can read VS someone who has deteriorating eyesight? Which font types work best in typography (Helvetica, times new roman, etc). Which font-types has the best information density per line-length (Arial Narrow)? What is the optimal line length and word count for a single paragraph line (its about 10-15). How many sentences should be in a paragraph for optimal readability? Which fonts have the highest density information in fractional fonts (Calibri). What is the leading typography research used in the past (NASA). 3 hole punch saddle stitch, what should your margins be, what font-size ratios for header tags vs subheaders vs paragraphs, text-justifications, etc. How will the page look with 2 pages side by side in a brochure, do they complmenet each other, etc.

I learned all this above by taking the top 100 catalogs of every industry I could find, getting these books, taking a font ruler like this one https://www.amazon.com/Westcott-Graphic-Arts-Ruler-GA-86/dp/..., and overlaying it on top. Its extremely surprising how different companies handle things like color choices for certain categories, trimming, etc. You can also analyze these same principles sometimes even on their website, both good and bad. You can see a huge disparity difference in this by getting a McMasterCarr/Grainger catalog and comparing it to a fashion catalog.

Webdesign is the same thing really. Actually I still apply many of the same principlces I learned from catalog design. I still put font-rulers onto my screen, measure things out with rulers, even though I have many chrome extensions / chrome debugger for handling this.

When I read things things talking about responsive webdesign, I am reminded that it doesn't really matter what you set your breakpoints at. No mobile manufacturer is going to make a new device below 320px width wide, not many people will care about a site that supports 4K resolution because the human eye has its limitations, etc. People simply aren't going to care about phablets past a certain sizes since it won't fit naturally in most peoples hands.

Breakpoints, I just use bootstrap's 4 breakpoint guidelines with some additions and a grand total of 3 sass mixins for responsive media queries. (320px, 576px, 768px, 992px, 1200px, 1400px, 1600px)

Semantic HTML is like building lego blocks. A webpage is just a bunch of legos. We call this the DOM. Your body tag, html tag, section, etc. You can build the same website with different legos, but at the end of the day you'll favor some over others.

Brutalist design to me is just thinking of content first and the purpose of the site over everything else first. Sometimes this is referred to as "progressive design".


- Don't use JS if CSS can do the job just fine. If you do use JS over CSS, have a good reason why (e.g. favoring simple jQuery statements over css "hacks" like clearfixes / checkboxes / special states)

- Don't use an SPA like react if you don't have complex UI needs or need state management

- HTML should be semantically pretty. You should be able to understand how a site is organized purely by grokking its HTML and class names. Don't have crazy amounts of ID's, if you use multiple classes for an element, have a good reason why (state modifiers).

- Organize things using some CSS methodology (BEM, SMACSS, etc) or combination thereof. Especially if you have 2000+ lines of scss code to work with. Personally I just name things that can be interpreted in very few ways and use BEM for complex nested components.

- If you pick a css framework it has its pros/cons (e.g. bootstrap, bulma). More bloated things to load, easier to get off the around with multiple people working on it (e.g. its opinionated), but harder to reason / modify later. Personally I just make my own versions of things like bootstrap containers, etc.

- Don't overnest your SCSS code past 3 levels deep.

- Use a HTML preprocessor like Jade/pug for websites that favor heavily on many unique HTML page layouts. Its much easier to reason about.


- Design your content first. E.g. If you aren't using an SPA approach, write your HTML first, some CSS, your JS, and then reiterate until you are finished.

- Pick older more established technologies over new shiny tech. You'll find far more resources on blogs and stackoverflow for potential errors you encounter. e.g. startups using ruby on rails.

- Use CSS flexbox whenever possible, ignoring IE11 users because its eventually going to be adopted. Unless you have good reason not too (e.g. developing for government sector, etc).

- Develop in isolated environments for webcomponents (e.g. codepen) so you can reuse it in any project

- Don't waste your time reinventing the wheel unless you have good reason to. E.g. understanding a concept, making a better variant of that library, etc.

- Don't do UX research if you don't have to. Chances are someone else has done the research already for you and published it already. Look at competitors. Use that. This includes things like good webdesign practices, optimal webfonts and families (e.g. roboto), etc.

- Look outward for inspiration in webdesign, and keep a catalog of that somewhere with whatever tool you use (bookmarks, etc). I have a number of systems for doing this depending on each platform I'm on.

- Don't bother wasting too much time invested in one particular languages quirks unless your job demands it, rather understand the underlying principles (computer science, math, design patterns, UX functionality, etc) of what you are doing.


- Use color psychology/theory and color gradients to achieve desired effects. Some colors do not work well with others, using certain colors limits your overall pallete selection. Ideally have less than 4 colors stlyizing your website. For instance, if you use red as a primary, you will automatically most likely be using grey and black as support colors. Think of well established brands like cocacola for inspiration, etc.

- Use HSL colors over RGB or Hex since its designed to be human relatable.

- Use CSS Tools for designing more complex web frontend components. These include box shadows, buttons, textures, etc.

- Don't worry about EM vs REM vs PX this can always be changed down the road for handling impaired users / zooming in effects. If you designed your webpage well with highly readable fonts and sizes, you might not need to do much here anyhow.

- Consider using an image over some complex HTML/CSS component. Instead of building a shopping cart button for instance, load a single image background on a div for an ecommerce site. Other things this would include are global banners and banner buttons.

- Keep it simple stupid (KISS)

- Consider the takt time of how long it takes a user to do simple common tasks for an SPA. E.g. in ecommerce, how long would it take a person to add an item to cart and checkout. How long would it take to look up a specsheet. When you scroll down the page would you as a user get confused by the design for doing common tasks? Most of this is common sense, but you could still benefit from doing UX research.

- Your first performance bottleneck you should consider is images, not the sizes of libraries you are loading in. Learn how to use CSS sprites for instance, and use tools to streamline it.


Basically brutalist design to me is building the crappiest version possible that meets your projects / user requirements (rapid prototyping). Then building iterations on top of it until it looks unique and pretty. Because good UX and aesthetics should still be achieved in the end, but if and only if the building blocks are in place already.

Performance is important but past a certain point it just doesn't matter. Really brutalist design IMO just derives alot of its philosophies from LEAN-based design which is an industrial engineering philosophy. Building an actual product with nice ergonomics is not that much different than shipping out a nice UX frontend. But you need the engineering (circuit board design, CAD model) much like you do in webdesign (organize css code, SPA, libraries, backend, etc).

As 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.

If 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.

The designer is were probably rewarded for what they did.

Why do websites do this?

Breaking the back button is an unfortunate consequence of SPA (single page application) frameworks like React. You'd be amazed at just how easy it is to do. Put a junior on a feature and unless there's process in place to look for back button breakage, it can easily find its way into production. Even if you have QA resources, browser history management is not going to be within their wheelhouse so all they can do is note that it's happening and maybe they can give you a rough idea of which feature caused it.

Essentially, SPA architecture replace page loads with changing the DOM directly. Changes to the DOM don't change browser history unless you tell it to. Breakage can happen in two ways. First you can change things without updating browser history, or you can make changes that update history without actually changing the page. Both break the natural flow of the back and forward buttons.

The easy answer is to tell devs to just make new page loads when necessary, but apps can complicate to the point where page loads mean a great deal of reloading stuff. Then the next answer given to devs is to not load lots of stuff, but loading lots of stuff is often dictated by business needs and is over the devs' heads. Good luck moralizing on business people.

Once I saw how often such breakage slipped into the web app that I work on, I got a lot more patient with other websites. It's actually a really hard problem that I'd put right up there with cache invalidation and naming things. There's no established doctrine for browser history management.

> I got a lot more patient with other websites. It's actually a really hard problem

Definitely true in my experience. If I go to a page which contains an image from a web cam and a slider or links or butttons with times, I want to be able to click around on times and see the image from that time -- but I don't want to have to backtrack through all times I have viewed to go back to the previous page.

I guess what I'm saying is that it's hard to nail down what a "location" is in terms of UX. If the context is roughly the same, with only minor elements of the page change, I expect to be able to bookmark that view, but my back button should take me farther back.

And I suspect this is different for every user.

I've never had this problem using Vue Router.

Use router links and router pushes for all navigation.

There's middleware that links the history API to redux/mobx state changes. It's a one line fix for certain apps and a curse for others.

See how Ember does it..

You built something and then realize that it breaks if the user presses the back button so instead of fixing the original design you try to change the behavior of the back button.

Imagine a site where we load a list of blog articles with pagination, now I go to page 2 which fetches the API again. Now handling the back button is really hard here.

Do generate more onsite activity. If you leave the site the site doesn't make money off you. It's generally a way to generate mostly fake ad impressions to rip off advertisers.

As much as I want to share your cynicism, I doubt this keeps anyone on a given website for more than a few extra seconds.

This 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.)

Yes 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.

Agreed. My only assertion was that the position was over stated. Not that I disagreed with it. :)

We 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.

That's one of the reasons why so many mobile users prefer to get their news through Facebook now: the articles simply load faster.

Faster, 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.

Apple 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.

The 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.

Photographs can be scaled and compressed. The source of most megabytes visiting a website eats is the stylesheets and the JS the site itself loads, and then what these in turn load from third parties for tracking, analytics, ads, &c, and the constant communication all these scripts do with numerous servers. For most big sites, watching the network connection log using the developer tools is an enlightening experience.

While 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.

>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

For me though, if you are going to make a site all about how hardcore your design style is... So hardcore that you can’t be bothered to at least choose some less painful colours and typography. Then I want to open your code and get a hardcore hacker vibe like it was made with a punch card or something.

This article isn’t really about code design. It’s about information and interaction design primarily. The audience the author was writing for is probably more focused on the design rather than code.

With that said, this site is open source and so the community could help it become a example of cleaner/clearer/more minimal coding practices too.

Brutalism was about the honest use of materials. In my opinion, any conversation extending that to web pages that doesn't talk about how they're built ignores the spirit of that for another punch take at "use big text."

Oops! I missed it. S3 ain't that slow for my site tho...

But as for #4, I'm inclined to say if you can't do something with at least a modicum of effort towards user safety, you shouldn't do it at all.

How is your “safety” being harmed. Really. What is the actual harm from gaug.es? Have you ever used it?

Share the story please of a single person, anywhere at any time that suffered a harm because of gaug.es.

We throw terms like “safety” around so much that they lose their meaning. There are sites (especially news orgs) that do harmful things when it comes to tracking, retargeting and such. But some little site that wants some basic analytics? Come now. That’s comparing a lemonade stand with a Tesco.

Every such site is a potential component in a combination attack against my system. They aren't publicly audited, I don't have a privacy agreement in them. I have no way of knowing if their ownership changes hands, and the authors are doing noting to assert it doesn't become malware.

It's irresponsible.

The number of supposedly minimalist websites that still use 3rd party trackers is surprising to me.

Even http://motherfuckingwebsite.com/ loads Google Analytics. It's like, I get it. Responsible tracking is often useful. But so is NPM.

If the entire point of your website is to satirically get across that overengineering creates its own problems, if the whole point is that content doesn't strictly speaking need the other stuff we attach to it, that it literally just needs a text editor and an ftp server, that everything we do has tradeoffs and that the default state of the web is performant and responsive and readable -

then maybe that's the one scenario where it might be good to skip including analytics?

> Even http://motherfuckingwebsite.com/ loads Google Analytics.

From the page source, before the Google Analytics script

  <!-- yes, I know...wanna fight about it? -->

Ugh, they always try to pull this trick too.

Joking about it doesn't make it any less ridiculous that the builder couldn't turn off whatever analytics addiction they have for the single site that is literally about not including extra stuff. If they had rendered the entire page in React and downloaded 3 MB of web fonts, sticking <!-- yes, I know --> in a comment wouldn't make me less annoyed at them.

How hard can it be to commit to the bit for one single page?

Then they can go back to their blog or whatever and load whatever extra stuff they want.

I agree 100%, it's a pretty crappy form of deflection. At the very least, they could at least outline their reasoning for it rather than throwing in a glib comment.

Ah, the old 'lampshade our mistakes/bad decisions and hope that makes them okay' trick. It's super common in both web development and media to be honest, and I can't even count the number of TV shows, books, games and other works that think being 'meta' makes up for bad writing, lazy characterisation or deus ex machina esque conclusions.

As someone I follow on YouTube says, lampshading your problems does not make them go away.

> 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.

I knew it was just a matter of time before the top comment is something disparaging about the story which was already disparaging about typical modern web design. And this comment beats them all because its disparaging about that comment.

I dont know why people on hacker news have to one up each other all the time. Sometimes you just gotta let something be what it is.

On the contrary, THIS comment one ups YOUR comment by both disagreeing and proposing the opposite of what you said as a thought experiment. Further, I propose that all the above opinions are equally wrong and right, both absolutely and relatively. I for one, am one that begins my sentences with, "I for one." You have no option but to agree.

Now, if someone could wrap this up with an anecdote about working with a famous air-headed media icon or esoteric master of a mundane, niche talent that makes them sound sophisticated, we can call this a thread.

Farewell, netizens. I bid you...(flourishing bow)... adieu.

I will 100% find reasons to be mad about sites with tracking bits on them. It could literally explain how to reliably become immortal and I'd say, "And now we can live for eternity under the grip of our gaug.es overlords."

But for what it's worth, you're a better web programmer than I am. I mistook the long loading time for dynamica but it's just S3 being it's usual awful self. Clearly I haven't looked at these numbers enough.

It could literally explain how to reliably become immortal

Then, like Bowerick Wowbagger, you could travel from internet forum to internet forum indefinitely and yell at everyone who has a tracker on their site. In alphabetical order.

The 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.

I 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.

Brutalism 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.

Ironically physical brutalism often fails because of poor usability and discomfort, while the brutalist web design manages to be faster and more accessible than whatever the conventional (baroque?) style is.

I think we all benefit from a little bit of useless ornament. Unadorned brut concrete rapidly becomes so ugly that some buildings became notorious suicide spots.

> Unadorned brut concrete rapidly becomes so ugly that some buildings became notorious suicide spots.

Well at least they grow some function as opposed to the most of the contemporary web.

Like any school of archeticture, there are good examples and bad. Largely, over time, only the good examples survive. The older the school, the higher percentage of it will be good, surviving examples.

I find the Barbican in London — which I walk through most days — to be a very uplifting building!

Something that I think the Barbican does well, and The National Theatre (another London brutalist building) also does well, is interesting interior spaces - openess, multi-levels, "floating" staircases, interior views, visible structural elements etc. I find both of these spaces energising and interesting to be in.

Other brutalist buildings are just horid. I worked in Sampson House (just behind Tate Modern) for a couple of years which is also brutalist but the interior is dank corridors and dingy spaces. I also worked at the brutalist IBM offices next door to the National Theatre and it was also a souless space inside. They have absolutely zero-ambition and are the polar opposite of the spaces at the Barbican and National Theatre.

I don’t like brutalist and I don’t like the Barbican. For me, brutalist architecture is defined by an extraordinary level of arrogance and disregard for well established design.

When I was last at the Barbican I found it very hard to navigate, and I was relieved to be told by the staff there about the many “alterations” they’ve had to make to try to make the building less confusing and alien.

I was just about to say that the Barbican is probably one of the few Brutalist designs that is actually aesthetically appealing (to me).

Most all other examples just feel like dystopian nightmares.

Partly this is because the Barbican is exceptionally well kept (much brutalist architecture is associated with slum estates, whereas the Barbican is mostly inhabited by richer people). The concrete is clean, the ponds and fountains are working, the balconies overflow with plants.

There are many exceptional examples of brutalist architecture in Paris, some well kept, some not so much:


> Like any school of archeticture, there are good examples and bad.

No, there are objectively terrible styles.

The Barbican is notable as a rare not-horrifyingly-ugly brutalist building, but that doesn't make it good on an absolute scale.

I dunno... the Yale Art & Architecture building is a classic early example of brutalism, and I've never been in a space that felt more open to creativity or so honest... it was a revelation the first time I stepped inside of it. I looked forward to classes there because it felt uplifting for my soul, and deeply envied architecture students who got to use it as their workspace, its spirit was so perfect.

Of course I'm sure brutalism can be done badly too (like anything), and I haven't spent time on the inside of too many others... but there can be something profound about it -- a modern building in balance that tries to be exactly what it is, no more, no less.

The problem I think is not so much the brut as the béton. I don't find concrete to be a wonderful material, aesthetically speaking. Even when you take into account the fact that it can be formed and poured into almost any shape. But the philosophy of minimalism/honesty/unity captures some very sound principles.

IDK, brutalist architecture is great when done right.

I’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.



[?] Word of mouth.


>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.

Architecture is like high fashion -- what architects celebrate is not what's good for users, but what's fun in their art shows. Architecture-as-art uses human environments as their canvas instead of as their goal. Architecture award-winning is usually the opposite of what architecture users consider "done right".

I feel like this is a perfect example of how correlation isn't necessarily causation.

Sometimes it works. Sadly brutalism also took a big hit when a lot of the concrete structures weren't properly treated and the outside deteriorated.

Concrete and stone exteriors really go from great to horrific if they're not sealed properly.

Even so, concrete is unmaintanable and unmodifiable. That's why (self-absorbed) architects love it -- it's a sculpture or "walled garden" (with emphasis on the "wall") where the prole users can't interfere with the architect's art project by making the building usable for their own needs.

It's possible to slap a new facade on a concrete building, or expand it by building around it/enclosing it.

its been a trend since forever on this site

I'm surprised that so many folks here (obv not everyone) have so readily accepted the word "brutalist" to apparently mean "simple, functional, and minimal", because that's definitely NOT what brutalism entails in the architectural world!

I really like a lot of brutalist architecture, but much of it is far LESS functional/useful/practical than other styles. Brutalism was an aesthetic, largely a reaction to existing forms--many of which were characterized by their utility! A lot of brutalist architects were rebelling against the bourgeois notion of a building as merely (as they saw it) "a place intended for humans to live, work, and play", and instead asserting the notion of a building as an artistic form in its own right, which often meant intentionally disregarding or downplaying the importance of the building's utility for the humans who interacted with it! Anyone who has lived or worked in a brutalist building can aver this truth: if the building served its function w/r/t humans, it was often DESPITE its artistic intentions, which prioritized almost everything else instead.

Great read. This could have just as well been titled "Guidelines for Web Design That Respects The User" or "Web Design that Doesn't Suck"


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'

> 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)

Performance 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.

Agreed. It’s like advertising that a car has an engine and goes faster than walking. Having an engine isn’t a feature, it’s the the essence of what makes a car, a car.

I 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..

> 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.

It's saying that low TTI is an emergent property of this style.

You are right, sorry. When I first read it I internalized it as meaning to say that Performance is not an extra feature that you tack on to an existing web app (like you would implement say an offline mode as part of an update) but rather something that needs to be considered from the ground up right in the design stage. But I can see how putting it this way could be confusing.

All of this can be achieved without looking like a text file. This form of brutalism feels like a reaction to BAD design. Step into the world of good design, which does exist, and suddenly these points and much more is being addressed in UX and UI design.

>A website is not an application or a video game. It is for content, and so its design must serve that purpose.

Apparently it could also be titled "Guidelines to make the web great again" or "Guidelines for blogs in 1995" for all the relevance to modern web design.

I appreciate the analogy to architecture. Specific words are useful. You can communicate more information succinctly by labeling something skeuomorphic, brutalist, material, etc.

If web-brutalist just means "usable", adding a new misleading word that means raw / concrete is not useful; it's... anti-brutalist

Then it would be a user experience theme, not a design style.

Reminds me of:




> Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.

Always puts a smile on my face.

I 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?

The 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.)

> 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.

My favorite is the second one. Those 7 declarations really do improve the site. I think the last site is somewhat excessive but still small compared to most mainstream websites today.

I made this on behalf of family on last Friday.


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.


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.

> 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.

That's a myth, based on a coincidence of the words and the post-hoc fact that people found concrete to be ugly.

Tachyons, the CSS component library he used, has a fucking gorgeous website.


See, 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.

Upon second look, I might agree with you. At least on mobile, I'm only really fond of the yellow section.

http://www.elementscss.com/ seems very appropriate.

I 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

I’m just baffled by this, there are many high profile sites that barely work on the misc mobile browsers I use. I avoid them, obviously. I can’t be the only one. The only thing I can think of is that due to business demands, and code cruft, the developers just “make things work” on their desktop.

Then when the managers ask them to speed up the site, they literally can’t do it.

I've worked at plenty of places like this. Sales team wants another analytics WordPress plugin because they barely know how to login to the tools we already have. Slows down page loads by 50%. Sales team complains they they will lose sales, developers told to make the plugin faster because we need it.

Try to load the plugin async and run the hairball through closure compiler. Now only slows down site by 30%. Sales team happy, development manager happy. Cue a repeat in a month

"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.

It'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

Why would WASM reduce code size? WASM is quite low-level. JS has the advantage of a runtime already being present.

It'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

If 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”.

The "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

JS 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.

Only for sites whose primary purpose is text content delivery. Which isn't really the majority of useful sites these days.

The 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.

>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.

> 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

That's 99% of marketing: figure out a thing that nobody really needs, figure out a way to make them think they need it, then sell it to them at a ridiculous price.

Two 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.

1. 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.

This 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.

None 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.

This 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.

this 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.

I 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.

Is this really brutalist or just ... simple?

In 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

I 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.

Maybe a good example would be a "site" / server you have to visit with Postman ;)

Gotta call them something unpleasant, so they don't have the same fate of "minimalism" a couple years ago.

When 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!

Craigslist 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.

There 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.

I 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.

Nobody 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.)

Web apps ignoring these types of conventions are fine, but the key issue is that a lot of sites aren't web apps/don't need to be web apps yet are built like they are regardless.

For example, your average news site. So many of them are built as single page applications with JavaScript frameworks like React or Angular, and for what purpose? None. At their core, they're basically blogs. They would work much better with traditional server side rendering and standard page loads and what not.

Same with stuff like Reddit. At it's core, its just a set of forums, with the vote button and a few other minor aspects being the only thing that could possibly benefit from JavaScript. Same with Wikia, which seems to have forgotten its a wiki host and not an application platform.

And the list goes on and on. Why? Probably because either the management team like to think they're 'on the forefront of web technology', ala Google or because the developers wish they were working for Google/Facebook/whatever.

Many sites really are seriously overdesigned and over engineered.

The 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.

spot 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/. and the obligatory http://motherfuckingwebsite.com/ should be bookmarked right away!

I feel like the sites on 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/ that fits very well, however.

I 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/ )

The 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.

Do 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?

This 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/ and 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.

Yes. 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").

That'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.

It seems like a any particular fad in UI design has just enough time to get well-defined before it goes out of fashion.

I 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...

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact