No. 100

Ricoprire i mattoni di intonaco e questo intonaco con degli affreschi è del tutto legittimo… Ma coprire i mattoni con il cemento e dividere questo cemento con delle giunture per farlo apparire come pietra, vuol dire essere falsi ed è proprio una procedura spregevole mentre l'altra è nobile.

John Ruskin, The Seven Lamps of Architecture, 1849

L'onestà materica, l'idea che una sostanza debba essere sé stessa, piuttosto che imitare qualcosa d'altro, ha guidato tutti, da Ruskin, un critico d'arte, a Charles e Ray Eames, designer dell'iconica sedia di compensato (LCW).

Togliendo qualsiasi copertura e celebrando sia il suo materiale sia il suo processo di fabbricazione, la sedia si mette a nudo esattamente per quello che è: compensato sagomato. Facendo ciò, è moderna, funzionale e senza tempo, così senza tempo, in effetti, da essere stata prodotta ininterrottamente per ottanta anni.

La sedia LCW di compensato modellato di Eames, per gentile concessione di Herman Miller, Inc.

Oggi, ci troviamo di fronte a un dibattito materico tra il design flat e il design scheomorfico. Mentre i dibattiti sul design sono salutari, puntare troppo il dito prolunga solo il problema: le persone che lavorano sul web da ogni parte stanno ancora cercando di capire la loro sensibilità verso (e il vocabolario per) i materiali del web.

Fortunatamente, i dibattiti sull'onestà materica del diciannovesimo e ventesimo secolo hanno dato modo di maturare delle filosofie con delle linee guida pratiche, linee guida che possiamo adesso usare per sviluppare la nostra consapevolezza verso i materiali web, produrre lavori che durano nel tempo, valutare processi di design in maniera più oculata e collaborare meglio con strumenti comuni e terminologia non ambigua.

Si comincia con il definire i materiali principali del web e con il comprendere quando sono onesti e quando non lo sono.

I materiali del web

I materiali del web ricadono bene in tre categorie:

  1. Fondamenta: HTTP, URL e HTML
  2. Stile: CSS
  3. Decorazione: grafica raster

Onestà delle fondamenta

L'articolo di Paul Robert Lloyd "The Web Aesthetic” pone le fondamenta.

Il web potrebbe quasi essere considerato come un materiale composito, fatto da HTTP (il come), URL (il dove) e HTML (il cosa). Omettete uno qualsiasi di questi ingredienti e non starete più creando il web.

Metteteci sopra quello che volete, ma se questi protocolli non esistono, non è web. Non è onesto.

Per esempio, un sito Flash a cui mancano i materiali fondamentali non verrà caricato su molti device popolari. Dal momento che non esistono URL onesti per ciascuna pagina di un sito Flash, si tratta in realtà di pagine disoneste a cui è difficile assegnare un permalink, non sono condivisibili in maniera predittiva ed è difficile navigarvi perché il pulsante "Indietro" del browser può produrre risultati inaspettati. Alcuni bot di ricerca possono indicizzare il contenuto Flash, ma dal momento che non lo si può inviare con un HTML onesto, si solleva tutta una serie di problemi di SEO, accessibilità e aggiornabilità. Non è un segreto che le interazioni AJAX pianificate malamente possono essere disoneste per queste stesse ragioni.

Onestà stilistica

Immaginatevi nella zona, mentre scrivete CSS alla velocità della luce. D'un tratto dovete smettere di scrivere, spostare il vostro atteggiamento mentale, lanciare una nuova app, creare un'immagine raster di un gradiente lineare in un'applicazione di painting come Photoshop e infine, aggiungerla a un file di sprite per produrre un gradiente da #4d90FE a #4787ED. Questo è un hack: crea un processo e un materiale che non è onesto sul web. Come risultato, il colore del gradiente non può essere cambiato facilmente. L'immagine raster non si ingrandisce senza perdere di fedeltà e aggiunge un'altra richiesta HTTP al caricamento della pagina. È disonesta.

