Vernacular Web 民间网页(Vernacular Web)

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,研究中),裸露的原始结构则是网页粗野主义。

✦ ✦ ✦
★ WELCOME TO MY HOME PAGE ★ now spinning: MIDNIGHT DRIVE ♪ thanx for visiting!! ★ sign my guestbook ★
Midnight Drive
Neon Coast NEW!
1:123:48
You are visitor 004213
UNDER CONSTRUCTION NETSCAPE NOW!
Best viewed at 800 x 600

标本可交互,可以直接操作。

If you called it…如果你管它叫……

“the old geocities page with sparkly gifs”「GeoCities 那种闪着亮片 GIF 的老页面」“under construction sign and a visitor counter”「施工中标志加访客计数器」“tiled star background with rainbow divider lines”「平铺星星背景配彩虹分隔线」“blinking new sign and a guestbook link”「闪烁的 NEW 标志和留言簿链接」“the 90s personal homepage look”「90 年代个人主页那股味儿」“welcome to my home page with animated flames”「「欢迎来到我的主页」加跳动的火焰动画」

Full style DNA完整风格 DNA

  1. 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.

    一张小图从边缘到边缘重复铺开——繁星夜空、云朵、大理石——垫在所有东西底下;页面有的是壁纸,不是背景色。

  2. Animated GIF ornamentsGIF 动画饰品 imagery defining定义特征

    Twinkling sparkles, spinning @ signs, flaming rules, the striped UNDER CONSTRUCTION sign — small looping animations used as pure decoration.

    闪烁的亮片、旋转的 @ 符号、火焰分隔线、条纹的「施工中」标志——纯粹当装饰用的小型循环动画。

  3. 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 浏览」徽章——参与感的战利品,堆在页面底部。

  4. 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,配彩虹水平分隔线和五颜六色或闪烁的强调文字——字体排印是庆祝,不是体系。

  5. One centered column一条居中栏 layout supporting辅助特征

    Everything center-aligned down one narrow column, section by section, the way <center> made easy.

    所有东西沿一条窄栏居中,一节一节往下排,正是 <center> 让人轻松做到的样子。

  6. Ambient extras氛围附加物 motion variable可变特征

    Autoplaying MIDI, cursor trails, scrolling marquees — beloved extras that vary page to page.

    自动播放的 MIDI、鼠标拖尾、滚动字幕——人见人爱的附加物,每个页面各不相同。

  7. 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最容易混淆:网页粗野主义

预览加载中…Loading preview…

Vernacular Web民间网页(Vernacular Web)

预览加载中…Loading preview…

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 骨架——默认字体、蓝色链接、毫无饰品——作为一种刻意的设计师宣言暴露出来,它就变成网页粗野主义了。

Compare: Vernacular Web vs Web Brutalism →对比页 →

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 的存档。

See also相关词条

我的参考集

组合页面参考、知名网站、UI 元素和视觉风格,导出给 AI。

你的下一份设计,从这里开始。

在任意标本旁点击「加入参考」,就能把页面、品牌、组件和风格组合成一份 AI 设计说明。

浏览页面参考

搜索参考库Search the library

输入关键词,搜索所有参考。