More knowledge means closer space. How Tetraform designed a satellite portal

Contents:

• A Project of Cosmic Importance
• References of Cosmic Beauty
• Tasks of Cosmic Complexity
• Designed the Map
• Drew the Satellites
• Project Team

Satellites play an important role in our daily lives, although many people don't realize it. For some, satellites remain synonymous with science fiction. However, it is thanks to the constellations of artificial satellites orbiting the Earth that we have access to up-to-date weather forecasts and can effectively plan routes, avoiding traffic jams. Satellite technology provides data transmission, navigation, and communication, making our lives more convenient and organized.

In 2022, the popular science media outlet Black Science, in collaboration with the Institute for Internet Development, launched the educational project "Orbits." This project aims to provide an accessible and engaging explanation of how satellites work: their purpose, functions, and structure in near space. "Orbits" strives to make complex scientific concepts understandable to a wide audience, fostering interest in space exploration and technology. Sasha Sverdlovskaya from Tetraform shares her experience designing an infotainment project. The team drew inspiration from the achievements of space companies, actively playing PlayStation, and solving complex graphics problems. This combination of innovative technologies and exciting gaming allowed us to create a unique visual style that emphasizes the theme of the project and attracts the attention of users.

Co-founder and design director of Tetraform studio, which specializes in creating unique and innovative solutions in the field of design and architecture. Our team actively develops projects that harmoniously combine functionality and aesthetic appeal, which allows us to achieve high quality standards and satisfy customer needs. We strive for continuous improvement and the introduction of new technologies into our practice, which makes Tetraform a leader in its field.

Co-founder and design director of the Tetraform studio, specializing in innovative solutions in the field of design and architecture.

Space project

"Orbits" is an interactive project dedicated to Russian artificial Earth satellites. It offers an accessible explanation of the technologies used in the past and present, and opens up prospects for the future by exploring how work in space may change. This project not only informs but also inspires new discoveries about space technology and its impact on our lives.

Readers can learn whether it is possible to create a space elevator and how life might be arranged on Venus. Quizzes provide an opportunity to consolidate knowledge about satellites and learn interesting facts about yourself, for example, what kind of black hole you would personify or what role you would have in a mission to colonize Mars. This is not only entertaining but also deepens understanding of space topics and the latest scientific research.

The main goal of the project is to engage children and teenagers in engineering creativity and to develop their interest in space exploration. Russia currently ranks third in the world in terms of the number of operational satellites, underscoring the importance of developing this industry. Successful advancement in the space industry requires skilled engineers, technicians, and researchers—passionate professionals ready to contribute to the future. The project aims to identify and develop young talent, which will not only contribute to the growth of the country's scientific potential but also create new opportunities in space technology. "Orbits" inspires a sense of pride in our country, which was the first in the world to launch artificial satellites. This historic contribution to space science and technology has become an important stage in the development of global astronomy and astronautics. Our achievements in this field continue to inspire new generations of scientists and engineers, strengthening our status as a leader in space exploration. The project is presented as two multimedia products: a website and a game on the VKontakte social network. The portal was developed and designed by Tetraform Studio, ensuring high quality and a unique style.

References of cosmic beauty

Before starting detailed design, Tetraform designers focused on creating the mood and atmosphere that would be reflected in the aesthetics of the project. They analyzed two main approaches to visualization to choose the most suitable for achieving the desired effect.

• The first option is tangibility and narrative, with colors predominantly warm and slightly faded.
• The second option is light and dark. Light represents the future, progress, high technology, darkness is a reference to the depths of space.

We chose the first option and began collecting "space" references for a more precise definition stylistic direction of our project. As a result, we have accumulated several interesting examples that will help formulate the concept and visual identity.

• Sci-fi — bright colors and detailed interface details.
• Realism, linearity, and minimalism — a clear and strict structure, lots of airiness, and rich, realistic colors.
• Retro style — an emphasis on typography, muted colors, noticeable textures, and distortion effects.

We chose a retro style for our project and decided to base the design on large futuristic elements. As a key element, we plan to add a control panel inspired by the interfaces of computers of the future, as imagined by 20th-century science fiction writers. This approach will create a unique atmosphere, combining nostalgia and modern technology, which will attract user attention and improve the perception of our product.

Tasks of cosmic complexity

The designers and developers faced several serious challenges and constraints. They needed to create a functional and attractive interface that would meet modern user requirements. It was important to take into account the adaptability of the design for various devices to ensure ease of use on mobile phones, tablets, and desktops. Website performance also needed to be optimized to ensure fast page loading and minimal response times. Given the competitive environment, special attention was paid to SEO optimization to increase the resource's visibility in search engines and attract the target audience. Accessibility also needed to be considered, requiring additional interface design considerations.

• The project contains hundreds of pieces of information in various formats—news, educational articles, quizzes, images, and satellite maps with explanations. Such volume can easily disrupt user immersion and discourage them. Therefore, it was important to integrate all the content into a single, user-friendly and intuitive interface and organize it appropriately.
• The website was designed using Tilda with a small JavaScript addition for seamless transitions between screens. This was necessary for speed, but it also presented a challenge: the interface had to be lightweight, easy to load, and yet not noticeably built with a website builder.