I gradienti raster non sono che un esempio. Ci sono spesso anche icone raster, testo, texture ed effetti luce come le drop shadow. In ogni caso, viene rimossa un po' dell'universalità del web.

D'altro canto, il puro CSS non carica le immagini raster.

Tuttvia, CSS puro non vuol solo dire rimuovere gli elementi impuri come background-image, list-style-image, border-image e cursor:url dal proprio lavoro; riguarda anche l'onorare il processo manifatturiero piuttosto che imitare i materiali fisici. Vedete, più intrecciata è la relazione tra l'aspetto e il processo di produzione, più onesto sarà il materiale.

Ecco un esempio: un pulsante CSS puro che viene creato per assomigliare a un pomello di uno stereo vintage è disonesto. Sì, anche se si tratta di puro CSS: è disonesto perché il materiale imita qualcosa che non è. Sembra un componente hi-fi fatto di acciaio, ma è realizzato mediante CSS. L'aspetto e il processo di realizzazione sono disconnessi, come le pietre false di Ruskin.

Anche gli effetti luminosi come le drop shadow, le form shadow, le sottolineature speculari e i riflessi sono disonesti perché non ci sono sorgenti luminose all'interno del monitor digitale che possano creare quegli effetti luminosi.

Senza tutte le sfumature, ombreggiature e pulsanti bulbosi, otteniamo un web più piatto (o onesto, o nativo, o autenticamente digitale). Chiamatelo come volete, il web piatto (flat) si concentra di più sul contenuto. È rapido da realizzare e si carica anche rapidamente. Il workflow del designer e del developer è più collaborativo perché entrambe usano gli stessi strumenti.

I "flatlander" di talento aggiungono una profondità emozionale al loro lavoro, ma non è del tipo che lascia a bocca aperta su Dribbble. Quando viene visto come una schermata statica, il flat web design spara bolle d'aria.

La palette del design emozionale per i flatlander è invece temporale. La bellezza temporale vive in animazioni di cambiamento di stato, in effetti di temporizzazione sfumati, in feedback da parte degli utenti piazzato strategicamente e altri “momenti interessanti”, non nelle drop shadows e negli effetti dei livelli di Photoshop. I flatlander creano tutti i tipi di emozioni e di profondità combinando questi momenti con del piacevolissimo microcopy, con la personalità e con la tipografia. Tutti elementi onesti, tutti web, tutto bene.

Nel suo saggio del 1953, The Language of an Organic Architecture, il maestro architetto Frank Lloyd Wright chiamò questo tipo di estetica "della cosa, non su di essa".1

Di nuovo, la storia del design ci mostra che quando cerchiamo di ingannare una persona che osserva a credere che un materiale sia qualcosa che non è, il valore e l'eternità del design diminuiscono. Il designer industriale Norman Bel Geddes - e altri - scrisse dei volumi su questo argomento all'inizio del ventesimo secolo. Geddes coniò la seguente espressione per il suo uso dei materiali: “uno stile sincero… Dei materiali coinvolti.”

Consideriamo un microonde degli anni '80 avvolto da un rivestimento esterno in finto legno. Prodotti come questo andarono presto fuori moda, perché i materiali disonesti ne resero il design più "cheap", facendoli diventare rapidamente dei pugni in un occhio di rivestimento che si stacca piuttosto che macchine senza tempo. Ma un forno a microonde che espone il processo manifatturiero di acciaio inossidabile rimane meccanicamente intatto, richiede prezzi più alti ed è stilisticamente più rilevante ancora oggi.

Onestà decorativa

Assumendo che esistano l'onestà delle fondamenta e stilistica, un livello decorativo può (ma non deve) esistere sopra a questi. Tale materiale più esterno del web viene suddiviso in gruppi: micro-metafore e macro-metafore.

