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.

Scroll sideways to explore the full example

MELLOWTAPE STUDIO RECORDER INPUT LIVE

TAKE 04 · UNTITLED ROOM00:02:18

INPUT◀◀●REC▶OUTPUT

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
Teaching older adults to use a tabletClick here to send a voice message
Games and playful tools
DiaryA retro journaling app can use material cues to support its theme.
A focused control with a useful physical analogy
WoodStringsRealistic control panels for cameras, recorders, and synthesizers
Brand experiences built around craft or material
A strip of leather adds a small accent to an otherwise modern light interface.

When NOT to use it

Cover an entire work tool in decorative textures
Body text sits on a textured background
Copy a physical limitation that makes the digital task slower
One interface uses multiple material imagesAssess asset costs
Use realistic shading without clear interaction states
Report CenterThe material treatment does not fit the task.
Efficiency tools should prioritize clear data and controls.
Assume a physical reference is familiar to every audience
Sign in

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

Scroll sideways to explore the full example

MELLOWTAPESESSION / VOCAL 04● RECORDING

VOICE-8 dB

GUITAR-14 dB

Instrument control

Scroll sideways to explore the full example

1,024

C±%÷789×456−123+

Game interface

Scroll sideways to explore the full example