La coerenza renderà il tuo design migliore, più facile da usare e praticamente invisibile. Dà all'utente un sacco di spazio per sperimentare il design nel modo che intendi.
Progettare per coerenza è in alcuni casi un gioco da ragazzi e un po 'più complicato da comprendere negli altri. Molto semplicemente, la coerenza è il filo che lega insieme gli elementi in un unico disegno. Inoltre, unisce i progetti in un'unica campagna o marchio, creando un prodotto che è distinguibile, utilizzabile ed efficace. Prendete nota di tutti gli esempi di seguito, ogni marchio è un leader quando si tratta di design coerente e utilizzabile.
1. Colori e tonalità dominanti e secondarie
C'è un motivo per cui ci sono così tante informazioni disponibili sulla creazione di grandi tavolozze di colori. Il colore può essere uno dei fattori visivi chiave che collega un marchio al trattamento visivo.
Un identificatore di colore speciale può indicare agli utenti chi sei a colpo d'occhio. Basta pensare a come alcuni dei più grandi marchi del mondo - Coca-Cola, Facebook, T-Mobile - sono identificati da un colore. Riconosceresti anche questi marchi senza la loro tonalità distintiva?
Un buon uso del colore aiuta anche gli utenti a spostarsi attraverso un sito Web e sanno che sono ancora nella posizione giusta. Se ogni clic ti porta a una pagina con una nuova tavolozza di colori, ti chiederebbe se fossi nel posto giusto?
Per creare una grande tavolozza di colori, scegli un colore dominante e usa i concetti di teoria del colore per aggiungere un colore secondario o due. Quindi annota un rapido set di regole di stile e di utilizzo per ciascun colore e come verrà utilizzato durante il design. Attenersi alle regole e la coerenza dei colori. (Bonus: crea una divertente tavolozza di colori estiva.)
2. Dimensioni, spaziatura e posizione della tipografia
Proprio come il colore dovrebbe essere basato su una tavolozza con regole di stile, la tipografia ha bisogno dello stesso trattamento. E facile per te, il concetto è lo stesso del colore.
- Scegli un carattere e una dimensione dominanti.
- Scegli caratteri e dimensioni secondarie.
Può essere un po 'più complesso di quello per la tipografia per il web, ma tu hai l'idea, giusto? Quando si tratta di stili Web, è necessario associare specifici tipi di trattamenti, dimensioni, spaziatura e posizionamento con il CSS in modo che ogni tag (come h1, h2, h3, corpo, ecc.) Chiami l'opzione di tipo corretta.
L'ulteriore tipo utilizzato in una singola posizione, ad esempio la navigazione, dovrebbe essere coerente in tutto l'elemento. Gli utenti saranno piuttosto confusi se ogni elemento di navigazione utilizza un carattere diverso. Questa coerenza si applica a tutto il sito; tutti gli oggetti simili dovrebbero usare gli stessi trattamenti di testo.
3. Dimensioni e relazioni degli elementi
Quanto sono grandi gli elementi nel tuo design? Tutti i pulsanti hanno le stesse dimensioni? Che ne dici di titoli e foto?
La dimensione degli elementi dovrebbe essere dettata dallo stile e rimanere la stessa per ogni utilizzo. (Pensa a quanto sarà divertente il tuo dispositivo di scorrimento se proverai a inserire foto con forme diverse. Non funzionerà.)
Le dimensioni e le relazioni comuni tra gli elementi aiutano gli utenti a vedere i modelli e creare il flusso visivo. Questi elementi comuni creano armonia ed equilibrio che rendono un design facile da digerire e mantenere gli utenti coinvolti.
4. Spazio e modalità di utilizzo
Importante quanto la dimensione degli elementi è lo spazio tra di loro. Non c'è nulla di più distratto di un design in cui gli elementi sembrano essere scaricati sulla tela senza organizzazione o regole: alcune foto si sovrappongono, mentre altre potrebbero avere molto spazio tra di loro.
Il modo migliore per stabilire e attenersi a regole di spaziatura comuni è utilizzare un sistema di griglia. Questo insieme di linee invisibili ti aiuterà a determinare dove e come posizionare gli elementi in modo che un singolo blocco, dal testo ai pulsanti alle immagini, cada in perfetta armonia.
Mentre stai pensando allo spazio, ricorda di controllare la spaziatura costante sia verticalmente che orizzontalmente. Ciò include l'osservazione della relazione tra elementi simili e quelli che sono diversi. (È OK avere regole di spaziatura per ciascuno).
5. Visuals That Cross Medium
Le immagini di marca, come immagini e illustrazioni, dovrebbero essere trasportate su supporti. Sia che tu stia progettando un progetto per un sito web o una brochure, un cartellone pubblicitario o un social network, l'identità visiva del marchio non dovrebbe cambiare.
Questo spesso comporta l'uso di un set fotografico comune. Alcune marche hanno regole dettagliate su come vengono utilizzate le immagini, da sovrapposizioni di colori o filigrane su tutte le immagini a un determinato formato per tutte le foto. Indipendentemente da ciò che vuoi che sia il tuo stile, l'importante è usare indipendentemente dalla posizione.
Per fare ciò nel modo più efficace, è importante disporre di un ottimo visual deck ricco di immagini di alta qualità e ad alta risoluzione che è possibile utilizzare e riutilizzare.
6. Modelli utente che funzionano naturalmente
Il tuo progetto deve funzionare come altri modelli simili e seguire i modelli di utenti accettati. Troppo spesso i designer vogliono fare qualcosa di diverso con il modo in cui funzionano le cose; non cadere in questa trappola.
Se un sito web o un'app o un elemento stampato funzionano come gli utenti si aspettano, possono interagire facilmente con esso. Sapranno cosa fare e il design diventerà in qualche modo invisibile man mano che l'usabilità risplenderà. (Questo è il tuo obiettivo reale come designer.)
Esistono quattro tipi di schemi comunemente accettati su cui riflettere:
- Modelli di contenuto: stile e tono del contenuto e del tuo marchio
- Modelli di markup: HTML e CSS che è necessario progettare attraverso le pagine e l'intero sito Web
- Modelli di design: l'aspetto di ogni elemento nel design e tutti gli stili associati
- Modelli utente: come gli utenti interagiscono con elementi di design come pulsanti, menu o icone
7. Elementi dell'interfaccia utente che si attaccano
Questa non è una navigazione appiccicosa, ma è un'idea simile.
Ogni interazione e ogni elemento dell'interfaccia dovrebbe comportarsi allo stesso modo.
- Link aperti direttamente o in una nuova scheda (scegli uno per ogni link)
- I pulsanti sono dello stesso colore in tutto
- La navigazione rimane nella stessa posizione e include le stesse opzioni
- I piè di pagina e le barre laterali dovrebbero contenere una posizione e dimensioni specifiche (non rendere il piè di pagina enorme su una pagina e minuscolo sul successivo
- Le icone sono riconoscibili e fanno quello che gli utenti si aspettano
- Gli elementi cliccabili sono sempre cliccabili (come le foto che linkano)
L'elenco è un trampolino che mostra tutti i piccoli dettagli su cui è necessario riflettere in termini di appiccicosità e usabilità. Ricorda, se permetti a un elemento di eseguire un'azione, dovrebbe essere probabilmente universale.
Conclusione
La coerenza del design crea la struttura che gli utenti desiderano. Crea inoltre una struttura che gli utenti comprendono, contribuendo all'usabilità e all'impegno generale.
Inizia con un set di regole e una guida di stile per ogni progetto. Anche se lavori da solo, crea un elenco di regole su come un progetto utilizzerà il colore, il tipo, la dimensione, lo spazio, gli elementi dell'interfaccia utente e le interazioni. Velocizzerà il processo di progettazione per te e porterà a un design migliore e più utilizzabile.