Flat Design / Vector Minimalism vs Metro
フラットデザイン / ベクターミニマリズム / メトロ
Both are built from flat planes with no shadow and no relief, and both work with thin lines, plain shapes and large type.
How to tell them apart. Metro puts type in the lead and runs colored tiles off the edge of the screen. Flat Design leads with the icon and stays inside the frame.
Flat Design / Vector Minimalism
Reduces information to plain planes and color, portable across screens and media.
Metro
Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7.
| Flat Design / Vector Minimalism | Metro | |
|---|---|---|
| Era | 2010s– | 2010–2015 |
| Family | UI Expression | Microsoft UI |
| Kind | Style | Style |
| Cues | Uniform planes / Simple shapes / Few shadows / Clear color | Type as the hero / Flat-color tiles / Compositions running off-screen / Chrome eliminated |
| Best used for | Light, understandable explanation · Large sets of consistent figures | Dashboards listing news or weather where borders would only add noise · Indoor wayfinding and signage read from a distance in one word |
| Type | A rounded sans-serif | Headings five times body size, kept in a light weight |
| Composition | Simple silhouettes and clear hierarchy | Headings running off the edge, tiles in two rectangle sizes |
| Material | Three to five colors; shadows only when they mean something | No shadows or borders, black or white ground, saturated flat panels |
| Caution | Figures easily become generic. Define your own ratios, lines and color rules. | Stripping every border and shadow erases the difference between a tappable tile and a plain heading, leaving people guessing where to touch. |