Responses by Christoph Knoth and Konrad Renner, cofounders, Knoth & Renner.

Background: For Sternberg Press—a publishing house founded by Caroline Schneider in New York in 1999, and now based in Berlin—we wanted to create a meaningful and individual display for each of their brilliant publications. The new site holds the complete catalog of Sternberg’s more than 760 books and gives an overview of its authors and editors. It is made for everybody who is interested in books about art and cultural criticism, creative nonfiction, and literary and experimental fiction, as Sternberg is committed to publishing books with an interdisciplinary focus on contemporary visual culture and related critical discourse.

Design core: Designing complex websites often includes visual templates—for efficiency and to deal with a wide range of content programmatically. In the process, templates are always fighting against the designer’s approach for a characteristic and neat visual translation on the screen. Templates are responsible for the streamlined and ready-made Internet we live in.

Needless to say, we try to work against this approach. That means we had to think of a single website for each of Sternberg’s books—or a template that somehow reacts to specific parameters—that can carry the individual topic, book design and voice, inside a coherent and strong platform.

We came up with the idea of using a colored background for every book, for which the color is programmatically taken from the book cover and then converted into the opposite color. It’s a simple idea but generates a surprising design—it surprised us the first time we saw it. On the one hand, it creates a colorful grid; on the other hand, it gives every book a unique stage. After a few tests, it worked so well that it became one of the key ideas for this project.

Favorite details: When visitors enter the website through its front-page, they will dive into a cloud of floating books. The selection of books is made by the publishing house and will change from time to time. It’s a playful and unusual entry point into Sternberg’s immense portfolio that enables users to explore the books as 3-D objects with quotes from the former website with its iconic sparkling sound.

Additionally, we added small details to the icons that are part of the top navigation. Another small interaction happens when you click on the search icon, the magnifying glass becomes the input field.

Process: Sternberg’s old website stuck around for years and was well known by its peers. It was iconic because it was one of the few websites back then with a black background, and everybody who we talked to told us about this unique experience when you hovered over the old website’s menu and the sound it made. When we came up with the idea of the multicolored backgrounds during the design process, we felt this could be the answer to the black background. Furthermore, when we developed the intro screen with the flying books, we kept the old site’s crystal sounds that you can now hear when you hover over the books.

New lessons: We learned that developing a design in the browser gives you a lot more freedom, and at the same time, you can be closer to the final product. Also, all accidents that happen while developing inside the projected ecosystem can lead to interesting new experiences that we can incorporate directly into the design. For example, the interaction of scrolling through the “All Books” section or a book category are the books sliding in from the bottom as almost life-size objects; after some more scrolling, they scale down to the size they usually occupy in the grid. This started out as an accident when we entered a too large number for a CSS transform.

Navigation structure: We added two navigations to the header of the website: The first navigation gives you access to the book categories, the series and the authors. The second navigation holds all the meta-information—like about, contact and distribution—and is hidden. If you visit a book page, the website displays related books, so you will never get stranded while surfing.

Technology: The 3-D animations on the front page are done with Three.js. The CMS is based on WordPress and the shopping plugin WooCommerce. Both were customized by Systemantics.