Лендинг под ключ, интеграция с Textolite

Продукты пчеловодства «Медовая ферма»

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

О клиенте:

ООО «Медовая Ферма», занимается производством и продажей продуктов пчеловодства.

Задача:

Разработать лендинг по продаже мёда и других продуктов пчеловодства — сделать прототип (текст, структура), отрисовать дизайн, сверстать и интегрировать в вёрстку CMS Textolite.

Что сделано:

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

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

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

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

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

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

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

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

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

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

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

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

После хедера показаны три преимущества продуктов компании.

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

Далее идёт галерея с изображениями продуктов. Ниже ещё несколько преимуществ компании.

Далее призыв к действию и отзывы клиентов.

На следующем развороте схема работы компании и сертификаты.

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

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

Дизайн

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

Моноблок на экране которого открыть редактор кода и написан код программы.

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

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

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

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

Интерактив

В процессе работы реализованы простые интерактивные элементы, сопутствующие подобным лендингам, например: формы заказа и карта.

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

Анимация

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

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

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

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

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

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

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

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

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

Посмотреть работу сайта: перейти

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

10 дней

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

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