Flat visual design

sign, indicating that paper can be recycled

The "Metro" interface in Windows 8 has intensified the desire to make sites minimalistic and simple. Relying on colored tiles for design made sense, because our code was already divided in easily maintainable components and visual design itself was becoming more complex.

The advantage of the flat style is its clarity, expressiveness and ease of understanding (even across cultures) in a way that prevents the possibility for different interpretations of the same thing. It is marked by the reliance on color and icons with almost pictogram-like clarity. The icons might not even be solid, but outlined through a thick, solid contour. Or they can have a fill of a subtle gradient that passes to a a thin, but more pronounced border. Pale, almost invisible shapes lead the eye to the symbols attracting attention and the gradation of this effect further improves clarity. With border shapes becoming the actual detail, we see the need to look for more interesting forms around us—an idea borrowed from photography. Simple icons usually work best, minimizing cognitive load and increasing recognition, especially if these signs were already visible in real life.

Flat visual design is probably more suitable for mobile devices with smaller screens. If the display of the mobile device was divided in 6 tiles, and we preserved their dimensions without relying on responsive techniques, we would need to have a lot more tiles and colors to fill one 24 inch monitor in the same way. Potential problem is that tiles must coexist in harmony in order to be of equal importance for the viewer of the composition. The advantage of tiles is that they can easily participate in a grid that can reflow based on screen size or device orientation. They can also have a large clickable/touchable area for improved user experience.

Well-adjusted fonts can "open" the design if they have enough, but not excessive room to breathe. The letter shapes themselves can act as a complement to available icon shapes. If we have chosen to avoid icon effects, we also need to avoid text effects if we are going to adhere to the same philosophy consistently.

bit.ly/ZnKsqn