Marcello Costa - Design & Web

Indice

10

12

Premessa

18

Struttura

20 48 60 74

Design del Web: oltre lo schermo I web standard come infrastruttura del progetto HTML5 e semantica:progettare significato Accessibilità, semantica e interoperabilità del Web

94 96 116 126

Configurazione Storia dei layout: dalle tabelle al CSS Grid Responsività intrinseca e declino del mobile-first Strumenti nativi per una tipografia fluida

136 138 148 158 170

Processo Designer e developer: una dicotomia che non regge più Vibe coding: accelerazione, limiti e responsabilità Parlare con la macchina Augmented Designer

176

Bibliografia

11

Premessa

12

La premessa introduce il quadro teorico e culturale entro cui si colloca il presente contributo, in dialogo con la comunità scientifica e il mondo del lavoro. La riflessione si concentra sul Web come sistema complesso in cui convergono dimensioni progettuali, culturali ed economiche. Da un lato, si richiama il designer alla consapevolezza che l’innovazione autentica nasce dalla ricerca; dall’altro, si invita l’ambito accademico a mantenere un rapporto costante con la realtà operativa, non per aderire passivamente alle sue logiche, ma per esercitare una funzione critica rispetto ai meccanismi economici e finanziari che regolano il mercato.

Il lavoro del designer per il Web non può quindi essere ridotto esclusivamente a criteri di efficienza, competizione e profitto.

Questi valori emergono con particolare evidenza in alcune metodologie progettuali contemporanee, spesso ricondotte in modo semplificato al cosiddetto design thinking, il cui uso diffuso ne ha progressivamente attenuato la portata critica. In molti casi, tali approcci risultano orientati prevalentemente al rilascio del prodotto sul mercato, inteso come esito finale del processo progettuale, senza una reale valutazione del suo impatto sociale, culturale e ambientale. Come osserva Manuel Lima in The New Designer (2023), modelli come il doppio diamante appaiono incompleti proprio per l’assenza di una fase dedicata alla misurazione dell’impatto del progetto.

Ne deriva uno squilibrio tra riflessione e azione, tra elaborazione teorica e pratica progettuale. La proliferazione di modelli e metodologie rischia di allontanare il designer dalla dimensione concreta del fare, favorendo una progressiva sovrapposizione con ruoli di natura manageriale o consulenziale. In questo senso, risulta significativo ricordare il richiamo di Steve Jobs che, in un intervento tenuto nella primavera del 1992 alla MIT Sloan School of Management, sottolinea il valore del coinvolgimento diretto nei processi operativi, contrapponendolo a forme di conoscenza più astratte (Jobs, 1992). Jobs evidenzia, nella critica 13

Struttura

Time Inc. (1945). The Memex. Life, 19(11), 112. Wikimedia Commons. wikimedia.org

La struttura è l’insieme delle condizioni formali che rendono un progetto web leggibile da persone, macchine e sistemi automatici. Web standard, HTML semantico e accessibilità non sono dettagli implementativi ma materiali progettuali, le fondamenta su cui poggiano tanto la configurazione del medium quanto il processo con cui il designer vi interviene.

Il punto non è padroneggiare la sintassi, ma riconoscere che ogni scelta strutturale ha conseguenze sull’interpretabilità dei contenuti, sull’inclusività dell’interfaccia e sulla qualità complessiva del progetto.

19

1.

Design del Web: oltre lo schermo

20

Il Web non vive sulla superficie di uno schermo. È un’infrastruttura complessa, un intreccio di protocolli, dati, contenuti e relazioni che si estende ben oltre ciò che appare in un’interfaccia. Eppure, molte pratiche dominanti del web design tendono ancora a ridurlo a una questione di resa visiva: layout, colori, componenti, animazioni e microinterazioni da comporre attraverso strumenti standardizzati. Come se la profondità del medium potesse essere esaurita dalla simulazione di un mockup no-code, da un modello predefinito offerto da una piattaforma online, da un prodotto generato rapidamente dall’AI, o dall’adozione poco consapevole di queste soluzioni. Questa riduzione segnala una difficoltà più ampia: la tendenza a confondere il mezzo con la sua rappresentazione visibile, la forma con la sostanza e il design con l’applicazione di soluzioni già disponibili. Il progetto rischia così di perdere il contatto con le condizioni materiali, tecniche, sociali ed etiche che rendono il Web un ambiente culturale e operativo, non soltanto un supporto grafico.

