Understanding Flat Design

Our buddies over at BigCommerce have recently updated their logo, along with the rest of their web design. Thanks guys. Now we have a mountain of pages, banners and ads with your logo on them that we need to update too.

But all petty complaining aside, the new BigCommerce logo and homepage are great examples of flat design, the aesthetic towards which everybody in web design seems to be moving these days. So, let’s talk about what flat design is, and why this is a  design trend your website is probably already participating in, whether you know it or not.

Flat design has its roots in modernist design, which was pioneered by the Bauhaus school way back in the 1920’s. Modernism was dedicated to simplified forms, and placed a high priority on rationality and functionality. According to the Bauhaus school, good design requires simplicity and geometric purity. This spirit is carried on in flat design.

Flat design is a web design style that emphasizes usability above all else. It features clean lines, bright colors, open space, and two dimensional, or flat, illustrations. Flat design features a UI (User Interface) that is clear. Elements like buttons and links are noticeable. Typography employs sans serif font, and copywriting is concise and to the point.

Flat design came in to vogue as a reaction to skeuomorphic design. Skeumorphic design attempted to bring real life elements to the screen experience with faux realistic textures, and real object characteristics. Skeumorphisim usually refers to a digital element that is designed to imitate something in the real world.

Proponents of flat design feel that skeumorphic design holds the user’s hand too much. Modern computer users don’t need to be made to feel comfortable by seeing familiar objects in their UI. There is a whole generation of users now who have never lived in a world without personal computers. Users these days are sophisticated enough to intuit what certain buttons, links and applications do, without overt visual cues.

In fact, there’s an argument to be made that less detailed signifiers are actually easier to understand. In his fantastic book Understanding Comics, Scott McCloud explains how taking away detail can amplify meaning when a picture crosses over into the realm of symbol. A symbol is a visual icon that everyone can intuitively connect to, precisely because it lacks detail.

Microsoft and Apple personified the push and pull between flat and skeumorphic design in the early 2000’s. Apple’s UI was skeumorphic. Take the Apple books app below, for example. It’s designed to imitate a real bookshelf, with wood grain texture and a feeling of depth in the bookshelves.

In the early 2000’s the Microsoft Zune (remember those?) introduced Microsoft’s metro design language, which was adherent to flat design principles. Those design elements have carried forward into Microsoft’s contemporary products, as you can see in the UI of Microsoft’s Surface tablet.

For the time being flat design seems to have won out. In 2015 Google lost the beveled edges, serif font, and feeling of depth in their logo in favor of a flat, geometric, sans serif typeface that they designed themselves. Apple, the bastion of skeumorphic design, changed to a much flatter UI when they released IOS 7 in 2013.

So what’s next? As with most things in the subjective realm, the pendulum swings back and forth. Flat design is king at the moment, but if I were a betting man I’d say we’ll start to see skeumorphic elements creep back into the mainstream before long. The next popular design trend will probably be mostly flat with skeumorphic elements used sparingly, where they really make sense.

 

So that’s the skinny on flat design. If your site doesn’t already employ a flat look, maybe it’s time for an update. The expert web designers at 1Digital Agency are always happy to talk about ways to modernize your aesthetic. If you think you know what the next design trend will be, do us a big favor and tell us on Twitter, or leave it in the comments. Until then I’m going to try to take things one-step beyond flat. We’re talking concave design.