Stylogeny combining Flash-Era Web Design × Brutalist Web Design

Try

Style combination · Contrasts

Flash-Era Web Design × Brutalist Web Design

Raw, static HTML defaults against the fully art-directed animated stage.

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

Mix them and make something Flash-Era Web Design Brutalist Web Design

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

Type from Flash-Era Web Design
Colour from Brutalist Web Design
Form from Brutalist Web Design
Composition from Flash-Era Web Design
Surface from Flash-Era Web Design

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

Future

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 · Brutalist Web Design

A reaction against templated, conversion-optimised web design that exposes the raw materials of the browser: default system fonts, blue underlined links, visible borders, unstyled forms and plain document flow. Named after architectural Brutalism by Pascal Deville's survey site brutalistwebsites.com (2014), it ranges from functional austerity to deliberately abrasive antidesign.

Courier Prime; Brutalist Web Design used Times New Roman and Courier New and system monospace

03

The colours

The ground and leading colours come from Brutalist Web Design, 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) Brutalist Web Design

  • #ffffff ground · 36%
  • #000000 ink · 14%
  • #ff0000 accent · 18%
  • #ff6a00 accent · 14%
  • #0000ee accent · 10%
  • #9bd31c accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #000000;
  --accent-1: #ff0000;
  --accent-2: #ff6a00;
  --accent-3: #0000ee;
  --accent-4: #9bd31c;
  --font-display: "Silkscreen", monospace;
  --font-text: "Courier Prime", 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. A white website homepage titled “RIVER SONGS” uses enormous black serif lettering, blue underlined links, and thick black dividing rules. A high-contrast image of rippling water sits beside a blue latest-posts panel and text about river essays and field recordings. 2014–present · Global / networked, Central Europe Brutalist Web Design A reaction against templated, conversion-optimised web design that exposes the raw materials of the browser: default system fonts, blue underlined links, visible borders, unstyled forms and plain document flow. Named after architectural Brutalism by Pascal Deville's survey site brutalistwebsites.com (2014), it ranges from functional austerity to deliberately abrasive antidesign.

05

More combinations

With Flash-Era Web Design

With Brutalist Web Design

All 14 combinations with Brutalist Web Design

Every style combination