Pereiti prie turinio

Copious Lab

Viena studija, kelios svetainės.

Ta pati įmonė, tos pačios kainos, ta pati CMS — sukurta dvidešimt vienu skirtingu būdu. Kiekvienas dizainas yra veikiantis puslapis, o kiekvienoje pastaboje nurodyta, kiek jis kainuoja greičio ir prieinamumo požiūriu.

Keičiasi tik pavadinimas; kainos ir paslaugos lieka mūsų. Niekas neišsaugoma.

  1. Dabartinė svetainė

    Editorial

    • Generuojama serveryje, veikia be JavaScript
    • Pradžios puslapio JS ≈ 139 kB suglaudinus gzip, be WebGL
    • WCAG 2.1 AA, tikrinama axe įrankiu CI

  2. Koncepcija A

    Spatial studio

    • Viena procedūrinė WebGL scena, kuri keičiasi su kiekviena skiltimi
    • three.js įkeliama po pirmojo atvaizdavimo; tekstas niekada jos nelaukia
    • Sumažintos animacijos režimu rodomas nejudantis kadras; be WebGL ar JS puslapis yra paprastas HTML

  3. Koncepcija B

    Terrain

    • Graviruotas kraštovaizdis, virš kurio skrendate slinkdami; kiekviena skiltis — vis kita reljefo forma
    • Tušo keteros ir horizontalės ant popieriaus, nupieštos vienu šešėliuokliu; žymeklis pakelia žemę
    • Turinys ant vientisų popieriaus plokščių, todėl tekstas niekada neatsiduria ant linijų

  4. Koncepcija C

    Facet

    • Šaltas, kristalinis objektas, kuris slenkant susidėlioja iš šukių
    • Prietaisų skydelio sąsaja: lygiapločiai rodmenys, tekstas, kuris iššifruojamas savo vietoje
    • Refrakciją primenantis šešėliavimas, visiškai procedūrinis

  5. Koncepcija D

    Liquid

    • Viso ekrano skystas gradientas, kurį maišo žymeklis
    • Kiekviena skiltis keičia spalvos nuotaiką
    • Minkšta ir organiška, su dideliu ramiu šriftu: C priešingybė

  6. Koncepcija E

    Bitmap

    • Apšviestas 3D natiurmortas, tvarkingu diteringu paverstas dviem dažais; skiltys ištirpsta langelis po langelio
    • Žymeklis (arba pirštas ant paveikslo) yra žibintuvėlis; fokusuota paslauga ar pažadas apšviečia savo objektą
    • Kiekvienas žodis yra ant vientiso popierinio lango; be WebGL jį pakeičia CSS diteringas

  7. Koncepcija F

    Diorama

    • Low-poly senamiesčio gatvelė sutemus; slinkdami įeinate vidun, po vieną kambarį kiekvienai skilčiai
    • Piešiama trečdaliu raiškos, su pritrauktomis viršūnėmis, afininėmis tekstūromis ir posterizuota palete
    • Visas turinys vientisuose dialogo languose; be WebGL jį pakeičia CSS sutemų siluetas

  8. Koncepcija G

    Glyph

    • 3D forma, piešiama vien simboliais, kintanti kiekvienoje skiltyje: mazgas, penkiolika karoliukų, grandinė, briaunotas žiedas
    • Šešėliuojama tonų skale; ties siluetu glifai parenkami pagal kontūro formą
    • Tekstas yra ant vientisų skydelių; be WebGL ar JS ją pakeičia serverio išspausdintas ASCII toras

  9. Koncepcija H

    Phosphor

    • Svetainė kaip XY osciloskopas: kiekvienoje skiltyje nauja figūra, brėžiama švytinčiu spinduliu
    • Gauso spindulio segmentai, blėstantis ping-pong buferis liekamajam švytėjimui ir švytėjimo praėjimas
    • Užveskite žymeklį ant paslaugos (arba palieskite jos figūrą), kad suderintumėte osciloskopą pagal jos santykį; sumažintos animacijos režimu rodoma viena nejudanti trajektorija

  10. Koncepcija I

    Pool

    • Tiesioginė bangų simuliacija su tikra refrakcija ir kaustikomis, WebGL
    • Turinys ant vientisų lentelių prie baseino; vanduo matyti tik tarp jų
    • Sumažinta animacija: vienas nejudantis saulės apšviesto vandens kadras, be simuliacijos

  11. Koncepcija J

    Turing

    • Tiesioginė Grėjaus–Skoto reakcijos–difuzijos simuliacija WebGL
    • Teksto skydeliai iškirpti iš simuliacijos, todėl raštas auga aplink juos
    • Sumažinta animacija: lėkštelėje raštas užauginamas įkeliant ir rodomas nejudantis

  12. Koncepcija K

    Mycelium

    • Gleivūno tinklas iš ~100 tūkst. GPU agentų, augantis tarp puslapio turinio
    • Kiekviena paslauga, žingsnis ir pažadas yra maistas; žymeklis taip pat, o gyslos aplenkia tekstą
    • Sumažintos animacijos režimu tinklas užauga nematomas ir rodomas nejudantis; be WebGL — nupieštas

  13. Koncepcija L

    Loom

    • Austas puslapis: slenkant į tuščius metmenis įaudžiamos naujos audinio eilės
    • Kiekviena skiltis – atskira juosta: drobinis, ruoželinis, eglutė, panama, žąsies pėdutė, atlasas
    • Vienas fragmentų šešėliuoklis; metmenys virpa po žymekliu; sumažintos animacijos režimu rodomas baigtas audinys

  14. Koncepcija M

    Copious OS

    • Skiltys yra tikri langai: vilkite, dėliokite, sumažinkite; be JS – vienas stulpelis
    • Be WebGL; viena maža 2D drobė diteringo darbalaukio fonui
    • Klaviatūra: piktogramos ir dokas yra nuorodos ir mygtukai, Esc sumažina, Alt+W perjungia langus

  15. Koncepcija N

    Sheet

    • Svetainė kaip skaičiuoklė; paslaugos yra tikra lentelė, lapų ąselės – nuorodos
    • Rodyklių klavišai perkelia žymėjimą; formulės juosta aprašo kiekvieną langelį
    • Be canvas, be WebGL; juostos langeliuose nupieštos pagal skelbiamas kainas ir trukmes

  16. Koncepcija O

    Receipt

    • Visa svetainė kaip vienas terminio kasos aparato kvitas, slenkant išlendantis iš spausdintuvo
    • Tik CSS ir SVG: slinkimo laiko juostos su nedideliu atsarginiu JS, be WebGL, be canvas
    • Paslaugos yra tikra lentelė; paprašius spausdinama ant 80 mm popieriaus

  17. Koncepcija P

    Riso

    • Dviejų dažų rizografinis zinas: kiekvienas atvartas atsiranda nesutapdintas ir slenkant susitapdina
    • Rastrai – grynas CSS (taškų gradientai ir contrast()); grūdėtumas – vienas SVG turbulence filtras
    • Skaitomas tekstas visada vientisas mėlynas dažas ant popieriaus, 7,5:1; rožinė – tik puošmena

  18. Koncepcija Q

    Specimen

    • Svetainė kaip šriftų liejyklos pavyzdys, surinktas laisvuoju kintamuoju šriftu Roboto Flex
    • Tikri slankikliai valdo storį, plotį, optinį dydį ir gradaciją; antraštės raidės linksta link žymeklio
    • Be canvas ir be WebGL: vienas kintamasis šriftas, padalytas pagal rašmenų sistemas, CSS kintamieji ir slinkimu valdomos ašys

  19. Koncepcija R

    Loupe

    • Ramus spausdintas puslapis; stiklinė lupa parodo sandarą po juo
    • Po stiklu: elementų pavadinimai, tikras tinklelis ir bazinė linija, išmatuoti dydžiai ir CMS laukas už kiekvienos eilutės
    • Matuojama iš gyvo puslapio vykdymo metu; be canvas, be WebGL; mygtukas klaviatūra parodo visą peršvietimą

  20. Koncepcija S

    Toybox

    • Puslapis – kaladėlių dėžė: tikros antraštės, kortelės ir mygtukai įkrenta, susikrauna, ir juos galima mėtyti (matter.js)
    • Kiekviena detalė turi savo vietą; Sutvarkyti padeda ją atgal, o nurimusios detalės visada nusileidžia tiesiai ir įskaitomai
    • Sumažinta animacija arba be JavaScript: tos pačios kaladėlės, tvarkingai sukrautos; tarpo klavišas spyrį duoda fokusuotai detalei

  21. Koncepcija T

    Droste

    • Begalinis priartinimas: slinkdami nerate į puslapį, pro raidės akutę į kitą skiltį
    • Tik šriftas – vienas groteskas, plaukinės linijos ir vienas akcentas; kiekvienas sluoksnis yra tikra skiltis, pirma paslinkta, paskui priartinta
    • Sumažinta animacija arba be JavaScript: tie patys sluoksniai kaip nuoseklus dokumentas; fokusas ir nuorodos nukelia į reikiamą gylį