This is the third installment of Fall of the Designer. If you've missed the first parts of the series, head over and read Part I: Fashionable Nonsense and Part II: Pixel Pushers.
In the early 2010s, the design industry became increasingly aware that designing both web and native applications would require more effort than it had previously. It is argued that before one could achieve market success with a one size fits all desktop or mobile application or website. Designers today are compelled to adapt their designs to multiple display sizes. It is not just traditional laptops and desktops that need to be taken into account, but also TVs, smart watches and even car dashboards.
One can find operating systems like iOS powering car dashboard UIs.
Enter responsive design, an assortment of useful techniques for making interfaces scale fluidly from one device to the next. Unfortunately, the adoption of responsive design standards comes at a significant cost, as it has been paired with flat design.
As websites became responsive, they became a mess of flat colors. For the truly adventurous designer today, the most that can be done to spice up a website is to insert an Instagram photo that has little or nothing to do with the company’s product. If lucky, that is paired with a translucent overlay so that the text is legible.
Ethan Marcotte, who initiated the responsive design movement, posited that there are three core pillars to the philosophy: "Fluid grids, flexible images, and media queries." Marcotte argued that "Thinking of design and implementation as separate concerns impacts the quality of both." He is right that the two are intimately related, however they are still distinct modes of thought.
Unfortunately for Marcotte, his responsive design techniques unintentionally led exactly to the separation and abandonment of visual design principles in the interests of putting implementation first. Today, responsive techniques allow design practitioners and engineers to argue that the centrally important aspect of digital design is whether it adapts to multiple screens using fluid layouts to the exclusion of any other need.
Google uses responsive techniques so that their interfaces can adapt to a variety of form factors in their Material Design framework.
Thus application design has suffered greatly from lackluster responsive and mobile-first approaches. Instead of optimizing designs to each platform and usage paradigm, now designs tend to be one size fits all. Material design is a good example of this. There is a big trend among designers to redesign websites to fit into the Material Design framework, not realizing that Material Design was specifically intended to be optimized for phone and tablet usage. In this way it would be just as foolish to redesign everything on OS X to look like iOS with giant buttons and iOS-like hierarchies. Instead, these designers miss the advantages and competencies that each unique platform offers and instead provide users a reductive approach to design.
The vast adoption of the hamburger menu in web as well as in native mobile and desktop application design is proof of the misguided thinking that responsive thinking promotes. Instead of finding the ideal solution for each platform, the designer intent on implementing boring solutions can just apply the hamburger menu to each platform and call it a day.
Avant garde design agency Code and Theory appears to stress that:
Websites should do more than respond to devices. Web experiences should respond to multiple contexts so that they’re meaningful to every reader, in every moment, on every device.
Unfortunately, the only elements that responsive design has defined context for have been content: text, audio, video and images. Interfaces themselves have been visually and functionally decontextualized en masse.
Twitter, Tweetbot and Twitteriffic all used to stand out from each other, and from their competition.
Now, these same respective apps are, for all practical purposes, visually indistinguishable from each other and are illegible on their own due to their low contrast in hierarchy.
Update 7/7/15: In the months since this article was posted, Twitter has further whitewashed their app. Now one would be hard pressed to tell a significant difference in their design languages.
Similar to web design, application design is becoming homogenized. Where before, apps like Tapbots' Tweetbot were worlds unto themselves, with robotic sounds and futuristic cartoon aesthetics, today the only remnant of that past is robotic sound effects, devoid of any rationale as to why they sound the way they do.
Paul Haddad of Tapbots seemed to laud the shift, explaining in 2013 that he and his team "talked about making the Mac version a little bit more...plain" too. This hesitation might have invited our skepticism about their approval of flat design. But in the following years, Tapbots announced proudly their newly flattened Tweetbot 2.0 for OS X.
Calcbot for iOS used to have a distinctive flavor that set it apart from the competition. Today it looks eerily similar to the default calculator app.
Tapbots' desktop calculator of course follows the same logic: reference Apple's bland design and slightly shift some hues. The extent to which branding occurs is applying a shade of blue to a few areas of the screen.
Calcbot for Apple Watch takes the non-branded brand to a whole new level: Tapbots does not even include their one remaining signature: the Tapbots blue.
Tapbots is not alone in castrating Calcbot and their Twitter client Tweetbot. The Iconfactory's Twitteriffic and Twitter's proprietary iOS app in earlier days all attracted dedicated followings based on expressive designs which each exposed unique feature sets. But with their new flat interfaces, they struggle to differentiate their brands. Even with custom glyphs, animation and functionality, at a 10 foot view, it is difficult to tell one of these flat UIs from the next.
Did these developers suddenly have an epiphany and conclude that their former designs were ugly and overwrought? Or was it instead an imposed, though convenient, ideological shift by operating system designers?
The most logical explanation is that these app companies did not come to some sudden realization that their prior aesthetic was faulty and impure, but instead predicted that sticking to expressive aesthetics would make them no longer appear current and trendy. Ultimately, not appearing current is a grave offense to those with a modernist avant garde sensibility.
App development studios know well that they must appeal to such a sensibility and tailor their designs to the flat aesthetic should they want to be approved and featured by the operating system designers who run the app stores. Thus whether or not they agreed with modern minimalism, these app developers and designers were forced to follow suit and flatten their interfaces. In doing so, the interfaces have undoubtedly lost the personality they once had.
Mark Jardine of Tapbots created this dimensional design in 2010. He has since expressed his complete disapproval of what it stands for.
For designer Mark Jardine of Tapbots, the desire to prove he had moved on from dimensional design became unbearable. Describing an unused mockup for the application Pastebot using the dimensional aesthetic, Jardine explained that he was "Glad this abomination never happened." In this act of renouncing his excellent work, Jardine demonstrated his adherence to prevailing ideology. Perhaps at least for some designers, there really was an epiphany about the suffering that had been caused by the dimensional aesthetic.
Jardine's expressive designs brought Tapbots to prominence.
What is most disappointing about Tapbots' shift in design philosophies is that Jardine and Haddad were responsible for some of the most expressive design in the early days of the iOS App Store. At the time, their UI designs represented the best of what independent software had to offer: compelling experiences that helped users get otherwise boring tasks done in a fun and immersive way.
Why Should Responsive Design Be Flat?
One can find modern minimalist creativity displayed throughout the industry. In order: Heroku, Palantir, Google, Thoughtbot, Treehouse, MailChimp, Box, Intel, Dropbox, Facebook, Campaign Monitor and InVision.
It is a common knee-jerk response to assume that the move towards the flat aesthetic arose solely due to responsive design. Frank Chimero argued to much fanfare,
The web is forcing our hands. And this is fine! Many sites will share design solutions, because we’re using the same materials. The consistencies establish best practices; they are proof of design patterns that play off of the needs of a common medium, and not evidence of a visual monoculture.
Reminiscent of Matias Duarte's theory of "convergent common solutions," Chimero is free to argue that we are experiencing "best practices" and not a "visual monoculture" but that will not make the assessment any more true. The existence of a visual monoculture is explicitly noted in his statement, "sites will share design solutions." This callous equivocation is completely transparent.
This diagram in the Aqua HIG illustrates a longstanding slicing technique to scale buttons. The end-caps are pre-drawn and the middle section scales as necessary to accommodate text placed on top of the button. This is all done using raster images. This is but one of many techniques to render scalable dimensional elements.
It is quite untrue that "best practices" have forced us to remove texture and dimension. Techniques have long existed for creating scalable textured graphics. And these sorts of shakeups in software due to improvements in hardware capability or device fragmentation are commonplace.
High resolution screens dramatically increased the potential for detail in the design of interfaces – a capability that has been neglected with the advent of flat design.
In fact, ours is a time that is most ripe for richly textured interfaces. Only a few years ago, we were embracing the onset of high resolution, "retina" screens. This combined with the defeat of resistive displays by accurate multi-touch displays makes the shift all the stranger. With greater capacity than ever to render convincing graphics, one might expect that we would continue to confidently push the graphical limits of the machine by creating stunningly detailed interfaces. Yet the opposite has happened—we have seen a backlash against expressive design.
A brilliant modification of an XKCD cartoon by iOS developer Jordan Kay.
It is not only the timing or the backwards direction of the shift that is puzzling, but the class of devices first targeted. One could argue that for desktop use there is a degree of distance and abstraction between the user and the desktop computer, namely the mouse, and thus expressive graphics should be removed. Of course this is not a sufficient justification for removing dimensional graphics, because those who use mouse input still require optical cues. Still, if there is one class of device that would suffer most from the removal of dimensional graphics, it would be one intrinsically based on tactile interaction. Yet it was precisely the touchscreens in mobile phones and tablets that first had their operating systems go flat.
Flat design is in this way an utterly illogical response to the high resolution screens, sensors and haptics that we have today. All of these technologies imply a greater capability to render and interact with depth and texture. It is no longer 1996 when someone of repute could argue with a straight face as Rudy VanderLans did in Emigre 39:
The World Wide Web is often hailed as the Next Big Thing in graphic design, but it's a problematic environment for graphic designers. One problem is that it has limited graphic possibilities. The coarse resolution…
Operating system designers clearly grasp that we have greater graphical capability to some extent, they just choose to isolate that depth and texture to the most obscure and useless instances. For Google, this is allowing depth only in the form of shadows. For Apple, dimension is limited to distracting blurred translucency and parallax. Of course Apple does not permit their designers to go to the trouble of accurately rendering parallax effects, because that would be engaging in what they consider to be the one of the most "masturbatory" acts possible: attempting realism. The entire craze over parallax effects that Apple and others in industry have exhibited is evidence of the impulse towards aesthetics butting up against minimalist principles resulting in cognitive dissonance. The hypocrisy of Apple's accusations of superficiality towards their previous aesthetic is made clear considering that their primary applications of depth have been entirely divorced from utility. The dimensional effects they do permit are instead those that would most accurately be described as counter-functional eye candy.
On the left is Apple's design for Apple Watch. On the right is a dimensional rendering I made. It takes up the exact same amount of space but conveys that the element is clickable.
Craig Hockenberry of the Iconfactory posited that the reason Apple switched to the flat aesthetic might be that the Apple Watch offers less screen space for detailed renderings, and so they preempted the eventual switch by flattening iOS and OS X. Similarly, John Brownlee of FastCo argued that "Flat design was the iWatch's secret weapon all along." These explanations are wholly incorrect. One need not remove tactile dimension for lack of space, as is evidenced above, dimension does not necessarily require more screen space. Even if depth did require more detail, space concerns would be mitigated by the increased pixel-density of a high-dpi screen.
Some argue that the scalability of vector assets is a solid justification for Apple going flat. This cannot be the rationale when it comes to Apple, as Apple continues to rely heavily on raster assets for the advantages they present, even when it comes to flat images. In addition, though it used to be that rendering elements using the CPU with Core Graphics was faster than loading PNGs, now that the GPU is significantly faster, drawing is slower than loading cached raster images.
Apple takes a non-responsive approach to their visual design. These are renderings of each platform's music player interfaces.
Furthermore, it cannot be said that responsive design is responsible for Apple's shift towards flatness. Unlike Microsoft, Google and web design practitioners, Apple hasn't used anything remotely like a responsive approach to the visual design of their platforms. Outside of the shared designs between iPad and iPhone, each platform, whether Apple Watch, iOS or OS X, looks and acts in a way highly differentiated from the last.
It is therefore a mistake to entirely attribute the shift towards flat design to responsive techniques. In truth, responsive design was simply a convenient catalyst that allowed OS makers, developers and designers to obfuscate the need to pursue a principled practice of visual design. Responsive design was indeed one of the proximate causes of flat design's onset, but adherence to modern minimalist ideology was the ultimate cause. Responsive techniques are undoubtedly crucial to providing a multi-platform design, but they should not come in the way of a user-centered experience.