The Move Towards Flat Design

Everywhere I look whether it is working on my desktop or browsing via mobile I am beginning to see recurring digital design patterns. This includes the use a lot of white space, simple and sometimes transparent backgrounds, symmetrical boxes and minimalist styling for user interfaces. This trend actually has a name… Flat design. You may not have heard of the flat design philosophy, but you will definitely recognize it when you see it especially if you have used a Microsoft or Google product recently.

Example from Xbox Live

Photo Jun 12, 11 33 06 AM

Example from Windows 8

Start screen

Example of an HTC Microsoft Phone

HTC-Microsoft-Phone-8X-Images-1024x576

Look familiar? It should. For a long time now graphical user interface (GUI) design has tried to make objects seem more familiar to us by using a design philosophy called Skeuomorphism. This is simply incorporating design ques from the physical world into the digital one. The visual cues and details such as shadows, beveled edges and texture create experiences that are relatable or designed to be visually interesting.

Multiple examples of Skeuomorphism from my iPad

Photo Jun 13, 3 20 20 PMPhoto Jun 13, 3 21 12 PM

The icons themselves such as the Tech Crunch app icon almost appear to be 3-dimensional

Photo Jun 13, 3 21 34 PM

The move towards flat design is one that is less about style and more about optimizing functionality and focusing a users attention on the type of content they are about to interact with. The focus is on creating digital experiences that emphasize visual clarity to get the primary point across.

Google has always used a minimalist approach to GUI

Screen Shot 2013-06-13 at 3.34.04 PM

Google Now incorporates flat design principles into Google’s card style interface

Screen Shot 2013-06-13 at 3.32.22 PMScreen Shot 2013-06-13 at 3.32.10 PMScreen Shot 2013-06-13 at 3.32.01 PMScreen Shot 2013-06-13 at 3.31.54 PM

Especially with the move towards mobile first and responsive design, the limited real estate calls for very clear and simple interfaces that allow the reduced size to be maximized across devices. This is evident when you begin reviewing how Google Glass will present information.

Example of Google Glass Flat Design

Screen Shot 2013-04-16 at 12.49.18 PM

Social networks have even begun implementing certain elements of flat design. Take a look at the newly launched MySpace and their use of flat elements to bring their users streams to life.

MySpace has a new UX that features a clean design with the focus on simple visual content boxes

Screen Shot 2013-06-13 at 3.53.57 PM

Example of MySpace Feed

MySpace

Pinterest also incorporates flat design principles in their user experience with the recent redesign.

Screen Shot 2013-06-13 at 3.56.22 PM

Finally, with Apple’s recent announcements that iOS 7.0 will incorporate Flat Design elements into the user experience marks a significant shift as Apple since the 80’s has focused on creating graphical user interfaces that lean towards replicating physical objects vs. focusing on telling the user what type of content they are about to engage with.

shared_controlcenter_keyframe-e13708999666131

Dating back to the dot com days, I have been a student of all things digital. Flat Design is yet another entry into the ever evolving digital landscape. What was once old is new again. What are your thoughts and preferences? Do you prefer an interface that is familiar or do you have an affinity towards minimal elements with a clear visual cue to what you are about to do?

Follow @BlackFin360

Hero 4 Final

3 thoughts on “The Move Towards Flat Design”

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