|
|
| Riga 1: |
Riga 1: |
| − | In questa guida vedremo come poter <b>migliorare</b> il layout grafico del tuo web-shop, attraverso la spiegazione di come e dove vengono posizionati i colori. | + | In questa guida vedremo le <b>diverse</b> colorazioni dei siti Dmate. |
| | | | |
| − | Di fatto la giusta colorazione è <b>essenziale</b>, 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.
| + | <h1>LAYOUT ROSSO</h1> |
| | | | |
| − | Invece cerchiamo di trovare quei colori che creino un buon contrasto rendendo i testi più leggibili.
| + | <h2>HOMEPAGE</h2> |
| | | | |
| − | <h2>Definizione dei colori</h2>
| + | [[image:Rosso homepage1.PNG|500px]] |
| | + | [[image:Rosso homepage2.PNG|500px]] |
| | | | |
| − | <h3>Classi di colorazione</h3> | + | <h2>NAVIGAZIONE</h2> |
| | | | |
| − | Abbiamo 3 classi su [[DMATE]]:
| + | [[image:Navigazione rosso.PNG|500px]] |
| | | | |
| − | *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 (<i>se nessun colore viene espresso come aggiuntivo verrà utilizzato quello principale</i>)
| |
| | | | |
| − | <h3>Colore dei caratteri</h3>
| |
| − |
| |
| − | 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.
| |
| − |
| |
| − | <b>Si consiglia</b> 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.
| |
| − |
| |
| − |
| |
| − | <h2>Colore Primario</h2>
| |
| − |
| |
| − | Evidenzia gli elementi essenziali come:
| |
| − | *Barra di ricerca
| |
| − | *Pulsanti
| |
| − | *Elementi interattivi (frase <i>"Più informazioni >>"</i>)
| |
| − |
| |
| − | [[image:Dmate-colarzione 1.png]]
| |
| − |
| |
| − |
| |
| − | *Icone interattive
| |
| − | *Prezzo dei prodotti
| |
| − | *Altri elementi interattivi (parola <i>"trasporto"</i>)
| |
| − |
| |
| − | [[image:Dmate-colarzione 5.png]]
| |
| − |
| |
| − |
| |
| − | *Link
| |
| − |
| |
| − | [[image:Dmate-colarzione 8.png]]
| |
| − |
| |
| − |
| |
| − | <h2>Colore Secondario</h2>
| |
| − |
| |
| − | è un colore addizionale per:
| |
| − | *pulsante di registrazione
| |
| − |
| |
| − | [[image:Dmate-colarzione 2.png]]
| |
| − |
| |
| − |
| |
| − | *elementi a fisarmonica
| |
| − |
| |
| − | [[image:Dmate-colarzione 3.png]]
| |
| − |
| |
| − | <i> esempio 1</i>
| |
| − |
| |
| − | [[image:Dmate-colarzione 4.png]]
| |
| − |
| |
| − | <i> esempio 2</i>
| |
| − |
| |
| − | <h2>Colore Aggiuntivo</h2>
| |
| − |
| |
| − | *colora il pulsante che riporta al carrello
| |
| − |
| |
| − | [[image:Dmate-colarzione 6.png]]
| |
| − |
| |
| − | <i> esempio 1</i>
| |
| − |
| |
| − | [[image:Dmate-colarzione 7.png]]
| |
| − |
| |
| − | <i> esempio 2</i>
| |
| − |
| |
| − | [[image:Dmate-colarzione 9.png]]
| |
| − |
| |
| − | <i> esempio 3</i>
| |
| | | | |
| | <div id="BackToTop" class="noprint" style="background-color:#DDEFDD; position:fixed; | | <div id="BackToTop" class="noprint" style="background-color:#DDEFDD; position:fixed; |
