Differenze tra le versioni di "DMATE - Consigli Grafici"

Da wiki.desktoo.com.
Jump to navigation Jump to search
(Creata pagina con "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. Di fatto la gi...")
 
 
(13 versioni intermedie di uno stesso utente non sono mostrate)
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|850px]]
  
−
<h3>Classi di colorazione</h3>
 
  
−
Abbiamo 3 classi su [[DMATE]]:
+
[[image:Rosso homepage2.PNG|850px]]
  
−
*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>
+
<h2>Navigazione</h2>
  
−
Il colore dei testi varia in questo modo:
+
[[image:Navigazione rosso.PNG|850px]]
  
−
*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
 
  
 +
[[image:Ricerca rosso.PNG|850px]]
  
−
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.
+
[[image:Prodotto rosso.PNG|850px]]
  
−
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>Carrello</h2>
  
 +
[[image:Rosso carrello.PNG|850px]]
  
−
<h2>Colore Primario</h2>
 
  
−
Evidenzia gli elementi essenziali come:
+
[[image:Rosso checkout.PNG|850px]]
−
*Barra di ricerca
 
−
*Pulsanti
 
−
*Elementi interattivi (frase <i>"Più informazioni >>"</i>)
 
  
−
[[image:Dmate-colarzione 1.png]]
 
  
 +
<h1>LAYOUT BLU</h1>
  
−
*Icone interattive
+
<h2>Homepage</h2>
−
*Prezzo dei prodotti
 
−
*Altri elementi interattivi (parola <i>"trasporto"</i>)
 
  
−
[[image:Dmate-colarzione 5.png]]
+
[[image:Blu homepage1.PNG|850px]]
  
  
−
*Link
+
[[image:Blu homepage2.PNG|850px]]
  
−
[[image:Dmate-colarzione 8.png]]
 
  
 +
<h2>Navigazione</h2>
  
−
<h2>Colore Secondario</h2>
+
[[image:Blu navigazione.PNG|850px]]
  
−
è un colore addizionale per:
 
−
*pulsante di registrazione
 
  
−
[[image:Dmate-colarzione 2.png]]
+
[[image:Blu ricerca.PNG|850px]]
  
  
−
*elementi a fisarmonica
+
[[image:Blu prodotto.PNG|850px]]
  
−
[[image:Dmate-colarzione 3.png]]
 
  
−
<i> esempio 1</i>
+
<h2>Carrello</h2>
  
−
[[image:Dmate-colarzione 4.png]]
+
[[image:Blu carrello.PNG|850px]]
  
−
<i> esempio 2</i>
 
  
−
<h2>Colore Aggiuntivo</h2>
+
[[image:Blu checkout.PNG|850px]]
  
−
*colora il pulsante che riporta al carrello
 
  
−
[[image:Dmate-colarzione 6.png]]
+
<h1>LAYOUT CIANO</h1>
  
−
<i> esempio 1</i>
+
<h2>Homepage</h2>
  
−
[[image:Dmate-colarzione 7.png]]
+
[[image:Ciano homepage1.PNG|850px]]
  
−
<i> esempio 2</i>
 
  
−
[[image:Dmate-colarzione 9.png]]
+
[[image:Ciano homepage2.PNG|850px]]
  
−
<i> esempio 3</i>
+
 
 +
<h2>Navigazione</h2>
 +
 
 +
[[image:Ciano navigazione.PNG|850px]]
 +
 
 +
 
 +
[[image:Ciano ricerca.PNG|850px]]
 +
 
 +
 
 +
[[image:Ciano prodotto.PNG|850px]]
 +
 
 +
 
 +
<h2>Carrello</h2>
 +
 
 +
[[image:Ciano carrello.PNG|850px]]
 +
 
 +
 
 +
[[image:Ciano checkout.PNG|850px]]
 +
 
 +
 
 +
 
 +
<h1>LAYOUT VERDE</h1>
 +
 
 +
<h2>Homepage</h2>
 +
 
 +
[[image:Verde homepage1.PNG|850px]]
 +
 
 +
 
 +
[[image:Verde homepage2.PNG|850px]]
 +
 
 +
 
 +
<h2>Navigazione</h2>
 +
 
 +
[[image:Verde navigazione.PNG|850px]]
 +
 
 +
 
 +
[[image:Verde ricerca.PNG|850px]]
 +
 
 +
 
 +
[[image:Verde prodotto.PNG|850px]]
 +
 
 +
 
 +
<h2>Carrello</h2>
 +
 
 +
[[image:Verde carrello.PNG|850px]]
 +
 
 +
 
 +
[[image:Verde checkout.PNG|850px]]
 +
 
 +
 
 +
 
 +
<h1>LAYOUT GIALLO</h1>
 +
 
 +
<h2>Homepage</h2>
 +
 
 +
[[image:Giallo homepage1.PNG|850px]]
 +
 
 +
 
 +
[[image:Giallo homepage2.PNG|850px]]
 +
 
 +
 
 +
<h2>Navigazione</h2>
 +
 
 +
[[image:Giallo navigazione.PNG|850px]]
 +
 
 +
 
 +
[[image:Giallo ricerca.PNG|850px]]
 +
 
 +
 
 +
[[image:Giallo prodotto.PNG|850px]]
 +
 
 +
 
 +
<h2>Carrello</h2>
 +
 
 +
