Flat Design / Vector Minimalism vs Mid-Century Modern

フラットデザイン / ベクターミニマリズム / ミッドセンチュリー・モダン

Flat Design / Vector Minimalism comes from UI Expression and Mid-Century Modern from Retro. Both are read here as style. 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.

Mid-Century Modern

Mid-Century Modern — Charles and Ray Eames《Lounge Chair》1956 — Wikimedia Commons / CC BY 2.0Mid-Century Modern — Charles and Ray Eames《LCW》1945, ホノルル美術館 — Wikimedia Commons / CC0Mid-Century Modern — Case Study House #21（Pierre Koenig）— Wikimedia Commons / CC BY 2.0

Adds hand-felt curves and warmth to rational geometry.

Flat Design / Vector MinimalismMid-Century Modern
Era2010s–1940s–1960s
FamilyUI ExpressionRetro
KindStyleStyle
CuesUniform planes / Simple shapes / Few shadows / Clear colorOrganic shapes / Calm warm colors / Succinct illustration / Diagonal movement
Best used forLight, understandable explanation · Large sets of consistent figuresBalancing friendliness with intelligence · Building contexts of living, furniture and culture
TypeA rounded sans-serifA rounded sans-serif
CompositionSimple silhouettes and clear hierarchyAsymmetric yet stable balance
MaterialThree to five colors; shadows only when they mean somethingMustard, teal, textures of wood and paper
CautionFigures easily become generic. Define your own ratios, lines and color rules.Don't pile up retro props. Fit the forms to today's information structure.

Put these two together

UI Expression ／ Retro

IndexStyle