6 cose da inserire nella guida alla progettazione in questo momento
Le guide di progettazione sono uno strumento inestimabile per massimizzare l'output del team di progettazione e per garantire un'identità di marchio coerente. Analizziamo sei componenti essenziali delle guide di progettazione di successo.
Una guida alla progettazione è più di un semplice documento che viene fornito con un nuovo sito Web o un'identità del marchio. Una buona guida al design è un'opera d'arte in sé e ha un'applicazione pratica nel lavoro di progettazione di tutti i giorni. Mostra ciò che il tuo progetto è e aspira ad essere. Dovrebbe portare elementi di design, voce e persino codice insieme in un modo che sia gestibile, utilizzabile e facile da capire.
Inizia con questi sei elementi guida di progettazione che devono essere presenti nella documentazione. (Se non lo sono, rivedi subito la tua guida!)
1. Esempi di identità del marchio
La tua guida alla progettazione dovrebbe mostrare la tua identità di marca in un formato visivo rappresentativo del modo in cui desideri che i materiali di design siano visibili. Questo è un esempio di spettacolo di classe, non dirlo. (Anche se ci sono alcuni che dicono nella guida di andare con gli esempi visivi.)
I migliori esempi sono gli usi di casi reali che esemplificano esattamente ciò che gli standard di progettazione intendono ritrarre.
Utilizza gli screenshot dalla home page del tuo sito web, dalla homepage per dispositivi mobili, dall'app o da qualsiasi altro luogo quando il design è ottimale.
Cosa c'è di bello in questo Ama andare in giro la guida alla progettazione è che ogni pagina dell'opuscolo assomiglia al sito Web, creando coerenza del marchio. La guida mette a fuoco anche piccoli elementi del design, come lo stile corretto per le icone delle app in una visualizzazione accurata.
La parte migliore dell'utilizzo di esempi reali in una guida alla progettazione è che non è necessario creare lavoro extra per mostrare elementi visivi; li hai già in mano. Inoltre, i membri del team sapranno che le linee guida scritte funzionano in pratica perché c'è una prova visiva.
2. Linee guida di progettazione
Tutto, dai campioni di colori alle tavolozze tipografiche, alle forme e all'uso degli elementi di design dovrebbe essere delineato chiaramente.
Perché il design guarda e funziona in un certo modo? Qual è la filosofia dietro?
Spiegare queste cose può aiutare gli utenti ad applicare lo stile di progettazione in modo più accurato e coerente attraverso i mezzi. Quando si tratta di progettazione di siti Web, è una buona idea includere elementi che potrebbero essere diversi dalle controparti del marchio di stampa e in che modo si relazionano. Ad esempio, molti designer optano per una diversa tavolozza tipografica online che imita il branding stampato per massimizzare l'uso di Google Fonts in Typekit per facilità d'uso.
Assicurati di notare quali caratteri tipografici sono sostituiti se questo è parte della tua strategia di progettazione.
Quando delineare le linee guida del design è specifico quando conta: i tag H1 sono sempre 88 punti o le immagini in miniatura sono sempre 200 per 200 pixel, ma non sovrascrivere i dettagli non necessari. Vuoi che i membri del team vedano le informazioni a colpo d'occhio e le usino, non si appesantiscano cercando di trovare qualcosa in un mare di specifiche.
3. Voce e personalità
Le linee guida per lo stile di scrittura non sono così divertenti da considerare come altri elementi visivi di una guida alla progettazione, ma sono altrettanto importanti.
Uno stile di scrittura descrittivo per la copia può anche influire sulle immagini. Contribuisce al tipo di immagini che si sceglie di utilizzare e persino a elementi come colore e tipo. Tutti questi elementi vanno insieme per creare una personalità globale per il marchio.
Come il mondo esterno ti identificherà.
Inoltre, una voce e una personalità forti diventano parte dell'identità visiva. Una buona personalità si manifesta in elementi di design perché gli utenti possono quasi identificare elementi di design anche al di fuori del contenuto del resto del marchio. (Pensa al rosso Coca-Cola o al carattere tipografico della Disney.)
4. Parole chiave SEO
L'ottimizzazione dei motori di ricerca potrebbe essere una delle parti più discusse e meno divertenti del design del sito web. Pensa alle parole chiave in anticipo e spesso.
Includili nel modo in cui parli del marchio, in un linguaggio descrittivo sul design e inserisci un elenco delle principali parole chiave nella guida alla progettazione stessa.
Outfitters urbani ha un elenco di parole chiave ben progettato (e divertente) nella sua guida del marchio. Mentre il marchio di abbigliamento utilizza un sacco di parole chiave diverse le parole più importanti sono evidenziate dal colore in modo da vederle subito.
Un elenco di parole chiave come questo porta in primo piano le parole che vuoi dire, ogni volta che le vedi. La maggior parte delle persone che scrivono copia ti dirà che una volta che vedi o pensi a una parola in un certo contesto, ti rimane bloccata nella testa. Questo è esattamente ciò che l'elenco di parole chiave SEO dovrebbe fare.
Gli elementi di progettazione devono essere correlati a queste parole chiave in qualsiasi momento in modo che i contenuti siano correlati durante la progettazione del sito web.
5. Modelli e stili degli elementi
Con così tanti media diversi online (per non parlare delle aziende che progettano anche elementi stampati), è importante avere guide per tutti gli usi possibili.
Questo vale per le versioni fisse e animate di loghi, tavolozze di colori, motivi e persino elementi di design come campi modulo e navigazione.
Il tuo libro di progettazione dovrebbe avere una sezione dedicata a questi elementi. E se vuoi che il team ti ami davvero, crea un modello e una guida allo stile degli elementi in una posizione online in modo che gli utenti possano semplicemente copiare e incollare elementi per un utilizzo rapido.
6. Frammenti di codice
Ogni guida alla progettazione di siti Web deve includere numerosi snippet di codice comunemente utilizzati. Dai pulsanti alle animazioni piccole agli effetti di scorrimento, questi piccoli bit di codice aggiungono ore al tuo flusso di lavoro quotidiano eliminando la necessità di inserire manualmente le specifiche con ogni nuovo elemento.
Funziona per tutto, dai post del blog: aggiungi un blocco di codice per le immagini che i blogger possono semplicemente copiare e incollare per le giuste dimensioni e ritagliare gli effetti dell'interfaccia utente più elaborati.
Firefox include le informazioni sui componenti di progettazione nella sua guida alla progettazione per l'uso del marchio e del marchio recentemente rivisto. Anche se non si fornisce una libreria completa di frammenti di codice, ricordarsi di includere alcune informazioni di base, ad esempio dove usare H1 e H4 nelle pagine all'interno del design del sito Web e come assegnare pulsanti e immagini allo stile.
Conclusione
La parte migliore di una guida alla progettazione è che non deve essere un documento statico. Può crescere e cambiare quando il tuo marchio e la tua identità visiva fanno la stessa cosa.
La maggior parte dei progettisti, in particolare i progettisti di siti Web, optano per le versioni online di una guida alla progettazione, in modo che le modifiche e l'acquisizione di codice e frammenti di colore siano semplici e veloci. Potresti aggiungere una pagina di guida di stile al tuo sito web e ricordarti di farvi riferimento (e aggiornarlo) frequentemente.