ПРОЕКТ 2410

Создание сайта по PSD макету

Коротко.

Сколько исполнителей должно быть в проекте по созданию веб-сайта, чтобы получить ожидаемый результат? Этот кейс о том, как мы реализовали и усовершенствовали разработку сайта на основе готового макета дизайна от другого подрядчика.

В начале 2018 года мы начали сотрудничать с компанией . Успев поработать со сторонними дизайнерами, они смогли предоставить нам оригинальный макет сайта. Мы реализовали проект в полном соответствии с дизайном и улучшили его функциональность.

Обсудим ваш проект?

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

Запрос.

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

Чуть ранее компания сотрудничала с дизайнерами, которые разработали макет будущего сайта в формате PSD (photoshop). В силу определенных причин, одной из которых был большой срок разработки и трудности в реализации динамики, заказчик принял решение найти новых исполнителей.

Для него было важно:

  • Использование готового дизайна (был оплачен и соответствовал его требованиям)
  • Идентичность визуальной части сайта макету
  • Верстка «под ключ» с необходимым функционалом для сайта в короткие сроки

Решение.

Мы не первый раз работаем в таком формате, и все наши проекты были приняты заказчиками как полностью соответствующие поставленным задачам.

В этом проекте мы стали исполнителями, разработав сайт «под ключ» за 2 месяца на базе предоставленных PSD-макетов. Также мы добавили ряд разделов и функциональных доработок дизайна, чтобы результат соответствовал бизнес задачам заказчика.

При верстке сайта мы руководствовались известной концепцией Pixel Perfect. Узнать об этом подходе можно в нашем проекте Разработка сайта на WordPress под ключ.

Результат.

Главная страница

На странице реализованы:

  • Слайдшоу на весь экран с атмосферными фотографиями интерьеров
  • Классификатор продуктов (каталог по типу изделий: ламинат, плитка, паркет, винил, ковры)

Главная страница на старом сайте:

Главная страница на старом сайте компании по продаже напольных и настенных покрытий
Главная страница на старом сайте компании по продаже напольных и настенных покрытий

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

Прототип главной страницы для новой версии сайта компании по продаже напольных и настенных покрытий
Прототип главной страницы для новой версии сайта компании по продаже напольных и настенных покрытий

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

Главная страница на новом сайте компании по продаже напольных и настенных покрытий
Главная страница на новом сайте компании по продаже напольных и настенных покрытий

Каталог продукции

Для каталога продукции мы реализовали интеграцию между сайтом и складской ERP системой Visma Horizon. Менеджеры редактируют наличие товаров, их количество, параметры и цены в складской программе. Все изменения автоматически появляются на сайте в разделе Каталог.

Каждый из 5 разделов - Плитка, Ламинат, Ковры, Паркет, Винил – представлены в 3 категориях:

  • Коллекции
  • Интерьеры
  • Каталог

Страница Каталог на старом сайте:

Страница Каталог на старом сайте компании по продаже напольных и настенных покрытий
Страница Каталог на старом сайте компании по продаже напольных и настенных покрытий

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

Макет страницы каталога для новой версии сайта компании по продаже напольных и настенных покрытий
Макет страницы каталога для новой версии сайта компании по продаже напольных и настенных покрытий

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

Страница каталог для новой версии сайта компании по продаже напольных и настенных покрытий
Страница каталог для новой версии сайта компании по продаже напольных и настенных покрытий

Поисковый фильтр продукции

Иконка поискового фильтра расположена в левой части окна.

С его помощью можно подобрать изделия по таким параметрам:

  • Помещение
  • Текстура
  • Цвет
  • Цена
  • Вариации
  • Износостойкость
  • Материал
  • Тип поверхности
  • Противоскольжение
  • Текстура
  • Форма

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

Поисковый фильтр продукции на сайте компании по продаже напольных и настенных покрытий
Поисковый фильтр продукции на сайте компании по продаже напольных и настенных покрытий

Посадочная страница

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

Посадочная страница на старом сайте:

Посадочная страница на старом сайте компании по продаже напольных и настенных покрытий
Посадочная страница на старом сайте компании по продаже напольных и настенных покрытий

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

Макет посадочной страницы для новой версии сайта компании по продаже напольных и настенных покрытий
Макет посадочной страницы для новой версии сайта компании по продаже напольных и настенных покрытий

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

Посадочная страница сайта компании по продаже напольных и настенных покрытий
Посадочная страница сайта компании по продаже напольных и настенных покрытий

Контакты

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

Страница Контакты на старом сайте:

Страница Контакты на старом сайте компании по продаже напольных и настенных покрытий
Страница Контакты на старом сайте компании по продаже напольных и настенных покрытий

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

Макет страницы Контакты для новой версии сайта для компании по продаже напольных и настенных покрытий
Макет страницы Контакты для новой версии сайта для компании по продаже напольных и настенных покрытий

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

Страница Контакты на сайте компании по продаже напольных и настенных покрытий
Страница Контакты на сайте компании по продаже напольных и настенных покрытий

Резюме.

Мы смогли реализовать проект за 2 месяца. Заказчик получил новый сайт с оригинальным дизайном, который в точности соответствовал макетам.

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

Создание сайта по PSD макету | Веб проект от 2410

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее