Skeuomorphic interface design

The trend away from skeuomorphic special effects in UI design is the beginning retina-resolution design era.

Very smart article from John Gruber.

  • Using print design for his analogy doesn’t make sense. People interact with a UI design. They consume a print design. Skeuomorphism is all about encouraging people to interact with the pixels on a screen as if they were the real world objects they are accustomed to.

    Also, skeuomorphism isn’t necessary in print because you can just photograph and print the real article, which is what is done all the time in print.

    And skeuomorphism in iOS really only took off once we got our first retina display with the iPhone 4. It was after retina display arrived that we got the linen texture in iOS, and all the textures and embosses of the Reminders app.

    His argument that skeuomorphic designs were meant for lower resolution screens doesn’t make sense, either. The more detail your screen is capable of showing, the more detail you would want to add to the design. Just look at HDTV as an example. They had to increase their attention to detail with lighting and makeup in television as a result of the increase in detail on the screen.

    I’m not following the logic of this piece at all.

    • 600dpi

      Agreed. The whole post is just rambling nonsense – we’ve come to expect better from Gruber. He’s a smart fellow and certainly has a lot of knowledge and experience with fonts and print design, but to equate those directly with UI design is baffling.

      Print design is mostly about readability, UI design is more about usability. You don’t need any hints on how to use a magazine because the UI is dead simple – just turn the pages. OS UI design is way more abstract and needs hints for users to figure out how to use it.

      The (don’t call it) Metro style for Windows Phone/8 certainly is popular among the minimalist hipster crowd these days, but consumers seem to hate it because they can’t tell if something is a button or just random text and images.

    • Completely agree with you there. I also don’t like the fact that people use Letterpress as an example. Sure it is minimal but it does not NEED anymore textures and effects than it currently has. It’s a game of tapping on letters.

      Compare programs like fantastical on iOS to the default Windows Phone calendar. The difference is day and night. Flat designs aren’t always better. Skeumorphic design has gotten a bad name because Apple has overdone it in Calendar and Contacts. But designs like these are much much better at communicating to the user than flat apps like Clear.

    • I agree with your points. Another troubling thing is that Gruber offers his font analogy as an explanation of the “divergent paths” of Apple’s hardware and software – the supposed clash between Apple’s hardware minimalism and software “skeumorphism” that is harped on by iOS critics everywhere.

      I have a much simpler explanation: these two diverge becasue the hardware is like a picture frame (quite literally in the case of the iPad and the iPhone) and the software is like the picture. The job of the frame is mainly to get out of the way, so it needs to be minimal. It does not follow that what goes inside the frame also needs to be flat and minimal. Quite the opposite, it can be lively, textured, and detailed in contrast to the frame.

      This is why Apple hardware and software do not look the same. Interfaces are designed for humans, not machines. If a skeumorphic interface makes a given app easier and more fun for humans to use, then it is good. I’m not convinced that the divergence (or the hipster geek criticism of it) has anything to do with screen resolution.

    • take2tylernol

      exactly, his arguments seem quite backward. Now that we have retina, we can have far better detailed textures . The real issue is how easy it is to push to tacky. The leather in ical and the leather stitching in find my friends are two examples of it going very bad. Restricting your design options to the spartan aesthetic of the Windows Metro look is nice but it has a fatal flaw — Everything looks the same! A big problem if your are running multiple apps simultaneously. Pretty sure most of the readers of this blog do not hav a Windows phone, but perhaps an Xbox 360 — power it up and update it and try navigating around and you will get a feel for what I mean. Textures and skeumorphism help distinguish apps and will not go away. Hopefully Apple will just tone down the bad examples in their built in app suite.

    • Both Gruber and his critics occasionally generalize about UI design as applied across the board for all sorts of different uses. It’s fun to reinforce one’s declarative rhetoric in opposition to someone else’s declarative rhetoric, but neither addresses the need for variety in design that’s meant to serve multiple needs.

      There’s a reason print design is being cited here, and it’s instructive for anyone who has the attention span to dig a little deeper into the principles that underly good design, whether for printed communication or for software user interfaces. Those principles are basic for understanding how to address an audience in the clearest possible ways. Skeuomorphic details are just that: secondary considerations compared to the need for usability, simplicity, clarity, and consistency.

    • Lucas Gladding

      I don’t think the line is that clear between print and UI design. You might not interact with print design in the same way, but there is an interactive element to it, which is why design theories exist.

      I agree with Gruber that high resolution displays are helping facilitate the move away from skeuomorphic design. I also agree about the reasoning. Skeuomorphic design is less convincing at higher resolutions. On a lower-resolution screen, your brain handles the interpolation. Most (all) artists aren’t that good.

      Text (depending on the font) looks great on retina displays, and visual trickery isn’t necessary to make a design interesting. That said, I don’t think that necessarily conflicts with skeuomorphic designs.

      The problem I have with most designs that emphasize skeuomorphism is that the UX doesn’t match what is suggested by the design. The notes app, for example, behaves nothing like a notepad. Paper calendars don’t have buttons to move from month to month. Audio plugins are one of the few examples where I think the parallel is effective.

  • My disagreement with the article is it’s dogmatism. One thing is good. Another’s bad. The truth is that one person does something and a carload of talent-free “designers” copy it. It becomes a trend, then a style. And then it’s out of date.

    This entire pattern ignores the basics of good design: form follows function. It’s not that skeuomorphic design and special effects are bad per se. The problem is when the form, skeuomorphism, is unnecessary for the function. The problem is form for form’s sake. Sure! we’ll make everything look like leather because that’s kewl, dude! And the primary practitioners of form for form’s sake are the talent-free “designers” who are too busying copying other talent-free “designers” to originate a form that actually follows the functions needs.

    Instead of coming up with the Bauhaus or Post-Modern style that everyone follows until it’s just not hip anymore, look at the individual product and its functions and design for that. Kai “bent corner” Krause may have been bizarre and over the top, but at least he was original!

  • Richard Smith

    Whilst I have no particular preference. I know quite a few people who like the Skeuomorphic design. Most not from an I.T background, they feel it makes the applications more approachable. We always need to bear in mind who we are designing Apps for. The vast majority aren’t involved in I.T. Some find computers, even iPads a little intimidating, if Skeuomorphic designs help those people make the transition into using electronic versions of real world resources then so much the better.

  • Daniel Swanson

    My interest in Computer Generated Imagery goes way back to the early ’80s, even before the Apple Mac.

    What I like about the various concepts presented in Gruber’s post is the just-now-emerging capability to produce very realistic effects with digital imagery and interactivity.

    We’ve finally got enough resolution to make things literally jump off the page, if admittedly still limited to two dimensions.

    The skeuomorphism controversy is distinctly overrated. I don’t give a toss whether whatever I may do is called that or not.

    I just want to create beautiful imagery. And I’m going to use contemporary tools such a Luxology Modo and Adobe Photoshop along with iOS programming tools to create beautiful apps which communicate and which elicit emotional responses from my customers.

  • Steven Fisher

    I see everyone else has made great points in detail. I lack the passion or knowledge to write about this as well as others do, but it is another point:

    I think it’s facile to say that the only thing that matters in typography is the DPI. An iPhone is also backlit; a sheet of paper is not. At small sizes, this is bound to change how our eyes perceive image. And if it changes how we perceive it, it means the ideal typeface is different between paper and the screen.

    (This is, obviously, in addition to arguments about how iPhone screens need to be interactive. That’s a much bigger factor than backlighting.)

    I’ll leave it up to people more knowledgable than me to agree or shoot this full of holes. 🙂