Лучшие вечера начинаются здесь.
Как TopTicket выглядит, звучит и двигается — для всех, кто проектирует, разрабатывает и пишет для него.
- Продукт
- Билеты на события, Узбекистан
- Языки
- O‘zbekcha · Русский · English
- Знак
- Star Pass
Логотип
Горизонтальный логотип — основной. Вертикальный используйте, когда место квадратное или высокое, а знак отдельно — там, где название бренда уже есть рядом: в иконках приложений и аватарах.
Знак
Star Pass — четырёхлучевая звезда, вырезанная как билет. Это самая узнаваемая часть айдентики, поэтому её никогда не перерисовывают, не обводят и не украшают.
Вырезан как билет
Каждая сторона изгибается внутрь, как вырубка на бумажном билете. Форма читается как «билет» раньше, чем название.
Тянется вверх
Самый длинный луч смотрит вверх и вправо. Он несёт «Top» из TopTicket и ощущение шоу, которое вот-вот начнётся.
Мягкий, не острый
Каждый луч заканчивается небольшим радиусом. Сохраняйте это в любом размере; не добавляйте острых углов, обводок и свечения.
Один знак, четыре заливки
Top Blue, White, Ink и градиент Top Blue → Sky. Градиент — на тёмных поверхностях и в иконках приложений, плоские цвета — везде остальное.
Поле и размер
Оставляйте вокруг логотипа свободное поле в четверть высоты знака (x). В него ничего не заходит: ни текст, ни края, ни другие логотипы.
Печать: горизонтальный логотип не уже 25 мм, знак не меньше 6 мм. Меньше этих размеров используйте только знак.
Ошибки
Файлы логотипа окончательные. Это самые частые правки; каждая ослабляет узнаваемость.
- ✓Правильноисходный файл, достаточно поля
- ✕Растянут
- ✕Перекрашен
- ✕Повёрнут
- ✕Добавлены эффекты
- ✕Пёстрый фон
- ✕Низкий контраст
- TopTicket✕Набран другим шрифтом
Цвет
Top Blue и White — это и есть бренд. Sky, Deep, Ink и Paper их поддерживают. Нажмите на образец, чтобы скопировать HEX.
Line и Muted — для границ и второстепенного интерфейса. Основной текст набирается чуть более тёмным оттенком #5C6681, чтобы проходить WCAG AA на Paper.
- AaWhite на Top Blue · 8.68:1 · AAA
- AaTop Blue на White · 8.68:1 · AAA
- AaInk на Paper · 16.85:1 · AAA
- AaSky на White · 3.89:1 · только крупный текст
linear-gradient(60deg, #002A8F 0%, #003FBA 45%, #2F7BFF 100%)
Для главных экранов, иконок приложений, афиш и рекламы. Текст на нём — белый. Одна градиентная поверхность на экран или страницу.
Типографика
Всю работу делает Manrope: ExtraBold для заголовков, Bold для интерфейса, Medium для текста. Он поддерживает узбекскую латиницу (oʻ, gʻ, ʼ) и кириллицу, поэтому все три языка звучат одним голосом. IBM Plex Mono — небольшой служебный шрифт для меток, дат и кодов.
64 / −4.5%
32 / −3%
17 / 0
16 / 150%
11 / +12%
Голос
TopTicket говорит как друг, который всегда знает, что идёт сегодня вечером: тепло, быстро, конкретно. Пишите на каждом языке как носитель, а не переводите слово в слово.
Конкретно
Называйте событие, дату, зал, ряд. «Ряд 7, место 18» лучше, чем «отличные места».
Коротко
Заголовки — до шести слов. Одна мысль в предложении. Кнопки говорят ровно то, что произойдёт: «Купить билет», «Оплатить 300 000 сум».
Честно
Никогда не выдумывайте цифры, рейтинги и отзывы. Пишите «в продаже» или «мест мало», только если это правда.
Применение
Как система работает на билетах, в продукте, на сайте, в соцсетях и на площадке. Названия событий, даты и цены в макетах — примеры.
Анимация
Знак рисуется светом, обретает объём и один раз поворачивается, как билет в руке. Движение быстрое, с плавным замедлением и без отскоков.
- 0.0 sСетка логотипа раскрывается и разлетается
- 1.1 sЛиния света обводит звезду
- 2.5 sПоявляется объёмный знак и один раз поворачивается в 3D
- 3.4 sЗнак уходит влево, пишется название
- 4.9 sЗвезда становится точкой над «i»
- 7.0 sБелый знак переворачивается на Top Blue
- 8.9 sШкала размеров, затем сетка возвращается и всё повторяется
Easing: cubic-bezier(0.16, 1, 0.3, 1) для появлений · 1600×1200, 1080×1080, 1080×1920