{"id":369,"date":"2013-04-10T15:04:10","date_gmt":"2013-04-10T13:04:10","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/onesta-materica-sul-web\/"},"modified":"2013-04-10T15:04:10","modified_gmt":"2013-04-10T13:04:10","slug":"onesta-materica-sul-web","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/onesta-materica-sul-web\/","title":{"rendered":"L’onest\u00e0 materica sul web"},"content":{"rendered":"

<\/p>\n

\n
\n

Ricoprire i mattoni di intonaco e questo intonaco con degli affreschi \u00e8 del tutto legittimo\u2026 Ma coprire i mattoni con il cemento e dividere questo cemento con delle giunture per farlo apparire come pietra, vuol dire essere falsi ed \u00e8 proprio una procedura spregevole mentre l’altra \u00e8 nobile.<\/p>\n

John Ruskin, The Seven Lamps of Architecture<\/cite>, 1849<\/p>\n<\/blockquote>\n

L’onest\u00e0 materica, l’idea che una sostanza debba essere s\u00e9 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).<\/p>\n

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 \u00e8: compensato sagomato. Facendo ci\u00f2, \u00e8 moderna, funzionale e senza tempo, cos\u00ec senza tempo, in effetti, da essere stata prodotta ininterrottamente per ottanta anni.<\/p>\n

\n

La sedia LCW di compensato modellato di Eames, per gentile concessione di Herman Miller, Inc.<\/p>\n<\/div>\n

<\/p>\n

Oggi, ci troviamo di fronte a un dibattito materico tra il design flat<\/a> e il design scheomorfico<\/a>. 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\u00e0 verso (e il vocabolario per) i materiali del web.<\/p>\n

Fortunatamente, i dibattiti sull’onest\u00e0 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\u00f9 oculata e collaborare meglio con strumenti comuni e terminologia non ambigua.<\/p>\n

Si comincia con il definire i materiali principali del web e con il comprendere quando sono onesti e quando non lo sono.<\/p>\n<\/div>\n

\n

I materiali del web<\/h2>\n

