More knowledge, closer to space: Tetraform's satellite portal design

Contents:

• An initiative with key implications for space
• Examples of the splendor of outer space
• Tasks requiring an unconventional approach in the space sphere
• Designed a map
• Drew satellites
• Project team

Many people don't think about the importance of satellites in everyday life, and for some, they seem like something out of science fiction. However, it is thanks to networks of artificial satellites located in Earth's orbit that we are able to quickly receive information about weather conditions and find optimal routes to shopping centers, while avoiding traffic jams.

In 2022, the popular science publication Black Science and the Institute for Internet Development jointly developed an educational initiative called "Orbits." This project aims to explain in an accessible and interesting way why satellites are sent into space, what functions they perform, and how this sphere functions in the immediate vicinity of the Earth.

Sasha Sverdlovskaya from Tetraform shares her team's experience in creating the design of this infotainment project. During their work, they drew inspiration from the successes of space companies, devoted time to PlayStation games, and faced various complex graphical challenges.

Co-founder and creative director of Tetraform.

One of the founders and design director at Tetraform.

An initiative with key importance for space

"Orbits" is an interactive project dedicated to Russian artificial Earth satellites. It provides an accessible explanation of technologies, both past and present, and opens up perspectives on the future—how might work in space evolve?

Readers can find information in the articles about whether a space elevator is possible or what steps would be necessary for humanity to settle on Venus. The tests, in turn, help deepen knowledge about satellites and also allow them to learn interesting facts about themselves, such as which black hole you would be or what role you would play in a colonization mission to Mars.

The main goal of this project is to attract children and young people to engineering creativity and spark their interest in space exploration. Russia currently ranks third in the number of active satellites, and further progress in this field requires engineers, technicians, and researchers—professionals who are passionate about their work.

Furthermore, "Orbits" is becoming a source of pride for our country, as it was the first to launch artificial satellites.

Currently, the project is presented in the form of two multimedia products: a website and a game on the VKontakte platform. Tetraform Studio is responsible for the creation and design of the portal.

Examples of the splendor of outer space

Before delving into meticulous design, the Tetraform design team focused on finding the mood and emotional background, which they sought to reflect in their aesthetics. During their work, they explored two different approaches to visualization:

• The first option has a tangibility and narrative, where warm and slightly faded tones predominate.
• The second approach includes a contrast between light and dark. Light symbolizes the future, development and advanced technology, while darkness is associated with the unexplored depths of space.

We chose the primary option and began to collect "space" references to better understand the direction in which the future style will develop. As a result, we received several examples:

• Science fiction is characterized by rich colors and carefully crafted interface elements.
• Realism, linear composition, and minimalism create a clear and strict organization, filling the space with air and rich, believable colors.
• Retro style is characterized by an emphasis on typographic elements, soft and calm colors, as well as pronounced textures and distortion effects.

Ultimately, we chose a retro style and decided to create a design based on large futuristic elements. One of these elements will be the control panel, which was inspired by the images of computer interfaces of the future, as imagined by science fiction writers of the last century.

Problems requiring an unconventional approach in the space sphere

The designers and developers had to solve a number of significant problems and face certain constraints:

• The project contains a variety of information units presented in a variety of formats - from news and educational articles to tests, images and satellite maps with detailed explanations. Such a vast amount of information can disrupt user immersion and create a feeling of inconvenience. Therefore, it is crucial to consolidate all content in a single, intuitive interface and organize it into logical groups.
• The website was developed on the Tilda platform with a small amount of JavaScript code, which ensured a smooth transition between screens. This solution improved loading speed, but also posed a real challenge: it was necessary to create an interface that would not overload the system and load quickly, while at the same time, presenting a design that would not raise suspicions that it was created using a website builder.

To effectively manage the abundance of diverse educational content, Tetraform decided to divide the interface into two main areas—the spaceship's control room and the map. This approach is already widely used in video games, where a map of the area can be viewed in one menu tab, and useful data is available in another.

The key idea was to ensure that the buttons for switching between the wheelhouse and the map were always available for the Orbit user. This avoids distraction from additional content, maintaining continuity between orbits and preserving the integrity of immersion in the process (or, more accurately, in the flight).

Designing the Map

To develop an interesting, but not overly complex map, the designers researched the best practices of high-quality games and websites of private space companies.

• For example, the promotional website for the NFT game Star Atlas is designed in such a way that the menu elements are arranged in the form of orbits.

