Астрономическая энциклопедия

Продукт: Астрономическая энциклопедия для образовательной платформы Sinaps
Роль: Product Designer — полный цикл от концепции до передачи в разработку
Платформы: Desktop (1440px и 1920px) + Mobile
Ключевая фича: Система, в которой сложный научный контент читается легко, астрономические снимки работают на продукт, а не перегружают его — и всё это одинаково хорошо работает и на 1920px десктопе, и на 360px мобильном
Инструменты: Figma (Auto Layout, Components, Variables, Prototyping)

Астрономическая энциклопедия

Продукт: Астрономическая энциклопедия для образовательной платформы Sinaps

Роль: Product Designer — полный цикл от концепции до передачи в разработку

Платформы: Desktop 1920px + Mobile 360px — оба варианта для каждого экрана

Ключевая фича: Система, в которой сложный научный контент читается легко, астрономические снимки работают на продукт, а не перегружают его — и всё это одинаково хорошо работает и на 1920px десктопе, и на 360px мобильном

Инструменты: Figma (Auto Layout, Components, Variables, Prototyping)

Задачи проекта

Создать систему, в которой сложный научный контент читается легко, астрономические снимки работают на продукт, а не перегружают его — и всё это одинаково хорошо работает и на 1920px десктопе, и на 360px мобильном:

1. Огромный объём итераций

В черновиках (Drafts) — десятки итераций: Main_5 по каждой планете Солнечной системы (Sun, Mercury, Earth, Venus, Moon, Jupiter, Saturn, Mars, Neptune, Uranus), Main_4 по типам объектов (Stars, Nebulae, Pulsar, Galaxies, Quasar), три версии Single page. Это значит, что финальные экраны — результат серьёзного поиска, а не первого решения.


2. Разнородность контента

Шесть разделов в рамках одного продукта: исторический нарратив, классификация звёздных объектов, Солнечная система с отдельными планетами, космические корабли, концептуальные темы, инструменты обучения. Каждый требует своего визуального языка — и при этом продукт должен ощущаться цельным.

3. Две платформы с разной логикой

Desktop 1920px и Mobile 360px — это не просто разные размеры. На десктопе продукт читается как единая длинная страница с боковой навигацией, на мобильном — как набор отдельных разделов со своим меню. Нужно было сохранить единый визуальный язык при разной логике навигации и подачи контента.

Этапы работы над проектом

Foundation — система до экранов

Работа началась не с экранов, а с Foundation: Spacing, Typography, Colors и Picture_style. Picture_style — редкий раздел: определяет, как кропаются снимки, какие маски, как текст накладывается на фотографии, соотношение сторон карточек. Без этого система неполная — изображения разрушали бы визуальный ритм на каждой странице.

Итерации по разделам в черновиках

Черновики (Drafts) — это видимая история поиска. Main_4 с итерациями по Stars, Nebulae, Pulsar, Galaxies, Quasar — исследование того, как организовать раздел о типах объектов. Main_5 с итерациями по каждой планете — поиск шаблона для раздела Солнечной системы. Три версии Single page — поиск формата длинной статьи. Финальные экраны в Actual pages — результат этого пути.

Main_long как архитектурный инструмент

Main_long (1920×7174px) — полная одностраничная структура. Это инструмент проектирования: видно, как шесть разделов переходят друг в друга, какой ритм у продукта, нет ли визуальных провалов. Рядом с десктопным Main_long на мобайле нет — зато есть отдельные мобильные версии каждого раздела.

Два шаблона для длинных статей

Statya (1841px desktop / 1816px mobile) — линейное чтение, без боковой навигации. Menu-statya (1378px desktop / 1526px mobile) — с боковым меню: якорные ссылки, структура статьи видна целиком. Single page_var2 (8855px desktop / 9871px mobile) — максимально погружающий формат для одного объекта. Три шаблона для трёх сценариев длинного контента.

Параллельное проектирование desktop + mobile

Мобильные фреймы (360px) существуют рядом с каждым десктопным. Это не адаптация в конце — параллельное проектирование. Примечательно: mobile версия Single page_var2 длиннее десктопной (9871 против 8855px) — контент переработан под вертикальный скролл, а не просто сжат.

Компонентная библиотека и edge cases

Components (12186×10391px) — полная библиотека для обеих платформ. 404_var1 и 404_var2 — два варианта ошибочного экрана с разной тональностью. Mobile menu (360×640px) — отдельно проработанная навигация для мобайла.

Ключевые экраны и решения

В данном блоке приведены макеты проекта. Так как проект очень большой, то для каждой его важной части я буду выделять по 1–3 скриншота с пояснениями, чтобы не делать кейс еще длиннее.

Main_long — полная структура продукта

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

Main_1 — первый раздел

Единственный раздел с нестандартной высотой на десктопе — 1175px вместо 1080px. Это намеренное решение: первый экран чуть длиннее остальных, создаёт ощущение пространства при входе. В черновиках видна эволюция этого раздела от простого до финального решения.
Главный экран

Main_2 / Main_3 / Main_4 / Main_6

