Flat Design / Vector Minimalism vs Material Design
フラットデザイン / ベクターミニマリズム / マテリアルデザイン
Flat Design / Vector Minimalism comes from UI Expression and Material Design from Google UI. 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
Reduces information to plain planes and color, portable across screens and media.
Material Design
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.
| Flat Design / Vector Minimalism | Material Design | |
|---|---|---|
| Era | 2010s– | 2014– |
| Family | UI Expression | Google UI |
| Kind | Style | Style |
| Cues | Uniform planes / Simple shapes / Few shadows / Clear color | Hierarchy and shadow expressed by elevation / Surfaces overlapping like sheets of paper / Motion that shows cause and effect / A standardized unit of spacing |
| Best used for | Light, understandable explanation · Large sets of consistent figures | Distributing consistent behavior across several platforms · Communicating the depth of a hierarchy visually |
| Type | A rounded sans-serif | Build the hierarchy from one type family and separate levels by weight and size. |
| Composition | Simple silhouettes and clear hierarchy | Place elements on a grid of multiples of 8 and standardize the spacing. |
| Material | Three to five colors; shadows only when they mean something | Give surfaces elevation and show front and back by the density of the shadow. |
| Caution | Figures 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. |