Flat Design: A History, Past, Present and Future

Flat Design: A History, Past, Present and Future

Flat design has been a huge hit over the years. If you have not heard of the term, you would have certainly seen this style in the digital world. A leading trend in interface design, it is so popular that it is difficult not to see or hear about it on our screens today.

There are many factors influencing design to become simplified. To get a full perspective of this trend, we need to delve into the history of minimal design before we can understand its popularity and correct use.

The Hows and Whys of Flat Design

What is Flat Design?

Flat design is exactly what its name suggests – design that is flat. A term defined by user interface (UI) designers, flat design removes stylistic 3D components like gradients, bevels, drop shadows and textures. Basically anything that would create visual depth so a graphic has the illusion of “popping out”.

Flat Icons Example

But this trend didn’t gain popularity for no reason. In essence, flat design is a critical response to rich and skeuomorphic designs. It tries to argue that the most effective way to communicate a message is by removing all forms of visual dimension and unnecessary ‘fluff’.

VS. Skeuomorphic:
Skeuomorphism is when visual trickery is used to mimic details of real life objects onto something else and for a while, this aesthetic was popular in software. Interaction with these detailed graphics was a significant factor of user experience (UX), as people needed to understand the digital world by connecting them with visuals from our real lives. You could liken it to fake wood veneers on furniture or the design of Apple’s newsstand app on iOS 6. With the use of skeuomorphism, the app’s design tried to visually replicate a bookshelf with books on the screen to give an impression that the user had a library on their phone.

Apple News Stand

At the beginning, skeuomorphism served a functional purpose. Dating back to the 1980’s, Apple’s first graphic user interface introduced skeuomorphic icons to help the user comprehend the foreign concept of how a computer worked. Users needed visual symbols from the tangible world so they could relate it back to the digital world. An example on a desktop is the icon of a file folder to guide the user and direct them to where documents should be placed. All these graphics were necessary for UX design, so people could understand and be confident using this new technological device.

Original Mac Interface

As technology advanced, skeuomorphism allowed designers to develop their skills by allowing graphics to be detailed and realistic. Although it made interface designs visually entertaining, designers started encounter problems. One was that skeuomorphic and rich designs out-dated easily with advancements in higher resolution displays. The other issue was that users were bombarded with so much information, that content started to lose its meaning.

Minimalist Design:
There was a need to simplify UI design and minimalism, or more specifically flat design, was the answer. Flat design is a complete 180-degree of skeuomorphism. As content became key, users needed the most efficient way to consume digital media. Functionality and simplicity is important to minimalist design, so if a variable does not serve a useful purpose to communicate a text, it is a distraction from user experience. In addition to computers having such a strong presence in our daily lives, the need for detailed visual metaphors in UI design became unnecessary. Taking a minimalist approach allowed designers to focus on functionality and take advantage of users developed technological literacy.

It may sound like a paradox, as many may perceive design to serve a purpose “of making things look good”. So by removing all the bells and whistles will make an object boring (or in this case, flat), therefore going against the purpose of ‘good design’. However, designers will tell you that good design is about making something look good, with less as possible. It is about simplicity and the ideologies of minimal design date back way before the World Wide Web.

Flat Design Origins

There is always a previous trend that inspires a change in popular design. If we go back in time, we can see that flat design draws from a lot of qualities in Bauhaus and Swiss styles. In fact, it is almost impossible to talk about the history of minimalist design without mentioning these two design eras.

Popular in the 40’s and 50’s and originating in Switzerland, Swiss design is often referred (but not limited to) a combination of a really big photos with minimal type work. A formulated design, hierarchy and use of grids are all significant traits. Bold and striking layouts were common; a classic example is the combination of large photographs and small, clean typography. A design law Swiss design likes to obey is the importance of negative space and how it fixes a text on a canvas, which is of importance.

Another influential period in minimal design dating back even further is the Bauhaus movement, originating in Germany during the early 1920s. The Bauhaus art school in Germany practiced the ideas of craftsmanship and modernism. It strongly fused the ideas of economic sensibility with functionality. As it aimed at the endurance of its designs, simplicity was highly stressed – something both Swiss and flat design aims to achieve as well.

Just as we saw Apple and Microsoft making flat design popular today, it was Swiss design that managed to turn Bauhaus’s design ideology from an alternative hum into an international trend.

Responsive Design, Flat Design and Mobile First

It’s interesting to see how trends go in a full circle and as we can see with flat design, we see history repeating itself. But why do we see it in our digital design now?