I materiali del web ricadono bene in tre categorie:<\/p>\n

    \n
  1. Fondamenta<\/strong>: HTTP, URL e HTML<\/li>\n
  2. Stile<\/strong>: CSS<\/li>\n
  3. Decorazione<\/strong>: grafica raster<\/li>\n<\/ol>\n

    Onest\u00e0 delle fondamenta<\/h3>\n

    L’articolo di Paul Robert Lloyd “The Web Aesthetic<\/a>\u201d pone le fondamenta.<\/p>\n

    \n

    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\u00f9 creando il web.<\/p>\n<\/blockquote>\n

    Metteteci sopra quello che volete, ma se questi protocolli non esistono, non \u00e8 web. Non \u00e8 onesto.<\/p>\n

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

    Onest\u00e0 stilistica<\/h3>\n

    Immaginatevi nella zona, mentre scrivete CSS alla velocit\u00e0 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<\/code> a #4787ED<\/code>. Questo \u00e8 un hack: crea un processo e un materiale che non \u00e8 onesto sul web. Come risultato, il colore del gradiente non pu\u00f2 essere cambiato facilmente. L’immagine raster non si ingrandisce senza perdere di fedelt\u00e0 e aggiunge un’altra richiesta HTTP al caricamento della pagina. \u00c8 disonesta.<\/p>\n

    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\u00e0 del web.<\/p>\n

    D’altro canto, il puro CSS non carica le immagini raster.<\/p>\n

    Tuttvia, CSS puro non vuol solo dire rimuovere gli elementi impuri come background-image<\/code>, list-style-image<\/code>, border-image<\/code> e cursor:url<\/code> dal proprio lavoro; riguarda anche l’onorare il processo manifatturiero piuttosto che imitare i materiali fisici. Vedete, pi\u00f9 intrecciata \u00e8 la relazione tra l’aspetto e il processo di produzione, pi\u00f9 onesto sar\u00e0 il materiale.<\/p>\n

    Ecco un esempio: un pulsante CSS puro che viene creato per assomigliare a un pomello di uno stereo vintage \u00e8 disonesto. S\u00ec, anche se si tratta di puro CSS: \u00e8 disonesto perch\u00e9 il materiale imita qualcosa che non \u00e8. Sembra un componente hi-fi fatto di acciaio, ma \u00e8 realizzato mediante CSS. L’aspetto e il processo di realizzazione sono disconnessi, come le pietre false di Ruskin.<\/p>\n

    Anche gli effetti luminosi come le drop shadow, le form shadow, le sottolineature speculari e i riflessi sono disonesti perch\u00e9 non ci sono sorgenti luminose all’interno del monitor digitale che possano creare quegli effetti luminosi.<\/p>\n

    Senza tutte le sfumature, ombreggiature e pulsanti bulbosi, otteniamo un web pi\u00f9 piatto (o onesto<\/em>, o nativo<\/em>, o autenticamente digitale<\/em>). Chiamatelo come volete, il web piatto (flat) si concentra di pi\u00f9 sul contenuto. \u00c8 rapido da realizzare e si carica anche rapidamente. Il workflow del designer e del developer \u00e8 pi\u00f9 collaborativo perch\u00e9 entrambe usano gli stessi strumenti.<\/p>\n

    I “flatlander” di talento aggiungono una profondit\u00e0 emozionale al loro lavoro, ma non \u00e8 del tipo che lascia a bocca aperta su Dribbble. Quando viene visto come una schermata statica, il flat web design spara bolle d’aria.<\/p>\n

    La palette del design emozionale per i flatlander \u00e8 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 \u201cmomenti interessanti<\/a>\u201d, non nelle drop shadows e negli effetti dei livelli di Photoshop. I flatlander creano tutti i tipi di emozioni e di profondit\u00e0 combinando questi momenti con del piacevolissimo microcopy<\/a>, con la personalit\u00e0<\/a> e con la tipografia<\/a>. Tutti elementi onesti, tutti web, tutto bene.<\/p>\n

    Nel suo saggio del 1953, The Language of an Organic Architecture<\/cite>, il maestro architetto Frank Lloyd Wright chiam\u00f2 questo tipo di estetica “della cosa, non su di essa”.1<\/sup><\/p>\n

    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 \u00e8, il valore e l’eternit\u00e0 del design diminuiscono. Il designer industriale Norman Bel Geddes – e altri – scrisse dei volumi su questo argomento all’inizio del ventesimo secolo. Geddes coni\u00f2 la seguente espressione per il suo uso dei materiali: \u201cuno stile sincero\u2026 Dei materiali coinvolti<\/a>.\u201d<\/p>\n

    Consideriamo un microonde degli anni ’80 avvolto da un rivestimento esterno in finto legno. Prodotti come questo andarono presto fuori moda, perch\u00e9 i materiali disonesti ne resero il design pi\u00f9 “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\u00f9 alti ed \u00e8 stilisticamente pi\u00f9 rilevante ancora oggi.<\/p>\n

    Onest\u00e0 decorativa<\/h3>\n

    Assumendo che esistano l’onest\u00e0 delle fondamenta e stilistica, un livello decorativo pu\u00f2 (ma non deve) esistere sopra a questi. Tale materiale pi\u00f9 esterno del web viene suddiviso in gruppi: micro-metafore e macro-metafore.<\/p>\n

    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\u00f2 dire anche per la loro influenza sull’estetica. Sostituite quell’icona del cestino con un link etichettato “Cestino” e l’usabilit\u00e0 e l’estetica del sito rimarranno intatte. Le micro metafore sono “cool”, non preoccupatevene.<\/p>\n

    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\u00f9 in piedi senza di esse.<\/p>\n

    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\u00e0 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.<\/p>\n<\/div>\n

    \n

    Un continuo<\/h2>\n

    Sarebbe divertente inveire sull’onest\u00e0 della pura torre di avorio, ma non \u00e8 cos\u00ec semplice e ci sono volte in cui la decorazione aggiunge valore. L’attitudine di Drew Wilson \u00e8 giusta quando dice: “qualunque cosa sia bella e usabile<\/a>“. La sua premessa \u00e8 simile a quella di Tufte: “qualunque cosa occorra<\/a>” e perfino a quella di Frank Lloyd Wright: “\u201cmeno \u00e8 solo di pi\u00f9 nel caso in cui di pi\u00f9 non vada bene<\/a>\u201d.<\/p>\n

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

    Per quando tempo un design deve essere stilisticamente rilevante? Quanto deve essere semplice il sito da modificare? Il cliente ama davvero<\/em> i design scheumorfici e, dovendo pagare l’affitto, potete permettervi di perderli come clienti per portarli lontano da ci\u00f2 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\u00f2 cambiare dalla sera alla mattina, ma se siete consapevoli delle vostre decisioni di design, potete avanzare nel continuo nella direzione in cui volete andare.<\/p>\n

    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.<\/p>\n

    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.<\/p>\n

    \"Il<\/p>\n

    Il Merdolino di Stefano Giovannoni, scopino del water, 1993. Per gentile concessione di Alessi.<\/p>\n<\/div>\n

    Non solo \u00e8 emozionante e divertente, la sua affordance e l’ergonomia sono progettati magistralmente. Appare ancora attuale ed \u00e8 stato prodotto continuativamente per vent’anni.<\/p>\n<\/div>\n

    \n

    Un processo matericamente onesto<\/h2>\n

    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\u00f9 da rapide iterazioni e da prototipi.<\/p>\n

    Piuttosto che cercare processi di onest\u00e0 materiale in una lunga lista di nuovi design tool software<\/a> (molti dei quali spariranno rapidamente), dovremmo investire in strumenti onesti che saranno per sempre<\/em> parte del toolkit del designer.<\/p>\n

    Faccia il suo ingresso lo schizzo a penna.<\/p>\n

    Gli schizzi a penna sono, e sempre saranno, il modo pi\u00f9 rapido, pi\u00f9 economico e pi\u00f9 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\u00f2 portare i clienti – e i designer – a pensare che non ci sia altro lavoro di design da esplorare una volta che sar\u00e0 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.<\/p>\n

    Dal momento che gli schizzi a penna sono cos\u00ec lontani dai materiali del web, non vengono mai confusi con il design finale. Anche se lo voleste, \u00e8 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<\/a> e progettare nel browser<\/a> per portare in vita le idee e i prototipi visuali.<\/p>\n

    In 29th Drive<\/a>, 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.<\/p>\n

    Nessuno dei nostri clienti si trova a Scottsdale, cos\u00ec usiamo la telecamera per documenti IPEVO<\/a> per condividere via schermo grandi schizzi facili da leggere (creati al momento o in anticipo). L’IPEVO ha una modalit\u00e0 “fixed focus” cos\u00ec che quando una mano entra nell’inquadratura, il focus della telecamera rimane fisso sulla carta. Non si pu\u00f2 ottenere questo risultato senza fatica con una webcam.<\/p>\n

    <\/div>\n

    Lavoriamo spesso da casa e usiamo la IPEVO per collaborare con il resto del team in ufficio, cos\u00ec il processo rimane umano. Inviamo perfino delle telecamere ai nostri clienti, cos\u00ec 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\u00ec nasce una migliore collaborazione!<\/p>\n

    Le tecniche di prototipazione con la carta<\/a> 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.<\/p>\n<\/div>\n

    \n

    Scommettete sul vostro futuro<\/h2>\n

    Lavorare con i materiali onesti \u00e8 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\u00f9 onesti di SIFR o del testo rasterizzato, giusto?!). Ethan Marcotte deve essersi sentito cos\u00ec 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.<\/p>\n

    Utilizzando materiali onesti, questi ragazzi sono diventati dei leader nella comunit\u00e0 del design, persone che non solo hanno innovato, ma hanno anche spronato altri a far avanzare le proprie idee. Tutto questo \u00e8 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. \u00c8 ora di smetterla di puntare il dito e di cominciare a guardare alle lezioni di Eames, Wright e Giovannoni: l’onest\u00e0 materica generer\u00e0 longevit\u00e0, nel nostro lavoro e<\/em> nelle nostre carriere.<\/p>\n

    Illustrazioni: {carlok}<\/p>\n<\/div>\n

    \n

    Note<\/h2>\n