eyezon - сервис живого общения
- Клиент
- eyezon
- Тип проекта
- Webflow / CRM
- Сайт
- Загрузка…
О проекте
Реализовал сайт eyezon в Webflow по предоставленному дизайну из Figma: вёрстка один в один с макетами, страницы решений и клиентских историй. Подключил передачу заявок из форм сайта в amoCRM. После ухода компании с рынка историческая версия сайта доступна в вебархиве.
Что было сделано
- Реализация предоставленного дизайна из Figma в Webflow
- Вёрстка по принципу pixel perfect: композиция, размеры, отступы и типографика
- Вёрстка страниц решений и клиентских историй
- Реализация графических и видеоблоков по готовым макетам
- Интеграция заявок из форм Webflow с amoCRM
eyezon помогает покупателю общаться с представителем бренда во время онлайн-покупки. Для сайта сервиса я реализовал предоставленный дизайн из Figma в Webflow по принципу pixel perfect и подключил передачу заявок в amoCRM. Проект также участвовал в Awwwards, и для участия я дополнительно оптимизировал вёрстку.
Исходная
В основе проекта был готовый дизайн в Figma: страницы продуктовых решений и истории клиентов с крупной типографикой, чёрно-белыми секциями, розовыми акцентами, круговыми композициями и видеоблоками. Моей зоной ответственности была вёрстка этого дизайна в Webflow.
Задача
Перенести макеты в Webflow по принципу pixel perfect: один в один сохранить композицию, размеры, отступы, шрифты и расположение графики. При большом объёме страниц организовать вёрстку так, чтобы общие элементы можно было использовать повторно, сохраняя уникальный дизайн каждой страницы. Дополнительно связать формы сайта с amoCRM для передачи заявок.
Как проходила работа
1. Разобрал макеты на блоки
Проект включал более 60 страниц с уникальным дизайном. Сначала разобрал макеты на отдельные секции и выделил повторяющиеся элементы: шапку, подвал, блоки с призывом оставить заявку и переходы к другим историям. Отдельно определил блоки, у которых совпадала структура, но менялись текст, изображения или композиция. Такое разбиение помогло выстроить общую основу вёрстки и понять, какие элементы можно использовать повторно, а какие нужно собирать отдельно под конкретную страницу. Все визуальные решения уже были заданы в предоставленном дизайне.
2. Собрал страницы в Webflow
Сначала сверстал общие блоки и настроил единые стили для типографики, отступов и повторяющихся элементов. Затем собирал из них страницы, меняя наполнение и сочетание секций по макетам. Для уникальных композиций делал отдельные блоки, сохраняя общую визуальную систему сайта. Повторяющиеся секции использовал как основу для следующих страниц: это позволяло вносить общие правки последовательно и сохранять единый вид элементов по всему проекту. При этом размеры блоков, переносы заголовков и пропорции изображений сверял с дизайном по принципу pixel perfect.
3. Проверил детали и оптимизировал вёрстку
После сборки сверял страницы с макетами: композицию, расстояния между элементами, чередование светлых и тёмных секций, круглые изображения и видеоблоки. В историях The Body Shop, Haier × Ozon и Ekonika сохранил индивидуальное расположение контента и показателей, а также общие блоки переходов и заявок. Проект участвовал в Awwwards. Для участия я дополнительно оптимизировал вёрстку сайта в Webflow, сохранив точное соответствие предоставленному дизайну.
4. Подключил заявки к amoCRM
Интегрировал формы сайта с amoCRM: обращения из Webflow передавались в CRM для дальнейшей работы команды. Посетитель знакомится с решениями eyezon, оставляет заявку, и обращение поступает в систему обработки.
Видео сайта
Не удалось воспроизвести видео. Попробуйте ещё раз.
Результат
Реализовал в Webflow более 60 страниц с уникальным дизайном, сохранив композицию и визуальные детали предоставленных макетов. Общие блоки стали основой для сборки страниц, а уникальные секции передали особенности каждого решения и клиентской истории. Дополнительно оптимизировал вёрстку для участия проекта в Awwwards и связал формы с amoCRM.
Компания и сайт ушли с рынка. Историческая версия доступна в вебархиве от 25 августа 2022 года; в этом кейсе сохранены макеты и видеодемонстрация проекта.