# Skeuomorphic UI

> Interface design that imitates physical materials and objects (stitched leather, linen, wooden shelves, brushed aluminium, felt, paper and glass) so that digital tools look and behave like their real-world counterparts. Extending the GUI's desktop metaphor into photorealism, it ran from Apple's Aqua and brushed-metal interfaces around 2000 to its peak in iOS 1–6 and Mac OS X Lion, and was abandoned for flat design with iOS 7 in 2013.

- Period: 2000–2013
- Where: Global / networked
- Origin: Apple, Cupertino, and the Mac and iOS developer and icon-design community
- Branch: Digital native
- Also known as: Skeuomorphism, Realistic interface design, Rich UI
- Page: https://stylogeny.com/styles/skeuomorphism/

## How it works

- Model each app on a physical object (a legal pad, a calculator, a bookshelf, a reel-to-reel deck) and keep its controls where that object would have them.
- Render materials photorealistically: leather grain with stitched seams, linen, felt, brushed aluminium, wood and torn paper.
- Light everything from a single overhead source, using inner shadows, bevels, drop shadows and a 1px white highlight that makes text look letterpressed.
- Give each icon a full-colour, rendered three-dimensional object with a glossy highlight inside a rounded square.
- Animate with physical metaphors so that pages curl, switches toggle, dials turn and lists bounce at their edges.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (characteristic)
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (characteristic)
- [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (occasional)

### Space & hierarchy
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (defining)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)

### Typography
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic)
- [Humanist sans](https://stylogeny.com/design-choices/humanist-sans/) (occasional)
- [Script](https://stylogeny.com/design-choices/script/) (occasional)

### Colour
- [Gradients](https://stylogeny.com/design-choices/gradients/) (defining)
- [Earth & mineral](https://stylogeny.com/design-choices/earth-and-mineral/) (characteristic)
- [Analogous harmony](https://stylogeny.com/design-choices/analogous-harmony/) (occasional)

### Form & shape
- [Naturalistic depiction](https://stylogeny.com/design-choices/naturalistic-depiction/) (defining)
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (characteristic)

### Surface & texture
- [Skeuomorphic material](https://stylogeny.com/design-choices/skeuomorphic-material/) (defining)
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (characteristic)
- [Paper & letterpress bite](https://stylogeny.com/design-choices/paper-and-letterpress-bite/) (characteristic)

### Ornament
- [Restrained accents](https://stylogeny.com/design-choices/restrained-accents/) (characteristic)
- [Borders & frames](https://stylogeny.com/design-choices/borders-and-frames/) (occasional)

### Imagery
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (defining)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (characteristic)
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (occasional)

### Medium & production
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (occasional)

### Tone & intent
- [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (characteristic)
- [Luxurious & glamorous](https://stylogeny.com/design-choices/luxurious-and-glamorous/) (characteristic)
- [Nostalgic & retro](https://stylogeny.com/design-choices/nostalgic-and-retro/) (occasional)
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (occasional)

Avoids: Flat, Flat fields, Fluorescent & neon, Non-representational, Experimental & distorted, Glitch, Rebellious & subversive

Palette: #6b4226, #e8dcc5, #2f6b3a, #a9adb3, #4a87c9, #f7e48c

Typefaces: Lucida Grande (Mac OS X system font), Helvetica (iOS 1–6), Marker Felt (iOS Notes), Noteworthy

Known for: Apple iOS 1–6 under Scott Forstall (2007–2012): Notes, iBooks, Game Center, Podcasts; Apple Mac OS X Lion iCal and Address Book (2011); Apple Mac OS X Aqua and brushed-metal applications (2000–2001); Tapbots (Convertbot, Tweetbot)

## Where it comes from, and what it’s close to

- Grew out of: [Bitmap & Pixel Graphics](https://stylogeny.com/styles/bitmap-pixel.md) (1977–1995)
- Influenced by: [Y2K Futurism](https://stylogeny.com/styles/y2k-futurism.md) (1997–2005)
- Led to: [Neumorphism](https://stylogeny.com/styles/neumorphism.md) (2019–2021)
- Alike in its design choices: [Frutiger Aero](https://stylogeny.com/styles/frutiger-aero.md) (2004–2013), 58% alike
- Alike in its design choices: [Claymorphism & Soft 3D](https://stylogeny.com/styles/claymorphism.md) (2020–present), 53% alike
- Alike in its design choices: ['Good Morning' Greeting Images (WhatsApp Forward Vernacular)](https://stylogeny.com/styles/good-morning-greeting-image.md) (2013–present), 45% alike
- Alike in its design choices: [YouTube Thumbnail Style (the 'YouTube Face')](https://stylogeny.com/styles/youtube-thumbnail.md) (2012–present), 44% alike
- Alike in its design choices: [Cuban Tobacco Lithography (Habilitaciones & Marquillas)](https://stylogeny.com/styles/cuban-tobacco-lithography.md) (1845–present), 37% alike
- Alike in its design choices: [Mexican Calendar Chromo (Cromos calendáricos)](https://stylogeny.com/styles/mexican-calendar-chromo.md) (1930–1970), 36% alike

## Real works

- [OS X Lion 'Apps' page: iCal and Address Book](https://web.archive.org/web/20110809083120/http://www.apple.com/macosx/apps/): Apple Inc., 2011 (OS X Lion released 20 July 2011; page archived 9 August 2011), Internet Archive Wayback Machine
- [QuickTime Player in brushed metal, Mac OS X 10.0.4](https://guidebookgallery.org/screenshots/macosx100): Apple Computer, 2001 (Mac OS X 10.0.4), GUIdebook: Graphical User Interface gallery (Marcin Wichary)
- [Convertbot product page (iPhone unit-conversion app)](https://web.archive.org/web/20100207034923/http://tapbots.com/software/convertbot/): Tapbots (Paul Haddad and Mark Jardine), 2010 (page footer '©2008-2010 Tapbots, LLC'; archived 7 February 2010), Internet Archive Wayback Machine
- [Delicious Library 1.5 home page](https://web.archive.org/web/20050601235256/http://delicious-monster.com/): Delicious Monster (app by Wil Shipley and Mike Matas; website by Capacitor Design Network), 2005 (version 1.5 page, footer '© 2005 Delicious Monster'; archived 1 June 2005), Internet Archive Wayback Machine

## Sources

- Apple, iOS Human Interface Guidelines (editions before iOS 7)
- Wikipedia, ‘Skeuomorph’ (section on software interfaces)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Skeuomorphic UI”, https://stylogeny.com/styles/skeuomorphism/