Connect with us

Culture

Understanding Skeuomorphism for Mobile Interface Design

It seems most users have moved on from the original iOS design into the latest iOS 7 interface. Yet many still prefer the fancy textures and glossy buttons along with the more detailed application icons of iOS 6. It seems that skeuomorphic design has become less mainstream for mobile applications in place of simplicity and minimalism. Both design styles work great and there's an audience for everything.

iphone app homescreen icon inspiration preview image

I'd like to cover a bit more about skeuomorphism and how it relates to mobile app design. Typically people get the wrong idea about skeuomorphism and why it looks so unique. Although design is a huge piece to this style, applications need to be usable in a familiar kind of way that catches people's attention.

Basics of Skeuomorphism

The original Wikipedia article has a fantastic explanation about the origins of skeuomorphism. One of the best lines from that article explains how skeuomorphic design is “deliberately employed to make the new look comfortably old and familiar”. One of the best examples would be the yellow notepad from the early iOS Notes app.

notes iphone ios app yellow paper pad design

Even the title bar is brown to replicate the binding of a paper pad. This type of design holds a resemblance which most people can immediately understand. However there is another component when it comes to interface design which relates to the user interaction. Creating a rolodex app which flips through contact cards will look and behave like the real thing.

I constantly hear complaints about this style and most stem from the person's opinion of skeuomorphic design. Many will argue that it's unnecessary, too flashy, or just cheesy. The folks who enjoy semi-realistic skeuomorph design see that it's always going to be cheesy – it's a digital replica of a real-world physical object.

Skeuomorphic design can also work in desktop software programs. When done correctly it will bring out an exciting UI which provides brand recognition for the program. But in mobile apps the user is directly interfacing with a touch screen so the UX is more fluid. It's easier to simulate real-life flipping, rotating, swiping, and other animations without the need of a mouse pointer.

Why it Works

There is a certain level of goofiness with skeuomorphic objects and interfaces. This stems from modern-day designs which look like they're decades in the past. But they work because most users can relate to these older designs. Most people understand how a 1950s radio works, so even though the UI resembles an attitude of “back in my day” it still comes across as simple to use and even charming.

Design ideas which capture the imagination and work flawlessly are the best cases for skeuomorphic concepts. Check out some of the designs from that Dribbble link to see both good and bad examples. You never want to sacrifice aesthetics for usability because then people get frustrated trying to make it work. And when it doesn't work, design is just a pretty decoration with no real world usage.

Ultimately as a designer you want to strike a healthy balance of elegance and structure. Usability is crucial but interfaces don't always need to be stripped down to bare essentials. Adding some textures or elements which capture the imagination will help your app stand out from the rest of the crowd.

Mobile Web Design

Generally I'm a supporter of skeuomorphic design when done properly. But when it comes to mobile websites I have to say that skeuomorphism can be quite overbearing. Mobile app software runs different and has an entire OS to support the rendering of textures along with animation effects. But websites are pushed over the Internet, often times with many assets downloading over slow connections.

When it comes to mobile websites I would suggest keeping your design simple and easy to use. There is nothing wrong with shiny buttons or textures, as long as each resource is minimized and kept to a very small file size. I also find it difficult to replicate skeuomorphic qualities on a website interface.

There is a noticeable difference between how people interact with applications vs websites. Apps are basically like smaller versions of desktop software, and both kinds of applications hold the best chance of a successful skeuomorphic interface.

Keep this in mind when designing a new digital interface and don't follow along with trends just because they look cool. Have an idea in mind and try to understand your direction for each interface.

Examples of iOS Skeuomorph

Since Apple is not signing anything older than iOS 7 it's basically impossible to revert back once you update. This means fewer and fewer people are running older versions of iOS and it's tough to find screenshots of these interfaces. I've collected this small gallery of skeuomorphic design elements from classic iOS apps for a bit of design inspiration.

Contacts

ipad ios app book skeuomorphic design ui

Calendar

ipad skeuomorphism app calendar ios ui design

Voice Memos

voice memos iphone app microphone ui

iBooks

iphone ibooks book shelf app design skeuomorphic

Reminders

ios5 reminders app dark leather texture ui

Compass

compass app ios6 ui skeuomorphic design

Calculator

skeuomorphic design apple calculator iphone app ios6

Camera

iphone ios6 camera shutter design ui interface

Phone Keypad

ios5 iphone app phone keypad numbers skeuomorph

Game Center

ios6 game center ui iphone app skeuomorphism

Moving to Newer Designs

I can't say that skeuomorphism will always be the best idea for every application. Clearly Apple has decided to move onto a flatter UI without the need for textures and realistic app icons. How should app designers handle this drastic shift?

I'd say you need to match the system you're designing for. If iOS 7 is moving towards this newer design style then it's probably best to stick with it. But don't give up on the concept of a skeuomorphic icon or interface just because it doesn't seem “acceptable” by Apple anymore.

Plenty of users and designers really like skeuomorphic design because it's fun and draws your attention quickly. Try designing some basic skeuomorphic app interfaces in Photoshop just for practice. It can be exciting to learn how to build certain colors, tones, textures, and objects which fit naturally into a mobile interface.

Designing a skeuomorphic interface can be a thrill, even if it's just for a nostalgic remembrance of the old iOS. It seems both Android and Windows Phone prefer the flatter interfaces which Apple has also moved towards.Objectively there is no right or wrong choice – just opinions.

I hope this article cleared up some confusion about skeuomorphism, what makes it good, and why designers may(or may not) prefer using it within mobile app interfaces.

I'm the editor-in-chief of Bittbox.com. I'm a designer and developer by day, and a writer and musician when the feeling strikes. I enjoy vintage advertisements and puzzles with an absurd amount of pieces. Follow me on Twitter.

Click to comment

More in Culture

To Top