The flat user interface (flat UI) seems to be “all-the-rage” in today’s technology. This trend appears to stem from the commotion caused by Microsoft’s adoption of Windows Phone’s “Metro UI” for use in Windows 8 (and renamed to “Modern UI”). Personally, I’m not a huge fan of the steam-rolled phenomenon, but I understand that well-designed flat UIs serve a purpose:

For example, the theme used by this site really takes advantage of the typography and print aspects of flat UIs.

However, the flat UI trend has produced interfaces that have been oversimplified and/or poorly designed to the point where they are difficult or even annoying to use:

The readability, simplicity, and elegance of flat UIs are all noble pursuits, but in abandoning the gloss, texture, and shadows, user interfaces have lost a good portion of their appeal, their intricacy, and their depth. I remember how much care was put into designing user interfaces and how amazing the resulting experience looked and felt: the realistic-looking interfaces of old seemed more usable than some of the highly abstract and simplified interfaces in use today. If only there were a way to combine both efforts into something that people on both sides of the issue can appreciate.

The Evolution of UI Components

In this CSS3-implemented time capsule, I have chosen several button styles from representative systems of their day over approximately the past decade: 2005 is from Windows XP, 2006 is from OS X Tiger, 2007 is a modification of a tutorial inspired by Windows Vista 1, 2008 is a bevel button from the cusp between “Web 2.0” and “Web 3.0”, 2009 is from Windows 7, 2010 is from Microsoft Office 2010, 2011 is from OS X Lion, 2012 is from Google, 2013 is from Windows 8, and 2014 is from iOS 7.

Prior to these specimens, most user interfaces were intuitive, but not necessarily “fancy” (e.g. Windows 2000, Mac OS 9, or KDE 2). The OS X “Kodiak” public beta sparked a race for 3D skeuomorphism with its original aqua interface. This race ended around 2010 when Microsoft released the first version of Windows Phone. Since then, simplicity, minimalism, and—perhaps to some degree—laziness have been the driving trends in interface design, as illustrated in the evolution timeline above.

  1. I used this button design in a website once, but that website is no longer available since I have been unable to actively maintain it. I might resurrect this button style in future versions of my own personal website. ↩︎