Четыре раздела с унифицированной высотой 1080px — создают ритм при скролле. Черновики показывают глубину работы над Main_4: итерации по Stars, Nebulae, Pulsar, Galaxies, Quasar — поиск визуального языка для раздела о типах космических объектов. Main_6 незначительно длиннее (1613px) — финальный раздел основной структуры с дополнительным блоком.
Второй экран с короткими описаниями рубрик
Раздел со звездами, галактиками
Раздел с ИСЗ, кораблями и т. д.
Раздел с популярными статьями/рубриками

Main_5 — Солнечная система

В черновиках — десять итераций по каждому объекту Солнечной системы: Sun, Mercury, Earth, Venus, Moon, Jupiter, Saturn, Mars, Neptune, Uranus. Это говорит о глубине проработки: искался шаблон для страницы конкретного объекта. На мобайле два варианта: 800px (короткий) и 1808px (расширенный) — разные уровни детализации.
Раздел с основными объектами Солнечной системы

Навигация по темам

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

Страница статьи

Самая длинная страница продукта — детальная статья об одном объекте. Это флагманский шаблон глубинного контента: показывает, как энциклопедия работает с темой на максимальном уровне погружения. Фиксированный левый сайдбар решает главную проблему длинного контента — пользователь никогда не теряется. На любой глубине скролла видна структура раздела и активная позиция.
Часть страницы статьи.

Каталог космических аппаратов

Эта страница спроектирована как структурированный справочник, где пользователю необходимо быстро находить и сравнивать технические характеристики различных ракет и шаттлов.

Композиция: Использование чередующейся (Z-образной) сетки для визуального разделения блоков. Это помогает избежать монотонности при чтении большого объема технических данных.

Карточки объектов: Каждый аппарат представлен высококачественным рендером на темном фоне, что подчеркивает «космическую» тематику и создает эффект глубины.

Спецификации: Информационный блок содержит ключевые атрибуты (страна, производитель, масса, количество ступеней), оформленные в виде лаконичной таблицы. Это упрощает сканирование текста «по диагонали».

Навигация: В верхней части страницы реализован таб-бар для быстрого переключения между категориями: Звезды, Планеты, Спутники и Астрономия.

Детальная страница объекта

Второй макет демонстрирует работу с лонгридами и плотным текстовым контентом. Здесь акцент смещен с сухих цифр на повествовательную часть.

Иерархия контента: Главный визуальный акцент — Space Shuttle — закреплен слева вместе с основными характеристиками, в то время как правая часть отведена под подробное текстовое описание (на примере данных о галактике Андромеда).

Типографика и читаемость: Текст разбит на логические абзацы с соблюдением правил внутреннего и внешнего контраста, что важно для образовательного продукта, где нагрузка на зрение пользователя выше.

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

Глоссарий

На этой странице пользователь имеет возможность по алфавиту искать нужные ему статьи или в краткой форме ознакомиться с тем или иным определением. Также есть и глобальный поиск. При клике на выбранное слово справа появляется окно с кратким определением того или иного слова/термина.
Глоссарий
Окно с определением того или иного термина/слова.

Страница 404

Имеет 2 варианта на выбор.
Вариант 1
Вариант 2

Дизайн-система

Foundation: Spacing, Typography (1584×1694px), Colors (2508×1218px), Picture_style (1994×1106px). Components (12186×10391px) — библиотека для обеих платформ

Picture_style — ключевое решение

Отдельный раздел Foundation для стиля изображений — редкость. Определяет, как кропаются астрономические снимки, какие маски используются, как текст накладывается на фотографии, соотношение сторон карточек. Для визуально насыщенного продукта это половина восприятия.

Typography — шкала для двух платформ

Минимум 6–8 текстовых стилей: заголовки разделов, подзаголовки, основной текст, подписи к изображениям, термины глоссария, цитаты. Типографическая шкала покрывает оба breakpoint'а без дублирования.

Colors — тёмная основа с богатым акцентом

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

Components — масштабная библиотека

Карточки объектов, навигация десктопная и мобильная, поисковый интерфейс, блоки статей, боковое меню, глоссарные карточки, компоненты 404 — всё с вариантами состояний для обеих платформ.

Итоги проекта

Что получилось:

  • Полноценная энциклопедия с 6 основными разделами и несколькими типами глубинного контента
  • Desktop 1920px + Mobile 360px — полный комплект для каждого экрана
  • Три шаблона для длинных статей: линейный, с навигацией, максимально погружающий
  • Глоссарий с тремя состояниями — полный сценарий без пропусков
  • Два варианта 404 — осознанный выбор тональности ошибки
  • Масштабная компонентная библиотека — продукт готов к расширению
  • Черновики как видимая история поиска: 10+ итераций Солнечной системы, 5 итераций по типам объектов

Что бы сделал иначе:

  • Добавил бы интерактивную карту звёздного неба в Learning Tools — усилило бы инструментальность продукта
  • Сделал бы связанные статьи более заметными — в энциклопедии обнаруживаемость контента критична
  • Добавил бы онбординг для первого посещения — продукт большой, вход неочевиден
Made on
Tilda