The Cookie Abyss
By: Alex Walker
Tags: Cookies, Flat Design, UX Design, Graphic Design

The Cookie Abyss

Brought into vogue by Apple, and Microsoft, flat design is ubiquitous in web design now, and gorgeous examples of its implementation exist. But, flat design’s inclusion in templates on Squarespace, Wix, and other website builders has led to a homogenization of web design. Slick geometric icons and templates have led to a flat net. Everything looks like a tech company. Brands can suffer from this and identity can clash with the flat aesthetic, and, more egregious, it’s boring.

Just to note, Google has a soft counterpoint to the flat design ethos with its material design ethos. But in this article, I’ll be focusing on Apple’s current Flat Design, and their old ethos of skeuomorphism. For brevity, we’ll be focusing on aesthetics, not on functional discussions of these design languages.

For the uninitiated, flat design is a minimalist design style that many of us were exposed to when Apple swapped from iOS 6 to iOS 7 on the iPhone. They swapped from skeuomorphic design to flat design. Where iOS 6 had buttons that felt more like buttons, with a real depth to them, iOS 7 presented simple shapes mixed with a gradient background.

Now, Apple has good designers, and I’ve come to appreciate the flat design implementation with iOS to present many different apps on the home screen. In this context, flat design serves its purpose well. The removal of texture in the app icons helps cut down on visual noise, providing a more precise experience navigating one’s home screen, and the inherent ugliness of the early iPod went away.

Gradient Hell.

Microsoft has also moved to a flat design ethos. And now, you would be hard-pressed to find a different design ethos for most high-end devices and interfaces.

Skeuomorphism vs. Flat Design

The early iPod and iPhone subscribed to a design ethos known as Skeuomorphism. The idea behind Skeuomorphic design was that the digital equivalent of an app would closely imitate the real-life counterpart in appearance. Buttons would look like physical buttons, and everything had some depth to it. A lot of the implementation was ugly, and the textures often ended up looking gross.

Now, texture as a concept has plenty of problems when implementing it into a design. If the texture’s contrast is too high, it can impact the readability of text, load times can increase, and it can also distract from the content. But the main issue with texture in design is the concept of material dishonesty. This is a concept that is usually only subconsciously felt, and not often analyzed. Everything a user is looking at on their screen is made of pixels that imitate a type of reality. Medium.com in your web browser isn’t attempting to emulate paper, it’s providing a clear white space for you to read the words. This is where flat design excels, it’s not pretending to be something it’s not.

Material dishonesty is why skeuomorphism does not work. When you see wood around a design on a computer screen you know that it’s not real wood. It crosses a line into novelty that cheapens the overall look of the design. You know that wood is fake, and the “lie” can pull you out of a design instead of pulling you in. It crosses a subconscious barrier into a headspace where the design looks “faux”, cheap, and gross.

Flat design excels at avoiding the inherent material dishonesty of designing for the web and presenting elements clearly in UI, but it sacrifices one major quality: Immersion.

Design is supposed to make you feel something. From the base level, designing something is formulating a story through a picture, and flat design tells you nothing. Our screens can be small windows to any place, any time, and we’ve arrived at a white void with Google’s logo for half the web. Flat design lacks immersion in the world of your design and has a detachment from the physical world. A detachment that is already far too present in a world of screens.

This line of detachment vs. immersion is something that should be straddled project-by-project. For engineering, designing, calculators, or analytical based applications, that detachment can be an asset in not annoying the people using the tool. But for interactive learning, online storytelling, and personal brand identity, immersing a consumer can help to create a more personal connection that feels based in reality.

For tech companies, detachment serves a purpose. Flat design does well in showcasing engineering prowess. The technology is cold, calculating, and powerful.

For a cookie company, detachment in the design ethos feels weird. I’m looking at you Crumblcookies.com. The design of your site seems almost sinister. I’m not sure what secret you’re hiding. But your website feels like staring into the cookie abyss, and the cookie abyss stares back every time. There is a tonal dissonance between the product and the presentation. The design is technically competent but tonally deaf to the warmth inherent to cookies.

Tonally dissonant but technically competent.

Implementing Skeuomorphism Correctly

Texture and depth can add to a design, but they have to be implemented carefully. To dodge the material dishonesty that makes designs look cheap, elements that add depth must be used tactically. You have to create a world in your design and adhere to the tenets that you establish. Skeuomorphism fails because texture is often inserted without context and without rules.

Ah yes, let me turn off the wi-fi on my blue striped socks.

In my Digital Publishing class at UVU, I designed an article about Ansel Adams. Ansel Adams worked in analog film photography, and his photographs of American landscapes are dramatic, technical, and breathtaking. So in presenting the article, I kept the idea of his work in context, I presented the cover page in a frame. I created a dimension in the design where you’re in a gallery looking at Ansel Adam’s work. Using a font with an analog and printed aesthetic adds to the outdoorsy feeling that goes along with his mountain vistas.

By playing to this context I provided additional immersion to the visual feel. If I had designed with a flat design ethos, that dimension of the design would’ve been neutral at best, or tonally dissonant at worst. When you create a dimension within your design, you can immerse the viewer and provide a unique, not just functional experience. Aiding a sense of reality to a design can enhance the story, or tell a story all on its own.

Another project I did at UVU early in my academic career encapsulates some of the world-building that can be poured into a project. I made an Infographic about zombies with a timeline of notable zombie movies. It was called Rise of the Dead (in Pop Culture) and I had the idea to add some cinematic elements from zombie movies in the presentation. The viewport of the project was a derelict TV terminal with bloody handprints on it.

These projects, without the skeuomorphic elements included, would be missing out on storytelling that enhances the experience. Design is visual storytelling, and I don’t love a lot of the ways that skeuomorphism has been implemented in the past. But design moves in cycles, and a detached flat web is starting to feel impersonal and dystopian, in a time when we already have a lot of that in our news and post-post-ironic world. We don’t want the cookie void, or the dimension of pure branding. There’s a place for warmth, narrative, and connection that I see people yearning for, and that should be fostered through the designs we make as creators.

Alexander Walker is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to the Final Assignment in the course DGM 2270 and representative of the skills learned.