Responses by Anton Repponen, designer.

Background: For the past four years, Danil Kriovurchko, a good friend of mine and incredible CG artist, worked on a passion project based on Peter Watts’s sci-fi novel Blindsight. Danil loved the book so much that he decided to create some stills based on it, but very gradually, thee static images started to move. In the blink of an eye, other artists around the world began helping with modeling, concept art and spacesuit design, all helping Danil turn his passion project into a short film.

I got involved earlier this year (and by that time, I had already read Blindsight twice). Danil came to me with the first version of the unfinished film and asked if there was something we could do online for the film besides uploading it. This website acts as a home for the project online.

Design core: The main idea behind the site was to showcase the film and present all behind-the-scenes material in the form of recorded “logs” (called memories on the site) from the four-year-long production. The inspiration came from the book itself in which the main character Siri records all his memories while on his voyage back to Earth.

From a design perspective, I wanted to create a near-future interface that enabled people to browse the memories of the team behind the film. There are nine memories, starting from spacesuit design all the way to sound design. Each memory contains logged information in the format of messages between the team and the writer, work-in-progress screenshots, test renders, and experiments. I didn’t want to make them look like regular case studies that you’d see elsewhere on the Internet, and I didn’t want to make it look too stereotypically futuristic like you’d see in sci-fi films. I also came up with a set of rules before starting the design that included: no small pixelated UI that spins for no reason, as it’s too obvious; and no minigrids or small digits that change very quickly.

For the site, I used PX Grotesk, a little technical and geometric typeface, with Begum, a Roman-looking serif—a strange clash full of uncertainty. I wanted typography to look a little “confused,” as if some spacefaring organization emerged from a blending of multiple branches and is now stuck with two typefaces.

Favorite details: One interesting detail is that all communication is presented in the form of chat bubbles, as if you’re peeking into someone’s phone texts. This makes the text somewhat more desirable to read and explore.

Challenges: Keeping the look unique but somewhat scalable. Each memory was crafted by hand, as this website is a one-off experience and doesn’t need a CMS for content management. I ended up designing modules to visually display various logs: images, videos, conversations and references, among others. Then, I reused the modules in different ways while manually assembling the design of each chapter.

Time constraints: Since this is a noncommercial passion project, everyone who worked on it—including me—had to work on it in between projects, on evenings or weekends. The fact that it was self-initiated kept pressure off of a timeline, but on the other hand, you can’t work on self-initiated projects forever. Somewhere in the middle of the process, we decided to set a deadline for ourselves and made sure we launched the site on time. The first day I began designing the site was January 30th, 2020, and the site was finally launched on October 12th, 2020.

We wanted to be transparent about the time it takes to not only create the website but also every aspect of the film. If you scroll all the way to the end of each memory, we show how many people were involved and how many hours were spent on particular parts of the film.

Navigation structure: The navigation of the site is pretty straightforward. We wanted to make the website as small as possible for the huge amount of content it actually has. What we are super proud of is the spiral navigation that enables users to scroll through different chapters dedicated to each aspect of the film’s creation. The entire design of the site follows this spiral. I thought that, if we could pull that off, everything else in the site’s creation would be easy. In reality, it became one of the most challenging things to build and make sure it worked without significant lag.

Technology: The website was built by the amazing Astroshock team, with whom I have collaborated on a lot of projects for the past five years. The main technology used to develop the website was Backbone.js. The library enabled us to write an entire logic for the project, as well as create smooth transitions between the pages and memory overlays. For simple animations, we used pure CSS3, but for more complex animations that required a timeline, we went with GSAP. The most difficult part of the site was the spiral navigation, which was implemented in pure JavaScript.