https://evkarn.ru
Лендинг под ключ, Интеграция в CMS MODX

Промосайт «Варенье без сахара»

Посмотреть сайт
Банка варенья, рядом с ней лежат фрукты и ягоды.

Заснята отработка всех элементов сайта - промосайта варенья без сахара.

Дата загрузки: 2019-05-03 00:00:00 +0500

Постер для видео - изображена банка варенья, рядом с ней лежат фрукты и ягоды.

О клиенте:

ООО «ДикоМаркет», г. Тобольск. Компания специализируется на продаже дикоросов из сибирских лесов, а также продуктов, произведённых из них (чай, варенье, орехи, травы и т.д.)

Задача:

Сделать лендинг «под ключ» для нового продукта компании — варенья без сахара на берёзовом соке. Нужно было сделать прототип, отрисовать дизайн, сверстать его и сделать интеграцию в систему управления «MODX».

Целевая аудитория сайта — владельцы розничных точек продаж или магазинов.

Инструменты:

  • Адобэ Иксди
  • Редактор Крита
  • Редактор Инкскейп
  • ХТМЛ
  • ЦСС
  • Бутстрап
  • Джаваскрипт
  • Джейкуери
  • Гулп
  • Сасс
  • Модэкс

Процесс

Изображение прототипа лендинга

Прототип сайта

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

В хедере заголовок рассчитанный на целевую аудиторию чётко рассказывающий, что за товар представлен на сайте. Также показаны три основные преимущества для возможных партнёров.

На втором блоке преимущества расписаны более широко и полно.

На третьем блоке идёт сегментация по видам возможных партнёров.

Четвёртая секция показывает преимущества от партнёрства с компанией — рассказывается, что получает партнёр с каждой партией товара.

В пятой секции посетитель знакомится с самим товаром, узнаёт о его преимуществах, смотрит фотографии в галерее.

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

Седьмая секция подтверждает качество товара с помощью фотографий призов с различных выставок.

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

Девятая и десятая секции оговаривают виды доставки и оплаты.

В подвале указаны контактные данные и карта.

Первая секция лендинга — тематическое фоновое изображение, меню, логотип и торговое предложение для посетителей

Дизайн

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

Изображение двух секций сайта с иконками и текстами.

Вёрстка по макету

Макет свёрстан с применением сетки bootstrap, из фреймворка подключалась только сетка, чтобы избежать избыточности кода. Вёрстка адекватно работает во всех браузерах, полностью адаптивная и валидная, с применением семантических тегов.

Одна из секций лендинга - расположены карточки с описанием продукта

Интерактив

В процессе работы реализованы простые интерактивные элементы: формы заказа; постраничная навигация; кнопка возврата к верху страницы; кнопки и ссылки; галерея; яндекс карта.

Следующая секция лендинга с галереей изображений и преимуществами продукта.

Анимация

На сайте сделаны лёгкие, приятные анимации — в основном срабатывающие по наведению на элементы — ссылки и кнопки.

Размытое изображение CMS MODX на сайте клиента

Интеграция в CMS MODX

Для интеграции в систему управления сайтом была выбрана CMS MODX — простая, удобная, не слишком требовательная к хостингу. Проведены все основные настройки, сделана базовая поисковая оптимизация.

Сервера, надпись хостинг сайтов

Выгрузка на хостинг

После того как всё было настроено и протестировано на локальном сервере — лендинг выгружен на хостинг клиента.

Результат

Затрачено времени:

28 дней

Бюджет проекта:

Конфиденциально

Отзыв

Фотография клиента
ООО «ДикоМаркет», Компания специализируется на продаже дикоросов из сибирских лесов.

Второй вариант дизайна идеально подошёл для нас. Все работы сделаны в оговоренные сроки. Евгений всегда на связи — консультировует по каждому вопросу. Было приятно сотрудничать.