Web Design for Kids: Cinematic Picture-Book Landing on Cream Paper

Palette

Typography

AaFrauncesAaDM Mono

Summary

Una landing per un libro illustrato che insegna il web design ai bambini, costruita come un disegno unico: tutto quello che si muove è fatto a mano o sembra fatto a mano. La pagina non presenta il libro, lo mette in scena — la carta è il fondo, l'inchiostro è il testo, e ogni sezione aggiunge un segno alla stessa pagina.

Style

Un quaderno a pallini su carta crema, disegnato a pennarello, ripreso come un cortometraggio.

              Carta crema #f6efe3 con una griglia a pallini appena visibile, e sopra tre inchiostri che non si mescolano mai: blu elettrico #2f6df6 per i segni tecnici, corallo #ff5a36 per gli accenti, giallo pastello per i tocchi caldi; il testo è inchiostro scuro #1a1a2e. Due tipografie con due lavori distinti: una serif variabile (Fraunces, ottica variabile) per ogni riga di display e per i prezzi, una scritta a mano (Gochi Hand) per le annotazioni e le didascalie disegnate, e un monospace (DM Mono) per le etichette in maiuscoletto con tracking largo. I video dei disegni sono su fondo bianco e vanno in mix-blend-mode multiply, così la carta e i pallini si vedono attraverso il tratto: nessuna sezione può avere uno z-index, o il bianco torna a coprire. Niente ombre morbide, niente angoli arrotondati sui riquadri: i bordi sono tracciati a mano, leggermente storti.

Layout & structure

Sette scene sulla stessa carta: sipario, barra, apertura, manifesto, il libro, il playground, la chiusa.

Sipario

Schermo pieno di carta. Un video di uno schizzo al centro, e intorno tag HTML e frammenti di CSS scritti a mano che compaiono uno alla volta, blu quando sono freschi e che asciugano verso l'inchiostro. Una barra di avanzamento sottile e una percentuale in monospace. Si dissolve, non scorre.

Apertura

Titolo in tre righe impilate a sinistra, non centrato. Un cursore di plastica spesso galleggia e si inclina seguendo il puntatore. Una freccia di scroll che si disegna da sola, tratto dopo tratto.

Manifesto

Paragrafi che si rivelano parola per parola mentre scorri, con quattro disegni animati in linea — un bambino, un gatto, un razzo, un aeroplano di carta — che entrano dove il testo li nomina.

Scribbles

Frammenti di codice sparsi sulla pagina (`<h1>`, `#ff5a36`, `display: flex`) che si spostano in coda con una molla di velocità: partono corallo e si posano in inchiostro.

Adesivi di carta

Tre adesivi — una finestra di browser, una cartella colori, un portatile a pastello — su piani WebGL con shader cloth: ondeggiano come carta appoggiata male, e il puntatore che passa vicino li disturba. Sotto i 1080px il piano diventa una traslazione a scroll.

Il libro

Slider delle pagine con zoom, tabella dei prezzi, riquadri col bordo tracciato a mano, e un form d'invito che valida sul posto e ringrazia senza andare da nessuna parte.

Playground

La sezione che non esisteva altrove: scegli un nome, un colore, un font e un amico; la finestra del browser ondeggia e l'HTML si scrive da solo in grafia a mano.

Chiusa

Claim gigante su due righe con rivelazione a contorno, allineato a sinistra e seconda riga rientrata. Poi una processione di bambini disegnati con tablet e un cane.

Special components · 4

Sipario che scrive a manoIl loader come lezione di HTML

Il loader come lezione di HTML

Mentre gli asset caricano, scrivi intorno al video i tag che compongono una pagina, uno alla volta, con la grafia. Il progresso è reale, non finto: la barra segue il caricamento vero. All'ultimo frame il sipario si dissolve senza spostarsi.

Adesivo su shader clothCarta che ondeggia in WebGL

Carta che ondeggia in WebGL

Piano suddiviso 28×28; il vertex shader somma tre sinusoidi per ondeggiare, il fragment riusa la stessa onda per l'ombreggiatura. Ogni adesivo viaggia verticalmente attraversando il viewport, da ±2,5 a ±4,5rem secondo l'adesivo, per dare parallasse. Fallback obbligatorio: sotto i 1080px, o senza WebGL, una traslazione a scroll.

Coda con molla di velocitàElementi che si posano invece di apparire

Elementi che si posano invece di apparire

Ogni frammento entra in coda con un ritardo progressivo e una molla sulla velocità, non sulla posizione: accelera, supera di poco e si assesta. È ciò che fa sembrare disegnata la pagina invece che animata.

Playground che scrive il markupQuattro scelte e l'HTML si compone

Quattro scelte e l'HTML si compone

Nome, colore, font e personaggio. A ogni scelta la finestra di anteprima ondeggia e il codice corrispondente si scrive in grafia a mano, riga per riga. È l'unica parte interattiva vera: deve funzionare al primo tocco, senza istruzioni.

Notes

            Ogni movimento ha un equivalente fermo e prefers-reduced-motion se lo prende. I video dei disegni sono bianchi opachi e vivono di multiply: dare uno z-index a una sezione fa ricomparire i rettangoli bianchi — è la trappola numero uno di questa pagina. Gli adesivi sono posizionati in percentuale dell'altezza della pagina, così sopravvivono ai cambi di testo senza uno script di adattamento.