Digital designers have dabbled with minimalist approaches for years but the big push in its popularity really came when bigger companies ‘flattened’ out their interfaces. Once Apple made the change to go flat, it persuaded designers coin the term, ‘flat design’ to describe this new generation of minimal aesthetic.

What is interesting about flat design’s popularity was that it was Microsoft who seemed to have started the trend in minimal UI design, as opposed to ‘design savvy’ Apple. First, with Microsoft’s Zune player and later Windows Phone 7, both had clean, minimalist approaches to its interface design. Microsoft named this style, “Metro” and with its growing popularity, applied it to other Microsoft operating systems.

Microsoft Metro UI

For Apple, who is usually understood to create trends in design, it is a surprise when it imitates a rival company’s interface – especially Microsoft. 2013 is described as the battle between flat and realism, so once Apple replaced skeuomorphism for flat design in its release of iOS 7, it seemed like this simplistic look became an overnight sensation. Almost acting as a gatekeeper for digital trends, Apple has a high level of trust by designers, who believed that flat design held longevity in the life span of its style.

You can’t look at the popularity of flat design and not consider the development of responsive design as well. There are many devices to log onto the Internet today, smart phones, computers, tablets etc. Their differences such as screen ratios, resolutions and browsers are all factors designers need to take into consideration. Trying to create an app design for example that is ‘graphically rich’ and capable on every device is a costly challenge. This is why flat design is seen as a good aesthetic to use. As graphics are simplified, this makes it faster and easier to scale and configure an app or website on various screens. As designers are now simplifying layouts to only include what is absolutely necessary, you could argue that with flat design, designers need to think more but have less output.

Standardising to this new minimal aesthetic as responsive design developed, meant digital designs were crisp and clearer to read on all screens that could be loaded with relative speed and satisfaction.

Is Flat Design Already Out of Vogue?

Despite the minimalist “less is more” approach, some designers believe that there should be a compromise between both skeuomorphic and flat design, as it can widen creative possibilities.

While flat design holds minimalist principles of functionality, people could also argue that it’s boring. There is truth that restrictions can in fact fuel creativity to find alternative approaches but the overuse of flat design has seen app design and UX design focus too much on functional aspects and suck the fun out from devices. By only taking function into consideration of an app design for instance, users may feel its interaction is more likened to a chore than a device that inspires and fun to interact with.

When Flat Design Fails

There is also argument by designers who believe the simplicity of flat design and its lack of richness, give the impression that even amateur designers are capable of carrying it out. Although there are simple rules with flat design, there are instances when a design can be too flat and hurt usability.

Flat design fails if it has poor usability and an example of this is when a design is too abstract for the user. Although flat design aims to be minimalistic in its approach, it still needs to be easy for the user to follow. If UI design demonstrates no guidance, such as telling users where to look or go, then the design has failed. Although most users have gained technological literacy, they still need to be influenced by the creator. Familiar visual indicators like symbols in common places (like an ‘x’ sign in a corner to illustrate ‘close’) help guide users around a screen. Signs and layouts that are too simplistic will mean users will fail to understand what they are supposed to represent.

Flat design that is too flat can also have negative effects to interface design as well. Buttons for example can become ‘invisible’ if a design is too flat as there are usually specific clues like gradient or shadows to indicate whether a visual can be clickable. As we consume media at a faster pace in the digital era, users need small cues to help them process information quickly. Inserting rich design for a functional purpose signifies what pieces of content is of importance to the user, in an instant.

The Future of Flat Design

People will argue that flat design will still be a dominant aesthetic for the foreseeable future. However, others will explain that although flat design is popular it does have some faults, so the style might need to be developed with some rich design elements.

Google and their recent mobile app designs are often used as a prime example of flat design’s development, as it incorporates gradients, for functional purposes. Google appear to be taking the best from both flat and rich worlds and to combine them nicely and increase the efficiency of user experience.

A major part of flat design’s popularity was because of its timeless, which was also presented in it other minimalistic eras, (Swiss design and Bauhaus). For digital giants like Microsoft, Apple and Google to go ‘flat’ in recent years have solidified the public’s trust to believe that the flat design trend may have just begun. As technology is forever continuing to update itself, this aesthetical movement is time and cost effective for those aiming to create a lasting interface design.

Of course, the style will eventually run its course. However, we can’t predict the future, so whatever comes after flat design is really in the hands of time. If we look at patterns in history, it is more than likely that there will be a critical response to the movement and who knows, perhaps app designs and user interfaces might become skeuomorphic once again? Whether it is creative rebellion or technological advances, the reason is anyone for change is anyone’s guess.

Flat design is currently serving its purpose from web design to user experience, combining function and simplicity. So for now, it seems like flat design’s use-by date isn’t over just yet.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.