Flat web design is everywhere these days, and its popularity is growing. Many people use it constantly without knowing what it is or how it originated.
Flat design originated as a direct contrast to the more directly representational skeuomorphic style. While skeuomorphic design has traditionally emphasized a screen image that closely replicates the look of the physical object, in flat design, a simplified, almost minimalistic aesthetic is embraced.
Skeuomorphism is criticized as creating a cluttered screen, with overly representational images used to excess. With the rise of touch-screen devices in particular, flat design has become the default design for web devices and webpages alike.
Reasoning behind Skeuomorphism
The purpose of the skeuomorphic aesthetic is to present the user with as much familiarity as possible in an attempt to heighten realism. The visual impression is that of a physical object, including perspective and the notion of movement.
Although certain applications, such as gaming interfaces aiming for enhanced realism, require the feel associated with the skeuomorphic design, it’s inappropriate for a number of applications, particularly where the realism eats computing power and functionality.
If skeuomorphism is too tied to the impression of direct representation, flat design becomes strictly iconic, using the minimum necessary to convey the appearance of an object. This approach has several advantages over skeuomorphic design:
- Enhances readability. By utilizing an iconic instead of realistic representation of objects, users can recognize the meaning of an icon more easily. Rather than being forced to identify a specific object, they can identify a more generic entity that demonstrates the key features of the original object.
- Shorter waiting periods. The more abstract an object is, the easier it is to render. It takes less time to render an iconic compass than a realistic representation of a compass. If an entire webpage is rendered using flat design, the page loads very quickly.
- Allows greater personal generalization. Once an individual recognizes a generic object as being equivalent to a direct representation, the person then finds categorization easier. There are fewer ways to create an iconic image than a representational image, so users have an easier time moving from one platform to another or navigating between pages.
- Enhanced visual sophistication. A part of visual elegance is stripping an image of all elements unnecessary to representation, which makes the final image cleaner and results in a more sophisticated feel.
Problems With Flat Design
Flat design is in many ways an improvement over the skeuomorphic approach, particularly as applied to mobile devices. But it’s not without its flaws:
- Hard to do well. Flat design’s simplicity makes it difficult to execute successfully. If done poorly, rather than having an iconic representation, one has a distorted and possibly unrecognizable representation.
- Risk of oversimplification. Oversimplification results in greater confusion, not generalization. At times, a level of representation is necessary so the viewer can recognize what he or she is looking at. There’s a fine line between simplicity and unrecognizability.
- Can be visually bland. There’s also a fine line between removing unnecessary texture and making an image uninspired. Texture, whatever its flaws when overdone, adds visual appeal to an object. Removing texture entirely can make the image boring rather than elegant.
- Overused. Perhaps the greatest problem any design can face is too much success. Flat design has become so successful that many people are using it too much. When it was first used, flat design was novel. Now it runs the risk of becoming trite.
- Difficult to technologically generalize. Though this point may seem contradictory, flat design does not always work well on non-handheld devices, such as computers and laptops. While the icons are ideal for handheld devices, they may not work well with a mouse.
Greater popularity combined with difficult execution means people are attempting to use flat design without any knowledge of the design principles, creating not only tedium, but active dislike.
Like the skeuomorphic approach, flat design’s popularity may result in its downfall.
Although resulting from a style that discarded realistic representation entirely, with all the textures and weight associated with it, a compromise dubbed “Flat 2.0” is being used with greater frequency.
A common complaint regarding flat design, particularly when used on webpages, is that it’s difficult to know what areas are designed to be used and which are simply background or text.
Some characteristics of Flat 2.0 meant to address this problem are:
- More color. Using a wider range of colors increases visual interest without sacrificing simplicity. Color is being used to denote areas of interest and improve flow on pages and systems. Areas designed for interaction can be differentiated by color instead of text.
- “Ghost buttons.” By the simple expediency of putting a clear border around interaction points, the visual impression of a physical button is given without sacrificing the minimal aesthetic of flat design.
- Further minimization. A few well-executed images with appropriate text can do wonders. The minimal aesthetic is maintained, but allowing some more representational (but still simplified) images rather than trying to make a large number of pictures suitably iconic is an excellent compromise.
- Shading. Shading gives the impression of a three-dimensional object without giving up the minimalism necessary to execute flat design.
Flat design, especially Flat 2.0, is an excellent tool that can help your website stand out while making it easier to navigate.
Main Image: Smashing Magazine