网页粗野主义 · Web Brutalism

Brutalist architecture, Ashford, Kent by JOHN K THORNE, selected as a documented reference for Web Brutalism — JOHN K THORNE，《Brutalist architecture, Ashford, Kent》，2021。
来源与版权：CC0 (public domain)

Rainy night convenience-store street experiment interpreted through Web Brutalism — 当代风格迁移实验，并非历史作品。基于共同场景：雨夜便利店街景。

认识这种风格

网页粗野主义把浏览器的惯例与文档结构摆出来，而不是把它们磨成无摩擦的产品界面。默认控件、粗钝字体、硬边框、原始链接、尴尬的尺度都可以是表达，但成功的例子仍传达出刻意的层级与对标准化商业设计的明确态度。它兴起于 2010 年代中期，根植于早期网页以及作为隐喻的建筑粗野主义。

起源

视觉签名

visible browser conventions
oversized or system typography
layout friction used as expression

把这种风格用起来

Use the attached image as the source. Preserve its original subject, composition, and aspect ratio as much as possible.

Apply this visual style: Present the source as a raw browser-document artifact with blunt HTML structure, system fonts, default form controls, blue underlined links, exposed captions, file names, tables, alert red labels, interface gray, visible borders, hard clipping, selection color, cursor states, and purposeful awkward overlaps. Use screen white, black, default-link blue, and flat ungraded raster contrast.

Avoid: polished landing-page design, decorative fake brutalism, inaccessible text, or random broken layout.

更多资料

编辑判断 · 更新于 2026-06-12

当下热度

其信号常见于文化站点、时尚发布、作品集与设计学院的作业之中，并作为反潮流的姿态被反复援引。

历史影响

它重新打开了对可读性、惯例、作者性与产品设计同质化的讨论，其反思影响延续至今，仍被广泛援引。

调色板

关键词

文化关联

音乐

internet radio
experimental club
DIY electronic

媒介

website
digital archive
online portfolio

技术

HTML
CSS
browser defaults

事件

responsive-design standardization
reaction against template sameness

常见失败模式

没有清晰信息层级的随机丑陋，缺少强粗野网页那种设计精确性。

关联风格

视觉先祖

包豪斯 Bauhaus

风格制作拆解

避免：Avoid confusing deliberate structural directness with inaccessible text, broken navigation, or careless responsiveness.

主体与环境

A night-street field guide presented as an intentionally raw browser page rather than a cinematic poster.

构图与视角

Treat the street image as a browser document with blunt columns, exposed captions, default links, and deliberately awkward overlaps.

调色板与光影

Use screen white, black, default-link blue, alert red, and interface gray with flat browser illumination and ungraded image contrast.

媒介与材质

Assemble the page from raw HTML, system fonts, default form controls, and unprocessed raster images with visibly separate content blocks.

风格标志物

blue links, default buttons, marquees, file names, tables, and exposed metadata

后期与效果

Allow hard clipping, exposed borders, selection color, cursor states, and purposeful overlaps without disguising the underlying document structure.

制作手记

构图原则

Treat the street image as a browser document with blunt columns, exposed captions, default links, and deliberately awkward overlaps.

材质

raw HTML
system fonts
unprocessed raster images

光线

flat screen white
ungraded source-image contrast

效果

hard clipping
visible borders
cursor and selection states

网页粗野主义 Web Brutalism

真实参考

统一场景实验