Come sviluppare combinazioni di colori per siti Web, e-commerce o applicazioni

Sviluppa combinazioni di colori per siti Web, e-commerce o app

Abbiamo condiviso alcuni articoli sull'importanza del colore rispetto a un marchio. Per un sito web, un sito di e-commerce o un'applicazione mobile o web, è altrettanto fondamentale. I colori hanno un impatto su:

  • Impressione iniziale di un marchio e del suo valore: ad esempio, i beni di lusso utilizzano spesso il nero, il rosso implica eccitazione, ecc.
  • Decisioni di acquisto – la fiducia di un marchio può essere determinata dal contrasto cromatico. Le combinazioni di colori tenui possono essere più femminili e affidabili, i contrasti duri possono essere più urgenti e orientati allo sconto.
  • Usabilità ed esperienza utente – i colori hanno un valore psicologico e anche l'impatto fisiologico, rendendo più facile o più difficile la navigazione in un'interfaccia utente.

Quanto è importante il colore?

  • L'85% delle persone ha affermato che il colore ha una grande influenza su ciò che acquista.
  • I colori aumentano il riconoscimento del marchio in media dell'80%.
  • L'impressione del colore è responsabile del 60% dell'accettazione o del rifiuto di un prodotto.

Quando si determina una combinazione di colori per un sito Web, ci sono alcuni passaggi dettagliati nell'infografica allegata:

  1. Colore primario – Scegli un colore che si adatti all'energia del tuo prodotto o servizio.
  2. Colori d'azione – Manca nell'infografica sottostante, ma identificare un colore dell'azione primaria e un colore dell'azione secondaria è estremamente utile. Educa il tuo pubblico a concentrarsi su elementi specifici dell'interfaccia utente in base al colore.
  3. AColori aggiuntivi – Scegli altro colori che completano il tuo colore primario, idealmente colori che rendono il tuo colore primario pop.
  4. Colori di sfondo – Scegli un colore per lo sfondo del tuo sito web, possibilmente meno aggressivo del tuo colore primario. Tieni a mente anche la modalità scura e quella chiara... sempre più siti incorporano combinazioni di colori in modalità chiara o scura.
  5. Colori dei caratteri – Scegli un colore per il testo che sarà sul tuo sito web – ricorda che un carattere tipografico nero pieno è raro e non è raccomandato.

Ad esempio, la mia azienda Highbridge ha sviluppato un marchio online per un produttore di abiti che desiderava creare un sito di e-commerce diretto al consumatore in cui le persone potessero compra vestiti online. Abbiamo compreso il nostro pubblico di destinazione, il valore del marchio e, poiché il marchio era prevalentemente digitale ma aveva anche un prodotto fisico, ci siamo concentrati su combinazioni di colori che funzionassero bene su stampa (CMYK), tavolozze di tessuti (Pantone) e digitale (RGB e esadecimale).

Testare una combinazione di colori con ricerche di mercato

Il nostro processo per la selezione della nostra combinazione di colori è stato intenso.

  1. Abbiamo fatto ricerche di marketing su una serie di colori primari con il nostro pubblico di destinazione che ci hanno ridotto a un unico colore.
  2. Abbiamo fatto ricerche di mercato su una serie di colori secondari e terziari con il nostro pubblico di destinazione che abbiamo ristretto alcune combinazioni di colori.
  3. Abbiamo realizzato prototipi di prodotti (confezione del prodotto, etichette per il collo e cartellini appesi) nonché prototipi di e-commerce con le combinazioni di colori e li abbiamo forniti al cliente e al pubblico di destinazione per un feedback.
  4. Poiché il loro marchio dipendeva in gran parte dalla stagionalità, abbiamo anche incorporato i colori stagionali nel mix. Questo può tornare utile per raccolte specifiche o immagini per annunci e condivisioni sui social media.
  5. Abbiamo seguito questo processo più di una mezza dozzina di volte prima di stabilirci sullo schema finale.

combinazione di colori armadio52

Mentre i colori del marchio sono il rosa chiaro e il grigio scuro, abbiamo sviluppato il colori d'azione essere l'ombra del verde. Il verde è un colore orientato all'azione, quindi è stata un'ottima selezione per attirare gli occhi dei nostri utenti su elementi orientati all'azione. Abbiamo incorporato l'inverso del verde per le nostre azioni secondarie (bordo verde con sfondo e testo bianchi). Stiamo anche testando una tonalità di verde più scura sul colore dell'azione per le azioni al passaggio del mouse.

Da quando abbiamo appena lanciato il sito, abbiamo incorporato il tracciamento del mouse e le mappe di calore per osservare gli elementi a cui i nostri visitatori sono attratti e con cui interagiscono di più per assicurarci di avere uno schema di colori che non solo abbia un bell'aspetto... ma funzioni bene.

Colori, spazi bianchi e caratteristiche degli elementi

Lo sviluppo di una combinazione di colori dovrebbe sempre essere eseguito testandolo in un'interfaccia utente complessiva per osservare l'interazione degli utenti. Per il sito sopra, abbiamo anche incorporato margini, padding, contorni, raggi dei bordi, iconografia e caratteri tipografici molto specifici.

Abbiamo fornito all'azienda una guida completa al marchio da distribuire internamente per qualsiasi materiale di marketing o prodotto. La coerenza del marchio è fondamentale per questa azienda perché sono nuovi e non hanno alcuna consapevolezza nel settore a questo punto.

Ecco il sito di e-commerce risultante con combinazione di colori

  • Closet52 - Acquista abiti online
  • Pagina Collezioni Closet52
  • Closet52 Pagina del prodotto

Visita l'armadio52

Usabilità dei colori e daltonismo

Non dimenticare i test di usabilità per il contrasto dei colori tra gli elementi del tuo sito. Puoi testare il tuo schema usando il Strumento di test di accessibilità del sito web. Con la nostra combinazione di colori, sappiamo che abbiamo alcuni problemi di contrasto su cui lavoreremo lungo la strada, o potremmo anche avere alcune opzioni per i nostri utenti. È interessante notare che le possibilità di problemi di colore con il nostro pubblico di destinazione sono piuttosto basse.

Il daltonismo è l'incapacità di percepire le differenze tra alcuni dei colori che gli utenti con problemi di colore possono distinguere. Il daltonismo colpisce circa dal cinque all'otto percento dei maschi (circa 10.5 milioni) e meno dell'uno per cento di donne.

Usabilità.gov

Il team di WebsiteBuilderExpert ha messo insieme questa infografica e un articolo di accompagnamento dettagliato su Come scegliere un colore per il tuo sito web questo è estremamente accurato.

Come scegliere una combinazione di colori per il tuo sito web