Da questa prospettiva, il web design finisce per essere inteso come un dominio prevalentemente pragmatico, concentrato su dimensioni estetiche e funzionali. Le interfacce vengono considerate prodotti misurabili, valutati soprattutto in termini di usabilità, efficienza e tasso di conversione. L’esperienza d’uso, quando viene ridotta a una sequenza di passaggi ottimizzati per massimizzare il coinvolgimento, può però entrare in tensione con principi di responsabilità, trasparenza e rispetto dell’utente. È in questo spazio che emergono i dark pattern, configurazioni progettuali che sfruttano bias cognitivi per orientare le scelte in modo opaco o manipolativo. Allo stesso modo, strumenti, ambienti di sviluppo, sistemi di gestione dei contenuti e soluzioni automatizzate possono diventare scorciatoie operative quando vengono adottati senza una valutazione critica del contesto. La questione non riguarda lo strumento in sé, ma il modo in cui viene scelto, configurato e integrato nel progetto. Una soluzione 21

più ampia accessibilità. Questo esempio illustra la marcatura semantica di un menu di navigazione di primo livello che contiene una lista di collegamenti alle principali sezioni di un sito web. L’elemento <nav> identifica l’area dedicata alla navigazione, mentre la lista <ul> organizza gerarchicamente i collegamenti ipertestuali verso le diverse pagine del sito.

<nav aria-label="Navigazione principale"> <ul> <li><a href="/">Home</a></li> <li><a href="/ articoli">Articoli</a></li> <li><a href="/ progetti">Progetti</a></li> <li><a href="/ contatti">Contatti</a></li> </ul> </nav>

L’attributo aria-label="Navigazione principale" consente di distinguere questo menu da eventuali altre aree di navigazione presenti nella pagina, come un menu secondario o il breadcrumb.

Il designer si colloca dunque in una posizione di responsabilità che non riguarda soltanto l’aspetto visivo o funzionale del progetto, ma anche la sua capacità di produrre significato e di mantenerlo nel tempo. Operare nel Web implica confrontarsi con sistemi aperti, nei quali le scelte di marcatura incidono sulla possibilità di accesso, interpretazione e riuso dei contenuti.

Operare consapevolmente su questo piano è ciò che distingue una scelta progettuale da una semplice convenzione tecnica. Qui le nozioni di struttura, configurazione e processo trovano una concreta articolazione operativa: la struttura si manifesta nella formalizzazione semantica dei contenuti, la configurazione nelle modalità con cui tali contenuti possono essere rappresentati e adattati nei diversi contesti d’uso, e il processo nel ruolo attivo del designer, che interviene fin dalle prime fasi nella costruzione di queste relazioni. È a partire da queste premesse che diventa possibile passare dal piano teorico a quello operativo, mostrando come le scelte di marcatura si traducano concretamente nella costruzione del contesto.

64

3.4 Il contesto in pratica: un esempio di markup semantico Per comprendere appieno il valore del contesto, confrontiamo due approcci alla struttura di una pagina web che presenta un articolo con un’immagine: Approccio non semantico (contesto assente) <div class="container"> <div class="top-section"> <div class="title">Il ruolo dell'HTML5 nel design etico</div> <div class="image-wrapper"> <img src="design-etico.jpg" alt="Immagine di design etico" /> <div class="caption">Un esempio di design attento al contesto sociale.</div> </div> </div> <div class="content"> <div class="text">L'HTML5 introduce elementi che permettono di...</div> </div> </div>

In questo esempio, l’uso di <div> generici non fornisce alcuna informazione sul ruolo o sul significato dei contenuti. Per uno screen reader, un motore di ricerca o uno sviluppatore, questa struttura è ambigua: l’immagine potrebbe essere un elemento decorativo o un contenuto primario, e il testo potrebbe essere un paragrafo qualsiasi, privo di relazioni con il resto della pagina.

Il contesto è perso, e il contenuto diventa un semplice dato da elaborare, non un messaggio da comprendere.

Approccio semantico (contesto esplicito) <article> <header> <h1>Il ruolo dell'HTML5 nel design etico</h1> 65

Configurazione

Lloyd, G. (1969, ottobre). HES IBM 2250 Console. Wikimedia Commons. wikimedia.org