Le micro-metafore (una texture di rumore Gaussiano non descrittivo o magari un'icona di un carrello o di un cestino) sono dimensionalmente piccole e lo stesso si può dire anche per la loro influenza sull'estetica. Sostituite quell'icona del cestino con un link etichettato "Cestino" e l'usabilità e l'estetica del sito rimarranno intatte. Le micro metafore sono "cool", non preoccupatevene.

Le macro-metafore, d'altro canto, sono grandi (come un'interfaccia che assomiglia a un raccoglitore ad anelli con dei tab divisori lucidi e colorati). Guidano l'estetica e il design non sta più in piedi senza di esse.

I designer a volte usano le macro-metafore per creare delle revisioni sbalorditive di design di mockup statici, per far bella mostra delle proprie capacità nell'uso di tool e processi datati o magari solo per abitudine. Ma per gli utenti finali, le macro-metafore sono disoneste, indipendentemente da come le si tagli.

Un continuo

Sarebbe divertente inveire sull'onestà della pura torre di avorio, ma non è così semplice e ci sono volte in cui la decorazione aggiunge valore. L'attitudine di Drew Wilson è giusta quando dice: "qualunque cosa sia bella e usabile". La sua premessa è simile a quella di Tufte: "qualunque cosa occorra" e perfino a quella di Frank Lloyd Wright: "“meno è solo di più nel caso in cui di più non vada bene”.

Quindi, contrariamente a quello che dicono i detrattori, c'è posto per le decorazioni e c'è posto per l'onestà materica. Queste due esistono in un continuo, con la decorazione da un lato e l'onestà materica dall'altro. Non c'è un punto preciso in cui un design diventa onesto o disonesto. Il web designer ha l'ingrato compito di trovare una soluzione.

Per quando tempo un design deve essere stilisticamente rilevante? Quanto deve essere semplice il sito da modificare? Il cliente ama davvero i design scheumorfici e, dovendo pagare l'affitto, potete permettervi di perderli come clienti per portarli lontano da ciò che amano? O, se avete passato anni ad istruire i vostri clienti a giudicare il web design dall'aspetto dei comp statici in Photoshop, allora dovrete affrontare un periodo di transizione nel quale sistemare il vostro processo di design mentre re-istruite i vostri clienti a concentrarsi sui momenti interessanti e sull'accesso universale dei vostri design. Questa cosa non può cambiare dalla sera alla mattina, ma se siete consapevoli delle vostre decisioni di design, potete avanzare nel continuo nella direzione in cui volete andare.

I grandi musicisti jazz dicono: dovete conoscere le regole per infrangere le regole. Come designer industriali e architetti filosoficamente astuti, i web designer che sono coscienti di dove risiede il proprio lavoro nel continuo possono infrangere le regole, giocare e tuttavia produrre ancora dei grandi lavori senza tempo.

Lo spazzolino per la toilet a forma di vaso di fiori di Stefano Giovannoni finge di essere in terracotta, ma funziona! E potete scommetterci che Stefano sapesse esattamente quali regole stava infrangendo.

Il Merdolino di Stefano Giovannoni, scopino del water, 1993. Per gentile concessione di Alessi

Il Merdolino di Stefano Giovannoni, scopino del water, 1993. Per gentile concessione di Alessi.

Non solo è emozionante e divertente, la sua affordance e l'ergonomia sono progettati magistralmente. Appare ancora attuale ed è stato prodotto continuativamente per vent'anni.

Un processo matericamente onesto

Proprio come la sedia Eames ha richiesto un processo di produzione nuovo, il web onesto richiede un nuovo approccio al web design: un approccio definito meno dai comp fissi e più da rapide iterazioni e da prototipi.

Piuttosto che cercare processi di onestà materiale in una lunga lista di nuovi design tool software (molti dei quali spariranno rapidamente), dovremmo investire in strumenti onesti che saranno per sempre parte del toolkit del designer.

Faccia il suo ingresso lo schizzo a penna.

