switch·Esc back

Skeuomorphism

You might say

Give it that early iPhone look, where buttons look like real buttons and notes look like actual notebooks.

Use familiar real-world form and material to explain a digital controlSkeuomorphism makes digital objects resemble physical ones through shape, texture, light, and behavior. It can make an unfamiliar interaction easier to understand or give a focused experience character. Literal leather, wood, and metal on every surface quickly add noise and age poorly.
MELLOWTAPE STUDIO RECORDER INPUT LIVE
TAKE 04 · UNTITLED ROOM00:02:18
LR
INPUT◀◀RECOUTPUT
Design Principles
  • Use the physical reference to clarify an interaction
  • Keep light, material, and depth internally consistent
  • Preserve readable labels and digital accessibility
  • Apply detail to a small number of important objects
  • Let digital behavior stay efficient even when the appearance is familiar

When to use it

  • Music and instrument interfaces
  • Games and playful tools
  • A focused control with a useful physical analogy
  • Brand experiences built around craft or material

When NOT to use it

  • Cover an entire work tool in decorative textures
  • Copy a physical limitation that makes the digital task slower
  • Use realistic shading without clear interaction states
  • Assume a physical reference is familiar to every audience
History
2007.01
The iPhone brings skeuomorphism to touchscreens

Slide to unlock, page-turning calendars, and other physical references helped first-generation touchscreen users understand unfamiliar actions.

2010—2012
The peak of rich digital material

iOS 5 and 6 used yellow paper, wooden shelves, green felt, leather, and other detailed scenes across built-in apps.

2013.09
iOS 7 turns toward flat design

Apple removed most leather, linen, and realistic texture, and the wider industry quickly moved toward flatter interfaces.

2020s
Material returns as an accent

Neumorphism and spatial platforms brought back glass, depth, and physical material, usually as a supporting effect rather than the whole interface.

Anatomy
Memo Horizontal yellow paper + red margin line
Glass highlight button Linen pattern Real shadow
Brown gradient base, two dotted lines at the top and bottom serve as stitches, and the text is embossed with an inner shadow to create an indented feel.
Repeating gradient draws horizontal lines, a red margin line on the left, and handwriting-like fonts
Use light gradients and inner highlights to indicate smooth materials; use them only when needed to avoid affecting text
Two sets of intersecting fine repeating gradients, a classic base for large blank spaces
Large, soft, and ambient-colored projections make elements really appear to be floating on the desktop.
AI Prompt

Focused skeuomorphic interface with one useful physical analogy, internally consistent material and lighting, stitched leather or linen used sparingly, glossy controls with clear labels, realistic but restrained shadows

Typical use cases
Music player
MELLOWTAPESESSION / VOCAL 04● RECORDING
VOICE-8 dB
GUITAR-14 dB
Instrument control
1,024
C±%÷789×456123+
Game interface
Settings
Wireless LANHome-WiFi >
Notification
Location service
Craft brand
Newsstand
Further reading