Navigation

Flat design vs. skeuomorphism

By Mike Redaelli | Web Design | Jan 22, 2013

It seems that there has been a line drawn in the sand. A few brave design pioneers have all but denounced skeuomorphic design as yesterday’s news and have voted it off of the proverbial island.

Are we witnessing the turning point of design as we know it, or are these champions simply jumping an imaginary bandwagon?

Let’s take a closer look at the two biggest styles in 2013…

 

What is flat design?

In plain terms, flat design is a style of interface that doesn’t employ any three dimensional realism. Windows 8 is the perfect example, being, as it is, entirely flat.

Flat design advocates consider the leather strip across the top of your iPhone’s screen in the Notepad app, or the debossed lines in the Reminders app, as examples of skeuomorphism; they are examples of translating features from one discipline to another. Flat design employs no gradients, bevels or shadows to simulate three dimensional design (as screens are two dimensional).

Flat design

Microsoft’s flat design for Windows 8.

Flat design is currently being championed as the revolution that web design has been waiting for: an honest approach to screen-based design. However, flat design is not a new concept; many interfaces have employed a flat design aesthetic for years, Google to name one; Facebook to name another. Is this the key to their success? Is this style easier to use and therefore, better?

 

Isn’t skeuomorphism better?

If our job as designers is to make technologies user-friendly, then why not make them familiar? And as designers we have a responsibility to make interfaces more familiar to all users, not just the most cutting edge techies.

Why not make the notepad look like a legal pad if that will help your average tech user to understand the concept of the application in one glance? (Bear in mind that the average tech user is getting older and technologies are being utilized by the masses en force these days.)

Skeuomorphic design

Apple’s skeuomorphic design.

To strip away these familiar elements is stripping valuable teaching tools away from the less inclined, average user.

 

Summing up

When I sit down to design an interface, I ask myself, who am I serving? In some cases, a flat, sleek, modern design is in order, such as an interface that is developed for a tech-savvy project manager looking for a great tool. However, to claim that flat design is what design needs in general is a somewhat narrow opinion that leaves the less experienced users watching from the sidelines. Some users only recognize a button because it looks like its real-world equivalent.

At the time of writing, there has been precious little research conducted on the differential effectiveness of flat design versus skeuomorphic design. As a divide grows between the two schools of thought, it will be interesting to see which approach reveals itself to be more useable.

One thing is for sure: you’re going to read a lot more about the debate in the next few months.

 

 Are you a flat design advocate? Do you feel skeuomorphic design helps familiarize users with an interface? Let us know your views in the comments.

Featured image/thumbnail, flat image via Shutterstock.

