Vernacular Web 民间网页(Vernacular Web)
The Vernacular Web is the folk architecture of the early web: personal homepages built by amateurs from collected materials — tiled star backgrounds, animated sparkle and flame GIFs, rainbow divider rules, 'welcome to my home page' banners, visitor counters, guestbook links, under-construction signs, and webring badges. It is decorative, personal, and sincere: every ornament was chosen because its owner loved it, not because a system prescribed it.
民间网页是早期网络的民间建筑:业余爱好者用收集来的素材搭起的个人主页——平铺的星空背景、闪动的亮片和火焰 GIF、彩虹分隔线、「欢迎来到我的主页」横幅、访客计数器、留言簿链接、施工中标志和网页环(webring)徽章。它装饰性强、私人、真诚:每一件饰品被选中都是因为主人喜欢,而不是某套体系的规定。
Scope: This entry covers the genuine 90s amateur look and its faithful revivals. Ironic, deliberately-broken 'ugly on purpose' design is a different move (Internet Ugly, in research), and raw exposed structure is Web Brutalism.
范围:本条目涵盖正宗的 90 年代业余外观及其忠实复刻。反讽式、故意做坏的「丑得理直气壮」设计是另一路(Internet Ugly,研究中),裸露的原始结构则是网页粗野主义。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Tiled background texture平铺背景纹理 surface defining定义特征
A small image repeated edge to edge — starry night sky, clouds, marble — behind everything; the page has wallpaper, not a background color.
一张小图从边缘到边缘重复铺开——繁星夜空、云朵、大理石——垫在所有东西底下;页面有的是壁纸,不是背景色。
-
Animated GIF ornamentsGIF 动画饰品 imagery defining定义特征
Twinkling sparkles, spinning @ signs, flaming rules, the striped UNDER CONSTRUCTION sign — small looping animations used as pure decoration.
闪烁的亮片、旋转的 @ 符号、火焰分隔线、条纹的「施工中」标志——纯粹当装饰用的小型循环动画。
-
Collected badges and counters收集来的徽章与计数器 layout defining定义特征
A visitor counter, 'sign my guestbook', webring prev/next buttons, 'best viewed in Netscape' badges — trophies of participation, stacked at the page's foot.
访客计数器、「给我留言」、网页环的上一个/下一个按钮、「请用 Netscape 浏览」徽章——参与感的战利品,堆在页面底部。
-
Default type, loud accents默认字体,炸眼点缀 typography defining定义特征
System serif or Comic Sans over the wallpaper, centered, with rainbow horizontal rules and multicolored or blinking emphasis — typography as celebration, not system.
壁纸上居中排系统衬线体或 Comic Sans,配彩虹水平分隔线和五颜六色或闪烁的强调文字——字体排印是庆祝,不是体系。
-
One centered column一条居中栏 layout supporting辅助特征
Everything center-aligned down one narrow column, section by section, the way <center> made easy.
所有东西沿一条窄栏居中,一节一节往下排,正是 <center> 让人轻松做到的样子。
-
Ambient extras氛围附加物 motion variable可变特征
Autoplaying MIDI, cursor trails, scrolling marquees — beloved extras that vary page to page.
自动播放的 MIDI、鼠标拖尾、滚动字幕——人见人爱的附加物,每个页面各不相同。
-
Knowing irony or rawness心照不宣的反讽或裸露 imagery avoid避免
The moment the decoration is a deliberate statement about design itself — exposed structure, ugly-on-purpose — it stops being vernacular and becomes brutalism or anti-design.
一旦装饰变成关于设计本身的刻意宣言——裸露结构、故意做丑——它就不再是民间网页,而成了粗野主义或反设计。
Often confused with: Web Brutalism最容易混淆:网页粗野主义
Vernacular Web民间网页(Vernacular Web)
Web Brutalism网页粗野主义
This is the Vernacular Web because the page is DECORATED with love — wallpaper, sparkles, badges, a counter — by an amateur showing off their collection.
这是民间网页,因为页面是被爱装饰起来的——壁纸、亮片、徽章、计数器——一个业余爱好者在炫耀自己的收藏。
It would become web brutalism if all decoration were stripped and the bare HTML skeleton — default type, blue links, no ornament — were exposed as a deliberate designer statement.
如果把装饰全部剥掉,让赤裸的 HTML 骨架——默认字体、蓝色链接、毫无饰品——作为一种刻意的设计师宣言暴露出来,它就变成网页粗野主义了。
In code — optional starting points代码写法 —— 可选起点
Wallpaper + the centered column — half the look in one rule
background: #000 url('stars.gif') repeat; text-align: center; font-family: 'Times New Roman', serif;
The rainbow divider rule between sections
background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta); height: 4px;
The blinking NEW! — gate it behind prefers-reduced-motion
@keyframes blink { 50% { visibility: hidden; } } .new { animation: blink 1s steps(1) infinite; }
Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface in the Vernacular Web style — a sincere 90s GeoCities-era personal homepage, not a parody. Defining signals: a tiled repeating background image (starry sky reads instantly); animated GIF-style ornaments — twinkling sparkles, a striped under-construction badge; a centered single column of system serif type with a rainbow-gradient horizontal rule between sections; the collected-participation footer — visitor counter in green LED digits on black, 'sign my guestbook' link, webring badge, 'best viewed at 800x600' line. Loud colored or blinking emphasis text is period-correct. Keep the specific ornaments flexible — the mood is a proud amateur's decorated scrapbook. Do not drift into web brutalism: this page is ornamented with love, never stripped bare as a statement. Preserve legibility (solid or high-contrast panels behind text over busy wallpaper), respect prefers-reduced-motion by pausing blinks and twinkles, and keep counters and badges decorative, not functional claims.
用民间网页风格创建界面——一个真诚的 90 年代 GeoCities 时代个人主页,不是恶搞。定义性信号:一张平铺重复的背景图(星空一眼可辨);GIF 风格的动画饰品——闪烁的亮片、条纹施工中徽章;系统衬线体排成居中单栏,小节之间用彩虹渐变水平分隔线;收集来的参与感页脚——黑底绿色 LED 数码管的访客计数器、「给我留言」链接、网页环(webring)徽章、「最佳浏览分辨率 800x600」一行。颜色炸眼或闪烁的强调文字符合时代特征。具体饰品保持灵活——气质是一个自豪的业余爱好者装饰出来的剪贴簿。不要滑向网页粗野主义:这个页面是被爱装饰的,绝不是为了宣言而剥光。保持可读性(花哨壁纸上的文字底下垫纯色或高对比度面板),遵循 prefers-reduced-motion 暂停闪烁和亮片,计数器和徽章只做装饰,不要伪装成真实功能。
Accessibility & misuse可访问性与误用
Text directly over a busy tiled background is unreadable — put body copy on a solid panel, and save the wallpaper for the margins.
文字直接压在花哨的平铺背景上是没法读的——正文放在纯色面板上,壁纸留给页边。
Blinking and twinkling must pause under prefers-reduced-motion, and nothing should blink faster than 3 times per second (WCAG seizure threshold).
闪烁和亮片必须在 prefers-reduced-motion 下暂停,而且任何东西的闪烁都不能快于每秒 3 次(WCAG 癫痫诱发阈值)。
Rainbow and neon text colors rarely hit 4.5:1 on dark wallpaper — reserve them for decoration, keep content text plain and high-contrast.
彩虹色和霓虹色文字在深色壁纸上很少能达到 4.5:1——把它们留给装饰,正文文字保持朴素、高对比。
Origin起源
The mid-1990s free-hosting web — GeoCities, Angelfire, Tripod — where millions of first-time authors decorated pages from shared GIF collections. Olia Lialina documented and named the culture in 'A Vernacular Web' (2005) and, with Dragan Espenschied, preserved a terabyte of GeoCities before its 2009 shutdown.
上世纪 90 年代中期的免费托管网络——GeoCities、Angelfire、Tripod——数百万第一次写网页的作者从共享 GIF 图库里挑素材装饰自己的页面。Olia Lialina 在《A Vernacular Web》(2005) 中记录并命名了这种文化,并与 Dragan Espenschied 一起,在 GeoCities 2009 年关站前抢救了整整 1TB 的存档。