UX Glossary · F
Flat design
A visual style stripping away shadows, gradients and texture in favour of solid colour and clear type.
Flat design removes the three-dimensional effects that dominated interfaces in the 2000s: bevels, drop shadows, gradients, textures. What remains is solid colour, clear typography and space.
Microsoft’s Metro language in Windows Phone 7 (2010) is usually credited as the turning point, and Apple’s iOS 7 in 2013 made it the default expectation across the industry. Both were reactions to skeuomorphism, where interfaces imitated physical objects.
The problem it created
Removing shading also removed the signifiers that told people what was interactive. If a button has no border, no shadow and no fill, the only remaining cue is that the text is a different colour, and that fails for anyone who does not perceive that difference.
Research from Nielsen Norman Group has repeatedly found weak clickability signifiers increase the time it takes users to find interactive elements, and increase uncertainty about whether something is a control.
Flat 2.0
The correction was a middle position, sometimes called almost-flat or flat 2.0: mostly flat, with subtle shadow or elevation reintroduced specifically to communicate interactivity and layering. Google’s Material Design formalised elevation as a system with meaning rather than as decoration.
In practice
The useful rule is that visual effects should carry information. A shadow that says “this floats above the page” is doing work. A gradient that is just a gradient is not.