Brutalist redesigns
June 2, 2017 9:27 AM   Subscribe

Are your apps too cute and colorful? Do you hate buttons with pictures on them instead of words? Do curved corners make your eyes hurt? Good news: designer Pierre Buttin has taken popular smartphone apps and given them brutalist redesigns. Except Instagram, of which Buttin says, "I felt there was almost nothing I can do to make it look more brutal – so I did nothing". (via kottke.org)
posted by Etrigan (68 comments total) 16 users marked this as a favorite
 
Most of those are better than the original.

I am old and hate everything.
posted by Seamus at 9:34 AM on June 2, 2017 [12 favorites]


The Candy Crush version is utterly delightful.

I genuinely prefer the brutalist version of Google Maps over the current version.
posted by XtinaS at 9:38 AM on June 2, 2017 [2 favorites]


Guys, guys, guys, guys.

Brutalist means "raw"
posted by bleep at 9:42 AM on June 2, 2017 [18 favorites]


These basically just look like the wireframes for the sites.
posted by Artw at 9:44 AM on June 2, 2017 [8 favorites]


(I was hoping for something more in line with brutalist architecture)
posted by Artw at 9:45 AM on June 2, 2017 [39 favorites]


Oddly, I like these. They're clean-cut and comprehensible. They remind me of that website, I've forgotten where it is, where kids and teenagers made their very first and extremely basic games and uploaded them as freeware.

You can tell it's not brutalist architecture because there aren't any long green dripping wet streaks across the screen and the apps don't create odd wind tunnels and crossbreezes across your phone.
posted by Countess Elena at 9:47 AM on June 2, 2017 [31 favorites]


The actual designs are a real mixed bag for me—some seem like they work well, some look good to me, some both or neither—but I dig the endeavor. I'd say in a couple cases there's what feels like a significant step backward in actual usability in service of the conceit, and the decision to for e.g. Tinder just throw away the implied language of swipe gestures feels silly, but still, interesting.

Far too much unnecessary reduction in font size, though. Whatever else contemporary UI design has going on, making text readable for non-laser-eyed people is an obvious design win. It'd be possible I think to otherwise go for the spartan, blunt look they're after without dropping 40% of the point size on already small text.
posted by cortex at 9:49 AM on June 2, 2017 [8 favorites]


Hmmm. Despite being a huge fan of brutalist architecture and writing this in a fixed-width font text editor running in a terminal on a minimalist, undecorated window manager. . . I don't get it. In every way that matters, the brutalist versions seem indistinguishable from the originals, but with slightly more bounding box errors. I feel like this is something I should like, but it's clear I have no idea what brutalism means in this context.

The only real change seems to be replacing icons with text and curves with rectangles and box outlines, yet instagram's field of incomprehensible icons, cursive-font branding, and curved-everything gets a pass? Is this subtle joke of some kind about how non-brutalist instagram is?
posted by eotvos at 9:52 AM on June 2, 2017 [17 favorites]


Either this is a joke about not getting it or how we are beyond not getting it o
posted by hawthorne at 9:52 AM on June 2, 2017 [1 favorite]


I'll bite.

This guy has a particular aesthetic, and appropriated the name of a completely unrelated thing to describe it.

I'm actually a fan of most of the redesigns, but only because I happen to prefer information-dense UIs with a high-contrast color palette, but I don't really appreciate the lack of thought, introspection, or analysis that went into the process.

He jokingly calls the redesigns "ugly," even though I'd imagine that most people here prefer them (particularly given that many of the redesigns do a better job of conforming to well-established design principles when it comes to spacing, colors, etc).

I'd be interested to see some kind of reflection about why the redesigns work better, and what goals they are trying to achieve (aesthetics, legibility, information density, etc). I personally can't stand the gratuitous waste/overuse of negative space in modern, "mobile-inspired" UIs (so, I clearly prefer the square icons in the GMail mockup, for instance), but also recognize that some of the aesthetically-pleasing changes made in the redesigns significantly reduced text sizes, which could be a problem for some users with vision difficulties, and may reduce overall legibility.

Exposing "hidden" UI elements (as in the Tinder redesign) could help some users with cognitive or motor difficulties. On the other hand, replacing iconography with text would be absolute hell for users who are dyslexic, or aren't fluent in the language being used in the UI.

Basically, I don't appreciate that we're reinterpreting the work of UI designers without even attempting to understand the process or needs that led to the original result.
posted by schmod at 9:55 AM on June 2, 2017 [19 favorites]


