--- year: 2004 status: example title: "2004: the social web gets glossy" subtitle: "Facebook, Flickr, Gmail, Firefox, the iPod mini, Razr, Nintendo DS, Seattle Central Library, and early bubble UI turn the web into profiles, search boxes, rounded buttons, and pocket objects." decade_position: "social acceleration" primary_lens: - social platforms move from experiments toward everyday identity infrastructure - web applications become faster, cleaner, and more useful through Gmail, Flickr, and Firefox-era expectations - small devices become color, status, and gesture objects through iPod mini, Razr, Nintendo DS, and PSP - architecture becomes diagrammatic, media-friendly, and information-rich through Seattle Central Library - graphics begin tilting toward web 2.0 gloss, rounded corners, badges, gradients, and friendly blue surfaces art_direction: layout: editorial display: grotesque-black body: web-geometric mono: terminal texture: scanlines ornament: vector-horizon stamp: "Bubble UI" note: "Profiles, search boxes, camera sharing, pocket color, and rounded blue gloss start hardening into the social web." ink: "#0c1016" paper: "#eef4fb" muted: "#9bb0c4" bg: - "#070c12" - "#101a26" - "#05080d" accents: - "#2fb6ff" - "#9cff3c" - "#ff8a2f" - "#2f5a8a" --- # 2004 ## Year thesis 2004 is when the social web starts to look inevitable. Facebook launches at Harvard in February. Flickr launches as a photo-sharing community. Gmail appears on April 1 with a huge mailbox, search-first logic, conversation view, and an invitation aura. Firefox 1.0 gives browser choice a public identity. These are not simply websites; they are new habits: profile, upload, tag, search, invite, thread, browse. Objects also become sharper social signals. The iPod mini turns the music device into anodized color. Motorola's Razr V3 makes the phone a thin metal status object. Nintendo DS makes touch and dual screens mainstream in handheld gaming before the smartphone does. Sony's PSP, launched in Japan at the end of the year, points toward handheld media as glossy black entertainment. The feeling of the year: **the web becoming a place with faces, photos, and invitations**. 2004 design should feel transitional: still pre-iPhone, still desktop-browser based, still pixel-constrained, but visibly moving toward platforms, feeds, rounded gloss, portable identity, and social data. ## How 2004 differs from 2003 2003 is platform performance. 2004 is social acceleration. | From 2003 | To 2004 | | --- | --- | | MySpace makes profiles loud and musical | Facebook makes real-name profile culture feel infrastructural in a campus context | | iTunes organizes purchased music | Gmail organizes communication through search, storage, and conversations | | Digital photos circulate informally | Flickr makes photo sharing, tagging, and community interaction central | | Apple hardware is white and aluminum | iPod mini makes color, smallness, and personal accessory status central | | Network presence is scattered | Social accounts, invites, profiles, comments, and uploads start to form daily routines | | Icon buildings are skins | Seattle Central Library makes architecture a diagram of information flows | The key shift: 2004 turns the web from a collection of destinations into a set of persistent personal services. ## Design climate ### The dominant tension 2004 is pulled between **open web utility** and **platform enclosure**. 1. **Open web utility** - Firefox, blogs, standards discussions, search, Flickr sharing, Gmail usefulness, and the sense that the browser can become a better application space. 2. **Platform enclosure** - Facebook accounts, invitation systems, iTunes/iPod ecosystems, device lock-in, contact lists, and services that make identity dependent on a host. The year matters because both forces are still young and exciting. The web feels more useful and more social, but it is also beginning to gather people inside branded systems. ### What is emerging - **Web application confidence**: Gmail makes the browser feel less like documents and more like software. - **Photo-sharing culture**: Flickr turns tags, comments, streams, and groups into design problems. - **Real-name social identity**: Facebook's early campus model gives profile design a new social grammar. - **Rounded blue gloss**: buttons, tabs, badges, reflections, and gradients begin consolidating the Web 2.0 look. - **Pocket status objects**: iPod mini, Razr, DS, and PSP make small devices expressive and social. - **Information architecture as architecture**: Seattle Central Library gives built form a diagrammatic, data-like clarity. - **Search as interface principle**: Google, Gmail, and browser toolbars make search boxes central to everyday design. ## Timeline signals | Signal | Why it matters for design | | --- | --- | | Facebook launches on February 4 | Real-name profiles, campus networks, relationship status, and social graphs move toward infrastructure. | | Flickr launches | Photo sharing becomes social: tags, comments, groups, streams, and public/private identity. | | Gmail launches in invitation beta on April 1 | Email is redesigned around search, huge storage, conversation threads, and web-app responsiveness. | | Apple introduces and ships the iPod mini | Digital music becomes a small colored accessory and a stronger fashion object. | | Motorola introduces the Razr V3 | The mobile phone becomes thin, metallic, premium, and status-driven. | | Nintendo releases the DS | Dual screens and touch input enter mass handheld gaming years before phone touch becomes dominant. | | Sony releases the PSP in Japan | Handheld gaming moves toward glossy black media device and widescreen entertainment. | | Firefox 1.0 is released | Browser identity, standards, tabs, and user choice become mainstream web-design concerns. | | Seattle Central Library opens | OMA and LMN turn library design into circulation, information diagram, and faceted glass skin. | | Google holds its IPO | Search, advertising, and web infrastructure become public-market design forces. | ## Typography ### The typographic mood 2004 typography is increasingly service-like: clear, blue, clickable, and modular. The web still depends on system fonts and image headers, but the emphasis shifts toward usable interfaces: tabs, search fields, inbox rows, profile fields, photo captions, tags, and navigation bars. Type needs to be scanned repeatedly, not admired once. The question moves from: > "How can networks become stages?" to: > "How can services make everyday identity, mail, search, and photos manageable?" ### What changes - **Search fields become central typography**: the empty input box becomes one of the decade's most important graphic forms. - **Tags and metadata matter**: photo titles, tags, comments, dates, and owners become design hierarchy. - **Blue links and tabs persist**: clickable blue remains a core signal even as gloss and rounded buttons grow. - **Profiles become structured forms**: names, networks, relationship status, interests, photos, and wall-like messages need order. - **Device typography shrinks**: Razr menus, iPod mini lists, DS interfaces, and PSP screens make tiny readable UI important. ## Graphic design 2004 graphic design is where Web 2.0 begins to condense. The look is not yet the full badge-and-reflection cliche, but its parts are visible: rounded blue buttons, soft gradients, glossy tabs, beta labels, friendly icons, speech bubbles, invite screens, and clean white content areas. Flickr's pink-and-blue identity, Gmail's sparse utility, Facebook's campus-blue structure, and Firefox's icon all show different ways to make the web feel approachable and alive. Print and campaign graphics also absorb social web behavior. A poster is no longer only a poster; it may be a URL, upload prompt, invite code, profile badge, or campaign asset. The boundary between graphic identity and interface keeps thinning. ## Product and industrial design 2004 pocket products become social symbols. The iPod mini is the year's central Apple object: smaller, anodized, colorful, and easy to wear as taste. The Razr V3 is a different kind of minimalism: thin metal, sharp hinge, glowing keypad, premium flip gesture. Nintendo DS makes interaction two-screen and stylus-based, while the PSP makes handheld media feel like black-glass luxury. These products are important because they precede the smartphone but already prepare the habits: carry the device, show the device, customize the device, use the device as part of identity. ## Architecture and interiors 2004 architecture turns information into form. Seattle Central Library by OMA and LMN is the year's key building. Its faceted glass-and-steel skin, book spiral, mixing chamber, escalators, color-coded spaces, and diagrammatic organization make the library feel like an information machine. It is not only a container for books; it is a public interface for search, circulation, gathering, and orientation. The Museum of Modern Art reopens in New York after Yoshio Taniguchi's expansion, offering a calmer museum logic of white planes, circulation, and carefully framed modernism. Together, these spaces show two sides of 2004: information intensity and refined institutional clarity. ## Fashion and self-design 2004 self-design is becoming profile-ready and device-aware. The look includes low-rise denim, polos, layered tanks, UGG boots, trucker-hat aftermath, Livestrong wristbands, logo accessories, indie blazers, and bright iPod mini color. The Razr becomes a hand gesture and a status flash; the iPod's white earbuds remain a public sign of private sound. Online, the self is increasingly a set of fields and uploads. Facebook asks for identity within a bounded network. Flickr asks what you saw and how to tag it. Blogs ask for voice. The body, the device, and the profile begin aligning. ## Music 2004 music design is portable, blogged, and socially circulated. Kanye West's *The College Dropout* uses mascot imagery, warm color, and school iconography to build a self-conscious brand world. Arcade Fire's *Funeral* brings handmade illustration, communal seriousness, and indie grandeur. Franz Ferdinand's debut uses sharp graphic modernism and art-school cool. Green Day's *American Idiot* turns a grenade-heart logo into political pop-punk identity. Gwen Stefani's *Love. Angel. Music. Baby.* builds fashion-pop persona through typography, styling, and Harajuku references. Music spreads through iPods, blogs, forums, MySpace pages, downloads, and early social recommendation. The sleeve matters, but so does the thumbnail and the profile link. ## Film and moving image 2004 moving image is full of memory, identity, and designed worlds. *Eternal Sunshine of the Spotless Mind* turns memory deletion into a tactile, fragmented design problem: folders, clinics, beach houses, handwritten notes, and collapsing rooms. *The Incredibles* gives mid-century modernism, superhero graphics, and interface design a clean animated system. *Collateral* makes digital video night Los Angeles feel metallic, green, and immediate. *Mean Girls* turns high-school social hierarchy into maps, clothes, books, and coded group identity. The moving-image lesson is that social structures can be designed: families, schools, memories, powers, cities, and identities all become systems. ## Color, material, and surface 2004 surfaces are glossy, blue, anodized, and faceted. The palette includes Facebook blue, Flickr pink and blue, Gmail white and red accents, iPod mini silver/green/pink/blue/gold, Razr metal grey, Firefox orange, PSP black, DS silver, and Seattle Library glass green. Materials include anodized aluminum, thin metal, glossy plastic, stylus screens, browser chrome, glass curtain walls, rubber wristbands, denim, and compressed digital photos. The surface logic is **friendly enclosure**: rounded services, small devices, glass libraries, and social accounts that invite you inside. ## Flashback design recipes ### Recipe 1: 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. - Add accuracy with: campus networks, sparse profiles, and pre-feed structure. ### Recipe 2: 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. - Add accuracy with: desktop upload, tags, groups, and early web community language. ### Recipe 3: 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. - Add accuracy with: beta invitation culture and desktop browser constraints. ### Recipe 4: 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. - Add accuracy with: hardware buttons, small storage, and pre-app-store use cases. ### Recipe 5: 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. - Add accuracy with: Seattle Central Library's program diagram and public interface role. ## Anti-cliches Do not make 2004 look like: - Mature iPhone app design. - Infinite-scroll social feeds. - Late-2000s glossy badges everywhere. - Flat design or material design. - Instagram photo grids. - Streaming-era music interfaces. - Pure MySpace chaos without Facebook, Gmail, Flickr, and Firefox utility. - Smartphone touch assumptions applied to Razr, DS, PSP, or iPod mini. - Generic blue web design with no invitation, profile, or search behavior. For 2004, the era should feel like **the social web turning into friendly blue rooms, searchable mailboxes, photo streams, and pocket-color signals**. ## Design prompt seeds ```text 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. ``` ```text 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. ``` ```text 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 - 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. ## Sources Primary references for this year, by institution and work: Facebook company histories on the February 2004 launch; Flickr launch histories; Google on Gmail's April 2004 beta and IPO materials; Mozilla on Firefox 1.0; Apple on the iPod mini and iTunes ecosystem; Motorola on the Razr V3; Nintendo on the DS launch; Sony on the PSP Japan launch; OMA, LMN, and Seattle Public Library documentation on Seattle Central Library; MoMA on the 2004 reopening; and contemporary works including *Eternal Sunshine of the Spotless Mind*, *The Incredibles*, *Mean Girls*, Kanye West's *The College Dropout*, Arcade Fire's *Funeral*, Franz Ferdinand, Green Day's *American Idiot*, and Gwen Stefani's *Love. Angel. Music. Baby.*.