[[image:Giallo carrello.PNG|850px]]
 +
 
 +
 
 +
[[image:Giallo checkout.PNG|850px]]
 +
 
 +
 
 +
<h1>LAYOUT ARANCIONE</h1>
 +
 
 +
<h2>Homepage</h2>
 +
 
 +
[[image:Arancio homepage1.PNG|850px]]
 +
 
 +
 
 +
[[image:Arancio homepage2.PNG|850px]]
 +
 
 +
 
 +
<h2>Navigazione</h2>
 +
 
 +
[[image:Arancio navigazione.PNG|850px]]
 +
 
 +
 
 +
[[image:Arancio ricerca.PNG|850px]]
 +
 
 +
 
 +
[[image:Arancio prodotto.PNG|850px]]
 +
 
 +
 
 +
<h2>Carrello</h2>
 +
 
 +
[[image:Arancio carrello.PNG|850px]]
 +
 
 +
 
 +
[[image:Arancio checkout.PNG|850px]]
 +
 
 +
 
 +
<h1>LAYOUT VIOLA</h1>
 +
 
 +
<h2>Homepage</h2>
 +
 
 +
[[image:Viola homepage1.PNG|850px]]
 +
 
 +
 
 +
[[image:Viola homepage2.PNG|850px]]
 +
 
 +
 
 +
<h2>Navigazione</h2>
 +
 
 +
[[image:Viola  navigazione.PNG|850px]]
 +
 
 +
 
 +
[[image:Viola ricerca.PNG|850px]]
 +
 
 +
 
 +
[[image:Viola prodotto.PNG|850px]]
 +
 
 +
 
 +
<h2>Carrello</h2>
 +
 
 +
[[image:Viola carrello.PNG|850px]]
 +
 
 +
 
 +
[[image:Viola checkout.PNG|850px]]
 +
 
 +
 
 +
<h1>LAYOUT NERO</h1>
 +
 
 +
<h2>Homepage</h2>
 +
 
 +
[[image:Nero homepage1.PNG|850px]]
 +
 
 +
 
 +
[[image:Nero homepage2.PNG|850px]]
 +
 
 +
 
 +
<h2>Navigazione</h2>
 +
 
 +
[[image:Nero navigazione.PNG|850px]]
 +
 
 +
 
 +
[[image:Nero ricerca.PNG|850px]]
 +
 
 +
 
 +
[[image:Nero prodotto.PNG|850px]]
 +
 
 +
 
 +
<h2>Carrello</h2>
 +
 
 +
[[image:Nero carrello.PNG|850px]]
 +
 
 +
 
 +
[[image:Nero checkout.PNG|850px]]
  
 
<div id="BackToTop"  class="noprint" style="background-color:#DDEFDD; position:fixed;
 
<div id="BackToTop"  class="noprint" style="background-color:#DDEFDD; position:fixed;

Versione attuale delle 08:03, 15 giu 2023

In questa guida vedremo le diverse colorazioni dei siti Dmate.


LAYOUT ROSSO

Homepage

Rosso homepage1.PNG


Rosso homepage2.PNG


Navigazione

Navigazione rosso.PNG


Ricerca rosso.PNG


Prodotto rosso.PNG


Carrello

Rosso carrello.PNG


Rosso checkout.PNG


LAYOUT BLU

Homepage

Blu homepage1.PNG


Blu homepage2.PNG


Navigazione

Blu navigazione.PNG


Blu ricerca.PNG


Blu prodotto.PNG


Carrello

Blu carrello.PNG


Blu checkout.PNG


LAYOUT CIANO

Homepage

Ciano homepage1.PNG


Ciano homepage2.PNG


Navigazione

Ciano navigazione.PNG


Ciano ricerca.PNG


Ciano prodotto.PNG


Carrello

Ciano carrello.PNG


Ciano checkout.PNG


LAYOUT VERDE

Homepage

Verde homepage1.PNG


Verde homepage2.PNG


Navigazione

Verde navigazione.PNG


Verde ricerca.PNG


Verde prodotto.PNG


Carrello

Verde carrello.PNG


Verde checkout.PNG


LAYOUT GIALLO

Homepage

Giallo homepage1.PNG


Giallo homepage2.PNG


Navigazione

Giallo navigazione.PNG


Giallo ricerca.PNG


Giallo prodotto.PNG


Carrello

Giallo carrello.PNG


Giallo checkout.PNG


LAYOUT ARANCIONE

Homepage

Arancio homepage1.PNG


Arancio homepage2.PNG


Navigazione

Arancio navigazione.PNG


Arancio ricerca.PNG


Arancio prodotto.PNG


Carrello

Arancio carrello.PNG


Arancio checkout.PNG


LAYOUT VIOLA

Homepage

Viola homepage1.PNG


Viola homepage2.PNG


Navigazione

Viola navigazione.PNG


Viola ricerca.PNG


Viola prodotto.PNG


Carrello

Viola carrello.PNG


Viola checkout.PNG


LAYOUT NERO

Homepage

Nero homepage1.PNG


Nero homepage2.PNG


Navigazione

Nero navigazione.PNG


Nero ricerca.PNG


Nero prodotto.PNG


Carrello

Nero carrello.PNG


Nero checkout.PNG

Estratto da "http://wiki.desktoo.com/index.php?title=DMATE_-_Consigli_Grafici&oldid=1108"