La configurazione introduce la dimensione dinamica del progetto: il modo in cui i contenuti prendono forma in relazione al dispositivo, all'ambiente e al contesto d'uso.

La responsività intrinseca, la storia dei sistemi di layout e la tipografia fluida mostrano come l'interfaccia non sia una forma statica da adattare, ma il risultato di un sistema di regole flessibili che il designer imposta in dialogo con il browser.

95

griglie complesse senza ricorrere a espedienti tecnici o adattamenti impropri delle proprietà CSS esistenti.

CSS Grid elimina la necessità di simulare colonne con percentuali complesse, introducendo l’unità fr (frazione), che rappresenta una svolta logica: il browser non riceve più un ordine statico in pixel, ma una regola di ripartizione dello spazio. Come sottolineato da Jen Simmons, l’unità fr permette di distribuire lo spazio residuo in modo dinamico, permettendo al layout di respirare in base al contenuto e non solo al contenitore. Questa transizione segna la fine dell’era del design come “imitazione della carta”, portando alla consapevolezza che il Web è un medium intrinsecamente fluido, dove la struttura non è imposta ma calcolata in tempo reale dal browser.

Cronologia tecnica dell’evoluzione del web design Era del Web Design Prima Generazione

Tecnologie Dominanti

Modello di Interazione

Filosofia Progettuale

HTML puro, testo ASCII,

Consultazione

Funzionalità pura,

tag strutturali

lineare scientifica

condivisione di dati accademici

Seconda Generazione

Icone, sfondi

Navigazione

Enfatizzazione della

piastrellati, tag

gerarchica a menu

tecnologia e dei link testuali

Terza

Tabelle invisibili,

Esperienza immersiva,

Controllo estetico “pirata”,

Generazione (Siegel)

Single-Pixel GIF,

metafore visive

seduzione e Fish Food

Entry Tunnels Era Standard

Floats, Media

Adattamento multi-

Flessibilità reattiva

(Responsive)

Queries, Percentuali

device (fluid grids)

basata sui breakpoint del device

Era Intrinseca (Moderna)

CSS Grid, Flexbox,

Layout relazionali e

Logica interna,

Container Queries

comportamentali

progettazione basata sul contenuto

104

PERIODO APPROSSIMATIVO

ERA DEL LAYOUT

CARATTERISTICHE PRINCIPALI

Primi anni ’90

Flow Layout

Layout predefinito del browser; il testo scorre riempiendo lo spazio disponibile.

1996 – 2003

Tabelle per Layout

Utilizzo improprio di tag HTML (<table>) per forzare la grafica; immagini “affettate” in puzzle.

Fine anni ’90 – 2000

Flash Era

Canvas a dimensione fissa; controllo totale sulla posizione degli oggetti ma scarso accesso/SEO.

2003 – 2010 2010 – 2017 2017 – Presente

Era dei Float

Separazione tra contenuto (HTML) e stile (CSS); uso di “float”

(Hand-coded)

per creare colonne (originariamente non nati per questo).

Responsive

Layout fluidi basati su percentuali e media queries; uso di

Web Design

framework come Bootstrap.

Design

Uso di CSS Grid e Flexbox; controllo su tutte e quattro le

Web Intrinseco

dimensioni della viewport; abbandono delle sole percentuali.

5.4 Le rivoluzioni di Jen Simmons e Rachel Andrew La diffusione e l’adozione del CSS Grid sono il risultato di un intenso lavoro di divulgazione, sperimentazione e formazione tecnica portato avanti da figure come Jen Simmons e Rachel Andrew.

Jen Simmons, graphic designer e sviluppatrice web statunitense, ha un ruolo centrale nella promozione delle moderne specifiche CSS all’interno del CSS Working Group del W3C. Divulgatrice presso Mozilla e successivamente in Apple, pubblica articoli e video online, è relatrice a conferenze internazionali, e cura progetti in cui sperimenta i punti di forza, le potenzialità e i limiti delle proprietà CSS. Il suo lavoro contribuisce a diffondere una nuova cultura del layout web, mostrando come strumenti come Flexbox e CSS Grid permettano di superare i limiti storici del responsive-design basato esclusivamente su griglie rigide e breakpoint predefiniti. Le sue riflessioni confluiscono nel concetto di “Intrinsic Web Design”, un approccio che valorizza le capacità native del browser e la flessibilità intrinseca del medium.