• The website of SpaceX, a company founded by Elon Musk, presents an impressive Infographics and detailed illustrations.

• The Ienai platform makes it possible to develop a customized rocket engine.

• The aesthetics and narrative of the popular roguelike game Returnal are based on the concept of space expeditions.

Read also:

Secrets of the Roguelike and Roguelite Genre: What Makes Hades, Spelunky, and Vampire Survivors So Compelling

Roguelike and roguelike games like Hades, Spelunky, and Vampire Survivors have gained immense popularity and attention from players. The reasons for this phenomenon lie in their unique mechanics and features that make every gameplay exciting.

One of the key characteristics of roguelikes is their high replayability. Each new playthrough offers players unique challenges, changing levels, enemies, and items. This unpredictability creates a feeling of freshness and novelty, which keeps players coming back for more.

Furthermore, Hades, Spelunky, and Vampire Survivors feature vibrant visual aesthetics and engaging gameplay designs that draw players in and immerse them in the atmosphere. Each of these games has its own unique style that sets it apart from the others.

Progression mechanics are also important. Players can gain experience, unlock new skills, and upgrades, creating a sense of achievement and allowing them to experience character growth. This makes the gameplay more satisfying and motivates players to continue their adventure.

The presence of random elements also plays an important role. Random events and changes in gameplay not only add an element of surprise but also force the player to adapt to new conditions, making each session unique.

Thus, the combination of replayability, attractive visuals, a progression system, and random elements makes Hades, Spelunky, and Vampire Survivors truly addictive games that are hard to put down.

Ultimately, the decision was made to split the map into multiple screens. However, these were created not simply as a sequence of images, but using a narrative approach. First, the user is able to see all the orbits, then selects one, after which they receive information regarding the selected orbit and select a specific category of satellites located at that altitude. Thus, it moves sequentially and linearly along the orbits, delving into the data and becoming familiar with the tasks of these devices.

However, at the very beginning, the map had a somewhat different appearance.

The initial design was reminiscent of the interfaces of strategy games or the control panels of a spaceship, where many buttons and switches are located on a single screen. The concept was to create a stylized filter that would allow switching between three key elements: orbital segments, altitude points located within these segments, and satellites.

On the main screen, users immediately had the opportunity to embark on an exciting journey or select a desired location - for this, a shortcut button was provided that took them to the first orbit.

After selecting an orbit, users were taken to a screen where they could set the altitude and select a satellite in the current orbit, or switch to another orbit.

In addition, a brief reference description of the orbits and a button for accessing the captain's cabin were provided. However, since limited data was available on the orbits themselves, and the main focus of the project was on the satellites, the designers decided not to create separate pages dedicated to orbits, but to place information about them in a sidebar menu.

The Tetraform team then conducted several compact UX tests, during which they found that the initial structure was too confusing for users. As a result, they decided to split the information across more screens and implemented tooltips to gradually guide the user through the story and direct them in the right direction.

Drawing Satellites

The Orbit interface is deeply connected to visual representation: the user experience is shaped not only by buttons and their placement, but also by impressive graphics. This required the designers to develop not just sketches of working layouts, but carefully crafted wireframes. These wireframes immediately included satellite models, illustrations, and an orbital map, allowing for a better understanding of how all the elements would be perceived by users.

The images of the satellites, made in a realistic style, did not quite harmonize with the overall concept of the project. In addition, the process of obtaining the rights to use these photographs turned out to be quite difficult.

Therefore, Tetraform developed not entirely natural-looking images of satellites in a retro style, reminiscent of color drawings from old instructions.

Project Team

• Nail Mardamshin holds the position of account manager.
• Alexandra Sverdlovskaya holds the position of head of the production department.
• Ilya Mironov is a web design specialist.
• Igor Sporynin is a web design specialist.
• Ilya Nikitin holds the position of project manager.

You'll find a lot of fascinating materials about design in our Telegram channel. Join us!

Read also:

• Space, philosophical reflections, and a variety of artistic techniques: the comic strip "Chronosis" by Reza Negarestani.
• The final touch is what remains in the memory: a human-centered approach to design for a post-production studio.
• Hand flow: the concept of a new website for the massage studio "Lyag©"
• From Chaos to Being. How a composer's notes in a score turned into a font.
• Space company logos: from Roscosmos to Virgin Galactic