«Го». Шесть стилей приложения

Сравнение и рекомендация

Собрано 13.09.2026. Задача: не привязываясь к текущему логотипу и лаймовой палитре, попробовать по-настоящему разные визуальные языки для самого приложения и понять, какой из них двигать в макеты и код.

Для каждого стиля сделаны одни и те же девять экранов с одними и теми же данными, чтобы сравнивать стиль, а не контент: онбординг (геолокация), карта, событие, подтверждение «Ты идёшь», создание, список, «Мои события», профиль организатора, сторис-карточка «Поделиться». Плюс лист айдентики: знак, палитра, шрифт, пин в трёх состояниях, шесть глифов категорий, кнопка.

Файлы: design/app/generated/styles/ — экраны по именам D<n>_<стиль>_<экран>.png, обзоры по стилю в overview/, сравнительные листы по экранам в review/.

---

Стили

D1 «Афиша-тумба»

Мир: круглые афишные тумбы Петербурга, конструктивизм, Родченко. Крем #F1E9D6, чёрный #141414, один сигнальный красный #D7301F. Тяжёлый геометрический гротеск капителью, узкий гротеск в тексте, красные диагонали, толстые линейки, трафарет. Радиус 0. Знак: трафаретное «ГО», где О — чёрный круг с красным кольцом.

Сильное: самая узнаваемая айдентика из шести, самая петербургская по духу, отлично живёт на постерах, стикерах и в сторис. Слабое: капитель везде утомляет в ежедневном интерфейсе, красный с чёрным агрессивны для «дружелюбных встреч», узкий гротеск плохо читается в мелких строках. Вердикт: язык для маркетинга и сторис, для интерфейса — только если смягчить (капитель оставить заголовкам).

D2 «Мокрый асфальт»

Мир: настоящая петербургская ночь — холодная сине-чёрная земля #0B1220, поверх неё тёплые точки фонарей. Акценты: натриевый янтарь #FFB454 и пыльная роза #F26D85 только для «мест нет». Скругления 20 px, матовые полупрозрачные шиты, дружелюбный геометрический гротеск. Знак: «Го», где о — светящийся диск фонаря.

Сильное: самый «приложенческий» и родной для iOS/мини-приложения, ночью естественен, тёплый свет фонарей даёт ему собственную историю. Слабое: ближе всех к дефолтной «тёмной карте с акцентом» (Blink, Zenly), свечение — известная примета нейросетевого дизайна, днём на улице тёмная карта хуже читается. Вердикт: самый безопасный для внедрения; сильный кандидат на тёмную тему любого другого направления.

D3 «Тетрадь»

Мир: студенческая тетрадь в клетку, синяя ручка #1F3A93, жёлтый маркер #FFF176, пастельные стикеры, рисованные стрелки. Рукописный заголовочный шрифт с кириллицей, округлый гуманистический гротеск в интерфейсе. Карта — карандашный эскиз города.

Сильное: самый тёплый и самый «свой» для 18–24, ни на что не похож, стикеры и маркер естественно кодируют состояния. Слабое: рукописный шрифт плохо держит данные (время, адреса, числа) и доступность; эскизную карту нельзя получить из картографического SDK без дорогого кастомного стиля; часть аудитории прочитает как «детское». Вердикт: направление для эмоционального слоя (онбординг, сторис, пустые состояния), не для ядра с картой.

D4 «Схема метро»

Мир: схема петербургского метро как интерфейс. Белый, чёрный узкий транзитный гротеск, пять цветов линий только как категории: спорт, игры, языки, музыка, прочее. Улиц нет: карта сведена к линиям и станциям, событие — станция с числом внутри, выбранное — пересадочный узел с двойным кольцом. Правила в 1 px, стрелки навигации, табличные цифры. Знак: станция на коротком отрезке линии.

Сильное: самая точная идея из шести — категория = линия, встреча = станция, число внутри кольца = сколько идут. Это структура, а не украшение, и это самый петербургский образ, который есть у города. Дешевле всех в реализации: чистый вектор, без фото. Список на цветных штрихах — лучший список из шести. Слабое: абстрактная карта не отвечает на вопрос «это рядом со мной?»; цвета линий будут читаться как настоящие линии метро (красная — «первая линия»), это надо проверить на людях. Вердикт: главный кандидат, при условии гибрида — настоящая карта в схематичном сером стиле с маркерами-станциями, линии только в списке и легенде.

