# 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.

- Period: 1997–2010
- Where: Global / networked, North America, Western Europe, East Asia
- Origin: Web studios and designer-coders working in Macromedia Flash, which Macromedia bought as FutureSplash Animator and relaunched as Flash 1.0 in December 1996 (Flash 4 in June 1999; Flash 5 with ActionScript in August 2000): 2Advanced Studios (Aliso Viejo, California, 1999), Joshua Davis's praystation.com (1998), Yugo Nakamura's MONO*crafts / yugop.com (Tokyo, version 2.0 1998-99) and Hi-ReS! (London, 1999), celebrated by Rob Ford's Favourite Website Awards (May 2000); whole-Flash sites faded from the mid-2000s as CSS matured
- Branch: Digital native
- Also known as: Flash sites, Flash portfolio sites, Skip-intro era, Macromedia Flash web design
- Page: https://stylogeny.com/styles/flash-era-web-design/

## How it works

- Build the site as one fixed-size animated stage, centred in the browser window, and let visitors in through a preloader bar and a branded intro they may skip.
- Organise the interface as a console of framed panels on a visible grid of hairline rules, crosshairs, coordinates and numbered sections.
- Set navigation and captions in tiny aliased pixel fonts, in tracked capitals at their native 8 px, and keep wide techno lettering for logos and titles.
- Keep colour to one key with one hot accent, often a dark grey, gunmetal or navy, and add depth with metallic gradients, glows and 3D renders; the experimental wing instead leaves a pale, near-empty stage (yugop.com opened on a plain white page).
- Make every control move and answer the mouse: menus zoom, slide and expand, with sound on rollover and cinematic transitions between sections.
- In experimental work, let code draw the composition: rule-based, randomised vector forms that respond to the visitor.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (defining)
- [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (characteristic)
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (characteristic)
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (occasional)

### Space & hierarchy
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (defining)
- [Sequential narrative](https://stylogeny.com/design-choices/sequential-narrative/) (characteristic)
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (characteristic)
- [Extreme scale contrast](https://stylogeny.com/design-choices/extreme-scale-contrast/) (characteristic)

### Typography
- [Bitmap & pixel](https://stylogeny.com/design-choices/bitmap-and-pixel/) (defining)
- [All caps](https://stylogeny.com/design-choices/all-caps/) (characteristic)
- [Wide letterspacing](https://stylogeny.com/design-choices/wide-letterspacing/) (characteristic)
- [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (characteristic)

### Colour
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (characteristic)
- [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (characteristic)
- [Gradients](https://stylogeny.com/design-choices/gradients/) (characteristic)
- [Monochrome](https://stylogeny.com/design-choices/monochrome/) (occasional)
- [Fluorescent & neon](https://stylogeny.com/design-choices/fluorescent-and-neon/) (occasional)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (occasional)

### Form & shape
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (characteristic)
- [Angular & zigzag](https://stylogeny.com/design-choices/angular-and-zigzag/) (characteristic)
- [Non-representational](https://stylogeny.com/design-choices/non-representational/) (occasional)

### Surface & texture
- [Chrome & 3D render](https://stylogeny.com/design-choices/chrome-and-3d-render/) (characteristic)
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (occasional)

### Ornament
- [Rules & bars](https://stylogeny.com/design-choices/rules-and-bars/) (defining)
- [Borders & frames](https://stylogeny.com/design-choices/borders-and-frames/) (characteristic)
- [Emblems & badges](https://stylogeny.com/design-choices/emblems-and-badges/) (occasional)

### Imagery
- [Flat vector illustration](https://stylogeny.com/design-choices/flat-vector-illustration/) (characteristic)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (characteristic)
- [Diagram & data](https://stylogeny.com/design-choices/diagram-and-data/) (characteristic)
- [Generative imagery](https://stylogeny.com/design-choices/generative-imagery/) (occasional)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (occasional)

### Medium & production
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (defining)
- [Generative & AI](https://stylogeny.com/design-choices/generative-and-ai/) (occasional)

### Tone & intent
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (defining)
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (occasional)
- [Utopian & idealistic](https://stylogeny.com/design-choices/utopian-and-idealistic/) (occasional)

Avoids: Pastel, Transitional serif, Script, Paper & letterpress bite, Grain & noise, Floral & vegetal, Found & vernacular imagery, Communal & popular, Carved line

Palette: #14181e, #0d1a2b, #5f6873, #c9ced4, #ff6a00, #9bd31c

Typefaces: 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, Miniml pixel fonts, used on the Favourite Website Awards site, 04b_03 and related bitmap fonts by the Japanese designer 04 (04.jp.org), drawn at 8 px, Wide, extended techno sans lettering for logos, section titles and intros

Known for: 2Advanced Studios (Eric Jordan, Tony Novak and John Carroll, Aliso Viejo, California, founded 1999), site v3 'Expansions' (2001), built mainly in Flash 5 and named 'Most Influential Flash Site of the Decade' in a 2006 Adobe and FWA community poll; Joshua Davis, praystation.com (1998), a site of design experiments and one of the first to offer open-source Flash files; Prix Ars Electronica Golden Nica, Net Excellence (2001); once-upon-a-forest.com (1999); Yugo Nakamura, MONO*crafts / yugop.com (version 2.0, 1998-99: MoMA's Shannon Darrough first saw it in 1998, Ars Electronica dates it 1999), a horizontally scrolling, zooming menu that responds to mouse movement; yugop.com, a simple white page invaded by dark cascading balls, received a Prix Ars Electronica Distinction in 2005; Hi-ReS! (Alexandra Jugovic and Florian Schmitt, London, 1999), the Requiem for a Dream film site for Darren Aronofsky (Webby Award 2001) and the Donnie Darko film site; Gabocorp.com (1997), an early Flash intro site with a glowing 'GO' button and background music; The Favourite Website Awards (Rob Ford, founded May 2000), an orange-and-yellow site whose criticised typography was later saved by Miniml pixel fonts

## Where it comes from, and what it’s close to

- Grew out of: [Techno-Futurist Graphics](https://stylogeny.com/styles/techno-futurism.md) (1986–2002)
- Influenced by: [Bitmap & Pixel Graphics](https://stylogeny.com/styles/bitmap-pixel.md) (1977–1995)
- Influenced by: [Y2K Futurism](https://stylogeny.com/styles/y2k-futurism.md) (1997–2005)
- Influenced by: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975)
- Alike in its design choices: [Fantasy User Interface (FUI) & Sci-Fi HUD](https://stylogeny.com/styles/fantasy-ui.md) (1999–present), 61% alike
- Alike in its design choices: [Media-Player & Desktop Skins (Winamp-Era Skinning)](https://stylogeny.com/styles/media-player-skins.md) (1997–2008), 51% alike
- Alike in its design choices: [Demoscene Graphics (Cracktros, Demos & Text-Mode Art)](https://stylogeny.com/styles/demoscene-graphics.md) (1985–present), 46% alike
- Alike in its design choices: [Kinetic Typography & Variable Type](https://stylogeny.com/styles/kinetic-typography.md) (2016–present), 45% alike
- Alike in its design choices: [Isometric Tech Illustration](https://stylogeny.com/styles/isometric-tech-illustration.md) (2015–present), 44% alike
- Alike in its design choices: [Synthwave / Outrun](https://stylogeny.com/styles/synthwave-outrun.md) (2006–present), 41% alike

## Sources

- https://en.wikipedia.org/wiki/Adobe_Flash
- https://en.wikipedia.org/wiki/Joshua_Davis_(designer)
- https://en.wikipedia.org/wiki/Yugo_Nakamura
- https://en.wikipedia.org/wiki/Hi-ReS!
- https://en.wikipedia.org/wiki/The_FWA
- Shannon Darrough, 'A Few Words with Legendary Web Designer Yugo Nakamura', MoMA Inside/Out, 19 February 2010, https://www.moma.org/explore/inside_out/2010/02/19/a-few-words-with-yugo-nakamura/
- https://webarchive.ars.electronica.art/en/archives/prix_archive/prix_projekt.asp%3FiProjectID=13392.html
- https://wikipedia2007.classicistranieri.com/2/a/d/2Advanced_Studios_3361.html
- https://webdesignerdepot.com/blast-from-the-past-2advanced-com/
- https://vanschneider.com/hottest-websites-late-90s
- https://kottke.org/plus/type/silkscreen/
- https://www.dafont.com/04b-03.font
- Lev Manovich, 'Generation Flash' (2002), http://manovich.net/index.php/projects/generation-flash
- Anastasia Salter and John Murray, Flash: Building the Interactive Web (MIT Press, Platform Studies, 2014)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Flash-Era Web Design (Flash Portfolio Sites)”, https://stylogeny.com/styles/flash-era-web-design/