Две цели
Жан назвал два сайта, к которым идём. Teletech — как должен ощущаться сам сайт Колоссуса: вход, герой, движение, афиша, артисты. Depot Mayfield — как площадка показывает себя городу: страница «о пространстве» или отдельный лендинг для акимата. Оба сняты сегодня настоящим Chrome с видеокартой, покадрово. Клик по кадру — во весь экран.
Teletech Манчестер, к миру
Клубный промоутер, у которого сайт — не афиша, а инструмент. Webflow снаружи, свой WebGL внутри: three.js, GSAP, Lenis, зерно поверх всего. Палитра совпадает с нашей до значения токена, шрифт — моноширинный на всё, включая заголовки. Сайт целиком чёрный, светлая секция ровно одна. Сняли живьём настоящим Chrome, покадрово.
Вход — 4,6 секунды покадрово01
Прелоудер здесь не заставка, а диафрагма: счётчик → щель → раскрытие → холст доезжает в масштаб. Тайминги сняты из их GSAP-таймлайна.
0,0 с — чёрный. По углам рисуются уголки-кроншпили (SVG, stroke-dashoffset)
0,3 с — красный счётчик в моно, 31 %. Единственный цвет на экране
0,8 с — 52 %. Цифры дёргаются глитчем, служебные метки по углам
1,3 с — 95 %
1,5 с — 100 %
3,1 с — вертикальная щель: холст показался сквозь маску
3,4 с — щель раскрывается по горизонтали, внутри — клетки-плитки
3,6 с — диафрагма: кромки уезжают вверх и вниз, видно толпу
3,9 с — холст едет с масштаба 1.2 в 1 по кривой «резкий старт, длинный хвост»
4,2 с — герой открыт: ч/б толпа, заголовок ещё не собран
4,6 с — заголовок пересыпается символами и складывается в строку| время | что происходит | у Колоссуса |
|---|---|---|
| 0,0–3,1 с | красный счётчик 0→100 % моно, уголки-кроншпили рисуются SVG | у нас счётчика нет; уголки = девайс №6 «рамки/блоки» |
| 3,1 с | вертикальная щель, .preloader-mask-edge-middle, 0,6 с expo.inOut | — |
| 3,6 с | кромки верх/низ уезжают, 0,6 с expo.inOut | наш Preloader сейчас — один вайп вверх |
| 3,8 с | холст 1.2 → 1, 0,8 с, кривая M0,0 C0.14,0.86 0.37,0.96 1,1 | переносится в CSS как есть |
| итого | ≈4,6 с, без скипа, на каждый визит | наш предел 1,2 с, скип по клику, повтор мимо |
- Оставляем вертикальный вайп или переходим на диафрагму с уголками? Уголки — наш девайс, диафрагма — час работы поверх стоящего.
- Счётчик процентов: чужой тон или наш «паспортный» моно? Если делать — в сером или в сезонном цвете по согласованию: красного у бренда нет.
Главная по скроллу02
Десять кадров сверху вниз. Заметь, как мало текста и как каждый блок держится на одном приёме.
- Знак в металле у них — центр второго экрана, а не подвал. Наш монолит стоит на первом. Сдвигать?
- Призрачная бегущая строка TELETECH за знаком — это наш «призрачный тип» буквально. Берём как фон секции знака?
Разделы03
Афиша, резиденты, лейбл, архив, о нас, безопасность — карта почти совпадает с нашей.
| у них | как сделано | у Колоссуса |
|---|---|---|
| /events | постеры + дата · город · площадка · билеты, фильтр чипами | /events — анатомия та же, добавляем колонку «зал» |
| /residents | триптих портретов, текст по формату, кадр за пультом | /artists — у нас список HÖR, а страница артиста может взять триптих |
| /label | обложки каруселью + плеер, прилипший к низу | /cast — JILT.CAST: плеер внизу вместо аккордеонов? |
| /archive | только фото во весь экран со счётчиком | у нас нет — а 200 000+ гостей и 30 кадров просятся в архив |
| /about | интервью + три колонки | /about сжимается по закону четырёх; три колонки — готовая форма |
| /safety | заявление + политики + FAQ аккордеонами | /tickets — правила площадки, zero tolerance, FAQ дверей |
| навигация | всё в шапке, без бургера: INDEX EVENTS APPAREL ABOUT ARCHIVE RESIDENTS LABEL UPDATES | у нас плита KHIDI; их вариант — довод, что при 8 разделах бургер не обязателен |
Палитра и шрифт рядом с нашими04
Их CSS-переменные против наших токенов. Серые совпадают; разница — у них есть цветной акцент, у нас нет, и в шрифте.
#0a0a0a--darkest-hour#0a0a0aнашФон. Совпадает буква в букву.
#141414--dusk#141414нашПанель секции. Совпадает.
#1e1e1e--haze-grey#2a2a2aнашВолосяные линии. У нас на тон светлее.
#f0f0f0--power-white#F3F3F3нашТекст. Практически одно значение.
#c13243--digital-blood#F3F3F3нашИх единственный акцент — винный. У нас цветного акцента НЕТ: акцент = инверсия. Сезонный цвет (например, #CCF566 из «Межсезонья») — только по согласованию с Жаном.
#6c6c6c--machine-grey#888888нашВторичный текст.
| шрифт | где | у Колоссуса |
|---|---|---|
| Protomono | моноширинный, 48 вхождений — заголовки, текст, служебное | Inter / Helvetica + смешанный курсив; моно — только служебные строки |
| Lomocopy | дисплейный, 15 вхождений — акценты | — |
| выключка по формату | заголовки растянуты по ширине с широкими пробелами | чужой приём; наш девайс — курсив одного слова |
Что не берём05
Честно и коротко.
— Розово-голубые контровые в сцене (#ff1493 / #1e90ff) — берём схему освещения, цвета свои: холодный белый и серый, без цветного контрового.
— Пересыпание текста символами на ховере — чужой голос.
— Магазин одежды и мини-игра — не наш бизнес.
— Три мегабайта на 3D (three 616 кБ + модель 1,5 МБ + HDR 1,5 МБ) — наш потолок в двадцать раз ниже.
— Прелоудер без скипа на каждый визит.
Depot Mayfield Манчестер, бывший вокзал
Площадка на 10 000 человек в депо 1910 года. Сайт говорит с городом, а не с рейвером: белые страницы, один абзац фактов, типы событий плитками, экология, история места. Тёмный — только вход и подвал. Их акцент #ff3814 — красный; у нас цветного акцента нет, это их выбор, не наш. Главный приём — фильм на входе: архивная плёнка вокзала склеивается с сегодняшней толпой в том же зале. Это и есть история для акимата: «было — стало», без единого слова.
Вход — архив склеивается с сегодня06
Раскадровка первых восьми секунд. Обрати внимание на склейку между кадрами 6 и 7 — своды одни и те же.
чёрный экран, только окно cookieбелый лист с навигацией: HIRE · ENQUIRE · WHAT'S ON
серый — начинается проявление
архивная плёнка: вокзал Mayfield, толпа у платформы, ч/б
тот же зал, зелёный оттенок старой плёнки
архив продолжается — люди у ограждения
монтажная склейка: тот же зал СЕГОДНЯ, толпа на концерте
современный кадр — своды те же
крупно: бетон и облупившаяся краска — фактура стены- Есть ли у Колоссуса архив Дома печати — фото цеха, плёнка, чертежи? Без него приём не собрать.
- Кто снимает «сегодня» в тех же ракурсах, что архив? Это отдельная съёмка под склейку.
Главная по скроллу07
Структура институционального сайта: факт → типы событий → афиша → резиденты → новости → подписка. Всё на белом, кроме входа и подвала.
| блок | у них | у Колоссуса для акимата |
|---|---|---|
| фильм-вход | архив → сегодня | Дом печати → Colossus |
| один абзац | 10 000 · 1910 · Royal Mail · 2019 | 3 200 м² · до 6 500 · 200 000+ гостей · год открытия |
| EVENT TYPES, 8 плиток | билетные · культура · премии · конференции · выставки · корпоративы · съёмки · мода | концерты · фестивали · конференции и форумы · корпоративы · премии и гала · выставки · съёмки · культурные программы |
| WHAT'S ON | три постера | три ближайших из events.json |
| OUR TENANTS | Freight Island | Panterra (техника) · JILT · JAR — резиденты площадки |
| LATEST NEWS | дата · заголовок · кадр | новости площадки — контент от клиента |
| SUBSCRIBE на красном | единственный тёмный блок | заявка / контакт для города |
Переход между страницами08
Клик по HIRE: экран уходит в полноэкранный ролик, потом в чёрный, потом проявляется белая страница. Шторка из видео, а не из цвета.
клик по HIRE в шапке
экран уходит в видео: артист на сцене — ролик-шторка
ролик продолжается
красный зал, кадр сверху
затемнение
чёрный
серый лист проявляется
HIRE: заголовок, текст слева, кадр справа
страница на месте- Ролик-шторка на переходах — сильно, но дорого по трафику. Для институционального лендинга с тремя страницами — допустимо?
Разделы09
Hire, About, Enquire, What's On — светлые, текст слева, кадр справа. Экология и community — на странице «о нас», как часть предложения городу.
Палитра рядом с нашей10
Светлые страницы — прямо по брендбуку: core-палитра начинается с #FFFFFF и Cloud Dancer #F0EEE9. Красный — их, не наш.
#ffffffстраницы#F2F2F2нашИх — чистый белый; наш светлый блок по брендбуку чуть тёплее.
#ff3814акцент#F3F3F3нашИх — красный. У нас акцент = инверсия, без оттенка.
#e64f21тёмный акцент#1E1E1EнашУ них два оттенка красного; у нас — графит.
#000000вход и подвал#0a0a0aнашТёмное — только рама, не тело.
Что не берём11
— Подписку на рассылку как главный призыв — для акимата призыв один: запрос или встреча.
— Красный как акцент вообще: у Colossus его нет.
— Форму на reCAPTCHA — у нас статика; заявка = CF Pages Function или честные контакты.
- Формат: отдельный лендинг (например, colossus.kz/city) или переработанная страница «О пространстве»? Лендинг чище: у него своя аудитория, свой тон и свой белый.
- Архив Дома печати — есть ли материал? Это сердце приёма.
- Светлая тема для институционального лица — подтверждаешь? Брендбук допускает, направление v3 пока не предусматривает.