Stylogenyin the style of Skeuomorphic UI

Digital native · 2000–2013 · Global / networked

Skeuomorphic UI

Also known as Skeuomorphism, Realistic interface design, Rich 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.

Make something in this styleGet advice in this styleMix it with another style

An outdoors-themed homepage places a green leather journal and pen beside layered paper, a mountain lake photograph, a brass compass, pine sprigs and a topographic map on a wooden surface. A stitched leather navigation bar tops the page, and five illustrated shortcuts sit beneath a blue “Start Exploring” button.
AI-generated by Stylogeny from the style’s design choices. Not a real or historical work.

01

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.

Apple, Cupertino, and the Mac and iOS developer and icon-design community

02

Its design choices

From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

Layout & composition
Space & hierarchy
Typography
Colour
Form & shape
Surface & texture
Ornament
Imagery
Medium & production
Tone & intent
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

03

Make something in this style

Say what you need, and Stylogeny’s image studio draws it from Skeuomorphic UI’s design choices and checks it against them. It takes about a minute, and you get a link to share.

Rule out a choice, read the prompt, or blend in another style: take this brief to Mix styles.

04

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

Before it

The style it grew out of, and the styles it borrowed from.

This styleSkeuomorphic UI2000–2013 · Global / networked

After it

The styles that grew out of it.

Alike in its design choices

Styles that make many of the same choices, related or not, besides those above.

05

Real works

Artefacts in museums, libraries and archives that show the style, linked at their source.

06

Sources

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

How Stylogeny researches and checks a style: where the facts come from.