Tetraform developed a solution for convenient interaction with a variety of educational content by dividing the interface into two main sections: the spaceship's control room and the map. This approach is similar to those used in games, where the location map is presented in one menu tab, while useful information is available in another. This separation allows users to effectively navigate the content and simplifies access to the necessary data, thereby improving the overall user experience.

The main concept is that the buttons for switching between the wheelhouse and the map are always within easy reach of the Orbit user. This avoids distractions from moving between orbits and maintains continuous immersion in the gameplay. This allows users to focus on their actions and enjoy the flight without being distracted by additional materials.

Designed the map

Creating an engaging and functional map This became possible for designers thanks to the analysis of high-quality games and websites of private space companies. Researching these resources revealed best practices in design and user experience, which in turn helps create useful and attractive maps.

• For example, this is what the promotional website for the NFT game Star Atlas looks like - the menu elements are arranged as if in orbits.

• The website of Elon Musk's company SpaceX has cool infographics and realistic Illustrations.

• On the Ienai website, you can design your own rocket engine.

• The aesthetics and narrative of the famous roguelike game Returnal are built on the theme of space missions.

Reworked text:

Explore additional materials:

Secrets of Roguelikes and Roguelites: Why Hades, Spelunky, and Vampire Survivors Are So Captivating

Roguelikes and roguelites are video game genres that have gained popularity due to their unique mechanics and high levels of replayability. Games like Hades, Spelunky, and Vampire Survivors attract attention due to several key aspects.

First, elements of randomness play a significant role in these games. Each playthrough is unique, thanks to randomly generated levels, enemies, and items. This creates a sense of surprise and keeps players interested. Second, many roguelikes and roguelites offer challenging yet fair mechanics. Players learn from their mistakes and can improve their skills, which contributes to a sense of progress.

Furthermore, story elements and deep characters, like in Hades, add an emotional component that makes the game more engaging. The ability to develop characters and unlock new abilities maintains interest in the gameplay.

Finally, visual style and sound also play a significant role. Vibrant graphics and an atmospheric musical score create an immersive atmosphere. All these factors together make roguelikes and roguelites like Hades, Spelunky, and Vampire Survivors incredibly attractive to players, providing them with hours of engaging gameplay.

As a result, the decision was made to divide the map into several screens. However, the screens were rendered not simply as a sequence of images, but using a narrative approach. The user first sees all the orbits, then selects a specific one. After that, they receive information about the selected orbit and can choose from among the categories of satellites located at that altitude. In this way, the user gradually and linearly navigates through the orbits, immersing themselves in the data and becoming familiar with the functions of various devices. This approach provides a deeper understanding of satellite systems and their functionality.

The map originally had a slightly different design.

The original design was reminiscent of strategy game interfaces or spaceship control panels, with numerous buttons and switches placed on a single screen. It was designed as a stylized filter for three key entities that needed to be switched between: orbital segments, altitude points within these segments, and satellites. This approach ensured intuitive interaction with the data and facilitated ease of navigation, allowing users to quickly find the information they needed.

From the main screen, users could immediately begin their journey or select a desired location. This section contained a shortcut button that instantly redirected to the first orbit.

After selecting an orbit, users were taken to a screen where they could select the orbital altitude and the satellite that will be in it, or switch to another orbit. This interface allows you to easily manage orbital parameters and provides convenience in selecting the necessary satellites for various tasks.

The design included a brief reference description of the orbits and a button for accessing the captain's cabin. However, given the limited information on orbits and the primary focus on satellites, the designers decided not to create separate pages for orbits. Instead, information about them is placed in a side window, which allows users to quickly get the data they need without being distracted from the main content about the satellites.

After conducting a series of UX tests, Tetraform found that the current interface structure was too complex for user perception. As a result, the decision was made to break the information into more screens and implement tooltips. This allows the interface to effectively tell a story to the user and gradually guide them to the desired actions. Such changes significantly improve the user experience and make interaction with the product more intuitive.

Drew satellites

The Orbit interface is deeply integrated with visual aspects, where the user experience is shaped not only by buttons and correct indents, but also by impressive graphics. Designers had to develop detailed wireframes instead of simple working mockups. These wireframes immediately included satellite models, illustrations, and an orbital map, which allowed for a better understanding of the perception of all interface elements. This approach ensures a harmonious combination of functionality and aesthetics, which has a positive impact on user convenience.

Realistic images of satellites did not match the overall style of the project. Additionally, obtaining the rights to use the photographs proved challenging.

Tetraform developed the satellite illustrations in a unique retro style, creating color images reminiscent of drawings from vintage instruction manuals. These not entirely realistic illustrations help convey the atmosphere of the past and make the project more attractive to an audience interested in space technologies and the history of their development.

Project team

• Nail Mardamshin, account manager
• Alexandra Sverdlovskaya, production manager
• Ilya Mironov, web designer
• Igor Sporynin, web designer
• Ilya Nikitin, project manager

Learn more about design and its trends in our Telegram channel. Subscribe to stay up-to-date with the latest news and interesting materials!

Read also:

• Space, philosophy, and alternation of styles: the comic strip "Chronosis" by Reza Negarestani
• The last impression is the most important: humane design for a post-production studio
• Flow with hands: design of the new website for the massage parlors "Lyag©"
• From Chaos to Being. How a composer's notes in a score became a font
• Space logos: from Roscosmos to Virgin Galactic