Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#кейсы</a>

2 <ul><li>7 апр 2023</li>

3 <li>0</li>

4 </ul>О проекте "Орбиты": как в мультимедиа объединить статьи, тесты и карту орбит искусственных спутников, чтобы создать эффект полёта.

5 Изображение: студия Tetraform

6 Люди редко задумываются, какую роль играют спутники в обыденной жизни. А у кого-то эти аппараты вообще ассоциируются с научной фантастикой. Меж тем только благодаря группировкам искусственных спутников на орбите Земли мы быстро узнаём прогноз погоды и прокладываем маршрут до торгового центра мимо пробок.

7 В 2022 году научно-популярное медиа Black Science и Институт развития интернета объединились, чтобы создать просветительский проект "Орбиты". Он должен был понятно и увлекательно рассказывать о спутниках: зачем их запускают, что они делают и как вообще всё устроено там, в ближнем космосе.

8 Саша Свердловская из Tetraform рассказывает, как команда студии разрабатывала дизайн этого инфотейнмент-проекта - вдохновляясь достижениями космических компаний, внимательно играя в PlayStation и решая сложные графические задачи.

9 Сооснователь и дизайн-директор студии Tetraform.

10 <a></a>"Орбиты" - это интерактивный проект о российских искусственных спутниках Земли. Он доступно рассказывает о технологиях прошлого и настоящего и даёт возможность заглянуть в будущее - какой вообще может стать работа в космосе?

11 Например, из статей читатели узнают, реально ли построить космический лифт или как человечеству обустроиться на Венере. А тесты помогают закрепить знания о спутниках или узнать забавный факт о себе: какая ты чёрная дыра или какая роль досталась бы тебе в миссии по колонизации Марса.

12 Глобальная цель проекта - вовлечь детей и подростков в инженерное творчество и заинтересовать их темой освоения космоса. Сейчас Россия находится на третьем месте по количеству действующих спутников, и для развития этой индустрии нужны инженеры, техники и исследователи - энтузиасты, горящие своим делом.

13 А ещё "Орбиты" даёт повод испытать некоторое чувство гордости за нашу страну, которая первой начала запускать искусственные спутники.

14 Сейчас проект существует в виде двух мультимедийных продуктов: это<a>сайт</a>и <a>игра</a>во "ВКонтакте". За разработку и дизайн портала отвечала студия Tetraform.

15 Изображение: студия TetraformПрежде чем погружаться в детальное проектирование, дизайнеры Tetraform искали настроение и ощущение, которое хотели выразить в эстетике. Рассматривали два подхода к визуализации:

16 <ul><li>Первый вариант - осязаемость и нарративность, цвета преимущественно тёплые и слегка выцветшие.</li>

17 <li>Второй вариант - светлое и тёмное. Свет олицетворяет будущее, прогресс, высокие технологии, тьма - это отсылка к глубинам космоса.</li>

18 </ul>Два мудборда - тёплый и холодныйИзображение: студия TetraformОстановились на первом варианте и перешли к сбору "космических" референсов, чтобы более точно определиться с направлением будущей стилистики. Их получилось несколько:

19 <ul><li>Sci-fi - это яркие цвета и подробные интерфейсные детали.</li>

20 <li>Реализм, линейность и минималистичность- чёткая и строгая структура, много воздуха и сочные реалистичные цвета.</li>

21 <li>Ретростилистика - акцент на типографике, приглушённые цвета, заметные текстуры и эффекты искажения.</li>

22 </ul>Мудборд с картинками в ретростилеИзображение: студия TetraformВ итоге остановились на ретростилистике и решили строить дизайн из крупных футуристичных элементов. Например, добавить панель управления: вдохновением для этой графики стали интерфейсы компьютеров будущего, какими их себе представляли фантасты в прошлом веке.

23 Перед дизайнерами и разработчиками стояло несколько больших задач и ограничений:

24 <ul><li>В проекте сотни единиц информации в разных форматах - новости, образовательные статьи, тесты, картинки, карты спутников со всеми объяснениями. Такой объём легко может сломать погружение пользователя в контекст и отпугнуть его. Поэтому важно было подружить весь контент в одном удобном и понятном интерфейсе и правильно сгруппировать его.</li>

25 <li>Сайт верстали на Tilda с небольшим дополнением JavaScript для бесшовного перехода между экранами. Это было необходимо для скорости работы, но одновременно стало вызовом: надо было сделать интерфейс не слишком тяжёлым, чтобы всё хорошо грузилось, но при этом не было заметно, что сайт сделан на конструкторе.</li>

