{"id":254,"date":"2012-04-11T09:37:38","date_gmt":"2012-04-11T07:37:38","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/cosa-sono-e-come-funzionano-le-style-tile\/"},"modified":"2012-04-11T09:37:38","modified_gmt":"2012-04-11T07:37:38","slug":"cosa-sono-e-come-funzionano-le-style-tile","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/cosa-sono-e-come-funzionano-le-style-tile\/","title":{"rendered":"Cosa sono e come funzionano le style tile"},"content":{"rendered":"

Come iniziate un nuovo progetto per un cliente, come lo avviate? Un processo solido gioca un ruolo chiave nel successo dell’intero progetto, ma ciononostante questo processo \u00e8 il segreto meglio nascosto della nostra industria. Evolvendosi dalla stampa, dall’identity e dalla pubblicit\u00e0, il web ha mantenuto molte delle metodologie e dei deliverable di tali discipline come se fossero cimeli, ma questi settori che producono cose decisamente differenti dal Web. Quando consegniamo dei mockup dettagliati che rappresentano cose dalle larghezze predeterminate, implicitamente affermiamo che stiamo mostrando il design definitivo. I clienti possono pertanto sentirsi disconnessi dall’intero processo, che d\u00e0 loro la sensazione sbagliata di una cosa completa, distaccandoli dal prodotto finale. Perch\u00e9 allora non progettiamo un nostro processo che ci consenta di lavorare a pi\u00f9 stretto contatto con le aspettative e le emozioni dei clienti? Dobbiamo far evolvere i deliverable per rendere i clienti parte attiva nel processo.<\/p>\n

I siti web sono molto pi\u00f9 che interfacce usabili: raccontano una storia. La style tile<\/a> \u00e8 un deliverable che referenzia gli elementi dell’interfaccia del sito attraverso collezioni di font, colori e stili a cui si aggiunge una mappa del sito, dei wireframe e altri artefatti della user experience. Le style tiles si basano sulle discussioni fatte con i clienti riguardo le loro preferenze sull’aspetto visivo. Si tratta di opzioni campione che stimolano la discussione con gli stakeholders su un comune linguaggio visuale. Contenendo degli UI style swatch di esempio, una style tile illustra il modo in cui un designer traduce il brand dello stakeholder nel web. Quando un cliente usa la parola \u201cfriendly\u201d o \u201cpulito\u201d per descrivere il sito che desidera, la style tile deve rappresentare visivamente quegli aggettivi. Le style tile si offrono come catalizzatrici per le discussioni atte a chiarire o rifinire le preferenze del cliente e i suoi obiettivi.<\/p>\n

\n

Connessione emotiva<\/h2>\n

Le style tile sono un punto di partenza flessibile che definiscono uno stile per comunicare il web in una maniera che sia comprensibile dai clienti. Una style tile \u00e8 pi\u00f9 rifinita di una tradizionale identity mood-board e meno dettagliata di un mockup o di un comp di un sito web. Quando un interior designer riprogetta una stanza, non crea pi\u00f9 versioni dei design che propone, ma porta dei campioni di colore, dei frammenti di pittura e dei disegni architettonici. Le style tile funzionano come frammenti di pittura e campioni di colore per l’interfaccia che possano essere eseguiti su qualunque dispositivo e a qualunque dimensione. Si tratta veramente di una soluzione responsive per il visual design.<\/p>\n

Una mood-board pu\u00f2 costituire un ottimo punto di partenza per la discussione con il cliente, ma \u00e8 spesso troppo vaga per aiutare i clienti a fare il salto netto dalla discussione al sito web. Le mood board sono un buon modo per scavare in profondit\u00e0 nell’identit\u00e0 del brand, ma quando si tratta di portare l’identit\u00e0 all’interno di un sistema web complesso, una connessione cos\u00ec debole pu\u00f2 rendere difficile al cliente capire ed immaginare il risultato. Le style tile sono un potente artefatto del visual design perch\u00e9 aiutano i designer a comunicare il modo in cui applicheranno gli stili per tutto il sistema web pi\u00f9 esteso, incluse le esperienze desktop e mobile.<\/p>\n

Fate domande per avere gli aggettivi<\/h3>\n

Il processo della style tile mette in evidenza la passione che sta dietro ad un brand, rivelando delle perle descrittive, il tutto mettendo in connessione il cliente con il progetto. Il primo passo nel processo della style tile consiste nel fare domande agli stakeholder. Potete usare un questionario o fare le domande durante un kickoff meeting. Per prima cosa, assicuratevi di avere un elenco di stakeholder e valutate i loro obiettivi per l’aspetto visivo del sito. Fare in modo che definiscano i loro obiettivi fin dall’inizio rafforza la priorit\u00e0 di ciascuna decisione di stile per tutto il processo. In secondo luogo, nel vostro questionario ponete domande che incoraggino risposte ricche di aggettivi. Domande metaforiche come quelle descritte in questo articolo di Adaptive Path<\/a> sono strategiche e aiutano a rompere il ghiaccio. Ad esempio, \u201cSe il vostro sito web fosse un veicolo, che veicolo sarebbe e perch\u00e9?\u201d. Quest’ultima \u00e8 una grande domanda: ci sono percezioni sociali e culturali che circondano i vari marchi automobilistici e i tipi di trasporto. Gli aggettivi associati a questi brand possono essere molto vari. Il vostro cliente descriver\u00e0 la Toyota Prius in maniera differente rispetto a un SUV.<\/p>\n

Le domande dei questionari di semantica differenziale<\/a> sono un metodo particolarmente buono per carpire le preferenze estetiche del cliente: potete impostare delle coppie di parole che sono tra loro opposte e chiedere al cliente di selezionare un punto nella scala tra le due che aiuti a descrivere il modo in cui vedono il loro sito. Immaginano il loro sito come moderno oppure lo vorrebbero alla vecchia maniera o qualcosa che sta tra questi due estremi? Queste domande aiutano a valutare quanto si relaziona da vicino uno stakeholder con una parola che descrive lo stile potenziale del sito. Illustrativo, fotografico e tipografico sono tutte parole che uno stakeholder pu\u00f2 valutare per aiutarvi a dare un senso alle loro preferenze. Spesso accoppio un sito esempio con ciascuna parola, cos\u00ec che lo stakeholder possa vederne la relazione. MailChimp<\/a> \u00e8 un esempio di sito \u201cillustrativo\u201d mentre NPR<\/a> \u00e8 un esempio di sito \u201ctipografico\u201d.<\/p>\n

Le risposte che otterrete sono cruciali per formare il legame emozionale tra un concetto di design visuale a due dimensioni e la passione che il cliente sente per il proprio brand. Ascoltate attentamente, riordinate e analizzate le risposte degli stakeholder e create delle chiare connessioni tra gli oggetti visivi nelle vostre style tile e le effettive parole del cliente. Pi\u00f9 riuscirete ad essere precisi pi\u00f9 il cliente comincer\u00e0 a sentirsi collegato al processo e si creer\u00e0 cos\u00ec fiducia, che vi spianer\u00e0 la strada verso un processo di approvazione pi\u00f9 semplice.<\/p>\n

Una volta che gli stakeholder avranno compilato il vostro questionario o risposto alle vostre domande durante un kick-off meeting, analizzate quello che vi hanno dato. Studiate le loro risposte e sottolineate gli aggettivi per poterne fare un elenco. Ci sono degli aggettivi che sono stati usati pi\u00f9 frequentemente? Quelle parole dovranno stare in cima alla vostra lista. I temi cominceranno ad emergere e da questo punto potrete cominciare a formulare una visione del brand online. Questo potr\u00e0 essere una breve dichiarazione che riassuma quello che avete scoperto o potrebbe asserire che tutti gli stakeholder sono in disaccordo. Sia che la visione del brand online sia chiara o che sia incoerente, vi fornisce un punto di partenza per discutere come procedere insieme al vostro cliente mentre gli presentate le \u201ctile\u201d.<\/p>\n

In un recente progetto, il team di design di Phase2 Technology<\/a> ha lavorato con The Washington Examiner<\/cite> per creare un microsito per la campagna delle elezioni del 2012 che fornisca informazioni politiche minuto per minuto. L’obiettivo del sito era quello di estendere lo storico brand di Examiner<\/cite> con un tono pi\u00f9 patriottico per motivare i lettori per le prossime elezioni. Usando gli aggettivi che aveva fornito il team del Washington Examiner, Phase2 ha interpretato il brand del giornale esplorando tre opzioni stilistiche differenti tra cui il cliente potesse scegliere. Gli stili riflettevano le interpretazioni delle tre varianti del loro attuale brand online.<\/p>\n

Le tre tile presentate al cliente sono le seguenti:<\/p>\n

\n

Le prime tre style tile che abbiamo presentato al Washington Examiner.<\/p>\n<\/div>\n

Iteration nation<\/h3>\n

C’erano alcune sovrapposizioni tra gli aggettivi che gli stakeholder del Washington Examiner hanno usato per descrivere il loro brand, il che ci ha aiutato a creare una chiara visione del brand. La parola \u201cpatriottico\u201d ha subito fatto pensare ad uno schema di colori rosso, bianco e blu e la loro ricca storia nell’editoria ci ha portato a scegliere svariati font slab serif che erano stati sviluppati per la leggibilit\u00e0 e per l’industria editoriale. Parole come \u201cattuale\u201d e \u201cmoderno\u201d insieme al fatto che il sito fosse espressamente per la campagna del 2012, ci hanno spronato ad esplorare la texture e la profondit\u00e0 dei brand dei candidati alle presidenziali. Inoltre, gli aggettivi che erano pi\u00f9 popolari, \u201cpulito\u201d, \u201cforte\u201d e \u201cfriendly\u201d, hanno dettato tre direzioni in cui poteva evolversi la visione complessiva. La tile \u201cpulito\u201d era luminosa e con molti spazi bianchi, la tile \u201cforte\u201d aveva dell’alluminio spazzolato e le stelle del loro logo, mentre la tile \u201cfriendly\u201d includeva delle grandi pennellate di colori accesi.<\/p>\n

Durante il periodo di iterazione, gli stakeholder decisero di volere la prima tile, insieme alle stelle rosse della seconda tile e al font della terza tile. Durante questo giro, decisero di preferire un font slab serif amichevole, cos\u00ec abbiamo scelto Adelle, che a loro \u00e8 molto piaciuto. Questa tile finale \u00e8 stata tradotta direttamente nel design finale del sito.<\/p>\n

\n

La style tile approvata da Washington Examiner.<\/p>\n<\/div>\n<\/div>\n

\n

Com’era<\/h2>\n

Durante il processo di design di solito si presentano pi\u00f9 comp ai clienti, ai quali piace vedere diverse opzioni e molti comp fanno sentire gli stakeholder come se stessero ottenendo quello per cui hanno pagato. Design vuol dire vendere e a noi piace rendere felici i nostri clienti, ma presentare dei comp completi fa pi\u00f9 male che bene al processo, perch\u00e9 \u00e8 nella natura umana mischiare e abbinare e questo permette ai clienti di sabotare le soluzioni migliori ai loro problemi di design basandosi su preferenze stilistiche transitorie. Alla fine, otterrete un Frankencomp<\/em>: un’accozzaglia di elementi di interfaccia concepiti al di fuori degli obiettivi del sito web.<\/p>\n<\/div>\n

\n

I processi e l’approccio influenzano il risultato finale<\/h2>\n

Il design \u00e8 una pratica delicata perch\u00e9 tutti abbiamo un’opinione estetica. I clienti costituiscono la parte pi\u00f9 importante del processo di design: senza di loro faremmo siti web gratis e questo non significa avere un lavoro nel design, ma avere un hobby. Lo stile \u00e8 orientato alle preferenze<\/em> mentre il design \u00e8 orientato agli obiettivi<\/em>. Pu\u00f2 essere scoraggiante aiutare un cliente a capire in che modo le due cose siano separate, ma le style tile possono costituire un componente chiave nel processo del web design che vi permette di coinvolgere il vostro cliente a livello interattivo ed iterativo. Quando mostrate i deliverable del processo di design in blocchi iterativi, il cliente \u00e8 in grado di fornire maggiori feedback, si sentir\u00e0 pi\u00f9 coinvolto e diventer\u00e0 un collaboratore prezioso nel design finale.<\/p>\n<\/div>\n

\n

Design vuol dire fiducia<\/h2>\n

La style tile ridefinisce i ruoli nella relazione cliente\/designer. Le persone si rivolgono agli avvocati quando devono risolvere delle questioni nella vita quotidiana. I clienti si rivolgono ai designer quando hanno bisogno di risolvere dei problemi di comunicazione. Se considerate il designer come un avvocato che guida il cliente verso una soluzione, allora costruirete fiducia ad ogni iterazione. Vi fidereste di un avvocato se entrasse nella stanza e tirasse fuori il vostro piano di risparmio completamente sviluppato basandosi solo sulla vostra storia precedente? Ve ne andreste! Il brand di un’organizzazione e il modo in cui comunicano \u00e8 un problema che pu\u00f2 dimostrarsi delicato, tanto delicato quanto un problema in una relazione familiare o in un matrimonio. L’approccio, il tono e il processo che usate come designer ha una enorme influenza sulla relazione che create con un cliente. Avere diretto accesso al cliente, educarlo in base al vostro piano per il processo e immergersi sempre pi\u00f9 nel design sono tutte parti di un processo di style tile che aiuta a creare una fiducia inestimabile.<\/p>\n<\/div>\n

\n

Responsive Design<\/h2>\n

Progettare per il web non vuole pi\u00f9 dire progettare solo per una larghezza di 960 pixel. Progettare siti che reagiscano in maniera responsive alle varie dimensioni di schermo e ai vari device cambia l’importanza dei comp di design per le interfacce del cliente ma anche per la comunicazione nel team. Creare un mockup per ogni possibile device o dimensione di schermo \u00e8 inefficiente e confonde il cliente. Le style tile sono pietre miliari per in sistema di design solido che imposta le aspettative del cliente e comunica il tema visivo a tutti i membri del team di progetto. Disegnare un sistema piuttosto che pagine di un sito d\u00e0 al vostro team gli strumenti per creare un sito web vivo e vibrante. Da una style tile approvata dal cliente potete cominciare a creare altre risorse visive, come le guide di stile dei componenti che gestiscono gli elementi usati frequentemente. Per ulteriori riflessioni sui sistemi di design, leggete \u201csweet systems<\/a>\u201d.<\/p>\n<\/div>\n

\n

Progettare il nostro processo di design<\/h2>\n

In qualit\u00e0 di web designer creiamo esperienze per gli utenti ma spesso non vediamo il bisogno di progettare l’esperienza che i clienti provano durante il processo del web design. Pensare al design pu\u00f2 migliorare il modo in cui affrontiamo le sfide, coinvolgiamo i nostri clienti e presentiamo i deliverable. Le style tile fanno procedere pi\u00f9 velocemente le timeline di progetto, coinvolgendo gli stakeholder nel processo di brainstorming e sono un artefatto essenziale nel processo del responsive design. Coinvolgere fin da subito gli stakeholder e mischiare e abbinare gli stili con un deliverable che sia privo di layout pu\u00f2 avere un effetto emotivo incredibile sull’intero team e sul risultato del progetto. Per un breve cheat sheet su come iniziare ad integrare le Style Tile nel vostro processo, date un’occhiata a StyleTil.es<\/a>.<\/p>\n

Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Come coinvolgere il cliente in un processo di design che abbia successo? Molti dei processi che seguiamo risalgono al design per stampa e alla pubblicit\u00e0. \u00c8 ora di far evolvere i nostri deliverable per far s\u00ec che il cliente diventi parte attiva nel processo. La \u201cstyle tile\u201d \u00e8 un deliverable di design che fa riferimento agli elementi dell’interfaccia del sito attraverso degli insiemi di font, colore e stile che vengono accompagnati da una mappa del sito, da alcuni wireframe e da altri artefatti di user experience. Vediamo come le style tile siano un valido aiuto per allineare le aspettative del cliente e del designer, per rendere pi\u00f9 rapida la timeline di progetto, per coinvolgere gli stakeholder nel processo di brainstorming e come svolgano un ruolo essenziale nel responsive design.<\/p>\n","protected":false},"author":818,"featured_media":7000651,"comment_status":"open","ping_status":"open","template":"","categories":[258,63,276,274,278],"tags":[],"coauthors":[359],"class_list":["post-254","article","type-article","status-publish","has-post-thumbnail","hentry","category-graphic-design","category-numero-48-11-aprile-2012","category-project-management","category-responsive-design","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000651"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=254"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}