Share this post
Comments (no login required)
  • Dave

    This is a bit of a lazy article IMO. You haven’t really done anything more than scratch the surface of this debate, and posting a screenshot of Apple’s website as an example of skeumorphic design isn’t really appropriate. The only skeumorphism it demonstrates is the use of bevelled buttons. Why not some screenshots of Notes, Contacts etc.?

    When the web rails against Apple’s UI design, it’s not because it’s all bad, it’s because it’s looking stale. Instead of evolving, they’ve iterated on the same concepts and iOS looks increasingly dated next to the fresh designs present in Android, Windows 8 and Windows Phone 8. Some people feel that isn’t good enough from a company that used to lead the way.

    The worst thing about skeumorphism is really the same as everything else – when it’s overused and poorly deployed. It’s the same reason people whine about Helvetica. It’s up to us as designers to combine the best of all worlds, skeuomorphic, flat design, steampunk, 90s photocollage – whatever – and create unique, memorable interfaces.

    • Benjie

      You could literally dozens of books on this topic, which unfortunately we can don’t do in the space available to us here. This is of course, an article intended to posit a question rather than trying to resolve one.

      The Apple screen shot in question was chosen precisely because it is a subtle form of the style. Yes, there are more extreme examples, output by Apple (and others) but the subtle gradients and drop shadows are what are most frequently emulated by designers.

      • Ross Holden

        I think it’s the wrong question though. It’s not flat vs. skeuomorphic. A button on a website having a bevel and maybe a drop shadow on it doesn’t make it skeuomorphically designed. An example of skeuomorphism in Apple UI’s would be the iCalendar with it’s leather stitching which is meant to look like it’s physical world counterpart – or the linen background on Siri. I’ve never really understood why linen on that one.

        The best example I’ve seen was a music player app for iOS (I can’t recall the name of it now – apologies). The app’s interface was a side view of a cassette and as the track progressed the ‘ribbon’ became thicker indicating the progression of the track. How many people use cassettes now? I think that’s why the argument exists that it is old fashioned. In the cassette player example, it’s almost retro. There would be far less cognitive load on a simple progress bar to indicate track progression.

  • http://twitter.com/lplohmann Luis Paulo Lohmann

    Saying “flat” or “skeuomorphic” is better is just like saying “realism” is better than “impressionism”, “rock” is better than “blues”, “sans-serif” is better than “slab serif”. In any project you should first of all evaluate what better conveys for the message you’re sending and the audience you’re targeting, and shouldn’t simply discard an option before even starting.

  • http://twitter.com/b7uroon RamD

    For a particular project, I think the style depends on the clients preference . So for me, both style must be learn. IMHO.

  • http://twitter.com/andCKsays CK

    as someone who refuses to use iCal because I can’t stand the way it looks, I welcome flat design with open arms. it is interesting that Apple currently lives on the skeuomorphic side, and microsoft on the flat side… if you had asked me a year ago, I would have anticipated the exact opposite, given each company’s history.

  • http://twitter.com/alocamp Alex Camp

    I don’t see skeuo or flat as trends at all. You can either have one or the other, or a hybrid. It totally depends on the application of the style to deem its relevance in a certain project. I like how Joe Casobona pointed out below that the UX must match the interface for the application to be a true success.

  • http://twitter.com/tayokoart Miguel Ángel Pérez

    I feel like designs that completely “flat” miss out on some of the visual affordances. A button that looks pressable affords pressing, after all.

    • Ross Holden

      I wonder how much of that is down to us being so used to non-flat design though. We tend to scan webpages looking for bevelled items to click on.

      There are a lot of things you can do with your content alone to indicated things like hierarchy. Size, colour, weight, typography to name but a few.

      • http://twitter.com/MarcoAlDente MK

        For those of us a little older, we grew up on flat design. The whole problem with this flat vs Skeuo debate is that it really comes down to fashion … something which adds nothing tangible to the user experience as it’s all in the mind.

  • http://www.littlesparkvt.com/ LittleSparkVT

    It really depends on your clients. You can’t force a style on a client if it’s “trendy” right now, do what’s right for what your client needs.

  • chronicler_Isiah

    I think it’s interesting that Apple’s art director responsible for the look of the mobile interface, Scott Forstall (also responsible for their poor Maps app), was fired back in Oct 2012.

    Whether that means the end to daft leather-stitched etc etc elements on mobile interfaces remains to be seen.

    Sometimes skeumorphic design can be fun (flat can be bland after all) and aid usability – but it’s a question of not making it look too tacky.

    I don’t think skeumorphic design is actually exemplified by Apple’s site at all – that has an entirely different issue – too many CSS3 effects! Needs a clean up as it is starting to look dated yes as do a lot of those kinds of sites – but skeumorphic it is not!! A bad example to make your point I think.

    Cheers
    I

  • http://www.facebook.com/do.jacobson Do Jacobson

    “Bear in mind that the average tech user is getting older and technologies are being utilized by the masses en force these days.”

    I find this a weak argument, although tech users get older, a lot of them already saw a lot of technologies come and go. Technology is also getting older. So your grandparents tend to have less trouble working on a PC, Mac or whatever, then your parent’s grandfolks.

    Skeuomorphism is a design choice, that some people like and some people don’t. The examples shown here could have been a lot better.

    Anyway, of course there is no “what is better” answer. It totally depends on what you’re making and who your audience is. It’s like the debate over native vs hybrid apps. There’s no single right answer, as it totally depends on a lot of stuff…

  • http://twitter.com/jottin Jason Ottinger

    Form follows function…remember that ol’ phrase?

    • http://www.facebook.com/Bryandhughes Bryan Hughes

      The notion that the two are not often one-in-the-same is exactly why that is an “old phrase”.

  • http://www.facebook.com/amman.sabet Amman Sabet
  • http://foxjon.es/ Fox Jones

    i really enjoy giving depth and dimension to my work. it’s kind of satisfying when you add a little shadow or sheen and a button suddenly seems tactile.

    i also love the simplicity and minimalist aesthetic of flat design. the no-fluff philosophy of information first.

    i would dare to say one factor that separates them, as a designer, is budget. it takes way longer to create a realistic interface, adding all these extra design elements and window dressings.

    when i look at my portfolio and separate the flat from the skeumorphs, it becomes clear that i spent a lot more time (and clients spend more money) on “making it pop”.

    that’s a +1 for flat, if you’re being economical.

    technically speaking, skeuomorphic is also more expensive. wether you’re using background images or a few extra lines of css to render those effects, the bandwidth required goes up dramatically for each element, as does the processor time required to render such effects (especially with multiple semitransparent layers, drop shadows and alphas).

    so that may be one reason a massively trafficked, data hungry site like facebook would opt for such a simplistic style: efficiency. +1 flat.

    skeuomorphic design has more visual weight to it. it creates a more immersive experience. you feel like you’re interacting with a close facsimile of the real thing, and not a computer. this can often be an experience you want to convey with your brand or identity.

    so, there are a time and place for both. in short, i think if you’ve got a lot of data on screen and want to be able to navigate it quickly and efficiently, flat is where it’s at. if you want to create a real-feel so your user can reach out and touch you, then the decision for this schism is skeuomorphism.

  • http://www.facebook.com/Bryandhughes Bryan Hughes

    Blah. Another web design article that discusses basic, age-old design principles as if they were new trends – as if there are only two trends to try and emulate. Put this up there with “the advantages of designing with a grid” type of articles.

    To the point on skeuomorphism: no, people will not only recognize a button if it looks like a button. Skeuomorph buttons don’t look like buttons at all. They may look 3d elements, or like they have a familiar texture, but I have seen not one button anywhere that looks like a pillbox with a sentence of text on it. What I do see, for many sites, are web designers who are excited and incorporate gradients and the like as a base point of their designs, without ever actually thinking about if the design needs it. A button doesn’t need to look like a “button” – it needs to look like something you can click.

    Great job filling the blog entry quota for the week, but this article doesn’t make any statement other than to make the web design community look like we’ve never familiarized ourselves with absolute design basics.

  • Alexandru Stefanica

    It’s also ugly, or dull. I think a combination of both will be better for the future of webdesign.

  • pwucker

    I think there are other things to consider when debating this point.

    Firstly, the route one chooses should also take the brand into consideration. If you’re working on an apple site, use skeuomorphism. If you’re on a microsoft site, use flat colours.

    Secondly, one of the reasons flat/geometric designs are increasing in popularity is that they are more adaptible. Its much easier to resize simple geometric shapes to adapt to any given mobile device or screen size than to create multiple versions of a detailed, skeuomorphic interface for a multiple of devices. Remember when the ipad came out and you had that ‘2x’ button in the corner to enlarge an app, while everyone ran around re-creating their lovely detailed notebook textures and other assets for the larger display? Now, they’re doing it all over again for retina.

    Simplifying the UI assets by making them simpler, responsive and re-usable makes sense in a lot of cases (but not all). There will always be a place for lovely, polished, tactile interfaces. But it should not just be a matter of personal preference or trends.

  • Ronald Mason

    Just use the one that suits the project.