Box prodotti: linee guida

Se vuoi produrre autonomamente le immagini dei tuoi prodotti segui i 4 passi:

1

Leggi i nostri consigli preliminari

(considera alcune indicazioni che che possono migliorare l'esperienza di acquisto dell'utnete)

2

Scegli la dimensione che preferisci

(guarda gli esempi grafici: se hai pagine di vendita con più di 3 prodotti usa la dimensione piccola)

3

Rispetta le specifiche tecniche

(immagini leggere garantiscono una maggiore velocità di navigazione)

4

Scarica l'immagine guida

(inserisci la tua grafica al suo interno e fai attenzione a rispettare l'aria sicura)

1) Leggi i consigli pratici per un layout funzionale

Scelte consapevoli aiutano a migliorare la user experience dell'utente, prima di seguire i passi operativi dedica un minuto alla lettura di alcuni consigli

Continua a leggere

1) Scelta della dimensione dell'immagine
GRANDE non è sempre MEGLIO:
quando sceglierai se utilizzare le immagini di dimensione piccola, media o grande, tieni presente che le immagini piccole hanno il vantaggio di facilitare la visione di insieme di tutti i prodotti, dando vita a pagine meno lunghe, che non necessitano di scroll infiniti per visulizzare tutti i prodotti in vendita. L'uso di immagini medie e grandi è consigliato per spagine di vendita con massimmo 3 box di acquisto dei prodotti.

2) Immagini rappresentative e senza testi
L'immagine del prodotto non è un volantino, non deve spiegare, deve essere bella e indirizzare: le informazioni importanti, come nome del prodotto e logiche di utilizzo sono riportate nel titolo del box e nel testo informativo in basso.  L'immagine ha l'obiettivo di rendere il look & feel più accattivante e aiutare l'utnte a distinguere velocemente i prodotti tra di loro, per individuare quello di suo interesse. Considerare che i testi possono essere tagliati se non rientrano nell'area sicurra dell'immagine e che spesso creano caos grafico complicando la user experience.
Matematici fornisce un'immagine di default con icona rappresentativa di ciascun prodotto che spesso è la soluzione più funzionale.

Chiudi

2) Scegli la dimensione dell'immagine

Pe qualsiasi tipo di prodotto è possibile inserire un'immagine scegliendo tra 3 diverse dimensioni: PiccolaMedia o Grande  

 Per le dimensioni Piccola e Media bisogna considerare un'area sicura centrale sempre visibile e una porzione più esterna che può essere o meno visibile a seconda della dimensione della finestra del browser. La dimensione Grande, invece, è sempre interamente visibile. Più sotto trovi tutti i dettagli e la possibilità di scaricare l'immagine guida per il formato che preferisci!

 Le immagini non devono comunicare informazioni, ma solo essere rappresentative e accattivanti. Nome del prodotto, prezzo e descrizione saranno inserite come contenuto testuale del Box. Creare un'immagine in cui si ripete il nome del prodotto è ridondante e non aiuta l'utente ad orientarsi quanto l'uso di un'icona (icona + nome del prodotto è meglio di nome del prodotto + nome del prodotto)

Dimensione Piccola

  • Dimensione immagine 705x138 px a 72 DPI
  • Con una zona sicura centrale
  • Adatto a pagine con molti prodotti (rende la pagina più leggibile)
  • Adatto per l'inserimento di icone

Dimensione Media

  • Dimensione immagine 705x276 px a 72 DPI
  • con una zona sicura centrale
  • Adatto per l'inserimento di immagini descrittive

(Classe CSS: DoubleHeight)

Dimensione Grande 

  • Dimensione immagine 705x705 px a 72 DPI
  • Sempre completamente visibile nella sua estensione 
  • Adatto a pagine con pochi prodotti (una sola riga)
  • Adatto per l'inserimento di immagini molto grandi che non devono essere tagliate

(Classe CSS: Square)

Guarda l'esempio grafico delle tre opzioni

Vedi tutto

 

 

Immagine piccola

(contenuto)

Immagine media

(contenuto)

Immagine grande

Chiudi

3) Segui tutte le specifiche tecniche

3 Dimensioni

Piccola: 705x138 px
Media: 705x276 px
Grande: 705x705 px 

Peso


Peso Orientativo:
600 kb

Risoluzione


Risoluzione Web:
72 Dpi 

Estensione


Estensione
.jpg

4) Scarica le immagini guida e usale come modello

Scegli il tipo di dimensione che vuoi usare per i tuoi prodotti: inserisci la tua grafica coprendo tutta l'area dell'immagine, ma mantieni gli elementi focali all'interno della zona verde chiaro

Visualizza le immagini guida

Immagine  Piccola

Dimensioni "Piccola": 705x138 px

La zona sicura sempre visibile corrisponde alla porzione verde chiaro (testi o parti essenziali dell'immagine devono rientrare in questa porzione)

SCARICA IMMAGINE GUIDA

Immagine Media

Dimensioni "Media": 705x276 px

La zona sicura sempre visibile corrisponde alla porzione verde chiaro (testi o parti essenziali dell'immagine devono rientrare in questa porzione)

SCARICA IMMAGINE GUIDA

Immagine Grande

Dimensioni Grande: 705x705 px

Questo taglio di immagine rimane completamente visibile in ogni situazione

SCARICA IMMAGINE GUIDA

Chiudi