D5 «Стикерпак»

Мир: стикерпак в мессенджере. Небесный фон #EAF4FF, белые карточки 24 px, леденцовые акценты: коралл, мята, фиолетовый, подсолнух. Пухлый округлый гротеск, объёмные стикеры-глифы с белой обводкой, пузырьковые пины.

Сильное: самый дружелюбный, самый естественный для Telegram Mini App, самый «весёлый» для аудитории. Слабое: самый generic из шести — Duolingo и стикеры Telegram, ничего петербургского; объёмные стикеры дорого рисовать и поддерживать для двадцати категорий. Вердикт: запасной вариант, если приоритет — мгновенная понятность и «не пугать».

D6 «Редакция»

Мир: городской журнал. Тёплый белый #F7F3EC, чёрный, одна охра #C8873A. Кириллический сериф в заголовках, капитель в метаданных, документальная фотография во весь кадр, тонкие линейки. Знак: серифная «Го» с охристым кольцом.

Сильное: самый взрослый и дорогой на вид, фотография делает встречи живыми. Слабое: продукт держится на фото, которых у пользовательских событий не будет — пустые карточки убьют образ; сериф в мелких строках слаб; темп «журнала» противоречит «двум тапам». Вердикт: не для ядра; приём с фотографией можно взять в профиль организатора и в сторис.

D10 «Liquid Glass» на карте Яндекса

Добавлен 14.09 по просьбе Сергея, с новым вводным: приложение строится поверх Яндекс Карт, которые почти не кастомизируются (как в Blink). Значит, карта — константа: белая земля, серые кварталы, ярко-синяя вода, чёрные капительные подписи районов, синие «М». Стиль живёт только в слое поверх карты.

Мир: язык iOS 26 — полупрозрачное преломляющее стекло с бликом по кромке, капсулы, плавающий таббар, системный гротеск, один синий акцент #0A84FF; стекло берёт оттенок от карты под ним. Ночью — тёмное стекло на ночном режиме Яндекса. Знак: стеклянный сквиркл «Го».

Сильное: честно решает главную задачу этого продукта — интерфейс над чужой пёстрой картой остаётся читаемым, блюр гасит шум карты; родной для iOS и мини-приложения; ночной режим карты ложится сам; ничего не требует от карты. Слабое: это язык платформы, а не бренда — узнаваемость только через знак и типографику; на Android без системного стекла выглядит чужим; тяжёлый backdrop-filter на слабых устройствах. Вердикт: прагматичный кандидат именно для связки «мини-приложение + Яндекс Карты»; проверить производительность на Android и усилить знак.

Для этого направления собран интерактивный прототип (design/app/proto/glass/, на сайте раздел «Прототип»): настоящее CSS-стекло, три варианта материала («Тонкое», «Плотное», «Ночь»), шит на пружинах с передачей скорости жеста, проекцией импульса и rubber-band, пины с откликом на нажатие, «Я иду» с блюр-кроссфейдом, поддержка reduced-motion и reduced-transparency. Движение собрано по правилам Эмиля Ковальски (скиллы apple-design, animate, prototype): ease-out на входах, до 300 мс, только transform и opacity, пружины с критическим затуханием по умолчанию и отскоком только после флика.

D0 «Бумажная карта + лайм» (исходное направление)

Сделано в первой половине дня по контракту design/app/DESIGN.md: бумага #EDF1E9, чёрный, лайм только полем и кольцом, Golos Text, радиус 0, пин-счётчик. Совместимо с текущим логотипом и декой. Экраны в generated/boards/, иконки в generated/icons/final/. Остаётся в игре как «вариант преемственности».

---

Сравнение

	D1 Афиша	D2 Асфальт	D3 Тетрадь	D4 Метро	D5 Стикеры	D6 Редакция	D10 Glass	D0 Бумага
Узнаваемость	5	3	5	5	2	4	2	4
Петербург в образе	5	4	3	5	1	3	2	3
Читаемость данных	2	4	2	5	4	3	4	5
Ночь на улице	3	5	2	4	3	3	4	3
Живёт на карте Яндекса	2	4	1	2	4	3	5	2
Сложность реализации	3	2	5	1	3	4	3	2
Свой для 18–24	3	4	5	3	5	2	4	3
Риск «как нейросеть»	1	4	1	1	5	2	3	2

Шкала 1–5, где 5 — лучше; в строках «сложность» и «риск» 5 — хуже. Оценки — моё экспертное чтение бордов, не измерение. Строка «живёт на карте Яндекса» добавлена 14.09 после вводного о некастомизируемой карте: направления, которые держались на собственной карте (Тетрадь, Метро-абстракция, Бумага), теряют половину силы; побеждают те, чей стиль целиком в слое поверх карты.

Рекомендация

1. Ядро — D4 «Схема метро» в гибридной форме: настоящая карта в сером схематичном стиле, события как станции с числом, категории как линии в списке и легенде. Это единственное направление, где стиль — это продуктовая логика.
2. Тёмная тема — D2 «Мокрый асфальт»: ночью та же схема ложится на тёмно-синюю землю с янтарными станциями.
3. Маркетинг и сторис — D1 «Афиша»: постеры, сторис-карточки, стикеры. В интерфейс не тащить.
4. D0 держать как вариант преемственности, если решите не менять логотип.

Проверить на людях до выбора: показать D4, D2 и D3 шести-восьми студентам, два вопроса — «какое из этих приложений ты бы открыл вечером во вторник» и «найди, где идут 12 человек» с секундомером. Отдельно спросить про цвета линий метро: путают ли с настоящими.

Проверка гибрида

После рекомендации сделаны два борда «Схема метро» на настоящей карте центра (D4_metro_map_hybrid_day.png, D4_metro_map_hybrid_night.png) и ночная «Афиша» (D1_afisha_map_night.png). Гибрид работает: серая схематичная карта, станции с числом и короткий цветной штрих категории под каждой читаются и днём, и ночью; ночная версия ложится на тёмно-синюю землю с фонарями из D2 без свечения. Это и есть предлагаемая пара «ядро + тёмная тема».

Гибрид доведён до четырёх экранов: карта, событие, создание (станция ставится на карту и перетаскивается), онбординг (D4_metro_*_hybrid.png). Для него же сгенерирован набор из двенадцати транзитных пиктограмм в манере указателей метро (icons_metro/final/*.svg, чёрный силуэт, без обводок) — они ставятся в станционный кружок на цветном штрихе категории.

Три дополнительные пробы

Чтобы проверить края, сделаны ещё три карты (D7–D9):

• D7 «Ленинград-неон» — чёрный, трубчатый неон циан и розовый. Эффектно, но это ровно тот «тёмный с неоном» дефолт, от которого шесть основных направлений уходили. В работу не берём.
• D8 «Швейцарская сетка» — белый, гротеск, красный акцент, огромная цифра «8 идут» без иконок. Самый чистый и самый безличный: подойдёт любому сервису. Приём с огромной цифрой стоит забрать в любое направление.
• D9 «Пиксель» — 8-битная карта города с крепостью и собором, панель как в RPG. Обаятельно и уникально, но узко: игровой код отпугнёт часть аудитории и плохо масштабируется на список и формы.

Для шести карт также сделаны короткие «живые» ролики (video/, kling3_0, 5 с): пульс пина, выезд шита, прорисовка линий метро. Текст в них может плыть — это демонстрация движения, не спецификация анимации.

Что дальше

• Выбрать направление (или пару «ядро + тёмная тема»).
• Собрать выбранное в кликабельный HTML-прототип с настоящей картой (карта — 2ГИС или Яндекс с кастомным стилем) и проверить на телефоне.
• Перерисовать знак под выбранный стиль: варианты уже есть на листах айдентики.
• Иконки категорий: для D4 — пиктограммы на цветных штрихах, 16 штук, одной толщины.