Мр.Владимир
Кейс / Сайт для бизнеса
Сайт производителя картонных коробок
Многостраничный сайт по готовому дизайну из Figma для производителя гофрокартона и упаковки — с точной адаптивной вёрсткой и сложной формой расчёта заказа под разные типы коробок.
О проекте
Из макета Figma — в полноценный сайт для приёма заказов
Компания занимается производством и поставкой гофрокартона и картонных коробок. Дизайн сайта уже был подготовлен в Figma — моей задачей было точно перенести его на WordPress и превратить статичный макет в рабочий адаптивный сайт.
Особенность проекта — форма заказа. Для упаковки недостаточно стандартных полей «Имя» и «Телефон»: клиенту необходимо указать параметры будущей коробки и выбрать подходящий вариант продукции.
Сверстал страницы по макету, настроил адаптивное отображение, реализовал формы заказа и подготовил сайт к дальнейшему самостоятельному управлению через WordPress.
Дизайн и разработка проекта
Задачи
Точно воспроизвести дизайн и упростить заказ упаковки
01
Перенести дизайн из Figma
Точно воспроизвести утверждённые макеты в WordPress, сохранив типографику, отступы, размеры элементов и визуальную иерархию.
02
Адаптировать сайт под разные устройства
Сделать страницы удобными не только на компьютерах, но и на планшетах и смартфонах.
03
Реализовать сложную форму заказа
Дать клиенту возможность передать необходимые параметры коробки уже при первом обращении, а не уточнять их в дальнейшей переписке.
04
Сохранить удобное управление
Собрать сайт так, чтобы тексты, изображения и содержимое страниц можно было редактировать через WordPress без работы с кодом.
Решения
Что было сделано на проекте
01
Pixel-perfect верстка по Figma
Перенёс дизайн страниц в WordPress с вниманием к сетке, типографике, размерам элементов, отступам и другим деталям исходного макета.
02
Лёгкая основа на GeneratePress
Использовал GeneratePress как базовую тему без лишней перегрузки функционалом. Это позволило сохранить гибкость при разработке и получить аккуратную основу для Elementor.
03
Сложная форма заказа коробок
Реализовал несколько вариантов формы для разных типов упаковки. Пользователь может передать параметры будущего изделия вместе с заявкой, что помогает компании получать более информативные обращения.
04
Адаптивная верстка
Отдельно проработал отображение блоков, текста, изображений и элементов управления для десктопов, планшетов и смартфонов.
05
Подготовка к запуску
Настроил базовую SEO-структуру страниц, SSL-сертификат, выполнил финальное тестирование и подготовил сайт к размещению на хостинге.
Технологии
Стек проекта
WordPress
CMS для управления страницами и содержимым сайта без необходимости редактировать исходный код.
Elementor
Использовал для построения страниц и точного воспроизведения дизайна из Figma с возможностью дальнейшего визуального редактирования.
GeneratePress
Лёгкая базовая тема, которая позволила избежать лишней нагрузки и сохранить контроль над структурой и оформлением сайта.
CSS
Кастомные стили для точной реализации макета, адаптивного поведения элементов и деталей, которые выходили за рамки стандартных настроек конструктора.
⚡ Результат
Рабочий инструмент для получения заказов
Готовый дизайн из Figma превратился в полноценный адаптивный сайт на WordPress.
Посетитель может изучить информацию о продукции и отправить заявку с параметрами необходимой упаковки. Компания получила сайт, который соответствует исходному дизайну, корректно работает на разных устройствах и остаётся удобным для дальнейшего редактирования.
↗дизайн из Figma точно перенесён в WordPress
↗страницы адаптированы под компьютеры, планшеты и смартфоны
↗реализованы разные сценарии формы заказа
↗заявки содержат необходимые для предварительного расчёта параметры
↗сайт собран на лёгкой основе GeneratePress
↗содержимое можно редактировать через WordPress и Elementor.
Есть дизайн в Figma и нужен готовый сайт?
Сверстаю макет на WordPress, адаптирую под мобильные устройства и реализую необходимый функционал — от обычных форм до нестандартных сценариев заказа и расчёта.