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.

What is often forgotten is that flat visual design isn't possible only for elements next to each other, but also for elements that closely relate to each other in the creation of a compound form. Negative spaces can also be used in the creation of such forms.

In general, it's not easy to balance multiple colors. They can cause different, maybe even opposing emotions and in a good design we usually know exactly which ones the site must evoke from our users. Color variety can cause a sense of playfulness, which is not always what we want in our design. It can also become a visual burden, since solid color areas are one of the first things we (unconsciously) recognize on a site. With flat visual design, not only colors, but also form combinations should fit together.

Including big images on a site that uses flat visual design will only go against its nature. They can use a lot of memory, slowing down the user's PC, especially if he has multiple open tabs. From a performance standpoint, images with fewer colors compress much better. We could create a CSS sprite of transparent icons and then apply suitable background colors to where they should be visible on the screen, potentially saving hundreds of kilobytes.

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.

Flat visual design is great for clean interfaces, icon sets or large, beautiful symbols for greater impact. But we certainly can't use it everywhere. Tests with a small percentage of all visitors could reveal its potential impact before we fully incorporate it on our site. For instance, if we try to solve a complex problem online, we'll probably also need a complex solution and in this case flat design could look rather amateurish. We must inspect how the gradual increase of complexity affects its usefulness. After the site reaches a certain level of maturity, it might no longer make sense to follow what worked in the beginning.

It's not entirely correct to call flat visual design a "trend", since the reason we use it is mostly common sense. It's neither competition for responsive design, nor is it strictly dependent on it. There's no single right way to design: The requirements of the concrete project will determine the applicability of the concrete method. And that's something to keep in mind if we don't want to make all web sites alike. The rational application of subtle effects may prove to be useful in more than one case when it comes to site differentiation.

bit.ly/ZnKsqn