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:

• Well-designed flat UIs emphasize contrast, so text stands out and is very readable even at small sizes.
• More emphasis is placed on colors and fonts, lending to beautiful color accents and elegant typography.
• Elements are spaced comfortably to provide a clean, uncluttered, and focused experience.
• The small color palette makes content transition well from screen to print.
• The simplified elements do not require much processing to render, so flat UIs are usually more responsive and require less power to operate.

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 drive to make interfaces appear and work well on mobile devices can detract from the appearance and usability on desktop computers.
• Poorly chosen color themes do not have enough contrast to be readable. On the flip-side, small amounts of black text on a bright white background has too much contrast can damage users’ eyes if not used in a properly lit environment.
• Removing or reducing the visual cues used to separate UI components can make an interface seem cluttered and disorganized: the mind is overwhelmed because it cannot distinguish easily among controls.

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

See the Pen Evolution of UI by Matthew Barry (@komputerwiz) on CodePen.

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 ¹, 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.