Flat Design / Vector Minimalism vs Web 1.0

フラットデザイン / ベクターミニマリズム / ウェブ1.0

Flat Design / Vector Minimalism comes from UI Expression and Web 1.0 from Digital Retro. They are reached for with some of the same intent, which is where they get confused.

Flat Design / Vector Minimalism

Flat Design / Vector Minimalism — Google《マテリアルデザインのUIコンポーネント》2015 — Wikimedia Commons / Public domainFlat Design / Vector Minimalism — Preply《Chemistry Class in School》2021 — Wikimedia Commons / CC BY 2.0Flat Design / Vector Minimalism — CEDEC《学校で自由ソフトウェアを使う7つの理由》インフォグラフィック 2018 — Wikimedia Commons / CC BY-SA 4.0

Reduces information to plain planes and color, portable across screens and media.

Web 1.0

Web 1.0 — Netscape Navigator 1.22 の画面 — Wikimedia Commons / CC0

Reuses the naivety of the constrained early web as directness and charm. In the 2020s it came back as a movement to take the personal site back, gathering under names like Neocities and Yesterweb.

Flat Design / Vector MinimalismWeb 1.0
Era2010s–1990s
FamilyUI ExpressionDigital Retro
KindStyleStyle
CuesUniform planes / Simple shapes / Few shadows / Clear colorBlue links / Low-res GIFs / System fonts / Plain buttons
Best used forLight, understandable explanation · Large sets of consistent figuresShowing affection for internet culture · An unpolished, approachable feel
TypeA rounded sans-serifSystem sans and monospace
CompositionSimple silhouettes and clear hierarchyLeft-aligned, borders, table-like division
MaterialThree to five colors; shadows only when they mean somethingWhite background, blue links, dithered images
CautionFigures easily become generic. Define your own ratios, lines and color rules.Don't regress actual accessibility. Separate the look from interaction quality.

Put these two together

UI Expression ／ Digital Retro

IndexStyle