Going Out to the City: How Tetraform Studio Designed an Interactive Atlas of Professions

Contents:

• Received the task
• Chose the style
• Assembled the map

The co-founder and chief designer of Tetraform studio shares his views on the process of creating projects that combine high functionality and impressive visual effect. In this article, we'll explore key design aspects that help balance practicality and aesthetics, and discuss best practices for delivering successful projects. Learn how Tetraform creates unique solutions that attract attention and meet customer needs. Links are an essential element of web content, playing a key role in internet navigation. They allow users to move from one page to another, providing access to additional information and resources. The importance of high-quality links cannot be overstated, as they contribute to improving a website's SEO positioning. Proper use of internal and external links helps search engines better index content and increases the site's credibility. Effective links should be relevant, up-to-date, and placed in context, improving user experience and increasing time spent on the site. Links should be incorporated into the text thoughtfully and naturally so as not to distract the reader, but rather direct them to useful information. Choosing a future profession is always a complex process. Information about various fields and specialties is often confusing and incomplete. Of particular concern is the prospect that a chosen profession could quickly become irrelevant. It's important to thoroughly research in-demand professions in the labor market and stay on top of trends to ensure a successful future.

Sberbank and the National Research University Higher School of Economics are launching a website dedicated to twelve future career paths for students, schoolchildren, and young professionals. The project is being developed by the Center-Game team, which is responsible for the concept and architecture, while Tetraform is handling the design and engineering. The new platform will provide users with up-to-date information on in-demand professions, helping them choose a career path and develop the necessary skills.

The platform is based on extensive research and big data analysis conducted in collaboration between the bank and the university. A key aspect was to maintain the scientific foundation while presenting it in the format of an engaging interactive atlas, making the information accessible and understandable to a wide audience. This approach not only contributes to a deeper understanding of the collected data, but also increases interest in scientific research.

The co-founder and design director of Tetraform studio shares his experience in creating projects that harmoniously combine functionality and visual impression. In this article, he reveals the key aspects that help achieve amazing results while maintaining practical value. Learn how Tetraform designers use innovative approaches and technologies to implement unique ideas that capture attention and meet user needs.

Links play a key role in the structure and functionality of online resources. They provide navigation between pages and help users find the information they need. Links are also important for their impact on SEO. High-quality and relevant links can significantly improve a site's visibility in search engines. Internal links improve indexing, and external links help establish a resource's authority. Creating the right link structure, using anchor text, and regularly auditing links will help improve the overall performance of your website.

Received the task

The clients developed a concept according to which all professional areas are represented as city quarters. This project should be dynamic and interactive, providing users with easy navigation and the ability to select the most suitable options.

Visual solutions and user scenarios should clearly demonstrate which industries will be rapidly developing, which new technologies should be considered, and which specialists will be in demand by employers in the near future. This will help not only adapt to changes in the labor market but also anticipate the need for qualified personnel.

Initially, it was planned that site users would be able to undergo career guidance, after which they would be presented with suitable training options and current vacancies.

Selecting a Style

Tetraform designers began by analyzing various references and solutions to determine the optimal style. They explored a range of designs, from simple diagrams and flat maps to complex 3D models created using WebGL, as well as computer game interfaces. This process allowed them to find a unique visual language that combines functionality and aesthetics.

We studied the functionality of various maps and paid attention to how and where tips and navigation elements appear. During the analysis, we discovered many useful solutions in the interfaces of housing rental services, which also feature tips and map navigation. These aspects significantly improve the user experience and help quickly find the information they need.

As a result, we chose 3D graphics. We tested various stylistic solutions for both the city itself and navigation elements.

Assembled the map

The designers used ready-made elements of architecture and urban decor to improve work efficiency, while adapting their aesthetics to the client's requirements. This approach allows for a combination of functionality and individuality, creating unique spaces that meet modern trends and customer tastes.

The bank suggested using the style of one of its internal projects. As a result, some user interface elements were integrated into the interactive city of professions.

Streets were expanded compared to standard sizes to provide users with a more convenient perception of clusters of professions. This improvement in spatial layout helps create a more comfortable and accessible environment for exploring various professional fields.

The Salute assistant, also used in other services in the Sber ecosystem, was integrated into the project. The assistant appears with a helpful hint the first time a user visits the platform, improving interaction and facilitating onboarding. This feature makes the platform more intuitive and convenient for new users, helping to increase their satisfaction.

The city features 50 promising Professions grouped into 12 quarters. Each area is designated by cards with names, without color coding. The urban design is consistent, using the palette and gradients of Sber's design system. This creates a harmonious and modern image, emphasizing the importance of new professions in the development of urban infrastructure and the economy.