Концепт студии
Қызыл: лендинг кавер-группы на свадьбы и корпоративы
Концепт студии: лендинг для кавер-группы из пяти музыкантов в алом. Первый экран должен за секунду показать группу, жанр и дать узнать, свободна ли дата.
01 · Задача
Задача
Концепт студии: проверить, можно ли собрать первый экран уровня Behance без фотосессии — только на кадрах из Higgsfield. Клиента нет, цифр и отзывов на странице нет, все фото и цены помечены как места под материалы клиента.
Ниша выбрана живая и визуальная: кавер-группа на праздники. Человек, который ищет музыкантов на свадьбу, решает по лицам, настроению и одной мысли — свободна ли его дата.
Что хотели проверить
- Первый экран с вырезкой группы перед огромным словом-названием
- Серия кадров с одними и теми же лицами и костюмами
- Сквозной мотив, который что-то значит для группы
- Весь путь до брони: репертуар, форматы, шаги, вопросы, финал
Ограничения
- Бюджет — 2–4 генерации на лендинг
- Казахские буквы с хвостом вниз (Қ) — шрифт с полной кириллицей и проверка, что хвост не лезет на текст
- Текст на чёрном и алом — контраст не ниже 4.5:1
- Без настоящих фото группы: всё, что заменит клиент, помечено в коде
02 · Исходники
Из чего собрали
Четыре генерации и одна вырезка: группа для вырезки (16:9), два концертных кадра и солистка (4:5). Каждый кадр делали под конкретный блок страницы.
Первый концертный кадр пришёл с другими людьми. Его пересняли, передав кадр группы как референс и попросив «тех же пятерых музыкантов» — лица и костюмы совпали. Вывод для следующих серий: референс первого кадра давать сразу.
03 · Цвет
Цвет
Палитру не придумывали — сняли с кадров. Чёрный — фон кадра группы, алый — костюмы. Светлые секции тёплые, с розовым оттенком того же алого, чтобы страница не распадалась на «тёмную» и «белую» части.
- Чёрный кадра
#160C0BПервый экран, тёмная карточка формата - Алый костюмов
#BB061EСлово ҚЫЗЫЛ, бегущая строка, кнопка - Тёмный алый
#79000CФон финала - Алый на чёрном
#FD7562Акцент в H1, полосы мотива на тёмном - Тёплый светлый
#FBF1EBФон светлых секций - Почти чёрный
#1E0F0FТекст
Цвет из кадра
Фон страницы совпадает с фоном генерации, поэтому вырезка группы стоит на нём без шва.
Два алых
Алый костюмов на чёрном слишком тёмный для текста. Для акцента в заголовке на тёмном взят светлый алый — контраст 7:1.
Тень без цвета
Красная тень под кнопкой читалась как свечение. Тени сделали нейтральными тёмными — кнопка просто стоит над фоном.
04 · Типографика
Шрифты
Заголовки — узкий Oswald капсом: пять букв ҚЫЗЫЛ помещаются во всю ширину экрана, а заголовок держит ритм афиши. Текст — Onest, спокойный и читаемый на телефоне. Обе гарнитуры с казахскими буквами, третьей нет.
По ходу поправили две вещи. Буква Ё в капсе при межстрочном 1 упиралась в строку выше — подняли до 1.12. Заголовок в узкой колонке рвался посреди слова — сократили его до «Под нас танцуют все» и запретили перенос внутри слова.
Заголовки · Oswald 500–700
Аа Бб
Под нас танцуют все
Текст · Onest 400–600
Аа Бб
Пятеро музыкантов вживую на свадьбе, юбилее и корпоративе в Алматы.
ҚЫЗЫЛ
Под нас танцуют все
Сколько играть
Читаем зал: начинаем с того, что знают все.
Приезжаем заранее, ставим звук и свет, играем.
05 · Компоненты
Элементы
Отступы — одна шкала 4/8, секция от 80 px на телефоне до 128 px на десктопе. Скругления три: 4, 8 и 24 px, кнопки — пилюли высотой 56 px с градиентом и бликом сверху. Тень в три слоя (контакт, полутень, воздух), стеклянные плашки — размытие 18–24 px. Мотив — пять полос эквалайзера, по числу музыкантов: знак, разделители бегущей строки, живой индикатор, шаги брони.
- Знак: пять полос — пять музыкантов
- Одна главная кнопка и ссылка рядом
- Стеклянная плашка с живым индикатором
- Бегущая строка жанров
- Шаги брони: полосы растут от шага к шагу
- Репертуар списком вместо карточек
06 · Экраны
Почему страница устроена именно так
Первый экран
Группа стоит перед своим названием
Слово ҚЫЗЫЛ во всю ширину, музыканты — вырезкой перед ним, головы на нижней половине букв. Слово чуть размыто, как на сцене за спинами, а при прокрутке отстаёт от группы — появляется глубина.
Хвост буквы Қ сначала закрывал заголовок. Слово уменьшили до 23% ширины экрана, а лид сделали в две строки — заголовок опустился и освободился.
Живой кадр
Через три песни танцпол полный
Второй кадр серии — те же пятеро уже на свадьбе. Фото уходит за правый край экрана, подпись о форматах лежит на нём стеклянной плашкой: человек видит не студию, а свой праздник.
Репертуар
Жанры крупным шрифтом, а не карточками
Пять жанров — пять строк с короткой подсказкой, когда это играть. Солистка слева на алой плашке под углом: после блока «текст слева, фото справа» второй такой же сделали зеркальным, чтобы ритм не повторялся.
Форматы
Сколько играть — три неравные панели
Алая, чёрная и светлая панели разной ширины: главный формат «весь вечер» самый крупный. Цены в концепте не выдумывали — на их месте «Стоимость — уточним» и пометка для клиента.
Шаги
Бронь в четыре шага
Дата, плейлист, договор, праздник. Над каждым шагом — полосы мотива, их становится больше от шага к шагу: к празднику эквалайзер звучит в полную силу.
Финал
Ваша дата ещё свободна?
Финал без повтора первого экрана: та же вырезка, но крупным кропом справа и с мягким краем, без жёсткой рамки. Стеклянная карточка с одной кнопкой — написать в WhatsApp.
07 · Телефон
На телефоне
На телефоне слово ҚЫЗЫЛ встаёт над группой, вырезка растягивается шире экрана и тает книзу, а заголовок и кнопка во всю ширину остаются в первом экране. Меню и стеклянная плашка уходят, в шапке — только знак и «Узнать дату». В финале кроп группы стоит над карточкой.
08 · Итог
Что получилось
- 4
- кадра в Higgsfield и одна вырезка на весь лендинг
- 5
- полос в знаке — по числу музыкантов
- 2
- гарнитуры, обе с казахскими буквами
- 8
- блоков от первого экрана до финала
Нужен такой же лендинг для вашего продукта?
Расскажите о задаче — предложим структуру, срок и точную цену. Лендинг от 95 900 ₸.
Астана, Казахстан · +7 700 100 08 55