The World of Electa: a website about books and more

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 covers and interiors 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.