26 </ul>Чтобы решить задачу с большим количеством разного образовательного контента, в Tetraform придумали разделить интерфейс на две части - рубку космического корабля и карту. Подобное решение есть в играх: обычно карту локации рассматривают в одной вкладке меню, а полезную информацию читают в другой.

27 Структура портала "Орбиты"Изображение: студия TetraformОсновная идея была в том, чтобы кнопки переключения между рубкой и картой всегда были под рукой у пользователя "Орбит". Таким образом, дополнительные материалы не отвлекают от перемещения между орбитами и не прерывают опыт погружения (или, вернее сказать, полёта).

28 Рубка капитана создаёт ощущение, что пользователь управляет космическим кораблёмИзображение: студия TetraformСоздать нескучную, но и не перегруженную карту дизайнерам помогло исследование качественных игр и сайтов частных космических компаний.

29 <ul><li>Например, так выглядит промосайт NFT-игры Star Atlas - элементы меню расположены словно на орбитах.</li>

30 </ul>Скриншот: сайт<a>Star Atlas</a>/ Tetraform<ul><li>На сайте компании Илона Маска<a>SpaceX</a>крутая инфографика и реалистичные иллюстрации.</li>

31 </ul>Скриншот: сайт<a>SpaceX</a>/ Tetraform<ul><li>На сайте компании<a>Ienai</a>можно спроектировать собственный ракетный двигатель.</li>

32 </ul>Скриншот: сайт<a>Ienai</a>/ Tetraform<ul><li>Эстетика и нарратив знаменитой roguelike-игры Returnal построены на теме космических миссий.</li>

33 </ul>Скриншот: игра Returnal / TetraformВ результате карту решили поделить на множество экранов. Но отрисовывали их не просто как череду картинок, а в нарративном подходе: пользователь сначала видит все орбиты, потом выбирает конкретную, далее знакомится с информацией о ней и выбирает одну категорию спутников, которые летают на этой высоте. Так он постепенно и линейно проходит по орбитам, погружается в данные и знакомится с задачами устройств.

34 Но изначально карта была немного другой.

35 В первом варианте дизайн был похож на экраны стратегических игр или интерфейс для управления космическим кораблём, где на одном экране расположены множество кнопок и переключателей. Он был задуман как этакий стилизованный фильтр по трём сущностям, между которыми надо было переключаться: отрезкам орбит, точкам высот внутри них и спутникам.

36 На главном экране пользователей сразу же приглашали отправиться в путешествие или выбрать локацию - здесь была кнопка-шорткат, переносившая на первую орбиту.

37 Главный экран первого варианта интерфейсаИзображение: студия TetraformПосле выбора орбиты они попадали на экран, где было можно выбрать высоту и спутник на ней или же переключиться на другую орбиту.

38 Плюс было краткое справочное описание орбиты и кнопка для перехода в рубку капитана. Но поскольку о самих орбитах было не так много информации, а основной фокус проекта - спутники, дизайнеры решили не делать отдельные страницы, посвящённые орбитам, а располагать информацию о них в боковом окне.

39 Информация об орбитах в первом варианте интерфейсаИзображение: студия TetraformА потом Tetraform провели серию небольших UX-тестов и выяснили, что такая структура слишком сложна для восприятия. Поэтому информацию разбили на большее количество экранов и добавили подсказки, чтобы интерфейс как бы рассказывал пользователю историю и мягко направлял в нужную сторону.

40 Интерфейс "Орбит" очень тесно связан с визуальной частью: пользовательский опыт здесь создают не только кнопки и правильные отступы, а впечатляющая графика Поэтому дизайнерам пришлось проектировать не примерные рабочие макеты, а очень детализированные вайрфреймы. На них сразу разместили модели спутников, иллюстрации и карту орбит, чтобы понять, как будут восприниматься все элементы.

41 Очень подробный вайрфреймИзображение: студия TetraformРеалистичные изображения спутников не совсем вписывались в общую стилистику проекта. И к тому же получить права на использование фотографий оказалось сложно.

42 Поэтому Tetraform создали не совсем реалистичные иллюстрации спутников - в ретростиле, будто это цветные рисунки в инструкциях.

43 Рисунок спутника, будто из старого журналаИзображение: студия Tetraform<ul><li>Наиль Мардамшин, аккаунт-менеджер</li>

44 <li>Александра Свердловская, руководитель продакшена</li>

45 <li>Илья Миронов, веб-дизайнер</li>

46 <li>Игорь Спорынин, веб-дизайнер</li>

47 <li>Илья Никитин, проджект-менеджер</li>

48 </ul><a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>