Design Wars: Flat Design vs Realism

by . March 11th, 2014

To wrap up the year 2013, digital agency inTacto created an interactive infographic highlighting the rise of the “flat design” trend. The website “Flat Design vs. Realism” features an interactive HTML5 game in which the users are given the chance to pick their side and battle with the enemy “Street Fighter” style. The infographic is a narration of how ­ realism (or skeuomorphism) once ruled the digital world until designers started using the emergent flat design. According to inTacto, the idea to create the project came about after Apple also changed the look of iOS7 into flat design, which Windows 8 had already used earlier. [“Flat design vs realism: which side are you on?”. Creative Bloq.]

Image source

Defining the two design styles, realism (or skeuomorphism from the Greek words skeuostool or container” and morpheshape”) refers to a concept in design where the items or objects seem to resemble their real-life counterparts. It is used in several design fields such as user interface (UI) design and Web design. There are visual and non-visual skeuomorphs. Visual skeuomorphs refer to how Web and UI icons seem in 3-D even though they are in a flat surface (e.g. buttons are designed to look as real as possible by the effects of shadowing, highlights and details). On the other hand, non-visual skeuomorphs refer to: sound of a vinyl record ending placed at the end of digital records; and shutter sounds used in digital cameras. [Rouse, Margaret. “What is skeuomorphism?”. WhatIs.]

Image source

Flat design is defined as a type of minimalist design. Using this style will much emphasize the usability of an application. When people were asked ideas about how they think flat design look, words like simple, clean, modern, trendy, and colorful were some of the answers. Positive arguments for flat design are: illustrations are minimized; if an application uses this kind style, it loads faster; and the content is represented in such a way that it is simpler and easier to understand. [“Infographic: Flat design vs. skeuomorphism”. Webdesigner Depot.]

Image source

Which design style would you prefer? Flat design or skeuomorphism? Remember, when we say that something uses flat design, words like minimalist, bold colors, sharp edges and lines, simple typography, and very little shadowing will come up. In skeuomorphism, the presence of embossed and bevel effects, 3-D artificial textures, and drop shadows and reflective shimmers can be seen.

Image source

In conclusion, inTacto stated that “It doesn’t matter what design wins, because we both like flat and realistic design.” Both design styles were featured on various websites in 2013 and this year, is another opportunity for us to explore, innovate and develop new design styles for the digital world. [Hagle, Will. “Flat Vs. Realism: The Digital Design Battle”. All My Faves.]

You can check out the interactive infographic “Flat Design vs. Realism” to try the game and hear the story yourself.