Guida del designer per lavorare con le guide di stile e le piastrelle di stile
Creare a identità di marca non è un compito facile. Richiede uno sforzo difficile ma è anche una delle attività creative più gratificanti. Progetti Web spesso mixare il marchio con il design dell'interfaccia. Questo può essere fonte di confusione perché c'è così tanto da fare in entrambe le aree. Guide di stile e piastrelle di stile sono grandi risorse per i web designer, e mentre suonano simili, realizzano due compiti diversi.
In questo post, mi piacerebbe approfondire entrambi e coprire i benefici che puoi ottenere da questi asset della creatività. Non tutti avranno bisogno (o simili) di creare guide di stile o tessere stile. Ma ogni designer dovrebbe almeno capire cosa sono e come funzionano.
Guide di stile per il Web
Ho letto diverse opinioni sulle guide di stile. Alcuni dicono che questi sono mockup digitali mentre altri dicono che le guide di stile basate su codice sono le più utili.
In entrambi i casi, l'obiettivo di una guida di stile è lo stesso per il web di qualsiasi altro progetto. Definisce modelli coerenti, moduli dell'interfaccia utente e preferenze creative utilizzato nel processo di progettazione. Puoi ottenere risultati molto specifici e stabilire misurazioni perfette con pixel per determinati elementi, oppure puoi rimanere libero e offrire linee guida con esempi visivi.
Non esiste un unico modo giusto per fare una guida di stile. L'unico modo sbagliato è creare una risorsa semplicemente non può essere capito dagli altri.
L'obiettivo è creare una risorsa che lo farà resistere alla prova del tempo. Dovrebbe essere aperto per le modifiche se vengono create nuove risorse. Dovrebbe anche essere accessibile a chiunque si unisca al team per immergersi direttamente nella guida con facilità.
Una guida di stile dovrebbe essere dettagliato come necessario per il progetto. Di solito include beni riutilizzabili, come la tipografia, i pulsanti, i campioni di colore, le trame e gli elementi di pagina comuni.
Di recente abbiamo coperto strumenti di guida in stile vivente che può aiutarti a costruire guide di stile vivente da zero. Queste guide viventi sono più utili per gli sviluppatori di frontend, ma possono essere altrettanto utili ai progettisti. Puoi leggere di più su questo argomento in questo post di Smashing Magazine.
La mia risorsa preferita in assoluto è StyleGuides.io. Copre il nozioni di base sulle guide di stile per il web, Compreso esempi dal vivo e casi studio.
La libreria di pattern di MailChimp è uno dei migliori esempi che puoi trovare su StyleGuides.io. È una guida online in stile live definisce la griglia, la tipografia e gli elementi della pagina di MailChimp.
Quando si progetta una guida di stile per una società Web, è comune mettere tutto online, ma è anche possibile creare guide interne, e tenerli su una intranet locale o ospitarli privatamente dietro una pagina di accesso utente. Il modo in cui accedi a una guida di stile non ha importanza. Hanno tutti lo stesso scopo di trasmettere colori, schemi e immagini specifici abbinare il tema di un progetto web.
Per ulteriori informazioni sull'argomento, consulta questi altri post sulle guide di stile:
- Guide di stile front-end (24ways.org)
- Creare una guida allo stile del sito Web (Creativebloq.com)
- Come realizzare la guida allo stile di Web design perfetto (Dtelepathy.com)
Ramificazione in piastrelle di stile
Tessere stile sono una bestia diversa del tutto. Queste piastrelle sono risorse creative utilizzate nella fase di progettazione iniziale quando si cerca di definire un'estetica specifica.
Il sito web di Style Tiles è stato creato da Samantha Warren e ha tutto ciò che è necessario sapere. C'è nessun modello specifico per la progettazione di una piastrella di stile. Ma gli esempi di Samantha usano intestazioni e tipi di paragrafo, collegamenti, modelli, e possibili scelte di colore insieme a a logo di marca.
Quando lavori con le tessere stile, il tuo obiettivo è in definitiva quello di farlo presenta 2-3 tessere stile differenti al cliente o al direttore creativo. Queste piastrelle sono più dettagliato di un mood board, ancora molto meno dettagliato di un mockup completo.
Le piastrelle dovrebbero essere abbastanza dettagliate per dare un senso al identità e stato d'animo del sito. Samantha incoraggia usando aggettivi per descrivere ogni piastrella in dettaglio.
I clienti possono guarda attraverso le diverse tessere, e seleziona i loro pezzi preferiti. Questo ti fa risparmiare tempo quando si progetta perché il client ha già visto le risorse che gli piacciono, quindi ci sono meno possibilità di revisioni pesanti.
Ecco una grande citazione dal sito web di Style Tiles:
Confrontare le piastrelle di stile con il toolkit di un interior designer è un'analogia appropriata. Non vuoi riversare lo sforzo in un mockup perfetto per il pixel solo per far capire al cliente che odiano la maggior parte dei colori e dei caratteri.
Invece, usa le tessere stile per trovare a tema comune o linguaggio visivo da utilizzare in tutto il sito. Questo può includere il branding / identity ma potrebbe anche includere Caratteristiche dell'interfaccia utente, come menu a discesa o pulsanti CTA.
Dovresti usare questi come beni consegnabili all'inizio del processo. Una volta completato un mockup completo, non è più necessario fare riferimento alla tessera dello stile. Tuttavia all'inizio, le tessere di stile possono essere cruciali per il processo creativo di risparmiando tempo al progettista e dando al cliente molte opzioni tra cui scegliere.
Se lo desidera approfondire maggiormente le piastrelle di stile dai un'occhiata a questi post correlati.
- Piastrelle di stile e come funzionano
- Piastrelle di stile: un'alternativa ai comp. Di progettazione completa
- Creazione di piastrelle di stile: un facile approccio a una direzione di progettazione
Guide di stile e tessere di stile
La differenza tra le guide di stile e le piastrelle di stile è vaga ma definita. UN guida di stile è molto di più dettagliato e dovrebbe essere usato come un guida di riferimento continua per il team creativo. UN piastrella di stile può essere usato come un moodboard a trama idee visivamente per te o il cliente. Sono spesso abituati esplorare idee, e una volta che il progetto è finito, non servono a molti scopi.
Le piastrelle di stile sono spesso molto più ruvide attorno ai bordi e vengono utilizzate esclusivamente nel processo creativo iniziale. Una guida di stile è pensata per essere utilizzata durante l'intero processo di progettazione e anche dopo per riferimento futuro per altri designer che potrebbero lavorare sul sito.
Entrambi hanno i loro vantaggi e svantaggi. Le piastrelle di stile sono veloce e divertente, ma effimero in natura. Le guide di stile sono completo e comportarsi come una documentazione visiva, ma anche loro richiede molto lavoro.
Quindi quale dovresti usare? Alla fine dipende dal progetto.
Piccoli progetti come per i siti di piccole imprese funziona meglio con le tessere di stile. Costruire un'intera guida di stile per un sito di piccole imprese richiederebbe troppo lavoro e ore fatturabili. Questo probabilmente non vale il costo per la maggior parte dei clienti.
Tuttavia a grande progetto come ridisegnare il NY Times trarrebbe beneficio sia dalle piastrelle di stile che dalle guide di stile.
Trovare una lingua e un umore per un nuovo progetto è sempre un processo prezioso. Questo è ciò che rende le piastrelle di stile perfetto per quasi tutti gli scenari.
Puoi anche cavartela senza creare nessuno di questi beni. Alcuni designer vanno direttamente dai wireframe a modelli dettagliati. E alcuni clienti non vogliono nemmeno una guida di stile perché non verrà utilizzata.
Lavora su una base per progetto e decidi cosa è meglio per ognuno.
Esempi dal vivo
Copiamo questo copiando esempi di entrambe le guide di stile e le piastrelle di stile. Ho trovato questi disegni mentre sfogliavo Dribbble e penso che esemplificano la qualità che vorresti nelle tue guide di stile o tessere stile.
Guide di stile
Questa incredibile guida allo stile di Airbnb è stata creata da Derek Bradley. È molto semplice ma illustra chiaramente il motivi principali, colori ed elementi di pagina da trovare nel design.
Ecco una guida di stile digitale molto più ampia creata dal designer Naoshad Alam. Questo esempio è molto più organizzato con sezioni per colori, tipografia, moduli, elementi dell'interfaccia e altre funzionalità dell'interfaccia utente.
Guide di stile più dettagliate metterebbero tutti questi elementi di design sul web e includere frammenti di codice per ognuno.
La designer Cupi Wong ha realizzato questa guida per AfterShip. Tipografia, pulsanti, scelte di colore e elementi di pagina comuni sono realizzati con cura e organizzato insieme in sezioni.
Questo potrebbe anche essere trasferito sul Web e costruito molto più grande come documentazione di riferimento online.
Il designer dell'interfaccia utente Greg Dlubacz ha condiviso la propria guida allo stile dell'interfaccia utente per un progetto web. Questa cosa è seriamente enorme. L'anteprima a schermo intero si estende su 21.000 pixel!
Assolutamente una delle migliori guide di stile digitali che abbia mai visto. Questo potrebbe anche essere portato su una pagina di documentazione online per i membri del team di riferimento.
Piastrelle di stile
Il designer UI / UX Abdus Salam ha creato questa piastrella di stile per un sito web di alimenti biologici. È molto semplice con elementi di design piatto, alcune caratteristiche dell'interfaccia utente minori, e a palette dei colori.
Il designer Adrian Cantelmi è andato davvero in dettaglio con la sua tessera stile disinvestimento. Ha colori e tipografia ma include anche illustrazioni vettoriali.
Questi vettori aiutano a definire la marca, l'umore e la combinazione di colori complessiva del sito web.
La riprogettazione della World Cup Advisors ha la sua tessera di stile con caratteristiche di base. Alcune icone, alcune scelte di colore, insieme a un paio di disegni di pulsanti. Semplicità è il nome del gioco.
Se riesci a farti un'idea di come potrebbe apparire il sito a prima vista allora lo stai facendo bene.
Ecco un esempio divertente di una tessera stile rifiutata utilizzata per un progetto di viaggio. Il designer Brennan Gleason fornisce solo un piccolo campione della tessera, ma puoi ancora avere un'idea dell'atmosfera del sito web.
Parole finali
Se cerchi sul Web troverai molti altri esempi, suggerimenti e risorse per costruzione di guide di stile e piastrelle di stile. Ma spero che questo articolo possa essere un punto di partenza su entrambi e farti conoscere e creare fluentemente queste risorse di design.
