Уникальные диваны ручной работы — ООО «Люкс-Диван»
Посмотреть сайтЗаснята отработка всех элементов сайта - лендинга по изготовлению уникальных диванов ручной работы.
Дата загрузки: 2018-03-18 00:00:00 +0500
О клиенте:
ООО «Люкс-Диван» — компания специализируется на производстве уникальных диванов ручной работы.
Задача:
Заказчику требовался простой лендинг с возможностью редактирования информации.
Что сделано:
Разработка прототипа (структуры страницы): расположение элементов, тексты.
Наложение дизайна на прототип.
Вёрстка лендинга.
Интеграция в CMS TextoLite.
Примечание:
Для этого лендинга было разработано несколько вариантов дизайна, но у меня сохранился только последний, который полностью устраивал клиента.
В качестве админки использовалась Система управления статическим сайтом «Textolite» — позволяет менять все изображения и тексты на странице.
Инструменты:
Процесс
Прототипирование
Разработал прототип лендинга. Показал расположение всех элементов: тексты; изображения; другие элементы.
Дал пояснение по отработке будущих анимаций элементов.
Согласовал с заказчиком.
В хедере заголовок отражающий суть предоставляемой услуги, тематическая иконка и оффер в виде скидки на доставку. На фоне тематическое изображение.
В секции «Что мы предлагаем» описываются главные преимущества компании.
Изначально заказчику было предложено расписать каждый из пунктов более подробно, используя фотографии с реального производства — дизайнерский отдел, производственный отдел (изготавливающий диваны), сфотографировать материалы из которых изготавливаются диваны и т.д.
Но в итоге этот вариант был отклонен и принято решение использовать более упрощенную схему, хотя в современных реалиях она работает в разы хуже!
Секция «Акция» — предлагает посетителю сделать заявку прямо сейчас за дополнительные бонусы. В качестве дедлайна использован таймер.
Изображение клубной карты может отличаться от текущего.
Секция «Клиенты о нас» содержит два последних отзыва от клиентов.
В таком виде отзывы также работают слабо — изначально было предложен вариант со ссылками на отзывы в социальных сетях, что доказывало бы их реальность и увеличивало ценность в глазах посетителя. В итоге его было решено использовать для А/В-теста.
Далее идёт секция описывающая процесс заявки — стандартная секция, но всё же решено было её оставить.
Далее секция с формой заявки. Дизайн выполнен в основных оттенках сайта — смотрится привлекательно на белом фоне.
Следующая секция с сертификатами на продукцию (в данной вёрстке использованы заглушки) — фото реальных сертификатов отличаются.
Следующая секция для отправки вопросов и сообщений — чисто контактный вариант формы.
Футер в стандартном стиле — карта, контактные данные, ссылки на документы и копирайт.

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

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

Анимация
На сайте сделаны мягкие, приятные для глаз анимации — в основном срабатывающие по наведению на элементы — ссылки и кнопки.
Также присутствуют анимации при отработке галереи изображений.
Интеграция в CMS TextoLite
Лендинг редактируется с помощью системы управления статическими сайтами Textolite.
Эта CMS ориентирована на небольшие сайты и идеально подходит для редактирования информации на лендинге.
К тому же у этой CMS на сайте подробная инструкция по использованию, поэтому мне не пришлось разрабатывать что-то дополнительно.
Выгрузка на хостинг
После того как всё было настроено и протестировано на локальном сервере — произвёл выгрузку проекта на хостинг клиента.
Результат
- Посмотреть работу сайта: перейти
Затрачено времени:
4 дня
Бюджет проекта:
Конфиденциально