Like technology, web design is evolving. First, it was popular to ‘wow’ visitors with eye-catching graphics, vivid colors and striking animation. Following the ‘wow’ era, was the skeuomorphic trend. Skeuomorphism is a style of design in which items on a screen, for instance, the sun on the pre-downloaded weather app on the iPhone, attempted to closely resemble its real life counterpart. From drop shadows, to three- dimensional pop, items aim to appear as realistic as possible. The wave of the future–inspired by the past– is flat design. The following post will explore the origins of flat design, its advantages and how it fits into Digital Strategy.
Flat design is a style of interface that lacks three dimensional stylistic effects. It can often be described as minimalist in that the most effective examples exhibit a flat, simplified layout with bright, vivid colors and crisp lines, connoting an uncrowded and clean environment. Flat designs exist on a two-dimensional plane. Often characterized by rectangles and squares, flat design layouts feature expansive background and open space: this is one of the contributing factors that explains why it is often heralded as a non-distracting display.
Industry leaders such as Apple and Microsoft have incorporated flat design into their layouts with great success. Microsoft launched their 2012 software, Windows 8 with a flat design pane, completely revamping their interface look and feel from the previous Windows 7.
2012 also saw the rise in touch screen technology. From tablets to smartphones, Windows 8 was better suited for the emerging industry climate as its panels and squares promote interactivity as opposed to the traditional display on Windows 7.
Apple made the move to Flat design in 2013 with their iOS7 operating system and initially faced skepticism from other industry leaders. Despite claims that their new operating system looked unpolished and lackluster compared to prior skeuomorphic layout, this is in part, the goal. With the goal of a simpler layout with essential information, the less the emphasis is on glossy design elements, or busy color scheme of varying patterns, textures, drop shadows and gradients, the more the viewer is able to focus on the task at hand. The negative space, formerly filled with design effects, allows the user an uncluttered experience.
To further demonstrate the differences between the layouts of both skeuomorphic (left) and flat design (right), take a look at this side-by-side comparison. The skeuomorphic layout makes the apps look tangible, as though they physically extend out beyond the flat screen. There are shadows and color gradient contrasts to accentuate the three-dimensional feel; this is especially true of the bottom module of the four apps, Phone, Mail, Safari and Music. These apps are reflected beneath their icon. On the other hand, the apps on the flat design screen are not aiming to be realistic: they are simple, lack shadows and do not attempt to be a mirror image of their likeness in the physical world. This is clearly exemplified in the Safari compass logo; on the right, in the skeuomorphically designed app badge, the icon is labelled with the four cardinal directions and ranges from white, to light and dark blue as though the compass is spinning in real time. On the left, the flat design Safari app badge features a minimalist one hue of blue. It could not be confused with its real world counterpart.
Like many styles of web design, flat design was in part inspired by print and art techniques reminiscent of the Swiss Style and the Minimalist tradition. The Swiss Style, which gets its name from the country where it gained significant traction during the 1940s and 1950s, is also known as the International Typographic Style. It is said to have originated in Germany during the 1920s and is characterized by displaying a large photograph with a minimal amount of simple typography. Classic Swiss style features a clean layout of grids and prominently displays the content with Sans-Serif typeface.
In some design contexts, Flat design is used interchangeably with Minimalist, in part because Flat design takes many of its tenets from the Minimalist tradition. One of the most recognizable aspects of Minimalism is reducing a piece down to bare bones and only presenting the essential elements. Color blocking of vivid hues, crisp lines and geometric shapes dominant the Minimalist tradition.
The advantages of upgrading an interface to a Flat design are game-changing. The non-distracting layout of the design promotes user friendliness by laying out the essential information clearly.
Additionally, when incorporated universally across a product line, the user has the same experience on a wide variety of devices. For instance, when Apple updated its software away from the skeuomorphic tradition and toward flat design, Apple product users– from iPads to iPhones, all shared the same display of app badges and identical look and feel. This consistency promotes familiarity and increases SEO score, lead generation and conversion rates.
One of the key tenets of graphic flat design is that it is responsive. Responsive design, provides an optimal viewing experience from easy readability to navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop to mobile phones, tablets etc.). Responsive design allows a user to have an identical experience whether they are on a small smartphone screen or a large desktop computer. This mobile-friendliness is even factored into one’s SEO score on Google: Google’s algorithm favors sites that are mobile-friendly in comparison with those that are not. To learn more about the advantages of responsive web design, please click here.
One of the main takeaways is that flat design offers a streamlined, efficient, responsive experience across a variety of devices. Some of our clients’ websites, such as Spark Ventures, an initiative to promote business driven philanthropy, utilize elements of flat design, as seen below, to great success.
This page, which showcases opportunities for involvement, employs Flat design with rectangles and squares that illuminate upon user interaction with the tiles. This approach is both user-friendly and engaging.
To learn more about Spark Ventures, click here.