ВЕБ · vetonit power base · DV GROUP · 2025
От вайрфреймов до Tilda: лендинг в роли ведущего
2 лендинга
вёл параллельно
~40%
изменений внёс на финале
100%
вёрстки и настройки в Tilda — сам
Нарисовал и согласовал вайрфреймы, передал макет дизайнеру своей команды и контролировал работу, пока вёл параллельный лендинг Vetonit Tec 822/828. Затем подключился к Power Base: на этапе утверждения внёс около 40% изменений, финализировал дизайн, сверстал и настроил лендинг в Tilda.
02 / ЗАДАЧА
Два лендинга одного клиента в одни сроки
Vetonit заказал сразу две страницы: Power Base и 822/828. Сделать обе в одиночку в такие сроки было нельзя, поэтому Power Base я спроектировал сам и передал отрисовку макета дизайнеру своей команды, а сам продолжил вести 822/828.
03 / wireframes
Три варианта структуры
Я подготовил три варианта вайрфреймов. За основу взяли первый, и дизайнер начала собирать по нему hi-fi-макет. Я проверял промежуточные результаты. После первой версии добавил воздуха между разделами и ушёл согласовывать макет с клиентом.
Вариант 1
Вариант 2 утверждённый
Вариант 3
04 / новая вводная
Клиент попросил добавить инструкцию по применению
После согласования клиент вернулся с новой задачей: добавить на страницу инструкцию по применению продукта. Я нарисовал четыре варианта блока. Утвердили вариант с карточками шагов.
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Финальный, Вариант 4 в Hi-fi виде, сделанный дизайнером под моим руководством.
05 / финализация
Две секции карточек подряд — и как я это решил
Новая инструкция встала сразу после «Преимуществ», которые тоже были собраны карточками. Получилось два одинаковых блока подряд: страница потеряла ритм, а разделы слились. Я вернулся к варианту из другого вайрфрейма и перерисовал «Преимущества» графично, без карточек. Теперь каждый раздел выглядит по-своему, и взгляд не спотыкается.
Остальные правки были некритичными — размеры и отступы. Всего на этапе утверждения я изменил около 40% макета.
Wireframe
Версия middle
06 / вёрстка и настройка
Перенёс макет в Tilda и подготовил страницу к запуску
Пока дизайнер отрисовывала мобильную версию, я переносил десктоп в Tilda. Сверстал лендинг в Zero Block, затем собрал мобильную адаптацию по её макету.
Настроил всё, что нужно для работы страницы:
• формы заявок;
• аналитику и интеграцию с Яндекс Метрикой;
• SEO;
• подключение домена.
• формы заявок;
• аналитику и интеграцию с Яндекс Метрикой;
• SEO;
• подключение домена.
07/ продвижение
Креативы в сопровождение для РК.
Опираясь на готовый лендинг и брендбук, на этапе финала вёрстки в Tilda, junior-дизайнер сделала креативы для продвижения.
08/ РОЛЬ
Моя роль в проекте
Вайрфреймы (7 вариантов), постановка задачи и контроль макета, финальный дизайн, вёрстка в Tilda, настройка форм, аналитики, SEO и домена.
