Loading ...

Responses by Pixeljam.

Background: This project is dedicated to Sergei Korolev, an outstanding scientist, designer and creator of a real “space empire.” It aims to bring together all historical documents and footage, stories and expert opinions, and schemes and reconstructions of Korolev’s projects. By using modern visual and technical means, we can tell the younger generation the story of the man who started the era of space exploration. The Outstanding Person project shows how a boy’s dream of flight can lead to great achievements that change the world.

Design core: The site’s primary function is to provide a cohesive story of Korolev’s life in eight chapters. To make the large volume of text easy and engaging to read, we used various typographic elements, full-screen and small videos, infographics, and even an animoji. The most important design elements are the interactive 3-D models, of which we are most proud. The models enable the reader to see and explore the planes, rockets and spacecraft of Korolev’s time. All objects can be rotated in space. Some, such as Sputnik-1 and Vostok, can be taken apart and reassembled. This part was relatively new to everyone on the team and required plenty of attention. A lot of effort went into achieving a flawless appearance and sufficient performance.

Challenges: Working on the website’s visual components was the hardest part. Achieving perfection and meeting deadlines requires teamwork and attention to detail. We had to make adjustments during the development process and rethink some design elements, which affected our pace on this project.

New lessons: We learned a lot about 3-D models and got acquainted with specialized software for 3-D modeling. Preparing and optimizing 3-D for the browser required some skills that came with the job.

Navigation structure: Since the site was divided into chapters, this dictated its navigation structure. The burger menu is always on the screen and enables users to navigate to their desired page. The active chapter has a circular progress bar, showing which part of the chapter the user has already read. In addition, when users reach the end of each page, we use an automatic jump to the next chapter after a five-second timer to ensure the continuity of the narrative.

Technology: To generate a static HTML markup, we used the Nunjucks templating engine, which has worked well in our past projects. The server uses Nginx to distribute the static website. To work in 3-D, we chose the three.js library, which had the flexibility and rich functionality we needed. The site is written in vanilla JavaScript without frameworks, letting us reduce the bundle size and improve performance.

korolev.apokrif.media

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In