Share
Se siete come me, sarete d'accordo che la fase di progettazione iniziale di un progetto può essere dispendiosa in termini di tempo, piena di frustrazione e raramente soddisfa le aspettative dei clienti alla prima riunione di approvazione. E se ci fosse un modo migliore per avvicinarsi alle cose? Con Style Tiles, il nuovo figlio del blocco metodologia progettuale, c'è.
Alcuni dicono che i giorni della creazione di prototipi completi per progetti di webdesign in Photoshop stanno morendo, se non addirittura morti. Altri dicono che progettare-nel-browser non è tutto ciò che è incrinato essere o. Ma stiamo tutti superando noi stessi? Forse non è lo strumento che dovremmo considerare, ma l'intero modo in cui andiamo a progettare un nuovo sito e gestire il processo di approvazione del cliente.
In questo tutorial, daremo uno sguardo da vicino a Style Tiles: un nuovo modo di pensare alle fasi iniziali del design, un approccio progettuale coniato e concepito dall'inimitabile Samantha Warren. Daremo un'occhiata a quello che sono, perché dovresti usarli e guidarti attraverso il processo di creazione e implementazione di una Style Tile per il tuo prossimo progetto.
[Le tessere stile consentono di] ... Presentare ai clienti le scelte dell'interfaccia senza investire in più modelli di photoshop. - Samantha Warren
Pronto a saperne di più? Iniziamo.
Nella sua forma più semplice, una Style Tile è una raccolta di una singola pagina di elementi comuni tra cui colori, tipografia, trame, motivi e caratteristiche del design. Laddove un interior designer può presentare al proprio cliente un mood board composto da patatine, tessuti e ritagli di riviste, il web designer progressista può presentare ai propri stakeholder una serie di piastrelle di stile.
La cosa importante da ricordare su Style Tiles è che non sono una rappresentazione letterale di come apparirà il sito; invece, aiutano a definire l'umore, il tono e il "sentimento" di un sito in base a ciò che hai appreso dal cliente nelle riunioni iniziali di kickoff.
Un'altra cosa da tenere a mente è che l'approccio Stile Tile non è un framework, un processo definito o addirittura uno strumento. Invece, Style Tiles si basa su una serie di linee guida, tecniche e approcci che consentono di concentrarsi su ciò che è veramente importante nella progettazione (almeno nelle fasi iniziali di un nuovo progetto). Inizia scaricando un modello psd per aiutarti a iniziare, ma sentiti libero di plasmare le tue piastrelle di stile al tuo flusso di lavoro e all'estetica creativa.
Diamo un'occhiata ad un paio di esempi per mostrarti come possono essere presentate le piastrelle di stile. Ho decodificato due siti per mostrarti quali sono le loro piastrelle di stile poteva sono sembrati nelle fasi iniziali della progettazione:
Questa piastrella di stile si basa sul sito Tuts + Premium recentemente rinnovato.
Come puoi vedere, l'essenza del sito Tuts + Premium è stata ben catturata in questo Style Tile. Abbiamo attentamente definito alcuni degli elementi di design della sezione di presentazione arancione principale del sito, oltre a trasmettere la sensazione e l'aspetto dei post del blog (ad esempio gli elenchi dei tutorial).
È importante sottolineare che, poiché la Style Tile non è presentata per una particolare dimensione dello schermo, orientamento o anche qualcosa di diverso da "digitale", è facile immaginare come il sito dovrebbe apparire su qualsiasi dispositivo da un desktop a un tablet a uno smartphone.
Per un po 'di divertimento, ecco la mia interpretazione di ciò che il sito http://styletil.es stesso potrebbe aver assomigliato alla fase iniziale della progettazione:
Presta particolare attenzione alla sezione aggettivale di questa Style Tile. Tutti i colori, le selezioni di tipografia e le trame di design in qualche modo parlano con questi aggettivi, assicurando che lo Style Tile sia coerente sia in termini di design che di tono e messaggio del marchio.
Diamo un'occhiata ad alcune delle somiglianze condivise tra queste due piastrelle di stile:
Come ho detto prima, le Tessere Stile non seguono un formato fisso. In effetti, potresti includere qualsiasi cosa - purché sia in qualche modo fondamentale per il concetto di design. Ad esempio, puoi scegliere di rilasciare la sezione "pulsanti" e sostituirla con un video player personalizzato, un widget di qualche descrizione o alcuni elementi del modulo.
Riassumendo, acquisisci la direzione generale del sito nella tua Style Tile, ma sentiti libero di flettere i tuoi muscoli creativi.
Le piastrelle di stile non sono solo un altro approccio per la raccolta di polvere nella parte inferiore del toolkit webdesign. Hanno un certo numero di fantastici benefici sia per te che per il cliente quando vengono implementati correttamente:
Più che altro, Style Tiles mantiene semplice la fase di progettazione iniziale e il processo di approvazione del cliente.
Presentare ai clienti un comp completo di design dopo il primo incontro comporta il rischio di perdere la foresta per gli alberi. Anziché il client si blocca su piccole funzionalità di progettazione ("hmmm ... penso che i social buttons debbano essere un po 'più' poppier '"), i clienti possono parlare con sicurezza di come la direzione generale del design riflette i loro obiettivi ("Mi piace come questi colori danno una sensazione di fiducia, che è perfetta per il mio widget Acme ").
Ricorda, i nostri clienti generalmente non sono designer, ma spesso sanno cosa gli piace, anche se è solo in termini generali. Le piastrelle di stile sono uno strumento perfetto per consentire al laico di parlare del design nel suo insieme senza ricorrere a decine di elementi di design individuali che possono diventare rapidamente confusi e travolgenti.
I mockup perfetti per i pixel richiedono tempo. Tempo reale. Ore e ore di tempo.
Non solo devi calcolare tutti questi costi nella tua fattura finale, se crei tre comps separati, sono i due terzi del tuo tempo che vanno direttamente nella cartella "Risorse inutilizzate" sul tuo disco fisso - per non parlare di due anche i terzi dei soldi del cliente per quella parte del conto finale vanno in fumo.
Con Style Tiles, d'altra parte, è un processo molto veloce per iterare diverse versioni e altrettanto veloce per apportare modifiche al volo. Usare le piastrelle di stile significa che è possibile semplificare il processo di progettazione, mantenere lo slancio nelle prime fasi del progetto e rispondere alle richieste di modifica in minuti anziché ore.
Per mettere questo in prospettiva, i due esempi di Style Tiles di cui sopra mi hanno richiesto circa 20 minuti ciascuno (e avrei impiegato 15 minuti ciascuno se fossi più bravo a nominare i miei strati mentre andavo).
Sto parlando solo per esperienza qui - ogni designer è diverso - ma se stai creando tre mock di Photoshop separati, non è raro crearne uno che sia perfezionare, uno che è piuttosto buono e uno che è piuttosto mediocre, e lontano dal tuo miglior lavoro. Presenti i tre al cliente, cercando di venderli sul tuo modello di punta, e invariabilmente scelgono il design che ti piace di meno ... e ora sei bloccato a codificare un sito di cui non sei fiero e che non è nemmeno un orgoglio anche nel migliore interesse del cliente.
Anche se crei tre comps perfetti che ti piacerebbe codificare, è facile diventare creativamente blinkered. Le piastrelle di stile consentono di sperimentare rapidamente diversi concetti di progettazione e offrono vere alternative di progettazione per il cliente in base alle esigenze definite.
Ok, quindi diciamo che non usi Style Tiles e hai scelto di presentare al cliente una serie di composizioni complete.
Con cosa li presenti? Una versione desktop larga 960px? Che ne dici di una versione per iPad? Non dimenticare anche una versione per iPhone. Oh, ma assicurati di rivolgerti anche a Kindle, Blackberrys e agli oltre 500 dispositivi mobili Android prodotti negli ultimi anni. E quando gli chiedono "Come sarà questo il mio Palm Pilot preferito che ho avuto da quando Bush è stato presidente?"
Le piastrelle di stile non implicano dimensioni o dispositivo; solo che il design sarà digitale. - Samantha Warren
Il Web è accessibile letteralmente in centinaia di modi oggi, ogni dispositivo con una propria serie di punti di rottura, stranezze e caratteristiche.
Un modo migliore per affrontare la fase di progettazione iniziale del progetto è portare il dispositivo completamente fuori dall'equazione. La cosa bella di Style Tiles è che sono completamente indipendenti dal dispositivo.
Naturalmente, dovrai affrontare il modo in cui il sito web risponderà e / o si adatterà a diversi dispositivi più avanti nel progetto, ma nelle fasi iniziali, semplicemente confonderà le acque per mescolare stabilendo una direzione generale del progetto con la funzionalità finale del sito web.
Ora che hai appreso cosa sono le piastrelle di stile, e sei venduto ai benefici di usarle come alternativa alle composizioni di progettazione completa, sono certo che sei pronto per aprire Photoshop e iniziare a creare la tua prima Style Tile.
Whoa there, cowboy. Tieni i tuoi cavalli! Ben prima di iniziare a spingere i pixel, dobbiamo identificare le esigenze e gli obiettivi del cliente e tradurli in concetti che ci consentano di formulare decisioni di progettazione informate.
Il processo in quattro passaggi nella creazione di una tile di stile è il seguente:
Confuso? Non essere. Diamo un'occhiata a ogni passaggio in dettaglio.
Sia che tu ti sieda di persona con il tuo cliente, parli con Skype o faccia affidamento sulla posta elettronica, avrai sempre bisogno di spendere un po 'di tempo e fatica per conoscere la loro attività e i loro obiettivi. Non farlo ti manda in una strada oscura e spaventosa di supposizioni e congetture che quasi sempre assicureranno un risultato finale infruttuoso e un cliente infelice.
Questo processo di scoperta riguarda molto più che semplicemente chiedendo loro i loro colori preferiti e quali altri siti Web preferiscono sulla rete. Mentre potremmo facilmente avere un intero tutorial sulle domande dei clienti efficaci, ecco alcune strategie di scoperta per iniziare:
Tutti amano parlare di ciò che è importante per loro ...
Una volta che un cliente parla della sua attività, spesso ti sarà difficile farli smettere. Infatti, in questa fase, più parlano dei loro affari, meglio sarà per il risultato finale.
Ecco alcune domande iniziali per scaldare il tuo cliente a parlare della sua attività:
Una volta che hai risolto alcune delle domande di base e hai una migliore comprensione della loro attività, è il momento di scavare un po 'più a fondo e identificare realmente le esigenze del tuo cliente e scegliere alcuni concetti chiave che ti aiuteranno a creare una direzione di progettazione nel passaggio successivo.
Mentre le persone spesso trovano difficile tradurre concetti e sentimenti astratti in affermazioni, le persone amano parlare in metafore - a patto che tu faccia le domande giuste.
Ecco alcune domande a cui puoi chiedere di iniziare:
Una volta raggiunto il fulcro del progetto del cliente, è ora di stabilire un tono di voce di base per il design generale.
Ci sono diversi modi per farlo, ma un approccio efficace è che il cliente completi un sondaggio interattivo. Con un po 'di HTML creativo, CSS e Javascript, puoi creare una serie di cursori che consentono al cliente di posizionare il proprio marchio tra una serie di dicotomie:
Guardando questo esempio, sto già pensando a un divertente, colorato design ispirato al retro per il nostro cliente immaginario. Quali concetti di design ti vengono subito in mente quando lo vedi?
Una volta che abbiamo interrogato il nostro cliente, è il momento di distillare l'essenza del progetto, del prodotto e delle esigenze del cliente per il loro sito web. Lo scopo di questa parte del processo è definire una selezione di parole descrittive che popoleranno la sezione "Adjectives" della nostra Style Tile.
Diamo un'occhiata a un esempio. Ecco alcune affermazioni che il nostro cliente fittizio ti dice durante la fase di scoperta:
Da queste affermazioni, il tuo compito consiste nell'identificare un singolo aggettivo che descrive il messaggio chiave di ciò che ti hanno detto.
Qui ci sono quattro aggettivi che potremmo usare per riassumere le affermazioni di cui sopra, arrivando al cuore di ciò che è il cliente veramente dicendoci:
Ora che abbiamo definito questo insieme di aggettivi, siamo arrivati a un punto in cui possiamo effettivamente iniziare a tradurre le parole in design. Sebbene tu possa avere un'interpretazione leggermente diversa rispetto agli aggettivi di cui sopra, è molto probabile che i nostri progetti condividano elementi comuni - o almeno, saremmo in grado di descriverci l'un l'altro perché abbiamo fatto le scelte che abbiamo fatto.
Accidenti! Tutto parlato? Buone notizie: abbiamo lavorato duramente, ora ci divertiamo. Una volta che abbiamo gettato l'intera fase di scoperta fino a quattro-a-sei aggettivi di dinamite, è tempo di creare la tua prima tessera di stile.
Vai su http://styletil.es e scarica il modello di Photoshop (o creane uno tuo).
I prossimi passi sono completamente da te. Diventa creativo! Suppongo che tu abbia già una buona conoscenza di Photoshop, quindi non ti guiderò passo dopo passo (il modello di Photoshop è molto facile da personalizzare), ma l'idea principale è creare una gamma di elementi di design (colori, trame, pulsanti, tipografia, ecc.) che parlano degli aggettivi che hai raggiunto nel passaggio precedente.
Vuoi approfondire come creare una combinazione di colori e scegliere abbinamenti tipografici per la tua Style Tile (e molto altro)? Ecco alcuni articoli di Webdesigntuts per te da recensire:
Una volta creato il tuo primo Style Tile, è ora di pulire la lavagna e iterare. Non c'è un numero preciso di versioni che dovresti creare, ma tre o quattro Style Tiles per ogni progetto è probabilmente un buon bilanciamento tra l'esplorazione di sufficienti concetti di design indipendenti e non travolgere i tuoi clienti con troppe opzioni.
Ricorda, i tuoi aggettivi possono essere gli stessi per ogni Style Tile, ma possono anche essere diversi - specialmente se hai trovato difficile suddividere le esigenze del tuo cliente o ti hanno presentato alcune alternative differenti da esplorare come parte del fase di discussione.
Ad esempio, dalle nostre domande di scoperta del secondo passaggio, potremmo aver trovato tre insiemi separati di aggettivi che sono tutti simili, ma abbastanza diversi da adottare approcci diversi al design per il nostro cliente fittizio:
Come puoi vedere, queste tre serie di aggettivi potrebbero portare a una direzione progettuale molto diversa. È qui che le piastrelle di stile sono davvero di per sé. Con alcune modifiche rapide di colore e tipografia, è possibile creare facilmente tre iterazioni completamente diverse in uno spazio di tempo molto ridotto.
Assicurati che il tuo cliente sappia cosa aspettarsi
Ora che hai creato il tuo set di piastrelle di stile, è ora di presentarle al tuo cliente. Come in ogni fase di questo processo, ci sono un certo numero di strategie da implementare per garantire che si ottengano i migliori risultati e che il cliente sia sicuro di procedere con le fasi successive del progetto.
Il tuo cliente non dovrebbe aspettarsi che tu mostri un comp completo di progettazione solo per te per estrarre le tue tessere di stile. Al termine della fase di domanda, mostra ai tuoi clienti esempi di altre piastrelle di stile che hai creato e spiega il loro valore per l'impostazione della direzione di progettazione del sito.
Assicurati che il tuo cliente sappia cosa mostrerai loro prima della riunione di presentazione!
Preparazione della presentazione su PhotoDune Lascia che il tuo cliente parli liberamente dei tuoi concetti di design, ma assicurati di non lasciarli sfuggire troppo facilmente. Incoraggia i tuoi clienti ad ampliare le loro dichiarazioni. Con un po 'di domande efficaci, possiamo trasformare affermazioni vuote in affermazioni eccezionali:
Ricorda che mentre progetti siti web tutto il giorno, ogni giorno, è molto probabile che questo sia qualcosa con cui il tuo cliente non ha avuto molte precedenti esperienze. Sii paziente, aiuta i tuoi clienti a chiarire le loro affermazioni, guidali verso dichiarazioni di valore, ma non formulare mai ipotesi basate sulle risposte generali e immediate del tuo cliente al tuo lavoro.
Le piastrelle di stile sono un'alternativa migliore alle composizioni di progettazione completa nelle prime fasi del progetto (ad esempio durante il processo di approvazione del cliente), ma a seconda di come ti piace lavorare, un mockup completo può essere il prossimo passo per il progetto, se questo è parte del tuo flusso di lavoro stabilito.
Ora che hai definito la direzione del design e che il client ha firmato una delle tue versioni di Style Tile, puoi essere certo che la tua comp sarà molto più vicina alle aspettative del tuo cliente rispetto a quando sei saltato direttamente nell'apertura di Photoshop dopo l'incontro iniziale. Non solo il mockup sarà molto più vicino alla raccolta di passaggi, non è inoltre necessario creare più iterazioni del design - quel lavoro è già stato fatto con le nostre piastrelle di stile.
A seconda di come ti piace approcciare il lavoro dei tuoi clienti, questi sono tutti esempi fattibili di flusso di lavoro per il resto del progetto:
Grazie per essere stato con me e aver letto tutto su cosa, come e perché di Style Tiles - Spero vi sia piaciuto imparare su di loro tanto quanto mi è piaciuto scrivere di presentarli a voi!
Le piastrelle di stile sono un modo rivoluzionario di approccio al processo di progettazione e aiutano te e il tuo cliente a formare una direzione chiara per il sito Web anche dal progetto più complesso e complicato.
Quali sono i tuoi pensieri? Userete Style Tiles nel vostro prossimo progetto? Ci piacerebbe sentire i tuoi pensieri nei commenti!
Accentsconagua