Gli schizzi a penna sono, e sempre saranno, il modo più rapido, più economico e più universale per creare e condividere le proprie idee per ogni media, in particolare per le prime fasi di ideazione. La precisione al pixel dei wireframe può portare i clienti - e i designer - a pensare che non ci sia altro lavoro di design da esplorare una volta che sarà completo il primo round di wireframe. Oppure, i wireframe precisi possono condurli a lamentarsi dei font, dello stile e dell'allineamento degli elementi su una griglia. Queste sono le cose sbagliate su cui concentrarsi nelle prime fasi del design.

Dal momento che gli schizzi a penna sono così lontani dai materiali del web, non vengono mai confusi con il design finale. Anche se lo voleste, è difficile lamentarsi dei font in uno schizzo a penna. In questo modo, tutti rimangono concentrati sulle cose giuste al momento giusto. Dopo la risoluzione dei concetti attraverso gli schizzi a penna, i designer possono lavorare onestamente con i clienti e progettare nel browser per portare in vita le idee e i prototipi visuali.

In 29th Drive, cominciamo la maggior parte dei progetti con schizzi su carta. I nostri clienti sanno che ci saranno degli schizzi per parliamo degli schizzi nel nostro processo di vendita e di nuovo nella pagina "Cosa aspettarsi" nella nostra offerta.

Nessuno dei nostri clienti si trova a Scottsdale, così usiamo la telecamera per documenti IPEVO per condividere via schermo grandi schizzi facili da leggere (creati al momento o in anticipo). L'IPEVO ha una modalità "fixed focus" così che quando una mano entra nell'inquadratura, il focus della telecamera rimane fisso sulla carta. Non si può ottenere questo risultato senza fatica con una webcam.

Lavoriamo spesso da casa e usiamo la IPEVO per collaborare con il resto del team in ufficio, così il processo rimane umano. Inviamo perfino delle telecamere ai nostri clienti, così che possano fare schizzi con noi. Ci vuole tempo per i non-designer per superare la paura del "Non sono un artista", ma con un po' di incoraggiamento, alla fine disegneranno il loro primo enorme riquadro: così nasce una migliore collaborazione!

Le tecniche di prototipazione con la carta sono grandi di persona, ma non funzionano con gli scanner. Quindi, se lavorate da remoto con i vostri clienti, registrate un video dello schermo con Go To Meeting e fate foto (un'altra feature comoda della IPEVO) mentre presentate i prototipi su carta. Dopo, pubblicate il video su un archivio centralizzato a cui tutti avete accesso.

Scommettete sul vostro futuro

Lavorare con i materiali onesti è esaltante. I ragazzi di Typekit devono averlo avvertito quando per la prima volta hanno portato la vera tipografia sul web (i web font sono più onesti di SIFR o del testo rasterizzato, giusto?!). Ethan Marcotte deve essersi sentito così quando per la prima volta ha articolato i principi del responsive web design. L'avranno avvertito i designer e gli sviluppatori indipendenti che hanno creato degli onesti framework CSS o template WordPress, ne sono sicuro.

Utilizzando materiali onesti, questi ragazzi sono diventati dei leader nella comunità del design, persone che non solo hanno innovato, ma hanno anche spronato altri a far avanzare le proprie idee. Tutto questo è gratificante e redditizio. Negli anni a venire, vedremo emergere un divide tra i web designer che scelgono di dare un senso ai lavori caotici necessari per adeguarsi a un punto onesto nel continuo e quelli che non lo faranno. È ora di smetterla di puntare il dito e di cominciare a guardare alle lezioni di Eames, Wright e Giovannoni: l'onestà materica genererà longevità, nel nostro lavoro e nelle nostre carriere.

Illustrazioni: Carlo Brigatti

Note

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Kevin Goldman

Kevin Goldman è un designer industriale che si è reinventato come software designer. La sua avventura nel mondo del software cominciò a metà degli anni '90 a Seattle, creando CD-ROM di stop-motion con la plastilina. È stato per lungo tempo un web e app designer indipendente. Ora è il fondatore di 29th Drive, Inkwell e MoreBlu. Attualmente, vive a Scottsdale con sua moglie e i suoi due figli.