Flat Design

skeuomorph

ios7

Flat design is a minimalist user interface design genre, or design language, commonly used in graphical user interfaces (such as web applications and mobile apps), and in graphical materials such as posters, arts, guide documents, and publishing products.

Flat design is a style of interface design emphasizing minimum use of stylistic elements that give the illusion of three dimensions (such as the use of drop shadows, gradients or textures) and is focused on simple elements, typography and flat colors. Designers may prefer flat design because it allows interface designs to be more streamlined and efficient. It is easier to quickly convey information while still looking visually appealing and approachable.

Additionally, it makes it easier to design an interface that is responsive to changes in browser size across different devices. With minimal design elements, websites are able to load faster and resize easily, and still look sharp on high-definition screens. As a design approach, it is often contrasted to ‘rich design’ (effect heavy design, e.g. shadows, reflections, textures) and skeuomorphism (non-abstract design that emulates the aesthetics of physical objects, e.g. 2D touchscreen buttons that look 3D).

An argument in favor of skeuomorphic design is that it makes it easier for those familiar with the original device to use the digital emulation by making certain affordances stronger. Interactions with computer devices are mostly cultural and learned. Once a process is learned and adopted in a society, it develops persistence.

The arguments against skeuomorphic design are that skeuomorphic interface elements use metaphors that are more difficult to operate and take up more screen space than standard interface elements, which breaks operating system interface design standards, and causes an inconsistent look and feel between applications. Skeuomorphic interface elements also rarely incorporate numeric input or feedback for accurately setting a value, and many users may have no experience with the original device being emulated (e.g. floppy disk icon). It has also been claimed to increase cognitive load with visual noise that after a few uses gives little or no value to the user, and limit creativity by grounding the experience to physical counterparts.

Apple Inc., while under the direction of Steve Jobs, was known for its wide usage of skeuomorphic designs in various applications. This changed after Jobs’ death when Scott Forstall, described as ‘the most vocal and high-ranking proponent of the visual design style favored by Mr. Jobs,’ resigned. Designer Jonathan Ive took over some of Forstall’s responsibilities and had ‘made his distaste for the visual ornamentation in Apple’s mobile software known within the company.’ With the announcement of iOS 7 at WWDC in 2013, Apple officially shifted from skeuomorphism to a more simplified design, thus beginning the so-called ‘death of skeuomorphism.’

Flat design is primarily influenced by the ‘International Typographic Style’ (also known as ‘Swiss Style’), Text User Interface (non-GUI, text only interfaces), and Modernism. Swiss Style is a school of graphic design that emerged in Russia, the Netherlands and Germany in the 1920s, and was made famous as it was developed by designers in Switzerland during the 1950s. It emphasizes cleanliness, readability and objectivity. It is often considered the most substantial influence on flat design, and its popularization during the 1960s is regarded as the starting point of flat design, although it would not make an appearance in the digital world for some time thereafter.

Flat design is also informed by the Bauhaus school of post-WWI Germany. It was a modernist art and architecture school founded at a time when the German zeitgeist had turned from emotional Expressionism to matter-of-fact New Objectivity. An entire group of working architects turned away from fanciful experimentation, and turned toward rational, functional, sometimes standardized building.

In 2002, Microsoft released Windows Media Center, and in 2006, the Zune MP3 player, both of which contained elements of flat design. The design of the Zune was clean and simple, with a focus on large lowercase typography, silhouette-style logos, and monochromatic font colors. The 2010 Windows Phone 7 built on the flat design elements introduced with the Zune; its interface was dominated by large and bright shapes accompanied by sans-serif typography, flat images, and a menu with a grid-like pattern. Because of the success of the Windows Phone 7 design, Microsoft released the Windows 8 operating system based on ‘Metro,’ with the same flat design elements, such as bold colors, simple typography, long shadow, and ghost buttons (transparent buttons). Again, the design is dominated by grid shapes, sharp edges, saturated colors, and clean typography. Microsoft has since moved its current products to the Metro design language, including the Xbox 360, Microsoft Office, and the Microsoft website.

‘Material Design’ a design language developed in 2014 at Google has been called flat design, although it includes some elements of skeuomorphism like drop shadows. Expanding upon the ‘card’ motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer Matías Duarte explained that, ‘unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.’ Google states that their new design language is based on paper and ink.

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s