5 Tecniche per l'ottimizzazione di UX con il colore
Il colore è uno degli elementi chiave in qualsiasi sistema di progettazione. Sui siti web o nelle app, il colore può essere utilizzato in vari modi: a volte il colore può essere utilizzato per creare un punto focale attraverso il contrasto o limitando il colore a un punto selezionato; il colore può anche aiutare a stabilire la gerarchia e quindi a influenzare l'aspetto di un utente.
In questo articolo, parleremo di come usare il colore in modo strategico.
1. Creazione di un punto di messa a fuoco tramite le proporzioni
Un buon esempio di proporzioni di colore è il design di Viporte . Mentre scorri verso il basso sulla loro home page, ogni sezione è decorata con una lettera grande al centro. La lettera viene riempita con un bel colore prima che le animazioni delle sezioni entrino in gioco. Il colore delle diverse immagini che animano in è correlato al colore delle lettere. Il punto focale è sicuramente al centro delle sezioni grazie in parte all'utilizzo mirato del colore. Le proporzioni variano, a volte c'è un po 'di colore e talvolta ce ne sono molte. In entrambi i casi, le proporzioni sono utilizzate per attirare l'attenzione in un punto focale. Se il colore fosse più evidente dappertutto all'interno di ogni sezione, il punto focale non sarebbe così chiaro.
2. Cattura l'attenzione attraverso il contrasto
Un'altra cosa che il colore può manipolare è il contrasto. Quando i colori del design generale sono calmi o morbidi, l'aggiunta di un colore contrastante attirerà molta attenzione sulle immagini.
Questo è esattamente ciò che sta accadendo nel design di Thinx . Sulla homepage, la combinazione di colori complessiva dell'interfaccia è in realtà in bianco e nero. Tuttavia, il design si basa molto su numerose foto. Soprattutto nella parte superiore della home page, le foto della biancheria intima presentano uno sfondo rosso scuro. Rispetto a tutto il resto della pagina, è piuttosto audace. Senza dubbio, la cosa che spicca qui è il rosso scuro. Il rosso ha un contrasto molto più alto rispetto allo schema di colori bianco e nero. Mi piace usare Thinx come esempio perché va a dimostrare che i colori luminosi e al neon non sono gli unici adatti a attirare l'attenzione di qualcuno attraverso il contrasto. In realtà è solo un atto di bilanciamento di due colori che lascerà che uno di loro si distingua davvero.
3. Uso del colore per creare pattern UX
Il modo migliore per creare modelli visivi è attraverso la coerenza. I pattern, a loro volta, creano relazioni che un utente può abituare ad avere. È lo stesso modo in cui gli utenti sono abituati a icone certina correlate a determinate azioni, ad esempio un cestino può significare eliminare. I colori sono molto più soggettivi perché ogni sito Web o app può dare il proprio significato ai colori.
Prendiamo la relazione con il colore blu acceso Sito web del portfolio di Underbelly . È un semplice esempio ed è perfetto per rendere il mio punto. Qualunque cosa cliccabile sul sito web di Underbelly è blu. Dopo aver utilizzato il sito Web per alcuni secondi, diventa subito chiaro che i loro collegamenti sono blu. Ed è così che crei modelli attraverso il colore. I pattern sono buoni perché consentono a utenti e visitatori di riconoscere facilmente qualcosa. Più diventa facile il riconoscimento, meno la gente pensa e ormai sappiamo tutti quanto sia felice Steve Krug .
4. Creazione di gerarchia attraverso il colore
Un altro colore di cosa può essere utile per impostare una gerarchia. Sopra La pagina del prodotto di Skore , quasi ogni sezione ha elementi di verde. Non solo è il ripetitivo verde, che crea uno schema riconoscibile, ma aiuta anche a distinguere le parti importanti di ogni sezione. Spesso è facile spiegare la gerarchia attraverso le dimensioni come la dimensione del carattere. Ma l'intensità di un colore, oltre a montare un colore in uso, può essere ottima anche nell'impostazione di una gerarchia.
Nell'esempio di Skore, il verde ha un buon contrasto con il testo grigio e lo sfondo bianco. Si distingue. Inoltre, la loro combinazione di colori non si basa su altri colori di accento che rendono il verde primario. Tutto ciò contribuisce al modo in cui ciascuna sezione mostra la gerarchia. Pertanto, il colore verde aiuta a guidare gli occhi dell'utente verso gli elementi importanti fornendo una bella gerarchia all'interno di ciascuna sezione. Gli elementi verdi indicano all'utente dove guardare prima.
5. Utilizzando somiglianze di colore
Di tutte le diverse cose che facciamo con i colori come designer, la usiamo principalmente e riutilizziamo per mantenere la coerenza all'interno del design. Diamo un'occhiata a La fine dell'anno di InVision pagina di destinazione. Nella parte superiore della pagina c'è una sfumatura rosa e viola usata come immagine di sfondo. Più in basso nella pagina, i colori rosa e viola vengono utilizzati anche per i colori dei pulsanti. Inoltre, la pagina di destinazione riutilizza il bianco sugli sfondi di colore rosa e viola. Riutilizza anche il colore del testo nero e grigio sugli sfondi bianchi. Se i colori fossero diversi ogni volta, non sembrerebbe così bello.
Diamo un'occhiata a un altro esempio, in particolare Co-motion . Nella loro homepage, lo studio creativo utilizza alcuni colori diversi. Ma sono tutti abbastanza simili nel loro tono per fornire un flusso coesivo. In questo esempio, non c'è nulla che si distingua in modo specifico e che possa essere anche un buon obiettivo. In questo caso, l'enfasi con il colore è fatta su un flusso buono e coeso della pagina, in cui si tenta di mantenere l'utente impegnato e lo scorrimento.
Conclusione
Il colore può essere un ottimo strumento per aiutare a raggiungere diversi obiettivi di design. Il colore può aiutare a definire e stabilire una gerarchia e a fornire un punto focale. L'enfasi sul colore si presenta in varie forme. In ogni caso, lavorare con i colori può essere molto divertente. Influenzare dove gli occhi di un visitatore o dell'utente stanno andando può essere più facile con l'aiuto di una combinazione di colori strategica.