Stylogeny combining Early Web Vernacular × Flash-Era Web Design

Try

Style combination · Contrasts

Early Web Vernacular × Flash-Era Web Design

The amateur HTML page with default fonts and tiled clutter is what the controlled, one-piece Flash stage set out to replace.

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

Mix them and make something Early Web Vernacular Flash-Era Web Design

OrbitEarly Web Vernacular × Flash-Era Web Design
A sample layout drawn from the recipe: shapes from Flash-Era Web Design, their arrangement from Flash-Era Web Design, the finish from Early Web Vernacular. 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.

Early Web Vernacular Flash-Era Web Design (Flash Portfolio Sites)

Type from Early Web Vernacular

Flash-Era Web Design avoids transitional serif: this is where the two pull against each other, which is the point of the contrast.

Colour from Early Web Vernacular
Form from Flash-Era Web Design
Composition from Flash-Era Web Design
Surface from Early Web Vernacular

Flash-Era Web Design avoids grain & noise: this is where the two pull against each other, which is the point of the contrast.

02

The type

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

Display · Early Web Vernacular

Orbit

Newsreader, standing in for Times New Roman (browser default)

Text · Flash-Era Web Design

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.

VT323; Flash-Era Web Design used 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 and Miniml pixel fonts, used on the Favourite Website Awards site

03

The colours

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

Early Web Vernacular Flash-Era Web Design (Flash Portfolio Sites)

  • #000080 ground · 36%
  • #00ff00 ink · 14%
  • #0000ff accent · 18%
  • #ff6a00 accent · 14%
  • #ff00ff accent · 10%
  • #9bd31c accent · 8%

As CSS

:root {
  --ground: #000080;
  --ink: #00ff00;
  --accent-1: #0000ff;
  --accent-2: #ff6a00;
  --accent-3: #ff00ff;
  --accent-4: #9bd31c;
  --font-display: "Newsreader", serif;
  --font-text: "VT323", monospace;
}

04

The two styles

A densely decorated blue ocean-themed webpage features the title “OCEAN DREAMS” above a pearl-and-shell-framed picture of dolphins. Repeated dolphins, glittering stars, hearts, planets, kittens, fairies, fish and small novelty icons fill the surrounding space. 1994–2004 · Global / networked Early Web Vernacular The amateur web of the mid-1990s to early 2000s, when millions of people hand-coded personal homepages on free hosts such as GeoCities with table layouts, browser-default fonts, tiled backgrounds, animated GIFs, MIDI soundtracks, hit counters and ‘under construction’ signs. Its look came from HTML's limits, slow modems and enthusiastic bricolage rather than professional design; Olia Lialina later named it ‘a vernacular web’. 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.

05

More combinations

With Early Web Vernacular

All 10 combinations with Early Web Vernacular

With Flash-Era Web Design

Every style combination