Guidelines for Brutalist Web Design
brutalist-web.design
brutalist-web.design
That's something I'm going to keep in mind.
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.
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.
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
Are you annoyed that you just received Hackers News, which is a piece of marketing for Ycombinator?
Please don't encourage people taking advertising classes. The internet needs less marketing not more.
ugh, please justify !
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.
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.
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).
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.
https://ux.stackexchange.com/questions/93429/why-is-text-jus...
https://ux.stackexchange.com/questions/24025/should-text-on-...
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).
It’s not anyone’s job as a web designer to insist they're wrong.
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.
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.
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?
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
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.)
Old reddit is silky smooth. I really don't get it
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.
"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.
It loads very fast even on a mobile browser.
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.
On a rather fast Internet connection.
When I tried it seemed I had to type stuff into an edit field, but I‘m probably wrong.
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
It takes two mouse presses to disable the blocker for the current domain, so if something seems off it's easy to check.
It's a sad day when sites from 1995 are more usable than the newest 'dynamic' websites.
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.
“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.”
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.
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.
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).
> 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.
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).
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.
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.
Use router links and router pushes for all navigation.
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.)
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.
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.
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
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.
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.
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.
It's irresponsible.
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?
From the page source, before the Google Analytics script
<!-- yes, I know...wanna fight about it? -->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.
As someone I follow on YouTube says, lampshading your problems does not make them go away.
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 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.
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.
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.
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.
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 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.
Well at least they grow some function as opposed to the most of the contemporary web.
I find the Barbican in London — which I walk through most days — to be a very uplifting building!
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.
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.
Most all other examples just feel like dystopian nightmares.
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...
No, there are objectively terrible styles.
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.
As you can see, it’s been really great for our mental health :) [2]. I can appreciate this style of architecture from an intellectual level, but to be around these kinds of buildings daily is a little exhausting.
Sources:
[1]https://www.flickr.com/photos/ericejohnson/6344277129/in/pho...
[?] Word of mouth.
[2]https://www.princetonreview.com/college-rankings?rankings=le...
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.
Concrete and stone exteriors really go from great to horrific if they're not sealed properly.
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.
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'
I think you meant to say "Performance IS a feature." (That is what the page says as well)
The example that a long book of text downloads in a second seems to be saying the latter..
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.
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.
http://motherfuckingwebsite.com
http://bettermotherfuckingwebsite.com
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.
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?
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.)
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.
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
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.
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.
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.
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
Then when the managers ask them to speed up the site, they literally can’t do 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
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.
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
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”.
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.
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.
The sites that do the things you list are horrid because they just throw libraries at the problem.
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.
Is there any reason to switch so much? Would not switching be better? I’m not sure either way.
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
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.
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.
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.)
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.
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.
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 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/ )
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.
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").
Great idea! I've been hankering for simpler, cleaner web design for a while.
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
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...
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 .
Indeed - my copy of his "Designing Web Usability" was published in 2000, and the OP is basically a re-statement of the principles in this book.
“The term brutalism is derived from the French betón brut, meaning “raw concrete”.”
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 .
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).
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é".
"Béton_brut" referes tothe surface
A concrete building can be both "brut" and "armé" at the same time.
I suppose a weird mix of sizings is a key characteristic of brutalism though!
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.
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/.
> This is where a douchier person would write 'colophon'
Really? I would have thought it's derived from the term brutal, which predates concrete.
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.
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.
I thought it was an example belonging to the text. I had to click it to check.
Has anyone read his book?
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.
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
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.
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.
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.
But then I opened the link and was pleasantly surprised: finally a website that uses the term “brutalist” properly!
I still log all post requests. After five years I've gotten less than 10 non spam submissions to the bogus link.
$ 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);
})();
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.
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.