Neubrutalism vs Web Brutalism
ニューブルータリズム / ウェブ・ブルータリズム
Both sit in UI Expression, so the question is not what they belong to but how they behave. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Neubrutalism
Rebels warmly against the over-polished web with thick borders and blunt color.
Web Brutalism
Puts the browser's default rendering straight on screen and refuses the finished look of templates. The bare structure of the HTML becomes the style itself.
| Neubrutalism | Web Brutalism | |
|---|---|---|
| Era | 2010s– | 2014– |
| Family | UI Expression | UI Expression |
| Kind | Style | Style |
| Cues | Thick black borders / Hard shadows / Vivid color / Flat components | Default headings and links / Blue underlined links / Extreme jumps in size / Rules and white space without ornament |
| Best used for | Making a product frank and memorable · Humanity for communities and creator tools | Gallery and label announcements that choose speed of information over polish · Putting deliberate distance between you and template-built competitors |
| Type | Bold sans, monospace | Keep the default face and push only the headings to full page width |
| Composition | Divide into clear boxes; shadows in one direction | Drop the columns, stack in one vertical run, divide with rules and space |
| Material | Off-white plus vivid color, black borders, few rounded corners | White or one flat ground, images left compressed and placed at actual size |
| Caution | Don't border and shadow everything. Vary the strength by hierarchy. | Tidying only the margins and line lengths while posing as the browser default makes the plainness read as staging, and readers quit while still hunting for a reason behind the mess. |