Specchiere, Accessori e Design
DigitalHive
think creative, be innovative
Specchiere, Accessori e Design
Abbiamo realizzato il nuovo sito per azienda di design e arredamento Koh-i-Noor, specializzata in complementi per l’arredo bagno e prodotti per la bellezza e cura del corpo.
Koh-i-Noor è presente in Italia e in più di 30 nazioni in Europa e nel mondo. La produzione si divide in due comparti distinti ma complementari: la Bellezza e l’Arredo Bagno.
Il sito precedente era stato strutturato con una splash page e due installazioni di WordPress distinte. Questa impostazione rendeva la gestione del sito molto complessa e influiva negativamente sui tempi di caricamento delle pagine (page speed).
Il nuovo sito è stato realizzato in WordPress in 3 lingue e in modalità multisite. Il sito primario è costituito dalla splash page che permette di accedere alle due aree tematiche di Arredamento e Bellezza.
Il sito per azienda di design e arredamento Koh-i-Noor ha richiesto un’analisi di ottimizzazione della User Experience che tenesse in considerazione l’ampia varietà e complessità del catalogo prodotti. L’interfaccia grafica e lo sviluppo mobile first sono stati progettati per un tema custom di WordPress, piattaforma adatta alla gestione semplificata dei contenuti.
All’interno del sito in WordPress è stata realizzata l’integrazione con l’e-commerce in Prestashop, per richiamare i prodotti. Questa soluzione ha permesso di mantenere i due cataloghi aggiornati e sincronizzati in tempo reale.
La progettazione del sito Koh-i-Noor è stata particolarmente sfidante poiché l’alberatura di navigazione era ricca di pagine e di contenuti. Siamo quindi partiti dal layout design delle pagine principali: homepage, pagina di categoria e pagina del prodotto.
Abbiamo individuato delle guidelines visive e degli elementi animati che potessero adeguarsi e funzionare in tutte le pagine per dare coerenza al sito nella sua interezza.
A partire da queste è cominciata la personalizzazione e l’integrazione della grafica all’interno dei layout.
Una parte fondamentale per la riuscita di questo sito è stata la personalizzazione del layout. Abbiamo inserito all’interno del sito alcuni elementi grafici e animati che facilitano la navigazione e rendono il design elegante e in linea con le richieste del cliente.
In particolare, la carta vincente è stata il set di icone che abbiamo realizzato ad hoc per il progetto e che si sovrappongono in overlay alle fotografie dei prodotti durante lo scorrimento della pagina.
Interessante è anche il menu laterale a comparsa e l’uso dei dots per favorire la navigazione nelle pagine con molti contenuti (dividendole in sezioni attivabili dai dots).
La pagina della linea di prodotto sul sito in WordPress legge le informazioni direttamente dai prodotti censiti su Prestashop.
All’interno della pagina della singola linea è possibile selezionare uno o più prodotti dell’e-commerce: tale richiamo permette di scaricare in tempo reale e visualizzare le immagini di anteprima, i dettagli del prodotto e il link diretto alla pagina di acquisto.
Se un prodotto su Prestashop viene aggiornato o creato ex novo, è possibile forzare il download delle nuove informazioni.
Ogni giorno viene aggiornato l’elenco globale di Prestashop, mentre la sincronizzazione sui singoli prodotti viene svolta manualmente per evitare di sovraccaricare il server.
Come per ognuno dei nostri progetti, anche nel caso di Koh-i-noor abbiamo dedicato particolare attenzione alla progettazione di un’interfaccia responsive perfettamente adattabile a tutti i dispositivi.
Ecco alcune schermate che mostrano il sito visualizzato da uno schermo mobile. Abbiamo adeguato le dimensioni dei titoli, del corpo del testo e le proporzioni tra fotografie, testi ed elementi grafici.
Il sito è performante e navigabile anche dal vostro telefono! Fate una prova qui.
Ecco il nuovo sito che abbiamo sviluppato e che trovate online.
In questo video vi mostriamo il funzionamento delle principali animazioni e la fluidità del nostro layout. Date un’occhiata al menu laterale a comparsa e alle icone di categoria in outline che arricchiscono le fotografie. Osservate anche, all’interno della pagina prodotto, lo slideshow e i dots che organizzano le tre sezioni: caratteristiche, prodotti e contatti.