Flat design

Flat design is defined by what it refuses. No drop shadow, no gradient, no bevel, no inner glow, no photographic texture, no faux material. What is left has to do the work on its own: a solid fill, an edge, a colour, a piece of type, and the space between things. The discipline came out of Swiss graphic design by way of Microsoft’s Metro language, and it went mainstream when iOS 7 dropped the leather and linen in 2013.

Its practical advantages were real and are still worth having. Flat interfaces render crisply at any resolution, weigh almost nothing, redraw fast, and scale to a system of components without every new surface needing bespoke lighting. Colour also becomes load bearing rather than decorative, since it is one of the few signals left for grouping and hierarchy.

The problem showed up in usability testing rather than in critique: with the depth cues gone, people stopped seeing which things were clickable. NN/g’s work on flat design found weaker signifiers of clickability and slower scanning, and the answer became what they call flat 2.0, which keeps the flat vocabulary but permits a small amount of shadow or a subtle layer to tell an interactive thing from a decorative one. That is the version most design systems ship today: flat by default, one or two elevation levels held in reserve for things that float.