--- year: 2017 status: example title: "2017: the polished web cracks" subtitle: "Brutalist websites, gradient brand worlds, the iPhone X notch, Dropbox's loud rebrand, and public design tools make neat product minimalism feel less inevitable." decade_position: "flatten" primary_lens: - brutalist and anti-design websites become a visible reaction to polished sameness - dropbox turns a utility brand into a loud creative-system experiment - iphone x makes the screen edge, notch, and gesture interface culturally visible - figma and browser-based collaboration change how interface work is made - wellness, streetwear, and direct-to-consumer brands refine minimal lifestyle identity art_direction: layout: editorial display: neo-grotesque body: neo-grotesque mono: system-mono texture: gradient-mesh ornament: blob stamp: "Brutalist web" note: "Polished product minimalism cracks into loud systems, raw web pages, and edge-to-edge screens." ink: "#131210" paper: "#f1efe9" muted: "#aaa498" bg: - "#0d0b09" - "#191712" - "#080706" accents: - "#caa23d" - "#d97a2f" - "#2f6b6b" - "#3a3a3a" --- # 2017 ## Year thesis 2017 is the year the polished web starts to look suspicious. The previous years made interface design clean, scalable, and friendly. By 2017, that cleanliness has become so common that roughness begins to feel like truth. Brutalist websites, default system fonts, awkward grids, loud underlines, exposed HTML, and deliberately crude interactions become a visible counter-taste to seamless product design. At the same time, the mainstream does not abandon polish. Apple's iPhone X makes the edge-to-edge screen, notch, and gesture navigation into a new interface object. Dropbox's Collins-led rebrand pushes in another direction: huge type, clashing color, art direction, and a brand system that wants creative energy rather than quiet storage utility. The feeling of the year: **clean systems under pressure from raw expression**. 2017 matters because it widens the decade's design field. A serious digital product can now be minimal, loud, brutalist, gradient-rich, editorial, collaborative, wellness-soft, or hardware-shaped by the black rectangle of a nearly all-screen phone. ## How 2017 differs from 2016 2016 adds heat to the grid. 2017 questions the grid's manners. | From 2016 | To 2017 | | --- | --- | | Gradients return as app-icon spectacle | Gradients and clashing palettes become brand-world material | | Stories and live video accelerate social design | Feeds, stories, and creator tools become everyday cultural infrastructure | | Variable fonts are announced | Designers start imagining type as software and systems as collaborative files | | Polished product minimalism dominates | Brutalist and anti-design web aesthetics gain cultural visibility | | Smartphones refine familiar rectangles | iPhone X makes the notch, rounded screen, and gestures impossible to ignore | | Design systems feel rational | Dropbox shows a design system can be loud, eclectic, and art-directed | The key shift: 2017 makes taste plural again. The clean SaaS page is still everywhere, but it no longer owns the future by itself. ## Design climate ### The dominant tension 2017 is pulled between **seamless polish** and **deliberate friction**. 1. **Seamless polish** - iPhone X hardware, mature app ecosystems, gesture interfaces, wellness brands, direct-to-consumer photography, and carefully tuned design systems. 2. **Deliberate friction** - brutalist websites, default browser aesthetics, oversized type, jarring color, ugly-beautiful layouts, and brands that want to be noticed for refusing blandness. The year matters because friction becomes a design choice, not only a failure. Designers use roughness to signal independence, art-world intelligence, speed, honesty, or resistance to platform sameness. ### What is emerging - **Brutalist web as countertaste**: raw HTML, exposed structure, awkward scale, and anti-smooth interaction feel fresh against templated startup pages. - **Loud flexible branding**: Dropbox's rebrand uses type, color, image, and collaboration metaphors as an expressive toolkit. - **All-screen hardware logic**: the iPhone X turns safe areas, gestures, notches, rounded corners, and OLED black into interface concerns. - **Collaborative design tools**: Figma's browser-based model points toward multiplayer interface work. - **Direct-to-consumer minimalism**: Casper, Glossier, Away, and similar brands refine soft color, clean copy, lifestyle photography, and packaging-as-social proof. - **Wellness as interface mood**: calm colors, habit loops, meditation apps, and sleep/fitness tracking make self-care a product aesthetic. - **Algorithmic social anxiety**: design has to manage trust, feeds, misinformation, badges, reactions, and attention fatigue. - **Scarcity as graphic system**: drops, queues, resale screenshots, and logo placement make release mechanics part of fashion design. ## Timeline signals | Signal | Why it matters for design | | --- | --- | | Apple announces and releases iPhone X | The notch, safe area, Face ID, gesture navigation, and edge-to-edge OLED screen reshape mobile UI constraints. | | Dropbox launches its 2017 rebrand with Collins | A quiet utility brand becomes a loud, art-directed creative platform system. | | Brutalist Websites continues popularizing raw web taste | Anti-polish becomes a recognizable design reference rather than only bad production. | | Figma gains public momentum after its 2016 launch | Collaborative browser-based interface design begins changing how teams make screens. | | Nike's Vaporfly 4% reaches elite running attention | Performance product design becomes a visible debate about foam, carbon plates, and competitive advantage. | | Pantone names Greenery its Color of the Year | Fresh green reflects wellness, nature, and renewal in a tense political and digital climate. | | The Ordinary's clinical beauty packaging spreads | Minimal white labels and ingredient transparency become a beauty-design language. | | Apple Park opens to employees | Corporate architecture becomes a massive object of glass, landscape, secrecy, and product-like precision. | | Variable-font experiments appear in design media | The previous year's typographic announcement starts becoming visible as demos and specimens. | ## Typography ### The typographic mood 2017 typography swings between **neutral product clarity** and **oversized editorial force**. Neo-grotesques, system fonts, and geometric sans type remain the product default. But large, awkward, loud, tightly cropped, or brutally plain type becomes increasingly attractive. A page can look designed by using almost nothing but huge text, a weird grid, and an uncomfortable amount of confidence. The question moves from: > "How do we make this interface consistent?" to: > "When does consistency become invisibility?" ### What changes - **Oversized type becomes interface drama**: landing pages and rebrands use huge headlines as architecture. - **Default type becomes intentional**: unstyled or lightly styled system text can signal rawness and speed. - **Design-system type gets documented**: scales, weights, and responsive behavior become part of shared libraries. - **Variable-font demos influence taste**: type is increasingly understood as a dynamic range. - **Brand typography gets eclectic**: a system may include neutral UI type plus expressive display faces, art references, or clashing pairings. ## Graphic design 2017 graphic design is less afraid of being ugly. The brutalist web impulse is not simply bad design. It borrows from early web pages, art-school PDFs, institutional archives, default browser behavior, zines, and anti-commercial gestures. It uses underlines, Times-like serifs, raw lists, blue links, clashing columns, and hard edges to escape the smooth hero-image template. Dropbox's rebrand is the polished version of this revolt. It is not raw HTML, but it is loud: big type, unexpected color combinations, collaged art direction, and a flexible system designed to host other people's work. It makes storage look like creative culture. ## Product and industrial design 2017 product design is shaped by the edge of the screen. The iPhone X is the key object: glass front and back, stainless steel band, no home button, Face ID sensor housing, OLED black, rounded display corners, and gesture navigation. Industrial design and interface design become inseparable; the hardware cutout dictates software layout and brand imagery. Other product signals include AirPods becoming culturally visible, smart speakers becoming domestic objects, and performance footwear like Nike Vaporfly pushing product design into data, foam science, and controversy. Products feel smoother outside and more algorithmic inside. ## Architecture and interiors 2017 architecture is split between product-campus perfection and expressive reuse. Apple Park is the year's dominant corporate space: a circular glass megastructure, landscape, precision detailing, and a headquarters imagined like a product. It represents the seamless side of the year: controlled, expensive, minimal, and total. Against that, cultural interiors, pop-ups, galleries, and stores often favor raw concrete, exposed services, warehouse shells, temporary fixtures, bold wayfinding, and Instagrammable moments. The room is either frictionless brand temple or adaptable content stage. ## Fashion and self-design 2017 self-design mixes streetwear, wellness, and clinical minimalism. Supreme's mainstream visibility, luxury streetwear crossovers, sneakers, hoodies, technical fabrics, and logo drops make scarcity a design medium. Beauty and wellness brands use soft pink, white labels, ingredient lists, direct copy, and bathroom-shelf photography. The Ordinary's packaging turns clinical transparency into a graphic style. The body is both optimized and casual: step counts, meditation streaks, running shoes, meal photos, skin routines, and athleisure basics. Self-design is a set of repeatable rituals made visible through apps and packaging. ## Music 2017 music design is platform-native and mood-boarded. Kendrick Lamar's *DAMN.* uses stark red, white, black, and deliberately plain typography to create instant graphic force. Lorde's *Melodrama* uses painterly color and emotional night imagery. Tyler, the Creator's *Flower Boy* uses illustration and warm color as identity. Streaming turns all of these into square images, playlist tiles, tour visuals, and social fragments. Spotify, Apple Music, YouTube, SoundCloud, and Instagram all shape how music looks. A release is cover, snippet, caption, merch drop, lyric card, video still, and algorithmic recommendation. ## Film and moving image 2017 film and moving image design are obsessed with systems, bodies, and memory. *Blade Runner 2049* revisits cyber-noir with monumental orange dust, pale corporate interiors, holographic companions, and brutalist futurism. *Get Out* makes suburban normality and clean interiors feel threatening. *The Shape of Water* uses green, teal, tile, water, and mid-century fantasy to build a tactile world. *Twin Peaks: The Return* treats television as glitch, ritual, typography, and atmosphere. The moving image also becomes more vertical and social. Stories, live streams, and looping clips teach motion designers to design for silent autoplay, captions, stickers, and quick recognition. ## Color, material, and surface 2017 color is both natural and abrasive. Pantone's Greenery captures one side: fresh, vegetal, wellness-coded, optimistic. Dropbox captures another: unexpected color collisions, saturated backgrounds, and art-school contrast. Brutalist web surfaces often avoid polish altogether: black text, white background, blue links, default grey, raw image compression. Materials include OLED glass, stainless steel, clinical labels, cardboard DTC packaging, raw concrete, performance foams, soft athleisure textiles, and gradient meshes. Surface can be immaculate or deliberately unfinished. ## Flashback design recipes ### Recipe 1: Brutalist web notice Use for: art projects, archives, experimental tools, cultural criticism, festival microsites. - Palette: white, black, default blue, warning red, dirty grey. - Type: system sans or default serif, oversized headlines, underlined links. - Layout: raw lists, awkward columns, visible edges, minimal decoration. - Imagery: unpolished photos, screenshots, scans, browser-native elements. - Motion: abrupt jumps, simple hovers, hard cuts, minimal easing. - Risk: inaccessible mess pretending to be critique. - Add accuracy with: legible structure beneath the rawness. ### Recipe 2: Loud creative system Use for: collaboration tools, creative platforms, agencies, cultural software. - Palette: clashing brights, black, off-white, mustard, coral, teal. - Type: huge grotesque display, neutral UI sans, occasional expressive pairing. - Layout: modular but unstable: crops, overlays, panels, unexpected scale shifts. - Imagery: collage, art direction, work-in-progress, multiple creative outputs. - Motion: panel swaps, color flips, fast editorial transitions. - Risk: loudness with no underlying system. - Add accuracy with: a repeatable kit of type, color, and image behaviors. ### Recipe 3: Notch-era mobile Use for: mobile apps, hardware launches, finance tools, health products. - Palette: OLED black, white, deep blue, green status, metal neutrals. - Type: system sans, large titles, safe-area-aware spacing. - Layout: edge-to-edge panels, rounded corners, bottom gestures, sensor-aware top space. - Imagery: phone silhouette, black glass, face scan, camera depth cues. - Motion: swipe home, card lift, face unlock, elastic transitions. - Risk: drawing a generic rectangle and forgetting the notch and gestures. - Add accuracy with: safe areas, bottom affordances, and black OLED contrast. ### Recipe 4: Clinical wellness shelf Use for: skincare, supplements, health apps, self-care brands. - Palette: white, black, pale pink, muted green, silver grey. - Type: plain sans, ingredient labels, small technical hierarchy. - Layout: label grid, bottle front, bathroom shelf, direct copy blocks. - Imagery: product close-ups, skin texture, clean counters, plants. - Motion: routine steps, checklist, progress, gentle fade. - Risk: later pastel wellness cliche with no informational discipline. - Add accuracy with: clinical labeling and transparent ingredient language. ## Anti-cliches Do not make 2017 look like: - Fully mature 2020s neo-brutalism with cartoon shadows. - Generic cyberpunk just because *Blade Runner 2049* exists. - A polished SaaS landing page with one random ugly font. - Vaporwave sunsets and chrome typography. - A notch-era phone without safe-area or gesture logic. - Wellness branding with no clinical or ritual structure. - Dropbox-like clashing color without a flexible system. - Brutalist web that is illegible or careless rather than intentional. For 2017, the era should feel like **a polished digital world discovering the expressive value of cracks**. ## Design prompt seeds ```text Design this through a 2017 lens: brutalist websites are pushing against polished startup sameness, Dropbox has made a loud creative system, and iPhone X has made the screen edge and notch part of interface design. Keep friction intentional. ``` ```text Give me three 2017-informed directions: 1. Brutalist web notice 2. Loud creative system 3. Notch-era mobile For each, explain typography, color, layout, motion, and what to avoid. ``` ```text Critique this product page as if it launched in 2017. Is its roughness a real anti-polish position, or just an unfinished version of a standard SaaS template? ``` ## Reference artifacts ### Objects - Apple iPhone X. - AirPods in early mass adoption. - Nike Zoom Vaporfly 4%. - Smart speakers and voice assistants in domestic settings. - The Ordinary bottles and cartons. ### Print and graphics - Dropbox's 2017 Collins rebrand. - Brutalist Websites archive examples. - Figma interface and collaboration materials. - Kendrick Lamar *DAMN.* cover. - Pantone Greenery materials. - Apple iPhone X launch imagery and safe-area interface examples. - The Ordinary clinical label system. ### Spaces - Apple Park in Cupertino. - Raw gallery, pop-up, and warehouse retail interiors. - Direct-to-consumer bathroom-shelf and bedroom product photography. - Co-working rooms with product-team rituals. - Phone screens designed around iPhone X safe areas. - Streetwear drop lines and resale interfaces. - Wellness studios with plants, mirrors, pale woods, and app booking. - Browser-based design files shared across distributed teams. ## Sources Primary references for this year include Apple materials on iPhone X and Apple Park, Dropbox and Collins writing on the 2017 rebrand, Brutalist Websites as a contemporary archive, Figma launch and product materials, Nike information and reporting on the Vaporfly 4%, Pantone Color of the Year Greenery, The Ordinary product packaging, and primary works including *DAMN.*, *Blade Runner 2049*, *Get Out*, and *Twin Peaks: The Return*.