✔ С первого экрана представить TOPIAR и миссию организации «Щаслива країна»
✔ Показать четыре направления: проектирование, поставку и высадку растений, озеленение крыш и освещение участка
✔ Убедить реализованными объектами — от частных домов до жилых комплексов и коммерческих объектов
✔ Познакомить с командой и цифрами компании
✔ Вести посетителя к заявке на бесплатную консультацию
✔ Делиться опытом в блоге
Ландшафтные работы покупают глазами: прежде чем звонить, человек хочет увидеть сады, террасы и крыши, которые компания уже сделала, и понять, кто за ней стоит. TOPIAR нужен был сайт, который показывает работы крупно, объясняет четыре направления компании и ведёт к заявке на бесплатную консультацию.
Я сверстал главную и внутренние страницы на крупных фото с чёрно-белой палитрой и зелёным акцентом и сделал упор на движение: анимированы первый экран, блок «Місія», цифры компании, портфолио, отзывы, блок призыва и контактная форма, а услуги раскрываются при наведении — меняется фото и появляются описание и кнопка.
В итоге у компании сайт из десяти типов страниц: главная, услуги и карточка услуги, портфолио с фильтром и карточка объекта, блог и статья, «Про нас», контакты и политика конфиденциальности — и на каждой странице есть короткий путь к консультации.
Сайт, на котором работы компании видны крупно, а каждый блок оживает при прокрутке и наведении.
Первый экран, миссия, цифры, портфолио, отзывы, блок призыва и форма появляются с анимацией
Наведение на название услуги меняет фото и открывает описание с кнопкой
Все работы, коммерческие объекты, жилые комплексы и частные дома — с пагинацией
Об объекте, команда, площадь, статус и ход работ; преимущества и описание услуги
Лента статей с фильтром по категориям и статья с оглавлением
Блок призыва на внутренних страницах и форма с согласием на обработку данных
Крупные фото работ, живые анимации и короткий путь к заявке: посетитель видит, что умеет компания, и сразу может попросить консультацию.
Сайт решает несколько основных задач:
Ответ гарантированно в течение 24 часов.
Первая консультация бесплатна и ни к чему не обязывает.
Сайт ландшафтной компании продаёт прежде всего картинкой: живые сады, зелёные крыши и подсвеченные дорожки убеждают лучше любого списка услуг. На примере TOPIAR рассказываю, как я сделал корпоративный сайт с анимированной главной, раскрывающимися услугами, портфолио с фильтром по типам объектов и формами заявки.
TOPIAR — ландшафтная компания из Киева. Она проектирует участки, поставляет и высаживает растения, озеленяет крыши и делает ландшафтное освещение. На сайте компания выступает вместе с общественной организацией «Щаслива країна», которая продвигает простую идею: среда вокруг дома влияет на здоровье, настроение и качество жизни, а продуманный участок — это не роскошь, а нормальные условия для жизни. О себе компания говорит цифрами: 13 лет на украинском рынке, 150 клиентов по всей стране, 120 специалистов в команде и 500 реализованных проектов.
Ландшафтные работы выбирают глазами. Прежде чем позвонить, человек хочет увидеть сады, террасы и крыши, которые компания уже сделала, понять, чем она занимается и кто в ней работает. Поэтому задача сайта — показать работы крупно, коротко объяснить четыре направления, вызвать доверие командой и отзывами и с любой страницы привести посетителя к заявке на бесплатную консультацию. Сайт сделан на украинском языке.
Шапка — тёмная полоса с логотипом TOPIAR и меню: «Головна», «Портфоліо», «Проєкти», «Блог», «Про нас», «Документи», «Контакти». Под ней — фото современного дома с террасой и подсветкой, а в центре кадра круглая «линза» с названием организации и кнопкой «Зв’язатись з нами». По сторонам от неё — две подписи с тонкими линиями-выносками: тип организации и её главная мысль о том, как важно менять среду вокруг себя. Первый экран анимирован, а на внутренних страницах свою анимацию получает и верхний блок с заголовком.
Сразу за ним — блок «Місія»: крупный заголовок, короткий текст о том, что организация продвигает идеи современного и разумного благоустройства, и линейная графика — круги и пересекающиеся линии в фирменном зелёном. Блок тоже анимирован, а на странице «Про нас» так же оживают блоки миссии и визии.
Блок «Послуги» — широкая лента из четырёх фото, разделённых тонкими вертикальными линиями. Внизу каждой колонки — название направления:
Главная особенность блока — поведение при наведении. Стоит навести курсор на название услуги, как фото меняется, а поверх появляются описание направления и кнопка перехода. Например, о ландшафтном освещении сказано, что специалисты компании проектируют, собирают и монтируют его в Киеве, в том числе на больших участках и в нестандартных задачах. Так в одном блоке помещаются четыре коротких рассказа, а страница остаётся лёгкой. Под лентой — ссылка «Всі проєкти» на страницу всех услуг.
Блок «Про нас» стоит на светлом фоне с тонким орнаментом: широкое фото цветущего сада, а поверх него полупрозрачная карточка с текстом о команде энтузиастов, которые хотят сделать жизненное пространство украинцев удобнее, и кнопкой «Зв’язатись з нами». За ним — четыре цифры компании крупным зелёным шрифтом: 13 лет на рынке, 150 клиентов, 120 специалистов и 500 проектов. Цифры анимированы и оживают, когда блок появляется на экране.
Дальше — тёмный блок «Блог»: три карточки статей с фото, заголовком, датой и анонсом и ссылка «Всі статті». После него — зелёная карточка «Замовити безкоштовну консультацію» с кнопкой на фоне светлых силуэтов трав. Этот блок призыва тоже анимирован и повторяется на внутренних страницах, поэтому дорога к заявке всегда рядом.
Портфолио на главной — тёмная секция с тремя проектами: два кадра в верхнем ряду и широкий снимок под ними, у каждого — название объекта на светлой плашке. Блок анимирован, а ссылка «Всі роботи» ведёт на страницу портфолио. Следом — «Наша команда»: слайдер с фотографиями сотрудников в фирменной форме, именами и должностями, который листается стрелками.
Отзывы клиентов стоят на фото аллеи из подстриженных кустов: две полупрозрачные карточки с иконкой кавычек, текстом и именем автора. Завершает главную блок «Зв’яжіться з нами» — зелёная карточка с полями «Прізвище», «Телефон», «Email» и «Повідомлення», отметкой согласия на обработку персональных данных и чёрной кнопкой. Форма, как и отзывы, появляется с анимацией.
Внутренние страницы начинаются с тёмного верхнего блока с заголовком, коротким вступлением и той же линейной графикой. Страница услуг — сетка карточек с фото и названием. Страница «Наші роботи» устроена так же, но над сеткой стоит фильтр по типам объектов:
Активная вкладка подчёркнута зелёным, под сеткой — пагинация со стрелками. Ниже на странице — отзывы и блок бесплатной консультации, чтобы посетитель, который посмотрел работы, мог сразу оставить заявку.
Карточка объекта рассказывает о проекте подробно: блок «Про об’єкт», команда, которая над ним работала, площадь, статус и описание хода работ. Карточка услуги открывается большим фото с названием, дальше идут вступление и список с иконками, три преимущества — «100% виконання побажань клієнта», «Завжди доступність онлайн», «Поліпшується якість життя» — и раздел с описанием, где фото и текст чередуются в шахматном порядке.
В блоге статьи можно отфильтровать по рубрикам, у каждой карточки есть фото, дата и анонс. Страница статьи — заголовок, дата, текст с подзаголовками и оглавление. Страница «Про нас» рассказывает о миссии и визии организации, контакты собраны на отдельной странице, а политика конфиденциальности включает дату последнего обновления и разделы о файлах cookie. В подвале — логотип, меню с картой сайта, иконки соцсетей и ссылка на политику.
Ландшафтные услуги дорогие и долгие, и клиент выбирает подрядчика очень придирчиво. По опыту этого проекта сайт такой компании работает, когда:
Если вы занимаетесь благоустройством, озеленением или строительством, начните сайт с вопроса, что клиент хочет увидеть до звонка. Чаще всего это готовые объекты, понятные услуги и люди, которые будут работать на его участке. Тогда сайт станет не визиткой, а витриной, которая приводит заявки.
