In order to fully define Flat 2.0 design, we will take a look at how this website design trend came about and what effects flat 2.0 has on the usability of your website.
Flat 2.0 Emerged from Flat Design
Flat design was introduced with the 2011 release of Microsoft’s Metro design language and Windows 8. While Microsoft didn’t start the flat design trend, I believe they have made a big impact with the launch of Windows 8 which forced every PC user to adjust to this new and unique interface.The flattening of Apple’s homepage in 2013 also played a large role in the popularity of this website design trend.
-
-
Google's minimalistic card-type interface that is now prevalent on most of its products and services.
-
Apple's iOS7 has taken some cues from Microsoft and Google using simpler icons, fresh type treatment and an overall flatter environment .
Usability experts at Nielsen Norman Group (NNG) define flat design by “the absence of glossy or three-dimensional visual effects in the graphical elements of a web page.” The goal of flat design is to improve user experience by:
- focusing on good quality content and letting that content shine
- removing distractions of other page elements that do not have this goal in mind
Problems with the Original Flat Design Trend
Over time many designers have found that the flat design trend leads to a more confusing interface. Improper use of flat design sometimes even sacrifices website usability in order to look trendy. Since flat design emerged in 2011, NNG has been a vocal critic of flat design. They state that flat design tends to “sacrifice users’ needs for the sake of trendy aesthetics”. Some issues that have emerged with Flat Design are:
- No visual cues that something is clickable: Before flat design, web designers usually indicated that something was clickable by using gradients, textures, raised edges, or drop shadows to make buttons (and other clickable objects) look like they can be pressed on. Flat design lacks these visual cues, and has to solve the same task with a much smaller tool set: colours, shapes, proximity, and contextual elements.
- Lack of a 3rd dimension (No Z-Axis): a flat website with no 3D effects “popping out” forces users to use more effort to discover relationships between objects, and understand the visual hierarchy of the site.
- Low Information Density: Having few stories on the initial screen, headlines without summaries, and groupings without labels can cause usability issues. But, if done correctly less information can also be seen as removing distractions. This principle would force users to focus only on important things.
Flat & Flat 2.0 have Minimalist Website Design Qualities
Many designers consider flat design to be an offshoot of minimalist website design. This minimalist strategy attempts to simplify the design by removing unnecessary elements or content that does not support the tasks of the website user.
To define “minimalist website design” the NNG studied the design characteristics of 112 minimalist websites. They found the following to be the main principles of minimalist website design:
Minimalist Principle (% of websites studied using it)
- Flat Patterns and Textures (96%)
- Limited or Monochromatic Color Palette (95%)
- Restricted Features and Elements (87%)
- Maximized Negative Space (84%)
- Dramatic Use of Typography (74%)
Taking minimalism to a new level is “Flat 2.0 Design” — which builds off the principals of minimalist website design while adding just a touch more personality.
Introducing Flat 2.0 Design
It’s clear that designers realize the usability issues of flat design. As a result, a more mature and balanced interpretation of flat design has emerged. This is sometimes referred to as ‘semi flat,’ ‘almost flat,’ or ‘flat 2.0.’
Flat 2.0 is an evolution, not a revolution. Where flat design was a radical departure from skeuomorphism, the flat 2.0 design style is mostly flat. Flat 2.0 makes use of subtle shadows, highlights, and layers to create some depth in the user interface.
Example from Dapper Image
Photo from HONGKIAT
Flat 2.0 Principles:
- Keep everything simple enough to render in an SVG file format without using bitmaps. This allows the images to be scaled and animated in any size needed. Content still needs to work on a phone held in landscape mode, a tablet with 2 apps open and snapped on both sides of the screen, a 5K retina monitor, and a thousand other possibilities.
- Use the z-axis to give subtle depth and 3-D effects to the design using
- minimal textures
- subtle gradients
- shadows
- Make use of layers by separating them with:
- drop shadows
- light / highlight
- movement / animation
- Follow Google’s new design language, called Material Design. This is probably the most notable example of the Flat 2.0 style. Google released Material Design with Android L in 2014.
How Flat 2.0 Design Will Improve Website Usability
Flat 2.0 gives answers to the perceived problems of flat design. It’s a smart compromise between functionality, aesthetics, and usability. Bring the Z-axis back into play allows designers to create subtle, but effective, transitions between elements on a website. It should significantly increase the ability for the user to determine:
- what elements are clickable
- what is most important on the page (hierarchy)
Conclusion
So there you have it. Flat design, derived from a minimalist design style, is evolving to flat 2.0 design. This is a positive tweak to this widely used website design trend. It will bring into the picture more layers and 3-D elements, and will help to increase the overall usability of the web.
I’m looking forward to the freedom that flat 2.0 design will give designers. I feel as though flat design really hindered a lot of our creative freedom, and bringing back the ability to use subtle elements will really lead to some interesting and new developments in the world of website design.
