Концепт студии
Сағат: лендинг бутика механических часов
Концепт студии: лендинг бутика механических часов с мастерской в том же зале. Главная работа страницы — привести человека на спокойную примерку.
01 · Задача
Проверить, как дорого может выглядеть лендинг без фотосессии
Концепт студии: клиента нет, это наш эксперимент. Мы взяли нишу, где сайт обычно продаёт атмосферой, — бутик механических часов — и собрали страницу целиком из сгенерированных кадров, своих гравюр и типографики.
Задача страницы простая: объяснить, что здесь можно не спеша примерить часы и тут же отдать свои в ремонт, и привести к записи.
Что хотели проверить
- Первый экран, который запоминается с одного взгляда
- Один сквозной мотив вместо набора украшений
- Знак и логотип из того же мотива
- Глубину: тени, стекло, свет — без свечений и градиентного текста
Ограничения
- Тёмного не больше 30% страницы: тёмные только первый экран и финал
- Две гарнитуры, без рукописной третьей
- Кадры не должны напоминать известные часовые бренды
- На телефоне 375 px кнопка записи видна в первом экране
02 · Исходники
Из чего собирали
Фотографий не было, поэтому кадры сгенерировали: часы для вырезки, рука в костюме, макро мастерской, поднос с тремя моделями. Часы потом вырезали из фона — на них держится весь первый экран.
До вёрстки сделали два концепта страницы и взяли из каждого по идее: из первого — полосу гравюр под первым экраном, из второго — шаги примерки вокруг открытой шкатулки. Гравюры нарисовали листом и перевели в вектор, чтобы красить их цветом бренда.
03 · Цвет
Зелёный кадра и шампань корпуса
Палитру взяли с главного кадра: зелёный фон, на котором сняты часы, и золото их корпуса. Зелёный стал тоном первого экрана и финала, шампань — словом-обложкой, кольцом и кнопкой. Остальная страница светлая, тёплого бумажного тона.
- Зелёный кадра
#0D4E3AПервый экран, финал, шапка - Шампань
#DEBF8DСлово САҒАТ, кольцо, кнопка на тёмном - Бронза
#7E541BАкценты и гравюры на светлом - Бумага
#F9F5ECФон светлых секций - Песок
#EDE7DBМастерская, полоса гравюр, подвал - Тёмно-зелёный
#0B2219Текст
Цвет из кадра, а не из каталога
Фон страницы совпадает с фоном снимка, поэтому вырезанные часы не выглядят наклеенными.
Два оттенка золота
Светлая шампань не читается на бумажном фоне, поэтому для светлых секций есть тёмная бронза с контрастом выше 4.5:1.
Тёмного меньше трети
Тёмные только первый экран и финал. Мастерская и подвал светлые, макро-кадр стоит в рамке, а не фоном.
04 · Типографика
Антиква для часов, гротеск для дела
Заголовки набраны Cormorant — дисплейной антиквой с высоким контрастом, как гравировка на крышке. Акценты — её же курсивом, без перекраски половины фразы.
Текст — Onest: спокойный гротеск с хорошей кириллицей. Рукописную гарнитуру сознательно не брали — на странице она читалась бы как третья. Обе гарнитуры держат казахскую Ғ в слове САҒАТ.
Заголовки · Cormorant 500–600, курсив для акцента
Аа Бб
Механика, которую слышно
Текст · Onest 400–500
Аа Бб
Бутик механических часов в Астане. Примерка без спешки и мастерская в том же зале.
САҒАТ
Механика, которую слышно
Каждые часы мы открываем и слушаем
Регулировка точности
Приносите часы любой марки — мастер посмотрит при вас.
05 · Компоненты
Детали, из которых сделана глубина
Отступы — одна шкала 4/8, секции 80 → 128 px. Скругления почти нулевые, 2–4 px, как у металла и стекла. Тень вырезки — три слоя (контакт, полутень, воздух), стекло — размытие 18–24 px с бликом сверху и без рамки, за предметом — пятно света и зерно, а не свечение.
- Мотив: кольцо циферблата с 60 делениями и знак
- Логотип: стрелки на 3:00 складываются в Ғ
- Кнопка «металл»: градиент шампани и внутренний блик
- Стеклянная плашка на кадре мастерской
- Номер шага в кольце и стрелка от руки
- Список работ с гравюрами
06 · Экраны
Почему страница устроена именно так
Первый экран
Слово за предметом
САҒАТ набрано на всю ширину, часы стоят перед ним и начинаются примерно с середины высоты букв: верх слова читается, низ закрыт. В первом варианте часы шли от самого верха и закрыли ҒА целиком — слово перестало читаться.
Глубина собрана из простых слоёв: слово чуть размыто, как при малой глубине резкости, за часами кольцо-циферблат и пятно света, по краям виньетка с зерном.
Полоса гравюр
Часы заходят на следующий блок
Под первым экраном — полоса гравюр из концепта и бегущая строка. Ремешок часов заходит на неё сверху, поэтому граница между тёмным и светлым не режет страницу пополам.
Правило бутика
Одна фраза крупно
Вместо блока преимуществ — одно правило, набранное крупной антиквой. Акцент курсивом той же гарнитуры, за текстом крупная гравюра шестерни.
Мастерская
Кадр до края экрана
В первой версии средние блоки были слабее первого экрана. Мы подтянули их до его уровня: макро мастерской уходит до края экрана, на кадре стеклянная плашка, работы — списком с гравюрами.
Цены и сроки работ оставлены пометкой «уточним»: в концепте их неоткуда взять, а выдумывать не стали.
Примерка
Шаги вокруг шкатулки
Четыре шага стоят вокруг открытой фирменной шкатулки, номера — в маленьких кольцах того же мотива. Цифры рисуются внутри SVG по центру: курсивные метрики шрифта сдвигали их, когда номер был обычным текстом.
Под блоком — узор из тех же гравюр, приглушённый к центру, чтобы не спорить со шкатулкой.
Финал
Тот же предмет, новый кадр
В финале снова часы, но крупный кроп циферблата: увеличен почти вдвое, повёрнут на −28° и уходит за правый край. Читается как новый снимок, хотя это та же вырезка.
07 · Телефон
На телефоне кнопка в первом экране
На узком экране слово встаёт в поток, часы занимают не больше 56% ширины, и кнопка записи помещается в первый экран. Меню убрано, остаются знак и одно действие. Шаги примерки идут колонкой под шкатулкой.
08 · Итог
Что получилось
- 4
- кадра сгенерировано в Higgsfield
- 2
- концепта страницы до вёрстки
- 6
- гравюр, переведённых в вектор
- 2
- гарнитуры на всю страницу
Нужен такой же лендинг для вашего продукта?
Расскажите о задаче — предложим структуру, срок и точную цену. Лендинг от 95 900 ₸.
Астана, Казахстан · +7 700 100 08 55