GreenScape — ландшафтный дизайн и озеленение
// Цель
Перевести услугу, которую обычно обсуждают на участке, в понятный сайт-каталог: что входит в работу, сколько занимает по времени, как посчитать стоимость.
// Задача
Спроектировать сайт услуг со сроками и расчётом стоимости и одновременно собрать UI Kit, чтобы страницы можно было наращивать без потери консистентности.
Реализация
У ландшафтных компаний обычно нет ни цен, ни сроков — только «рассчитаем индивидуально», и посетитель уходит. Мы вынесли в каждую карточку услуги срок и кнопку расчёта стоимости: ландшафтное проектирование от 20 дней, озеленение территории от 15, установка систем полива и вертикальное озеленение от 7. Ниже — блок реализованных проектов и пошаговое описание работы, начиная с консультации и сбора информации.
Параллельно с макетом собрали UI Kit — он и стал главной ценностью проекта. В нём типографика на Manrope с четырьмя уровнями (заголовок 32 extrabold, подзаголовок 24 bold, основной текст 16 regular, второстепенный 12 regular), палитра с закреплённой ролью каждого цвета: #323232 под заголовки и основной текст, #D8E4BE и #D9D9D9 под кнопки и плашки, #97A371 под обводку и акценты.
Отдельно прописаны все состояния интерактивных элементов — default, hover, press, disabled — для кнопок и полей ввода, зафиксированы правила сетки и паддинг 40 со всех сторон, а также правило выравнивания заголовка первого уровня по правой стороне. Компонент формы заявки вынесен отдельным элементом библиотеки.
Этапы реализации
Каталог услуг со сроками
Четыре услуги, у каждой состав работ, срок от 7 до 20 дней и кнопка расчёта стоимости вместо «уточняйте индивидуально».
Реализованные проекты
Блок с примерами работ — озеленение частного сада в современном стиле — как доказательная часть перед заявкой.
Процесс работы
Пошаговое описание, открывающееся консультацией и сбором информации, чтобы снять неопределённость по началу проекта.
Типографика UI Kit
Manrope с четырьмя уровнями: заголовок 32 extrabold, подзаголовок 24 bold, основной текст 16 regular, второстепенный 12 regular.
Палитра с ролями
Шесть цветов с закреплённым назначением: #323232 под текст, #D8E4BE и #D9D9D9 под кнопки и плашки, #97A371 под обводку.
Состояния и сетка
Default, hover, press и disabled для кнопок и полей ввода, правила сетки, паддинг 40 и отдельный компонент формы заявки.
Результат
Сайт услуг, где посетитель видит состав работ, срок и путь к расчёту стоимости в каждой карточке, плюс дизайн-система, на которой страницы можно наращивать без разъезжающейся типографики и отступов.
Библиотека закрывает типографику, палитру с закреплёнными ролями цветов, все состояния кнопок и полей, правила сетки и компонент формы заявки.
Другие кейсы
Хотите такой же результат?
Расскажите о задаче — спроектируем, соберём и запустим решение под неё.