Flat Design / Vector Minimalism vs Isotype

フラットデザイン / ベクターミニマリズム / アイソタイプ

Flat Design / Vector Minimalism comes from UI Expression and Isotype from Information Design. One is style and the other layout. 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.

Isotype

Isotype — Otto Neurath & Gerd Arntz, Gesellschaft und Wirtschaft, 1930 — gerdarntz.org より引用Isotype — 『Basic by Isotype』図版 — Wikimedia Commons / Public domainIsotype — ノイラートのアイソタイプ（CC BY 2.0）

Translates quantity into repeated same-size symbols, making comparison readable before language.

Flat Design / Vector MinimalismIsotype
Era2010s–1920s–1940s
FamilyUI ExpressionInformation Design
KindStyleLayout
CuesUniform planes / Simple shapes / Few shadows / Clear colorUnified pictograms / Repetition of signs / Axes of comparison / Restricted color
Best used forLight, understandable explanation · Large sets of consistent figuresStatistics comparable without expertise · Basic guidance and education across languages
TypeA rounded sans-serifShort labels and clear figures; prose stays outside the chart
CompositionSimple silhouettes and clear hierarchyFix the unit per symbol; show change by count, never by size
MaterialThree to five colors; shadows only when they mean somethingFew meaningful colors, equal line weights, aligned baselines
CautionFigures easily become generic. Define your own ratios, lines and color rules.Never scale one big symbol to show a difference. Always show unit, base and source.

Put these two together

UI Expression ／ Information Design

IndexStyle