Коротко.
Сколько исполнителей должно быть в проекте по созданию веб-сайта, чтобы получить ожидаемый результат? Этот кейс о том, как мы реализовали и усовершенствовали разработку сайта на основе готового макета дизайна от другого подрядчика.
В начале 2018 года мы начали сотрудничать с компанией . Успев поработать со сторонними дизайнерами, они смогли предоставить нам оригинальный макет сайта. Мы реализовали проект в полном соответствии с дизайном и улучшили его функциональность.
Запрос.
Компания специализируется на оптовой и розничной продаже плитки, а также предоставляет услуги по созданию дизайн-проектов и реализации ремонтных работ. На момент начала нашего сотрудничества компания владела устаревшим сайтом, который не отвечал требованиям и не соответствовал специфике ее деятельности.
Чуть ранее компания сотрудничала с дизайнерами, которые разработали макет будущего сайта в формате PSD (photoshop). В силу определенных причин, одной из которых был большой срок разработки и трудности в реализации динамики, заказчик принял решение найти новых исполнителей.
Для него было важно:
- Использование готового дизайна (был оплачен и соответствовал его требованиям)
- Идентичность визуальной части сайта макету
- Верстка «под ключ» с необходимым функционалом для сайта в короткие сроки
Решение.
Мы не первый раз работаем в таком формате, и все наши проекты были приняты заказчиками как полностью соответствующие поставленным задачам.
В этом проекте мы стали исполнителями, разработав сайт «под ключ» за 2 месяца на базе предоставленных PSD-макетов. Также мы добавили ряд разделов и функциональных доработок дизайна, чтобы результат соответствовал бизнес задачам заказчика.
При верстке сайта мы руководствовались известной концепцией Pixel Perfect. Узнать об этом подходе можно в нашем проекте Разработка сайта на WordPress под ключ.
Результат.
Главная страница
На странице реализованы:
- Слайдшоу на весь экран с атмосферными фотографиями интерьеров
- Классификатор продуктов (каталог по типу изделий: ламинат, плитка, паркет, винил, ковры)
Главная страница на старом сайте:

Макет главной страницы для новой версии сайта:

Наша реализация Главной страницы:

Каталог продукции
Для каталога продукции мы реализовали интеграцию между сайтом и складской ERP системой Visma Horizon. Менеджеры редактируют наличие товаров, их количество, параметры и цены в складской программе. Все изменения автоматически появляются на сайте в разделе Каталог.
Каждый из 5 разделов - Плитка, Ламинат, Ковры, Паркет, Винил – представлены в 3 категориях:
- Коллекции
- Интерьеры
- Каталог
Страница Каталог на старом сайте:

Макет страницы Каталог для новой версии сайта:

Наша реализация страницы Каталога:

Поисковый фильтр продукции
Иконка поискового фильтра расположена в левой части окна.
С его помощью можно подобрать изделия по таким параметрам:
- Помещение
- Текстура
- Цвет
- Цена
- Вариации
- Износостойкость
- Материал
- Тип поверхности
- Противоскольжение
- Текстура
- Форма
Так же, как и загрузка элементов коллекции, поисковые фильтры работают в динамическом режиме, подгружая данные из складской системы Visma Horizon. Изменения в этой программе динамически отображаются на сайте.

Посадочная страница
Это текстовая страница под целевые задачи. Например, для контекстной рекламы. В ней отображается важная информация о компании для различной целевой аудитории – для строителей, дизайнеров, архитекторов.
Посадочная страница на старом сайте:

Макет посадочной страницы для новой версии сайта:

Наша реализация посадочной страницы:

Контакты
На странице опубликована контактная информация, встроен виджет Google Maps с локацией салона и реализована электронная форма обратной связи.
Страница Контакты на старом сайте:

Макет страницы Контакты для новой версии сайта:

Наша реализация страницы Контакты:

Резюме.
Мы смогли реализовать проект за 2 месяца. Заказчик получил новый сайт с оригинальным дизайном, который в точности соответствовал макетам.
Особенностью данного проекта была интеграция складской системы учета Visma Horizon с каталогом на сайте. Синхронизация данных позволила избежать затрат на оплату труда контент-менеджера. Так как все изменения, произведенные в программе – удаление товара, добавление новых позиций, изменение описания и цены – автоматически отображаются на сайте.