
Guidelines for Brutalist Web Design - andyjohnson0
https://brutalist-web.design/
======
lsiebert
"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.

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

~~~
solatic
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?

~~~
tomasduda
There's an extension for that.
[http://darkreader.org/](http://darkreader.org/)

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

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

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

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

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

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

~~~
brianzelip
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.”

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

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

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

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

~~~
nerdponx
Why do websites do this?

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

~~~
greenhatman
I've never had this problem using Vue Router.

Use router links and router pushes for all navigation.

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

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

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

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

~~~
gruez
>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

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

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

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

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

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

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

~~~
fredley
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!

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

~~~
fredley
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:

[http://www.anothermag.com/design-living/9587/the-
brutalist-b...](http://www.anothermag.com/design-living/9587/the-brutalist-
buildings-to-visit-in-paris)

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

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

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

------
matheusmoreira
Reminds 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
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?

~~~
MinusGix
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.)

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

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

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

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

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

[http://tachyons.io/](http://tachyons.io/)

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

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

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

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

~~~
thermodynthrway
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

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

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

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

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

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

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

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

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

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

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

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

------
duxup
Is this really brutalist or just ... simple?

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

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

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

~~~
repsilat
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.)

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

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

------
htor
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/](http://brutalistwebsites.com/). and the
obligatory
[http://motherfuckingwebsite.com/](http://motherfuckingwebsite.com/) should be
bookmarked right away!

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

------
robbrown451
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/](http://www.karmatics.com/aardvark/) )

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

~~~
skymt
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?

------
sebringj
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/](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.

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

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

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

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

------
kyledrake
[https://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.

------
dweekly
Relevant 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

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

~~~
LarryL
I 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
The 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
These are the exact opposite of what the original post is advocating for.

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

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

------
patkai
Could 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
Javascript is probably second only to bitcoin from a carbon footprint
standpoint.

~~~
andirk
Please elborate. Because javascript burns battery om a laptop?

~~~
thesmok
Yes, running JS takes energy. Also, transferring this extra data over the
network, running servers that process data transferred by JS (ad tracking) and
running computers used by frontend developers.

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

------
cmjqol
That 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
Skill 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).

------
djhworld
I 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!

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

------
thosakwe
This 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
I'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.

------
tropicalcream
here'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
I'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'

------
dustingetz
[http://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?

------
krzrak
Great idea, but the source of the website is in opposition to it: it's
completely unreadable one-liner.

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

------
kome
I 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!

------
k__
Lighthouse from Google can help to achieve some of the points and others not
listed.

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

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

------
Havoc
>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
The "raw concrete" etymology seems to be correct.

[https://www.wmf.org/project/british-
brutalism](https://www.wmf.org/project/british-brutalism)

~~~
Havoc
Multiple 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
> 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.

------
settings11
White sans-serif with occasional monospace, against black background is the
best option, with `<meta viewport="width=device-width">`

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

------
fastbmk
You will love [http://fastbmk.com/](http://fastbmk.com/) if you like Brutalist
Web Design!

------
hapnin
A friend's site:

[https://loveanddeathincharlottesville.com](https://loveanddeathincharlottesville.com)

------
Animats
My older sites are like this. XHTML, even. Really fast loading, because they
pull in nothing but the HTML page and their own images.

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

------
wgx
Yes! 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>

------
xor1
I like this. Kind of feels like a web page processed by Readability.

Has anyone read his book?

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

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

------
lurcio
Such a relief: basically, Safari Reader view.

------
didibus
Would wikipedia count as brutalist?

------
rs86
Fantastic stuff!!!

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

------
zebraflask
This is a gem. Love it.

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

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

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

------
leibnitz27
Twenty 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 ).

------
wgjordan
I 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
Those examples are not design related...

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

