Flashback index

Flashback example index / corpus 2004

2004

2004: the web becoming a place with faces, photos, and invitations.

Climate

2004 is pulled between open web utility and platform enclosure.

01

Web application confidence: Gmail makes the browser feel less like documents and more like software

02

Photo-sharing culture: Flickr turns tags, comments, streams, and groups into design problems

03

Real-name social identity: Facebook's early campus model gives profile design a new social grammar

04

Rounded blue gloss: buttons, tabs, badges, reflections, and gradients begin consolidating the Web 2.0 look

05

Pocket status objects: iPod mini, Razr, DS, and PSP make small devices expressive and social

06

Information architecture as architecture: Seattle Central Library gives built form a diagrammatic, data-like clarity

07

Facebook launches on February 4

08

Flickr launches

Example recipes

Generated from the current Flashback design recipes in the 2004 corpus.

Recipe 01

Early social blue

Use for: community platforms, identity tools, campus services, lightweight networks.

Palette
medium blue, white, pale grey, link blue, small red alert.
Type
system sans, profile labels, tabs, small navigation text.
Layout
profile fields, network header, left nav, photo box, wall-like messages.
Imagery
headshots, school names, relationship fields, friend lists, badges.
Motion
page refresh, invite flow, notification count, profile update.

Risk: making it look like mature news-feed Facebook.
Accuracy: campus networks, sparse profiles, and pre-feed structure.

 Recipe 02

Flickr photo social

Use for: image communities, creative archives, photography products, tagging tools.

Palette
white, blue, pink, photo color, soft grey.
Type
clean web sans, tags, captions, owner names, comment text.
Layout
photo-first page, tag cloud, comment stack, group pool, thumbnail grid.
Imagery
digital snapshots, cameras, travel, pets, street scenes, metadata.
Motion
upload progress, slideshow, hover title, tag add.

Risk: becoming Instagram-era mobile minimalism.
Accuracy: desktop upload, tags, groups, and early web community language.

 Recipe 03

Gmail utility beta

Use for: productivity tools, email, search products, knowledge work.

Palette
white, pale blue, light grey, red accent, yellow beta note.
Type
compact system sans, inbox rows, timestamps, search labels.
Layout
search box top, conversation list, left folders, invitation notice.
Imagery
envelopes, storage meter, threaded messages, labels.
Motion
message expand, search results, invite send, loading bar.

Risk: over-modernizing into material design.
Accuracy: beta invitation culture and desktop browser constraints.

 Recipe 04

Pocket color status

Use for: mobile devices, accessories, music products, youth electronics.

Palette
anodized pink, blue, green, silver, black glass, keypad glow.
Type
tiny device sans, menu text, engraved labels, product wordmark.
Layout
hand-held hero, color lineup, hinge or wheel detail, pocket crop.
Imagery
iPod mini, Razr, DS stylus, PSP screen, earbuds, wristbands.
Motion
flip open, click wheel scroll, stylus tap, screen wipe.

Risk: importing multitouch smartphone behaviors.
Accuracy: hardware buttons, small storage, and pre-app-store use cases.

 Recipe 05

Information-machine library

Use for: civic tech, libraries, knowledge brands, wayfinding, public data tools.

Palette
glass green, steel grey, safety red, escalator yellow, white, black.
Type
clear wayfinding sans, floor labels, diagram captions.
Layout
circulation diagram, stacked platforms, faceted grid, color-coded zones.
Imagery
escalators, book spiral, glass mesh, reading rooms, city views.
Motion
escalator ascent, map zoom, floor-to-floor reveal, search path.

Risk: generic glass architecture without information logic.
Accuracy: Seattle Central Library's program diagram and public interface role.

Corpus map

Every card links to a live heading in the source corpus.

Prompt seeds

Ready-to-run prompts pulled from the corpus.

Design this through a 2004 lens: Facebook has launched on campuses, Flickr is
making photos social, Gmail is redesigning email around search and huge storage,
Firefox is making browsers visible, and the iPod mini and Razr are turning pocket
objects into status signals.
Give me five 2004-informed directions:
1. Early social blue
2. Flickr photo social
3. Gmail utility beta
4. Pocket color status
5. Information-machine library
For each, explain typography, color, interface behavior, motion, and what to avoid.
Critique this web app as if it launched in 2004. Is it early Facebook, Flickr,
Gmail, Firefox-era open web, or a later mobile platform pretending to be early
social? What evidence supports the date?

Reference artifacts

Objects, graphics, and spaces that anchor the year.

Objects

  • Apple iPod mini
  • Motorola Razr V3
  • Nintendo DS
  • Sony PSP
  • Early digital cameras and camera phones
  • Livestrong yellow wristband
  • Desktop and laptop computers running browser-based services

Print and graphics

  • Facebook's early campus profile interface
  • Flickr photo pages, tags, and pink-blue identity
  • Gmail beta interface and invitation messaging
  • Firefox 1.0 identity and browser chrome
  • iPod mini color advertising
  • Razr V3 product photography
  • Green Day - American Idiot heart-grenade graphic

Spaces

  • Seattle Central Library
  • The reopened Museum of Modern Art in New York
  • Dorm rooms using Facebook, Gmail, music libraries, and digital cameras
  • Phone shops and electronics stores displaying Razr, DS, PSP, and iPod mini
  • Wi-Fi cafes and campus computer labs
  • Photo-sharing communities organized around desktop browsers

Anti-cliches

Guardrails from the corpus to keep the year specific.

04

2004 rule: the web becoming a place with faces, photos, and invitations.