If they were truly Brutalist, these re-designs would be barely visible on an underlit 0.5-inch display screen.
posted by The Card Cheat at 9:57 AM on June 2, 2017 [4 favorites]


Google is gorgeous. Amazon is amusingly similar (except so much blue! What's up with that blue?). Tinder looks the most user-hostile, IMO.
posted by R a c h e l at 10:00 AM on June 2, 2017


I was hoping they were going to redesign famous buildings in a brutalist architectural style. Now I just want to see a brutalist Chrysler Tower, or Taj Mahal!
posted by HakaiMagazine at 10:00 AM on June 2, 2017 [3 favorites]


Brutalist means "raw"

No, raw is "brut"

I'd actually like to see art brut redesigns of apps...
posted by mr_roboto at 10:01 AM on June 2, 2017 [1 favorite]


Get this experience for the whole of the web by simply turning off CSS.
posted by Artw at 10:01 AM on June 2, 2017 [9 favorites]


One of my pet peeves, this misunderstanding of brutalism.

Want to see a real brutalist version of mefi, in the original sense of showing the raw materials instead of covering them with fancy finishes? Turn off CSS in your browser.

Even better, right click and view source.

Sometimes user interfaces are so bad I dream of a world where all apps had command line APIs, just manually set some vars and get some serialized output.
posted by Dr. Curare at 10:03 AM on June 2, 2017 [15 favorites]


Artw you type too quickly
posted by Dr. Curare at 10:03 AM on June 2, 2017 [2 favorites]


Today I learned brutalism means drawing outlines around everything. Brutalism is Excelent!
posted by straight at 10:09 AM on June 2, 2017 [7 favorites]


Making the fonts smaller and harder to read is a design failure. It makes these less usable for people with moderate vision impairment - they're harder for me to use because I have vision that isn't super duper even with strong lenses, and they would be impossible for my mother, who has glaucoma and some other vision problems. Many people with visions issues are capable of reading text - that is, we don't need or prefer text readers - and want to interact with the web that way.

I would argue that making things lower-contrast and full of finer lines is also a design failure, because those things too make the apps harder to use if you have vision difficulties.

Many of these made me realize why some contemporary design norms exist - they're not just aesthetic choices.
posted by Frowner at 10:10 AM on June 2, 2017 [5 favorites]


Get this experience for the whole of the web by simply turning off CSS.

And designing layout with tables ...

Back to 1997!
posted by life moves pretty fast at 10:13 AM on June 2, 2017 [5 favorites]


This post made me appreciate modern internet graphic design in a way I didn't think was possible. These all look like webpages from 1997 but with smaller fonts and even more outlines.

I'm not sure how this is "brutalist". I'm no art historian, but wouldn't a brutalist website be a directory listing with raw text files and image files?
posted by demiurge at 10:16 AM on June 2, 2017 [1 favorite]


I was actually thinking HyperCard, though HyperCard tends to have a simple beauty that these lack.
posted by Artw at 10:16 AM on June 2, 2017 [8 favorites]


I too don't understand why he didn't change all the obvious elements on Instagram. Is this whole thing just some elaborate Instagram shade-throwing?
posted by ejs at 10:17 AM on June 2, 2017


I don't know anything about Brutalism (like is that the right word?) but I like that he captured the essence of Twitter: a redesign no one asked for that makes it less usable.
posted by Emmy Rae at 10:17 AM on June 2, 2017 [7 favorites]




. . . have we got a video?
 
posted by Herodios at 10:18 AM on June 2, 2017 [2 favorites]


ejs - whatever gets us to Emmy Rae's comment.
posted by Artw at 10:18 AM on June 2, 2017 [2 favorites]


Yeah, color me disappointed, was expecting vast expanses of brushed concrete. I can forgive the confusion in casual speech but a UI/designer type should know better -- as said above, this has little to nothing to do with Brutalism as used in architecture or art history.

Also IMO these are just not very interesting. E.g. the Amazon one just has a changed logo, a few extra words, and for some reason blue outlines. I'm not sure what I'm supposed to gain from this. I guess he doesn't like that shade of blue?
posted by SaltySalticid at 10:20 AM on June 2, 2017 [4 favorites]


YES WE'VE GOT A VIDEO!!!!
posted by XtinaS at 10:21 AM on June 2, 2017 [3 favorites]


I feel that Netflix is shouting at me. "MY LIST MY LIST MY LIST".

Toddler-infused Netflix.
posted by Emmy Rae at 10:22 AM on June 2, 2017 [2 favorites]


Best seen on a cell phone made of concrete.
posted by justsomebodythatyouusedtoknow at 10:28 AM on June 2, 2017 [6 favorites]


Like so?
posted by XtinaS at 10:36 AM on June 2, 2017


"Brutalism" remains kind of a stupid word for this kind of thing.

Then again, brutalist architecture seems like really stupid architecture that is also a pretty interesting set of ideas and sometimes makes for pretty interesting structures even if you wouldn't want it to really take off.

(I'll sit back and wait in case someone who knows about architecture wants to come along and eviscerate this opinion, but I'm probably not actually going to change it much.)
posted by brennen at 10:47 AM on June 2, 2017 [1 favorite]


This is not Brutalism.
posted by My Dad at 10:57 AM on June 2, 2017 [2 favorites]


Ceci n'est pas une brutalism.
posted by tobascodagama at 10:58 AM on June 2, 2017 [5 favorites]


Unless a used car lot, which is the architectural equivalent of these reimagined web designs, is "brutalist." Here's an example of "Brutalist" architecture across the street from my office: https://goo.gl/photos/fXjvejmbm3qENpTo6
posted by My Dad at 11:00 AM on June 2, 2017


Positives:
generally cleaner
text makes it clear what buttons do

Negatives:
worse fonts
smaller fonts
smaller pictures
useless boxes and lines all over
loss of color cues for importance of info
no distinction between text fields and buttons

Neutral:
all caps text
no rounded rectangles
where icons are used, they're simpler


On the whole I think the redesigns are worse: harder to parse and use. But maybe comforting if you kind of miss the '90s web.

The one clear success is Candy Crush, since the original is so overwrought. I would have retained the color of the candy pieces though.
posted by zompist at 11:18 AM on June 2, 2017 [2 favorites]


I would have retained the color of the candy pieces though.

Or replaced them with boxes that read "RED," "BLUE," "GREEN," etc.
posted by ejs at 11:52 AM on June 2, 2017 [4 favorites]


Digital brutalism is tricky because ultimately everything in a digital gui is artifice: there is no underlying material reality to appeal to in the same way that architectural brutalism uses unfinished concrete. There are no unfinished pixels. That being said, I think a plausible contender would be programmer guis like imgui which prioritize functionality and code economy with aesthetics a secondary concern.
posted by Pyry at 11:57 AM on June 2, 2017 [7 favorites]


But maybe comforting if you kind of miss the '90s web.

I'm honestly almost willing to go back, if it means I don't have to see this any more
posted by thelonius at 11:58 AM on June 2, 2017 [10 favorites]


I like this aesthetic a lot, but Frowner has a really good point about font size.

Bolded abbreviations could maybe help, like [New message] or even just [New].
posted by en forme de poire at 12:22 PM on June 2, 2017


This is an excellent rectangle.
posted by DevilsAdvocate at 12:35 PM on June 2, 2017


These mostly look badly designed for usabilitybut I do like the visual of many of them. I also feel like there's some Instagram and Twitter joke happening that I'm not getting. The Twitter one is the only one that's just completely crazy to me. That can't be an accident. Also, if that is in any way what Snapchat is/does I'm even less sad that I have never used it.

But maybe comforting if you kind of miss the '90s web.


In many ways I really do. There are a lot of wonderful things I don't want to give up about the modern web, but too many sites think they need to show me all of those things at once in an infinite scrolling auto-loading way. If that's my option, I'll take Lynx on a VT240.
posted by Clinging to the Wreckage at 12:39 PM on June 2, 2017


Yeah, there were a lot of choices in there that screamed "fuck you" rather than rawness. Seriously, using comic sans or monospaced fonts isn't brutalist in web terms, it's just confrontational. Most immediately, brutalism in web design should imply a hard-edged rigour in defining a hierarchy of font sizes, relentless nesting, and a use of colour that maximizes useful contrast rather than overall palette unity.

It would feel cold and machinelike, but it would also probably emphasize fewer elements per page and a lot more work finding links because if you're going to depend more on the underlying structure being exposed, you might just start your CSS like this:

* {
border: solid 1px black;
}

And go from there.
posted by fatbird at 1:25 PM on June 2, 2017 [3 favorites]


Do people really like paginated sites more than just-in-time infinite scrolling?
posted by tobascodagama at 1:43 PM on June 2, 2017 [1 favorite]


Making the fonts smaller and harder to read is a design failure. It makes these less usable for people

Welcome to the unofficial design goal of Brutalism.
posted by happyroach at 2:00 PM on June 2, 2017 [2 favorites]


Do people really like paginated sites more than just-in-time infinite scrolling?

Oh yes, very much so. I like being able to open a next page in a new tab, I like how separate pages behave on crummy mobile internet, I like being able to bookmark and go back to a specific point, and I like having a meaningful scrollbar.
posted by migurski at 3:20 PM on June 2, 2017 [5 favorites]


It's DOS in high resolution with graphics. I approve!
posted by JoeXIII007 at 3:37 PM on June 2, 2017 [1 favorite]



Do people really like paginated sites more than just-in-time infinite scrolling?


-----
-----
-----




wait, was that some kind of menu?




scroll down to read the rest of the article



=====================================================
||                                                  ||
||                                                  ||
||            ENORMOUS                              ||
||          ANIMATION OF                            ||
||       CLOSE UP PHOTOS OF                         ||
||             HAPPY                                ||
||            SMILING                               ||
||         MULTICULTURAL                            ||
||            PEOPLE                                ||
||             USING                                ||
||              THE                                 ||
||             PRODUCT                              ||
||                                                  ||
||                                                  ||
||                                                  ||
||                                                  ||
=====================================================|

[Vital information over there somewhere ---->>]

=====================================================
||                                                  ||
||                                                  ||
||                                                  ||
||                                                  ||
||            ENORMOUS                              ||
||                                                  ||
||          FLASHY IMAGES OF THE PRODUCT            ||
||                                                  ||
||       THAT ARE SO HUGE                           ||
||                                                  ||
||         YOU CAN'T REALLY TELL WHAT'S GOING ON    ||
||                                                  ||
||                                                  ||
||                                                  ||
=====================================================|

so where are the specs? how can I compare two or more products?


YYY     YYY  EEEEEEEEE     SSSS     !!! 
 YYY   YYY   EEEEEEEEE   SSS  SSS   !!! 
 YYY   YYY   EEE        SSS    SSS  !!! 
  YYY YYY    EEE        SSS         !!! 
  YYY YYY    EEEEEE      SSSS       !!! 
   YYYYY     EEEEEE        SSSS     !!! 
    YYY      EEE             SSS    !!! 
    YYY      EEE               SSS  !!! 
    YYY      EEE        SSS    SSS       
    YYY      EEEEEEEEE   SSS  SSS   !!!  
    YYY      EEEEEEEEE     SSSS     !!!  


click here to unsubscribe
posted by Herodios at 4:26 PM on June 2, 2017 [8 favorites]


This isn't Brutalism, it's more of a reset to Web 1.0 and Geocities-era nostalgia.
posted by Delia at 4:33 PM on June 2, 2017 [1 favorite]


Infinite scroll is great for pretty pages that I don't intend to ever revisit or do anything other than browse. Great for a random waltz through some byway, terrible for establishing any kind of sense of the site as a place I can identify with.
posted by cortex at 4:35 PM on June 2, 2017 [1 favorite]


Div tags have much to answer for in this world.
 
posted by Herodios at 4:37 PM on June 2, 2017


> Do people really like paginated sites more than just-in-time infinite scrolling?

I dunno, discuss any politics lately? (It's not technically just-in-time scrolled, but JIT scrolling would end up with the same problem.)
posted by fragmede at 4:57 PM on June 2, 2017 [1 favorite]


Hmm. Actually quietly removing scrolled-past divs as you scroll down and might help a little with those pages, it might be worth experimenting with.
posted by Artw at 5:03 PM on June 2, 2017 [1 favorite]


People who don't understand what brutalism is are up there with the vulgarians who call a scooter a "moped."

Must quell the bloodlust.
posted by sonascope at 5:04 PM on June 2, 2017 [2 favorites]


Actually quietly removing scrolled-past divs as you scroll down and might help a little with those pages, it might be worth experimenting with.

Flipboard experimented with this a few years ago, and concluded that messing with the DOM at all is too slow to maintain smooth 60fps scrolling in a mobile browser:
It’s not just slow, it’s really slow. If you touch the DOM in any way during an animation you’ve already blown through your 16ms frame budget.
Instead, they took advantage of the immediate-mode rendering of canvas to implement their own client-side rendering optimized for speedy scrolling. I’m not a Flipboard user so I don’t know how well it worked, but React is also an optimization against DOM slowness that collects updates into batches to minimize triggered repaints. Sounds like it works pretty well. A friend at Slack replied with “DOM Nodes Rule Everything Around Me” when I asked why the desktop client chews through CPU.

Do not attempt to compete with the DOM.
posted by migurski at 7:18 PM on June 2, 2017 [2 favorites]


I mean, you don't have to go all in on the Ye Olde Bootstrappe Site paradigm to use infinite scroll. I get infinite scrolling on reddit through the Reddit Enhancement Suite plugin, and it's quite pleasant.
posted by tobascodagama at 7:27 PM on June 2, 2017


When I hear "Brutalist App", the first thing I think of is microfiche.
posted by Uther Bentrazor at 9:33 PM on June 2, 2017


I fucking loathe this trend and will be glad when the fad pendulum swings the other way again.
posted by flabdablet at 10:59 PM on June 2, 2017


Also, infinite scroll sucks. Bound books are widely understood to be more useful than paper scrolls, and infinite digital scrolling only makes that difference even more starkly obvious.
posted by flabdablet at 11:02 PM on June 2, 2017 [1 favorite]


I appreciate the point about small text being a problem for the visually impaired.

But can we talk about the goddamn icons? I find them so opaque and hostile. How the fuck am I supposed to know what that pattern of dots is supposed to mean? Or the pattern of lines? If I click the speaker icon, does the sound turn on, or turn off, or do something else? What is that fucking blob supposed to be? Why can't I get something more scrutable than these goddamn icons?
posted by medusa at 11:25 PM on June 2, 2017 [1 favorite]


Why can't I get something more scrutable than these goddamn icons?

Because you're just a reactionary Luddite who fears change, duh.
posted by flabdablet at 11:35 PM on June 2, 2017 [1 favorite]


Then again, I have a burning desire to hunt down every last twenty something half-bearded hipster who believes that the virtue of resilience in the face of change implies the desirability of deliberate change made for its own sake, and dip his smug little smirk in a vat of moved cheese fondue. So I might have that slightly wrong.
posted by flabdablet at 11:38 PM on June 2, 2017


if it means I don't have to see this any more

That bootstrap page is completely useless without a modal Subscribe interstitial.
posted by flabdablet at 11:46 PM on June 2, 2017 [3 favorites]


When I hear "Brutalist App", the first thing I think of is microfiche.

It's an long-life, high-density archival medium that can be unpacked with just a magnifying glass. A bit slow, maybe, but still legible in several hundred years in the original silver halide print.

‹/fussy archivist derail›
posted by sonascope at 4:11 AM on June 3, 2017 [3 favorites]


Do people really like paginated sites more than just-in-time infinite scrolling?

I don't entirely mind infinite scroll on pages where I don't care about what I've already read, like Twitter or sometimes Tumblr, if I'm just mindlessly perusing the web while I'm stuffing food in my face. I mind it very much when I want to return to where I was last if I, say, click a goddamn link and it opens in the same tab and I have to hit the back button and hell, where was I? Whatever, going to [some other site] now.

Also, for some reason, searching on an infinite-scroll page for text is not always possible, so if I'm taken away from my position on the page (if I hit / in Tumblr, and it takes me to the search box up top), I can't always search on the text of something I was just reading.

I'm not sure why people enjoy infinite scroll, tbh.
posted by XtinaS at 5:43 AM on June 3, 2017 [2 favorites]


The inability to search infinite scroll pages due to designers thinking "Hey, we're loading content just-in-time for efficiency, why not also discard what's no longer on screen?" seems like a great example of premature optimization creating other problems.

(I also hate it when they replace normal page-searching hotkeys with taking the cursor to a whole site search box instead. That's not what I asked to do!)
posted by ver at 5:55 AM on June 3, 2017


DISCOOUUUUUUURRRSSSSE
posted by flabdablet at 6:43 AM on June 3, 2017 [2 favorites]


DISCOOUUUUUUURRRSSSSE

WOOOOOOOOOOO 🎉 🎉 🎉
posted by XtinaS at 8:02 AM on June 3, 2017 [1 favorite]


« Older Catch the Hudson Ferry from Grand Central   |   ❄ Newer »


This thread has been archived and is closed to new comments