They Call It Flat Design

I would be a hor­ri­ble blog­ger if I did­n’t write about the two-ton ele­phant in the design room right now — flat design. It is the trend, buzz­word, motto, theme, and cliché of 2013. Thousands of words have already been writ­ten about the rise and pro­lif­er­a­tion of flat design, and I’m here to con­tribute a few more.

I start­ed to write this post after see­ing the announce­ment of a new MailChimp inter­face being unveiled for release in a few weeks. What caught my atten­tion — besides the design — was that the word “flat” appears nowhere in the announce­ment. The rumor mill is whis­per­ing that Apple is going flat too. I’m going to place a bet that none of the pre­sen­ta­tions at Apple’s WWDC are going to describe iOS 7 as “flat” either. The band­wag­on is tak­ing on pas­sen­gers and fill­ing up fast.

Now, I know MailChimp and Apple are going to do it right. They’ve put in the research and user test­ing to refine their iter­a­tions and get to a happy place. The prob­lem is all the other peo­ple who start hack­ing away at their web­site or appli­ca­tion try­ing to chase the look but not com­plete­ly under­stand­ing it. That’s a bold state­ment; I guess I need an exam­ple to back that up. Oh look, here’s one.

Windows 8 vs. Office 365

The insti­ga­tor for all the flat design hul­la­baloo was the release of Windows 8 in late 2012. Gradients out, drop shad­ows out, intri­cate icons out, clut­tered menus and set­tings out. Focus square­ly on the con­tent and drop every­thing else. Windows 8 got it right. Now other depart­ments at Microsoft are realign­ing behind the flag­ship and some are not so suc­cess­ful. Look at Office 365 and its 2013 updates. Sure, it’s flat­ter, but is it better?

Here is the admin por­tal before and after. This is a com­plex screen with lots of options for man­ag­ing a lot of func­tion­al­i­ty so it’s a tough start­ing point any­way. Before is noth­ing to praise as the pin­na­cle of web design, but it still had more def­i­n­i­tion and hier­ar­chy than the new design. Getting rid of back­grounds and using two col­ors does­n’t do any­thing to help the struc­ture; it actu­al­ly hurts. The new design even took a step back­wards in terms of respon­sive­ness caus­ing hor­i­zon­tal scrolling at 1280px wide.

Here’s anoth­er exam­ple, this time the set­tings screen for the cal­en­dar. There are a few check­box­es and drop­downs for cus­tomiz­ing how your cal­en­dar looks, how reminders should work, and how to help auto­mate some tasks. Spacing is hap­haz­ard. What’s this hier­ar­chy you speak about? All of it blurs into a jum­bled mess of lines as you try to find some­where to look first. Is this flat enough yet?

They Call It Clutter

The idea of sim­plic­i­ty and delet­ing clut­ter is an admirable goal; just make sure you know what is clut­ter and what is nec­es­sary. That’s always been a design chal­lenge no mat­ter what trend is pop­u­lar at the moment. Chasing after flat design can be a slip­pery slope to messy inter­faces. Be care­ful what you cut and don’t become too flat.