DMATE - Consigli Grafici
In questa guida vedremo come poter migliorare il layout grafico del tuo web-shop, attraverso la spiegazione di come e dove vengono posizionati i colori.
Di fatto la giusta colorazione è essenziale, nel tuo sito, in quanto permette di far risaltare certe funzionalità attraverso il design.
In generale si sconsiglia di utilizzare il nero, il bianco ed il grigio.
Invece cerchiamo di trovare quei colori che creino un buon contrasto rendendo i testi più leggibili.
Definizione dei colori
Classi di colorazione
Abbiamo 3 classi su DMATE:
- Colore Primario: evidenzia i principali elementi del sito
- Colore Secondario: riempie il tasto di registrazione e gli elementi a fisarmonica
- Colore Aggiuntivo: colora principalmente il tasto che riporta al carrello (se nessun colore viene espresso come aggiuntivo verrà utilizzato quello principale)
Colore dei caratteri
Il colore dei testi varia in questo modo:
- Colore testuale principale: nero
- Colore delle frasi dei pulsanti: bianco
- Link testuali e frasi in risalto: colore primario
- Colore dei caratteri degli elementi a fisarmonica: nero
- Colore testuale degli elementi interattivi: bianco
Per cui prendetevi cura della scelta dei colori tra primario e secondario in modo tale che abbiano un buon contrasto.
Si consiglia per quanto riguarda il colore primario di usare una tonalità non troppo chiara in quanto il colore delle frasi, su questi elementi, è bianco.
Per il colore secondario invece non dovrebbe essere utilizzata una tonalità troppo scura in quanto il colore dei testi è nero.
Il colore aggiuntivo invece dovrebbe essere d'impatto per stimolare i clienti all'acquisto.
Colore Primario
Evidenzia gli elementi essenziali come:
- Barra di ricerca
- Pulsanti
- Elementi interattivi (frase "Più informazioni >>")
- Icone interattive
- Prezzo dei prodotti
- Altri elementi interattivi (parola "trasporto")
- Link
Colore Secondario
è un colore addizionale per:
- pulsante di registrazione
- elementi a fisarmonica
esempio 1
esempio 2
Colore Aggiuntivo
- colora il pulsante che riporta al carrello
esempio 1
esempio 2
esempio 3