Разработка фирменного стиля и лендинга для «ОЗЕЛЕНИ»

Главное о кейсе

Сделали очень крутой проект с очень ограниченным бюджетом.

Бизнес-задача и ее решение

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

Прочая информация о кейсе

Клиент
«Озелени» — студия озеленения всех видов и форматов: искусственное и живое озеленение, разработка фитодизайна, реализация ландшафтного дизайна, декор, интерьерная флористика.

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

Студия уже 5 лет на рынке озеленения, реализовала более 223 проектов в 25 городах, наладила отличные отношения с поставщиками из Китая, питомниками из Нидерландов и Краснодарского края, чтобы предложить не только приятную цену и быстрые сроки доставки, но и отличное качество товаров и услуг.

Предыстория
Анастасия, основатель «Озелени», начинала свой путь с работы по франшизе под чужим брендом, но со своей командой, материалами, опытом и подходом.

За несколько лет Настя озеленила: отель MARRIOTT, бургер-бар и кафе в парке «Краснодар», сеть бутиков «EXCELSIOR», event-агентство и ещё вагон и маленькую тележку помещений и прилегающих территорий.

Наконец, настал тот день, когда Анастасия решилась открыть свою студию.

Цель
Упаковать новую студию озеленения: придумать название, базовый фирменный стиль, разработать лендинг. Уместить всё это в очень узкий бюджет.

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

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

Аналитика
Чтобы быстро, но хорошо сделать структуру блоков сайта, нужно как следует погрузиться в контекст бизнеса клиента, после чего повысить уровень «насмотренности» на дизайн, сайты, стратегию и упаковку других компаний в исследуемой отрасли.

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

В результате имеем: подробную структура лендинга со скриншотами и ссылками на примерное устройство и внешний вид блока; менеджера проекта, способного отличить хорошего озеленителя от плохого, и аргументировать свой выбор. Едем дальше!
Проектирование
К проектированию этого сайта дизайнера мы не привлекали по нескольким причинам:

-стилизовать прототип не было ни возможности, ни смысла, т.к. не было ни названия, ни логотипа, ни фирменных цветов;
разработкой управлял опытный менеджер, который тоже умеет в проектирование интерфейсов;
-привлечение дизайнера на этой стадии привело бы к выходу из обозначенного бюджета.
Прототип сделали в Balsamiq, показали заказчику, передали на дизайн.
Нейминг и фирменный стиль
Клиент изначально пришёл к нам с желанием назвать студию «Зелёный мир». Разумеется, мы были против такого популярного и банального названия, и обещали придумать лучше. Устроили удалённый мозговой штурм в Discord (все сидели дома из-за пандемии), и почти моментально выдали первый годный вариант: Zelen Dion.

Всем понравилось, и некоторое время это было рабочее название проекта (даже на прототипе сохранилось). Но спустя некоторое время клиент осознал, «Зелин Дион» — это слишком смело, и слишком сложно, поймут не все.

После нескольких дней фонового креатива чей-то мозг выдал «Озелени». Название удачное: призывает к действию «озеленить это», при перестановке ударения удачно делится на «О зелени» и сохраняет общий смысл.

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

В основе визуальной концепции три оттенка зелёного. Дополнительными цветами использованы золотой и белый.

Мы добавили растения везде, где только нашли место (на финальной стадии пришлось некоторые убирать с макета), а для усиления эффекта придумали небольшие детали: переключатели слайдеров и выделение активного раздела в каталоге выполнены в форме листов.
Есть и весьма интересная проблема, которую мы осознали по ходу создания дизайна. Природа несимметрична, а веб-страницы в основе своей имеют абсолютно прагматичную и ровную сетку. Чтобы симметрию «поломать» в тех местах, где это уместно, мы использовали не только графику, но и намеренный сдвиг элементов, которые изначально были ровными.
Адаптивную версию отрисовали только для смартфонов, чтобы минимизировать бюджет на дизайн. Логику адаптации для планшетов описали в техническом задании.

Вёрстка, сборка и админка
Особо рассказывать нечего: заверстали на HTML+CSS, для слайдеров и фильтров использовали JavaScript, добавили все дополнительные иконки для верного их отображения на дисплеях Retina.

Серверная часть разработана на Laravel+OctoberCMS. Сайт очень быстро можно сделать многостраничным, если это потребуется.

Несмотря на то, что сейчас сайт одностраничный, в нём есть всё необходимое для полной презентации компании:

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

Перед релизом заполнили title и description сайта для подобающего вида «Озелени» в поисковой выдаче, установили сертификат и написали редиректы с небезопасной версии сайта на https.

Итоги и перспективы
Руководитель проектов и по совместительству автор этого кейса считает этот сайт одним из лучших лендингов NUTS Digital.

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

Советуем вам не только посетить сайт, но и задуматься о появлении зелени в интерьере собственной квартиры или офиса. Желаем расти и цвести и студии «Озелени», и тебе, дорогой читатель!