Le piastrelle di stile offrono un modo fresco e produttivo per affrontare il processo di progettazione. Ti permettono di concentrarti in modo specifico sulla personalità e l'umore di un progetto senza preoccuparti delle decisioni specifiche sul layout.
Oggi vi mostreremo esattamente quali sono le Style Tiles, perché dovreste usarle e come incorporarle nel vostro processo di progettazione. Segui e potresti cambiare il modo in cui disegni per sempre.
Quali sono le piastrelle di stile?
Le piastrelle di stile sono un modo per sviluppare l'identità visiva di un sito indipendentemente dalla logistica complicata che entra in gioco quando si cerca effettivamente di sviluppare un modello completo a tutti gli effetti. L'idea arriva da Samantha Warren, una designer e blogger estremamente talentuosa di Badass Ideas.
Piuttosto che battere intorno al cespuglio, saltiamo a destra in quello che sembra una tessera di stile. È difficile da descrivere, ecco un esempio dal sito web di Style Tiles.
Se sei guidato dalla progettazione visiva, dovresti immediatamente essere in grado di vedere l'utilità di questo strumento. È straordinariamente semplice e incredibilmente utile. Qui sono state prese molte decisioni importanti su tipografia, colore, stile dei pulsanti e altro. Se stessimo costruendo un sito web basato su questo forum, avremmo una solida idea della direzione visiva che avremmo perseguito.
The Flip Side of Wireframes
Il sito web di Style Tiles li descrive come qualcosa tra una mood board, che è troppo vaga, e un mockup completo, che è troppo preciso. Personalmente penso a loro in modo un po 'diverso: come il rovescio della medaglia.
Pensaci, il tuo obiettivo con i wireframe è concentrarsi sul layout privo di stile. Stai semplicemente pensando a come sarà strutturata una pagina, quali saranno le proporzioni tra gli elementi, ecc. L'utilizzo di una struttura wireframe semplificata ti consentirà di sviluppare rapidamente molte idee perché non sei distratto da cose come colori, ombre, modelli, tipi di carattere e immagini.
Un tile di stile è l'opposto di questo, il che significa che fornisce un perfetto complemento a questo processo. Qui puoi abbandonare le nozioni di layout e concentrarti completamente su ciò che potrebbe essere considerato il "marchio" ,? quelle decisioni progettuali specifiche che danno al sito un'identità unica.
Tre motivi per usare le piastrelle di stile
Ora che hai una buona conoscenza di quali sono le Style Tiles, esaminiamo alcuni dei principali motivi per cui dovresti pensare di incorporarli nel tuo flusso di lavoro.
Speedy Visual Development of Ideas
La prima ragione per cui le piastrelle di stile sono fantastiche è che dovresti essere in grado di sbarazzarle di molti di loro in un periodo di tempo relativamente breve. I prototipi completi possono richiedere ore o addirittura giorni di produzione, ma queste schede sono semplicemente dei piccoli assaggi di un design più ampio e dovrebbero richiedere solo una frazione del tempo.
Ciò significa che puoi facilmente creare da tre a cinque idee uniche per la personalità del tuo sito, quindi scegliere quale funziona meglio o mescolare e abbinare gli elementi di ciascuno.
Il feedback dei clienti è più facile da integrare
Quando hai trascorso una settimana a sviluppare il primo sguardo di un cliente su un progetto e ti rimandano al tavolo da disegno, può essere un'esperienza scoraggiante. Tutto il tempo e gli sforzi che hai dedicato al progetto sono stati spazzati via in un unico incontro e sei tornato al punto di partenza.
Con Style Tiles puoi includere il tuo cliente nel processo di progettazione in una fase iniziale. Mostra alcune tessere diverse e loro avranno immediatamente un'idea di cosa sta succedendo e probabilmente ameranno l'opportunità di entrare e fornire feedback.
In questa fase, è incredibilmente facile apportare piccole modifiche o persino cambiamenti globali su larga scala senza la sensazione di aver sprecato metà del tempo e del budget.
Perfetto per un flusso di lavoro reattivo
Poiché il web design reattivo diventa sempre più popolare, i progettisti sono costretti a ripensare i propri flussi di lavoro. Sviluppare comps statiche per un design che si adatta continuamente è un'impresa difficile e forse anche infruttuosa.
In alternativa, le piastrelle di stile ti consentono di fissare l'aspetto dei tuoi elementi senza preoccuparti delle dimensioni o dei punti di interruzione specifici del dispositivo. Una volta che hai capito, puoi collegarli a una griglia reattiva.
Facciamolo
Parlare costa poco, vediamo se possiamo effettivamente usare questo processo per trovare qualcosa di prezioso. Se vuoi ripartire da zero, bene. Ma se stai cercando un buon punto di partenza, assicurati di scaricare il modello gratuito dal sito web di Style Tiles. Ecco come appare:
Come puoi vedere, ci sono diversi elementi per aiutarti a prendere confidenza con un layout generale e i tipi di elementi a cui dovresti pensare in questa fase del processo di progettazione. Nota che c'è un consiglio molto importante nell'angolo in basso a destra di questo modello: "Sii creativo, non usare semplicemente questo modello così com'è !?
Si è tentati di correre solo con ciò che ti è stato dato qui, ma non lasciare che questo strumento comprometta la tua creatività, in realtà è pensato per migliorarlo.
Come progetto di esempio, creiamo una Style Tile per il mio posto preferito per i burritos: Chipotle. Faremo finta che non hanno un sito o dipendono da noi per creare un look rivisto.
Logo
Il primo passo che faremo è includere un logo. A prima vista ci imbattiamo nella necessità di cambiare il modello per i nostri scopi. Il contenitore del logo sopra è rettangolare e il logo Chipotle è rotondo. Fortunatamente, il modello PSD è organizzato molto bene, quindi è abbastanza facile per me disattivare tutti gli elementi dell'intestazione e rilasciare il nostro logo circolare.
sfondo
Non c'è un ordine fisso da seguire per l'aggiornamento degli elementi, basta rimbalzare da un pezzo all'altro mentre le idee arrivano a te. Un passo logico per me è stato lo sfondo. Dal momento che Chipotle è un ristorante in stile sud-ovest, ho dato allo sfondo una sorta di atmosfera del vecchio mondo.
Abbiamo solo due passaggi e abbiamo già avuto un impatto drammatico sul modello. Possiamo chiaramente vedere la guida allo stile prendere forma mentre emerge una personalità del marchio.
Colori
Ora che abbiamo un logo e uno sfondo, possiamo iniziare a vedere un po 'di identità di colore. Approfitterò dell'area di colore esistente per estenderla a una tavolozza completa.
Tipografia
Dopo i colori, continuo a saltare e ad atterrare sulla tipografia. Mi piace davvero che il modello non ti dia solo un posto dove impostare un tipo di esempio, ma abbia anche delle piccole etichette in modo che tu possa prendere nota dei caratteri che stai usando.
Il prodotto finito
Spingendo in avanti ho solo continuato a ripetere e ad aggiustare fino a che non sono atterrato su qualcosa che potrei considerare una piastrella finita. Lungo il percorso ho messo il consiglio di cambiare il template a buon uso e completamente riformattato il layout mantenendo le sezioni che ho trovato utili. Ecco cosa mi è venuto in mente:
Come puoi vedere, è molto diverso dal modello originale. Ho usato il PSD fornito come punto di partenza per le mie idee, non una stampella. Ora ho una solida base da cui partire quando comincio a fondere layout e stile insieme in un prodotto finito.
Conclusione: una boccata d'aria fresca
Ultimamente sono stato abbastanza coinvolto da parole d'ordine nuove e brillanti come CSS3, HTML5 e design reattivo. Di conseguenza non sono mai riuscito a scavare nel puro design per un po 'e ad esplorare l'utilità di Style Tiles è stato solo il promemoria che mi serviva che questa fosse la mia vera passione.
Mi è davvero piaciuto avere la libertà di sviluppare uno stile visivo senza preoccuparmi se la home page debba essere un layout a tre o quattro colonne. È piuttosto rinfrescante essere in grado di concentrarsi su parti specifiche del processo di progettazione senza essere intimidito o distratto dalla portata più ampia dell'intero progetto.
Un grande ringraziamento va a Samantha Warren per aver condiviso il suo processo e il modello di partenza. Penso che le piastrelle di stile diventeranno una parte molto importante del mio processo da qui in avanti.
Lascia un commento qui sotto e facci sapere cosa ne pensi. Usi moodboard, wireframe o altri strumenti simili nel tuo processo di progettazione? L'introduzione di Style Tiles migliorerebbe il tuo modo di lavorare? Vogliamo sapere!
Immagine wireframe per gentile concessione di Joe Crawford.