Редизайн макета и верстка сайта по изготовлению мерча MerchLab

Введение

Клиент, MerchLab, обратился к нам с запросом на верстку многостраничного сайта. Основная сложность заключалась в том, что макеты были предоставлены в виде статических изображений, экспортированных из графического редактора CorelDraw. Анализ исходных материалов выявил ряд проблем:

• Низкая детализация. Отсутствовали стили шрифтов, отступы, размеры элементов, что делало верстку «вслепую» и крайне трудоемкой.
• Ошибки в дизайне. Несоблюдение сетки, «плавающие» отступы, низкая контрастность текста, что негативно влияло на будущее юзабилити.
• Невозможность адатива. Изображения были только для десктопной версии, мобильные макеты отсутствовали полностью.
• Высокие риски. Верстка напрямую по картинкам привела бы к бесчисленным правкам на этапе приемки, так как не было единого источника истины.

Мы предложили клиенту решение: не верстать «как есть», а сначала провести редизайн в Figma с сохранением общей концепции и ключевых элементов. Это позволило бы устранить ошибки, создать адаптивные макеты и в конечном итоге сэкономить бюджет клиента и ускорить разработку. Было:

Стало:

Редизайн исходного макета

Наша цель состояла не в полном изменении видения клиента, а в улучшении пользовательского опыта и технической реализации. Что было сделано:

• Анализ и декомпозиция. Детально разобрали каждый предоставленный скриншот (Главная, Каталог, Кейсы, Контакты), выделив основные блоки и логику.
• Редизайн и исправление ошибок. Макет был отрисован с нуля в Figma с учётом требований современного дизайна, были исправлены логические и визуальные ошибки исходника, а экраны удобно систематизированы: выровняли элементы по сетке, привели отступы к единой системе, улучшили текст и его читаемость.
• Типографика и цвет. Систематизировали шрифты, определили иерархию (заголовки H1-H4, текст, кнопки), подобрали контрастные и доступные сочетания цветов, соответствующие бренду MerchLab.
• Проектирование адаптива. Для каждой страницы мы разработали адаптивные версии для мобильных устройств, продумав, как каждый блок будет трансформироваться.
• Создание UI-кита. В Figma мы подготовили библиотеку компонентов (кнопки, карточки, формы, навигация). Это гарантировало единообразие интерфейса и позволяло легко вносить правки.

Итог: Клиент получил полноценный, детализированный и интерактивный макет в Figma, который полностью отражал финальный вид сайта. Было проведено две итерации правок по макетам, на этом этапе клиент мог быстро и без затрат вносить свои пожелания. Было:

Стало:

Вёрстка

Имея на руках идеально подготовленные макеты в Figma, процесс верстки превратился из полной неопределенности в точную техническую задачу. Ключевые преимущества, которые дал редизайн:

• Скорость. Фронтэндер больше не тратил время на «угадывание» отступов (все есть в макете) или подбор шрифтов (все стили прописаны). Работа заняла как минимум на 40% меньше времени.
• Точность. Возможность использовать плагин Figma to Code и точное копирование значений свойств (цвета, тени, скругления) свела к нулю ошибки и несоответствия макету.
• Адаптивность. Готовые макеты для мобильных устройств убрали необходимости придумывать поведение блоков на ходу разработчиком.
• Снижение стоимости. Так как время работы фронтэндера значительно сократилось, а количество правок на этапе приемки было минимальным, финальная стоимость этапа верстки для клиента уменьшилась.

Верстка была выполнена семантически корректной и оптимизированной для поисковых систем. Было:

Стало:

Заключение и результат

Проект был сдан в срок, благодаря тому, что все основные правки и уточнения были внесены на этапе дизайна в Figma, этап верстки прошел гладко и не потребовал значительных правок. Клиент по итогу остался доволен, отметив:

• Четкий и прозрачный процесс работы.
• Готовность команды предложить лучшее решение, а не просто сделать «как сказано».
• Высокое качество конечного продукта: сайт выглядит современно и профессионально, хорошо работает на всех устройствах.
• Экономию бюджета за счет оптимизации процесса создания сайта.

Этот кейс наглядно демонстрирует, что инвестиции в качественный дизайн и проработку макетов на раннем этапе напрямую влияют на стоимость, сроки и результат всего проекта.