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