Stylogeny combining Media-Player × Skeuomorphic UI

Try

Style combination · Contrasts

Media-Player × Skeuomorphic UI

The platform makers' coherent, usable imitation of leather and paper against the fans' oversized fictional machines.

From the research on Media-Player & Desktop Skins (Winamp-Era Skinning)

Mix them and make something Media-Player Skeuomorphic UI

WowMedia-Player × Skeuomorphic UI1997 · 2000
A sample layout drawn from the recipe: shapes from Skeuomorphic UI, their arrangement from Media-Player, the finish from Media-Player. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Media-Player & Desktop Skins (Winamp-Era Skinning) Skeuomorphic UI

Type from Media-Player
Colour from Skeuomorphic UI
Form from Skeuomorphic UI
Composition from Media-Player
Surface from Media-Player

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Media-Player

Wow

Pixelify Sans, standing in for Hand-pixelled bitmap character sheets drawn per skin for scrolling titles

Text · 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.

Inter; Skeuomorphic UI used Lucida Grande and Helvetica

03

The colours

The ground and leading colours come from Skeuomorphic UI, with a counter-accent from Media-Player. The ink reads on the ground at 4.5:1 or more.

Media-Player & Desktop Skins (Winamp-Era Skinning) Skeuomorphic UI

  • #f7e48c ground · 36%
  • #6b4226 ink · 14%
  • #4a87c9 accent · 18%
  • #ffae00 accent · 14%
  • #2f6b3a accent · 10%
  • #a9adb3 accent · 8%

As CSS

:root {
  --ground: #f7e48c;
  --ink: #6b4226;
  --accent-1: #4a87c9;
  --accent-2: #ffae00;
  --accent-3: #2f6b3a;
  --accent-4: #a9adb3;
  --font-display: "Pixelify Sans", monospace;
  --font-text: "Inter", sans-serif;
}

04

The two styles

An elaborate chrome science-fiction control panel surrounds a blue underwater scene with glowing jellyfish, fish, and an illuminated submerged city. Green displays read “NIGHT DIVE” and “03:27,” alongside playback buttons, equalizer bars, planetary graphics, and orange-lit tubes. 1997–2008 · Global / networked, North America, Western Europe Media-Player & Desktop Skins (Winamp-Era Skinning) An amateur interface craft of the dial-up years in which fans repainted small software windows, above all the Winamp media player, as imaginary hardware: hi-fi faceplates, sci-fi consoles and game props in pixel-painted chrome and brushed metal, with glowing LCD readouts on dark wells, packed transport buttons and spectrum analysers. Freeform formats cut the window into blobs and pods; a large fan strand ranged from simple recolours to anime, game and band art, often in glaring colours and at the cost of legibility. 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. 2000–2013 · Global / networked 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.

05

More combinations

With Media-Player

With Skeuomorphic UI

Every style combination