Концепт студии
Мұз: концепт лендинга доставки рыбы
Концепт студии: как может выглядеть лендинг доставки рыбы по Алматы, если весь визуал снять в Higgsfield одной серией. Страница продаёт одно ощущение — рыба едет к вам во льду.
01 · Задача
Эксперимент: херо из нейросети
Концепт студии: мы проверяли, можно ли собрать лендинг уровня рекламной кампании без фотосъёмки — только из кадров Higgsfield. Ориентиром был образец OCEANOS: человек-вырезка на насыщенном цвете, рыба, лёд и одна сквозная иконография.
Клиента и реального магазина нет. Цены, телефон, WhatsApp и реквизиты на странице — заглушки, они помечены в коде.
Что хотели проверить
- Сделать первый экран, который запоминается с одного взгляда
- Снять 2–4 кадра так, чтобы они читались одной серией
- Показать, что есть сегодня и как рыба едет до двери
- Довести до одной кнопки «Написать в WhatsApp»
Ограничения
- Без фотосъёмки: весь визуал — генерации и вырезки
- Без выдуманных цен, отзывов и цифр
- Кириллица и казахские буквы в одной гарнитуре
- Белый текст на синем — контраст не ниже 4.5:1
02 · Исходники
Из чего собрали страницу
Исходников не было, поэтому мы сгенерировали их сами: рыбака для вырезки, flat lay с рыбой на льду, курьера с термобоксом, лист из шести линейных рыб и мокап термобокса. Каждый следующий кадр просили «той же серией»: тот же синий фон, тот же свет, реквизит цвета акцента.
До вёрстки сделали два концепта страницы целиком. Из первого взяли синий первый экран, жёлтую бегущую строку и каталог с фото в центре, из второго — термобокс со стрелками шагов, узор из рыб и волну в финале.
03 · Цвет
Синий из кадра, жёлтый как искра
Синий не выбирали в палитре — его дала генерация. Фон кадра рыбака #018BC9 затемнили до #0277B5, чтобы белый текст держал контраст 4.9:1, и этим цветом залили первый экран, шапку и финал. Лимонный жёлтый — единственный акцент: кнопка, бегущая строка, кружки шагов.
- Синий льда
#0277B5Первый экран, шапка, финал, иконки - Голубой кадра
#039DE3Фон под фото каталога - Лимон
#FAD03EКнопки, бегущая строка, номера шагов, маркер - Глубина
#06203BТекст, рамки строки, подвал - Лёд
#E2F3FDФон блока доставки - Иней
#F5FBFFФон страницы
Кадр и страница — одно полотно
Синий фона страницы совпадает с синим генерации, поэтому вырезка рыбака не выглядит вклеенной, а остатки каймы на мехе не видны.
Жёлтый только на действиях
Лимон стоит на кнопке, номерах шагов и в бегущей строке. На синем глаз находит его первым.
Курьер в шапке цвета акцента
Третий кадр серии просили с реквизитом цвета акцента: жёлтая шапка курьера связывает фото с кнопками.
04 · Типографика
Одна гарнитура, разные веса
Вся страница набрана Rubik: вариативный шрифт с кириллицей, в котором есть «Ұ» из названия. Заголовки идут весом 800, логотип и слово «МҰЗ» в подвале — 900, текст — 500. Округлые плотные буквы перекликаются с толстой линией иконок.
Был ещё рукописный кикер Marck Script над заголовком. Критик посчитал его третьей гарнитурой, и мы его убрали — характер держат кадры и иконки, а не шрифт.
Заголовки · Rubik 800–900
Аа Бб
Рыба, которая ещё помнит лёд
Текст · Rubik 500
Аа Бб
Судак, форель, сёмга и креветки во льду — привозим по Алматы в фирменном термобоксе.
Рыба, которая ещё помнит лёд
Как рыба едет к вам и не теплеет
Лёд и термобокс
Почистим и разделаем, если попросите, — напишите в заказе.
Пересыпаем колотым льдом и закрываем в термобокс.
05 · Компоненты
Детали из одного листа иконок
Шесть линейных рыб с одного сгенерированного листа перевели в вектор и используем везде: в каталоге, бегущей строке, вопросах и узоре фона. Отступы — шкала 4/8 из токенов, скругления 24 и 32 px, кнопки-пилюли высотой 56 px с плотной нижней кромкой, рамки строки 4 px цветом текста.
- Логотип: рыба из трёх линий и «МҰЗ»
- Кнопка и ссылка первого экрана
- Бегущая строка с рыбами
- Позиция каталога
- Шаг доставки на узоре
- Строка вопросов с иконкой
06 · Экраны
Почему страница устроена именно так
Первый экран
Рыбак прорывает жёлтую полосу
Вырезка стоит поверх синего и бегущей строки, поэтому фигура выходит из рамки первого экрана. Заголовок 96 px в колонке 7/12: фигура позиционирована отдельно и колонку не занимает.
В первых версиях заголовок был 64 px, а фигура налезала на текст. Правило, которое вынесли: место освобождаем сдвигом фигуры за край, а не уменьшением заголовка.
Каталог
Фото во льду, рисунки вокруг
Flat lay из второй генерации стоит в центре, а позиции нарисованы той же линией, что и иконки. Так каталог читается без цен: их ещё нет, и мы их не выдумывали.
Манифест
Одна мысль крупно
Между каталогом и доставкой — пауза: большая геометрическая рыба и фраза о том, что рыба лежит во льду до минуты заказа. Ключевые слова отмечены жёлтым маркером.
Доставка
Шаги вокруг термобокса
Термобокс — отдельный кадр-мокап с форелью из листа иконок на крышке. Четыре шага стоят по углам, стрелки ведут к коробке. Фон — бледный лёд с узором, который прячется за коробкой.
Вопросы
Иконки вместо номеров
У каждого вопроса своя рыба из того же листа. Ответы, которые зависят от будущего магазина — оплата, зона доставки, — в коде помечены как требующие проверки.
Финал
Третий кадр, а не повтор героя
Сначала в финале стоял тот же рыбак зеркалом и другим кропом — критик всё равно счёл это повтором. Сгенерировали третий кадр серии: курьер в жёлтой шапке с термобоксом, над синей волной.
07 · Телефон
На телефоне кнопка в первом экране
На 390 px заголовок, лид и кнопка во всю ширину идут первыми, а рыбак — сразу под ними, обрезанный до 340 px сверху, чтобы в экран попадало лицо. Каталог превращается в фото и две колонки рисунков, шаги — в список с номерами под термобоксом.
08 · Итог
Что получилось
- 5
- кадров сгенерировано в Higgsfield
- 3
- вырезки фона: рыбак, курьер, термобокс
- 6
- линейных рыб из одного листа — на всю страницу
- 2
- концепта страницы до начала вёрстки
Нужен такой же лендинг для вашего продукта?
Расскажите о задаче — предложим структуру, срок и точную цену. Лендинг от 95 900 ₸.
Астана, Казахстан · +7 700 100 08 55