Nel sito web The Experimental Layout Lab, raccoglie e presenta una raccolta di esempi su come sia possibile, grazie a CSS Grid, 105

Processo

Sutherland, I. (1963). Ivan Sutherland operating the Sketchpad system. In Sketchpad: A man-machine graphical communication system Wikimedia Commons. wikimedia.org

Il processo si osserva nelle prime due parti soprattutto attraverso le dimensioni della struttura e della configurazione. In questa parte conclusiva l’attenzione si sposta invece sui processi regolati, accelerati o alterati dall’intelligenza artificiale.

Il punto non è celebrare l’automazione, né opporle una difesa nostalgica della manualità, ma comprendere quali condizioni rendano questi processi efficaci, criticabili e responsabili.

137

indiscriminato competenze di design, codice, AI, accessibilità, contenuto e gestione dei sistemi. È il designer che sa tradurre tra livelli diversi del progetto: tra intenzione e specifica, tra specifica e codice, tra codice e comportamento, tra comportamento e valutazione. In questa capacità di traduzione risiede la sua funzione critica. L’AI può accelerare molte operazioni, ma non elimina la necessità di giudizio; gli agenti possono eseguire compiti complessi, ma non sostituiscono la responsabilità di definire cosa debba essere considerato corretto, accessibile, comprensibile e coerente con gli obiettivi del progetto.

Il tree-shaped designer può allora essere interpretato non come una nuova etichetta professionale, ma come una figura utile per descrivere questa condizione: un progettista con radici abbastanza solide da non perdere il rapporto con il mestiere e con ramificazioni abbastanza estese da lavorare dentro ambienti computazionali, agentici e interdipendenti. La sua forza non sta nel fare tutto, ma nel mantenere una continuità critica tra il fare, il generare, il verificare e il documentare.

8.3 Interpretare il codice Conoscere il codice, per un designer, significa prima di tutto comprendere il medium in cui il progetto prende forma. Nel contesto del Web, questa comprensione riguarda la struttura semantica dell’HTML, le logiche responsive del CSS, la differenza tra layout e decorazione, il funzionamento degli stati interattivi, la navigazione da tastiera, il significato dei focus state, le implicazioni delle performance e le basi dell’accessibilità.

Riguarda anche la capacità di leggere le scelte tecniche come parte di un’infrastruttura più ampia: il modo in cui i dati sono organizzati, la permeabilità o la chiusura di un sistema rispetto ad altri, la differenza tra un’architettura che favorisce l’interoperabilità e una che la ostacola. Conoscere il codice non vuol dire dunque trasformare ogni designer in developer, ma evitare che il designer perda contatto con il medium e con le conseguenze sistemiche delle decisioni che prende.

Questa responsabilità diventa particolarmente evidente quando il designer si confronta con codice generato dall’AI. Una delle competenze più concrete richieste in questo scenario non è soltanto la capacità di formulare un prompt efficace, ma quella di interpretare e revisionare criticamente l’output prodotto.

Consideriamo una versione minimale generata da un modello per una scheda evento: 144

<div class="card" onclick="location. href='evento.html'"> <img src="evento.jpg"> <h3>Festival del mare</h3> <p>12 giugno, Palermo</p> </div>

A prima vista il codice appare semplice e può sembrare funzionare correttamente con il mouse. Tuttavia, proprio questa apparente funzionalità nasconde diversi problemi progettuali.

L’elemento principale è un div reso cliccabile tramite JavaScript, invece di un link nativo; l’immagine non presenta un testo alternativo; l’interazione non garantisce un accesso corretto da tastiera; la struttura semantica della scheda non è esplicitata; la data non è marcata come informazione temporale; lo stato di focus non è affidato a un comportamento nativo chiaramente riconoscibile. Il problema, quindi, non riguarda soltanto la correttezza tecnica del codice, ma il modo in cui quel codice definisce l’esperienza d’uso, l’accessibilità e la possibilità di essere interpretato da browser, tecnologie assistive, motori di ricerca e altri sistemi. Una revisione più responsabile può essere: <article class="event-card"> <a class="event-card__link" href="evento.html"> <img src="evento.jpg" alt="Veduta del mare di Palermo durante il festival" class="event-card__image" > <div class="event-card__body"> <h3 class="event-card__ title">Festival del mare</h3> <p class="event-card__meta"> <time datetime="2026-06-12">12 giugno 2026</time>, Palermo </p> </div> </a> </article> 145