Flat Design / Vector Minimalism vs Material Design

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

Flat planes, simple shapes and clear color give the two an almost identical first impression on screen.

How to tell them apart. If sheets like paper overlap and shadow tells you which is above, it is Material. If nothing casts shadow and color alone divides the planes, it is Flat Design.

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.

Material Design

Material Design — Google《Material Design》のUIコンポーネント — Wikimedia Commons / Public domainMaterial Design — Google《Material Design 3》のコンポーネント 2021 — Wikimedia Commons / CC BY 4.0

A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system. The 2021 revision added colour derived from the device wallpaper, so the palette differs from one user to the next.

Flat Design / Vector MinimalismMaterial Design
Era2010s–2014–
FamilyUI ExpressionGoogle UI
KindStyleStyle
CuesUniform planes / Simple shapes / Few shadows / Clear colorHierarchy and shadow expressed by elevation / Surfaces overlapping like sheets of paper / Motion that shows cause and effect / A standardized unit of spacing
Best used forLight, understandable explanation · Large sets of consistent figuresDistributing consistent behavior across several platforms · Communicating the depth of a hierarchy visually
TypeA rounded sans-serifBuild the hierarchy from one type family and separate levels by weight and size.
CompositionSimple silhouettes and clear hierarchyPlace elements on a grid of multiples of 8 and standardize the spacing.
MaterialThree to five colors; shadows only when they mean somethingGive surfaces elevation and show front and back by the density of the shadow.
CautionFigures easily become generic. Define your own ratios, lines and color rules.Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie.

Put these two together

UI Expression ／ Google UI

IndexStyle