Il mondo Electa: un sito dedicato ai libri e non solo

DDD - Il mondo Electa: un sito dedicato ai libri e non solo
Category:

Progetto eCommerce

italiano

Un nuovo sito istituzionale combinato con l’e-commerce di libri e merchandising, progettato per comunicare al meglio una delle realtà più importanti del panorama editoriale e culturale italiano. L’architettura dell’informazione è stata sviluppata a stretto contatto con Electa: tutte le fasi di progettazione, dallo sviluppo del wireframe al prototipo grafico e la realizzazione html/css/js sono state affiancate dall’elaborazione di prototipi navigabili che hanno facilitato lo scambio di informazioni con il cliente. La fase di progettazione è stata preceduta da un’approfondita ricerca e analisi dei competitor e di realtà affini al mondo Electa. Il risultato è una griglia suddivisa in fasce e una logica di navigazione trasversale che permette e una migliore fruizione del catalogo libri, delle mostre e degli eventi. L’impostazione centrata di ogni elemento è nata dalla necessità di generare un prodotto 100% responsive, per una visualizzazione ottimale su tutti i tipi di supporto, dagli schermi più grandi agli smartphone. La parte centrale della Home Page è caratterizzata da un’ampio spazio dedicato a tutte le news del mondo Electa. Abbiamo incentrato la nostra progettazione sul catalogo editoriale e le schede dei libri. Le immagini per cover e interni sono visualizzabili in tre stili diversi, adattabili a seconda delle esigenze comunicative del titolo e di eventuali eventi e news ad esso collegati. Per consentire al meglio la navigazione e permettere un accesso rapido a tutti i titoli presenti in catalogo, è stata pensata una ricerca per filtri strutturata in base a: categoria, marchio e anno di pubblicazione. Ogni titolo dispone di una scheda dettagliata con accesso diretto all’e-commerce ElectaShop. Le informazioni principali si sviluppano lungo due colonne laterali fisse che accompagnano la consultazione a scroll della sezione centrale. Questo tipo di visualizzazione permette all’utente di non perdere mai di vista le informazioni base, e avere allo stesso tempo un accesso rapido al carrello acquisti e alla condivisione social. La sezione mostre è stata progettata come un vero e proprio catalogo navigabile, dal quale si ha accesso al vastissimo archivio di eventi passati, presenti e futuri, frutto della collaborazione ventennale tra Electa e alcune delle più importanti istituzioni culturali italiane. Per il design grafico è stato scelto uno stile minimale, unito alla consueta attenzione per la buona tipografia. I testi danno spazio e valore alle immagini, con un’ottima resa sia sugli schermi più grandi che sui dispositivi mobili. Per Electa abbiamo scelto Work Sans per i titoli e Merryweather per i testi descrittivi.

english

The World of Electa: a website about books and more A new corporate website with an online store for books and merchandising, designed to best communicate one of the most important institutions of the publishing and cultural world in Italy. We worked closely with Electa to develop the information architecture: throughout all the design stages, from wireframe development to the graphic prototype and html/css/js code, we created navigable prototypes that allowed us to share information more easily with our client. Before starting the design stage, we thoroughly researched and analysed companies that are similar to Electa as well as their competitors. With this in mind, we designed a website with a grid divided in several bands. Users can browse across the various sections in a non-linear way, which allows them to better experience Electa’s book catalogue, exhibitions and events. Each element is centred within the page because we wanted the website to be 100% responsive, so that it could be viewed in the best possible way on all kinds of devices, from larger screens to smartphones. The central part of the Home Page features a large space with all the news from the world of Electa. Our design efforts focused on the publishing catalogue and the book profiles. The images of the covers and internal pages can be viewed in three different styles, depending on what the book title or any related news and events need to communicate. For the best browsing experience and quick access to all the books in the catalogue, we created a filtered search by category, publisher and publishing year. Each title features a detailed description with direct access to ElectaShop online store. Key information lie within two side columns that remain fixed when the user scrolls down the central section. This view allows users to always keep an eye on key information as well as quickly access the shopping cart and social sharing features. The exhibition section is designed as a browsable catalogue where you can access the huge archive of past, current and future events, which builds on the twenty-year-long partnership between Electa and some of the most important cultural institutions in Italy. For the graphic design, we chose a minimal style combined with our usual focus on good typography. Body copy gives space and adds value to images, and renders beautifully both on larger screens and mobile devices. For Electa we chose Work Sans for headlines and Merryweather for descriptive texts.

Bunker srl

Bunker è uno studio indipendente di progettazione culturale, specializzato in identità visiva, editoria e web design. La progettazione è un servizio che nasce per fornire soluzioni ai problemi, partendo dalla loro definizione. Nel progetto manteniamo un approccio artigianale, cercando costantemente il design più funzionale.