Responses by Oskar Westerberg, senior visual designer; and Michaela Bång, developer, Oakwood Creative.

Background: First and foremost, the site’s purpose is to showcase Mondial to authors. The publishing house wants to show that it is young, relevant and deeply invested in the books that they publish.

Design core: Mondial marries the traditional values of the printed book with contemporary, much-debated nonfictional literature. With this in mind, we set out to create a site that merged love for the printed page with the cutting edge of digital design. We got a lot of inspiration from the constructivist work of Jan Tschiholds and the New Typography movement. Then we remixed it with some fashionable elements, such as kinetic type, variable fonts and a colorful palette.

Favorite details: If we had to choose just one thing, we would go for the quotes on the book pages. We’re really happy that we went with making them big, as it both aligns with the fact that Mondial takes pride in their books and becomes an impactful design element.

Challenges: Getting the book animation–transition working properly presented a technical challenge, as the part that sweeps across the screen needed to both hide the previous page while revealing the new one.

As budget and time were massive constraints on development, we didn‘t have a lot of time to put into JavaScript animations. Instead, we opted to make the site impactful with colors, typography and videos, mimicking the feeling of JavaScript.

Divergent paths: If we remade the site, we probably wouldn’t have used animations for all the subpages. As it is now, every subpage (like Authors, for example) needs the same animation in seven different color variations. This was quite a hassle to export and get right.

New skills: It was a lot of work to get the color profiles of the video animation to properly match the site’s background. But now that we know how it’s done, we’ll definitely have a use for that in our future projects.

Navigation structure: The site’s navigation structure might be the most straightforward we’ve ever made. We wanted the front page to feel like a bookshelf. From there, you can filter it to find your niche or just browse through the entire library. Then, you can dig into the books.

Technology: We built a single-page application using JavaScript and React together with a headless CMS solution. Smooth as butter.

Anything else? The mix of web animation and video is something we're really proud of. As a user, you’re not entirely sure what is what.