Stylogeny combining Flash-Era Web Design × Media-Player

Try

Style combination · Pairs well

Flash-Era Web Design × Media-Player

The skinned player shares the era's chrome bevels, pixel-font readouts and dark consoles; its LCD panels sit naturally on a Flash stage.

From the research on Flash-Era Web Design (Flash Portfolio Sites)

Mix them and make something Flash-Era Web Design Media-Player

CIRCUITFlash-Era Web Design × Media-Player
A sample layout drawn from the recipe: shapes from Flash-Era Web Design, their arrangement from Flash-Era Web Design, 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.

Flash-Era Web Design (Flash Portfolio Sites) Media-Player & Desktop Skins (Winamp-Era Skinning)

Type from Flash-Era Web Design
Colour from Media-Player
Form from Flash-Era Web Design
Composition from Flash-Era Web Design
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 · Flash-Era Web Design

Circuit

Silkscreen, standing in for Silkscreen (Jason Kottke), a free pixel face for 'extremely small graphical display type', meant for nav bars, menus and captions at 8 pt multiples with anti-aliasing off

Text · Media-Player

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.

VT323; Media-Player used Seven-segment LCD and LED digit sets for time readouts and Hand-pixelled bitmap character sheets drawn per skin for scrolling titles

03

The colours

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

Flash-Era Web Design (Flash Portfolio Sites) Media-Player & Desktop Skins (Winamp-Era Skinning)

  • #0b0d12 ground · 36%
  • #00e83a ink · 14%
  • #ffae00 accent · 18%
  • #ff6a00 accent · 14%
  • #2f6fd6 accent · 10%
  • #9bd31c accent · 8%

As CSS

:root {
  --ground: #0b0d12;
  --ink: #00e83a;
  --accent-1: #ffae00;
  --accent-2: #ff6a00;
  --accent-3: #2f6fd6;
  --accent-4: #9bd31c;
  --font-display: "Silkscreen", monospace;
  --font-text: "VT323", monospace;
}

04

The two styles

A dark science-fiction poster headed “NEXUS” centers on a towering metallic structure wrapped by a circular track, with glowing orange and lime-green components. Framed technical panels surrounding it show a wireframe globe, orbital diagrams, a futuristic corridor, moons, modular parts, charts, and a cityscape facing an orange sun. 1997–2010 · Global / networked, North America, Western Europe, East Asia Flash-Era Web Design (Flash Portfolio Sites) Websites built as one designed Flash movie (a plug-in in the browser) rather than as HTML pages: a fixed-size stage, often dark, entered through a preloader and an animated intro with sound. Inside, navigation is a console of framed panels on a visible technical grid, with hairline rules, numbered sections and readouts, tiny aliased pixel fonts in tracked capitals, a grey or navy key lit by one hot accent, metallic gradients and 3D renders. Menus zoom, slide and react to the mouse. Its experimental wing, from praystation to yugop.com's white page, made the site a field for code-driven play. 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.

05

More combinations

With Flash-Era Web Design

With Media-Player

Every style combination