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

Уникальные диваны ручной работы — ООО «Люкс-Диван»

Посмотреть сайт
Комнатка, диванчик, люстра, рядом столик.

Заснята отработка всех элементов сайта - лендинга по изготовлению уникальных диванов ручной работы.

Дата загрузки: 2018-03-18 00:00:00 +0500

Постер для видео - изображена комнатка, диванчик, люстра, рядом столик.

О клиенте:

ООО «Люкс-Диван» — компания специализируется на производстве уникальных диванов ручной работы.

Задача:

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

Что сделано:

Разработка прототипа (структуры страницы): расположение элементов, тексты.

Наложение дизайна на прототип.

Вёрстка лендинга.

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

Примечание:

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

В качестве админки использовалась Система управления статическим сайтом «Textolite» — позволяет менять все изображения и тексты на странице.

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

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

Процесс

Прототип лендинга — создание структуры сайта.

Прототипирование

Разработал прототип лендинга. Показал расположение всех элементов: тексты; изображения; другие элементы.

Дал пояснение по отработке будущих анимаций элементов.

Согласовал с заказчиком.

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

В секции «Что мы предлагаем» описываются главные преимущества компании.

Изначально заказчику было предложено расписать каждый из пунктов более подробно, используя фотографии с реального производства — дизайнерский отдел, производственный отдел (изготавливающий диваны), сфотографировать материалы из которых изготавливаются диваны и т.д.

Но в итоге этот вариант был отклонен и принято решение использовать более упрощенную схему, хотя в современных реалиях она работает в разы хуже!

Секция «Акция» — предлагает посетителю сделать заявку прямо сейчас за дополнительные бонусы. В качестве дедлайна использован таймер.

Изображение клубной карты может отличаться от текущего.

Секция «Клиенты о нас» содержит два последних отзыва от клиентов.

В таком виде отзывы также работают слабо — изначально было предложен вариант со ссылками на отзывы в социальных сетях, что доказывало бы их реальность и увеличивало ценность в глазах посетителя. В итоге его было решено использовать для А/В-теста.

Далее идёт секция описывающая процесс заявки — стандартная секция, но всё же решено было её оставить.

Далее секция с формой заявки. Дизайн выполнен в основных оттенках сайта — смотрится привлекательно на белом фоне.

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

Следующая секция для отправки вопросов и сообщений — чисто контактный вариант формы.

Футер в стандартном стиле — карта, контактные данные, ссылки на документы и копирайт.

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

Дизайн

Для дизайна использовались три основных цвета: тёмно-серый; тёмно-синий; и акцентный жёлтый. Разработан простой логотип, который использовался только на этом лендинге.

Ноутбук с кодом программы, иконки картинок, плееров, CMS.

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

Сайт верстался с применением сетки bootstrap. Из фреймворка подключалась только сетка, чтобы избежать избыточности кода.

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

Одна из секций лендинга с акцией и таймером

Интерактив

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

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

Анимация

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

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

Название CMS Textolite и описание, говорящее, что эта CMS для статических сайтов

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

Лендинг редактируется с помощью системы управления статическими сайтами Textolite.

Эта CMS ориентирована на небольшие сайты и идеально подходит для редактирования информации на лендинге.

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

Изображения дата-центра - много серверов

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

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

Результат

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

4 дня

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

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