Корпоративний сайт консалтингової компанії
Завдання
Міжнародна компанія Enercor, що спеціалізується на управлінні, реструктуризації та розвитку бізнесу, звернулася до нас із завданням розробити корпоративний сайт-візитку консалтингової компанії на WordPress. На момент звернення клієнт уже мав десктоп-дизайн сайту з інфоблоками, що відображають:
- місію та переваги,
- спектр послуг, що надаються,
- склад команди та реалізовані проєкти,
- новини, вакансії та контакти компанії з формою заявки для консультацій.
За нами ж лишалася розробка — необхідно було вдихнути в проєкт життя та презентувати клієнту сучасний, функціональний та адаптивний сайт. Про те, як ми це зробили читайте в нашому кейсі.
Технологічні рішення
При розробці сайту ми використали СMS WordPress — одну з найпопулярніших платформ. Вона гарна тим, що надалі клієнт зможе легко керувати вмістом сайту: додавати вебсторінки та розміщувати текст, зображення та відео навіть без допомоги розробника. Також WordPress дозволяє в майбутньому масштабувати сайт, наприклад, додати блог або інші додаткові можливості.
Верстка сайту
Перед нашим front-end розробником постало завдання перетворити картинки на код за допомогою мов HTML, CSS (з використанням SCSS синтаксису препроцесора Sass) і JS. У роботі також був застосований один із сучасних прийомів верстки — Grid (сітка). У чому його суть? Верстка в сітці дозволяє створювати адаптивні сторінки під будь-який тип пристроїв і грамотно розташовувати елементи на сайті — текст, фото, відео чи будь-який інший HTML-блок:
Цікавою була реалізація модальних вікон на сторінці Projects: при натисканні на кейс картка з інформацією з’являється на екрані в зручному для читання вигляді.
Не менш цікавим було завдання оживити вебсторінки за допомогою анімацій. Наприклад, при скролі сторінки, найменшому русі мишки чи дотику тачпаду можна не на жарт захопитися оригінальним ефектом слідування курсора. Декоративний курсор у вигляді повітряних крапель реалізовано за допомогою JavaScript-бібліотеки GSAP, або GreenSock Animation Platform — популярного набору інструментів для створення скриптової вебанімації:
Front-end розробка зайняла 170 годин з урахуванням правлень від клієнта. Для прискорення роботи та грамотної підготовки проєкту до релізу наш фронтендер використав збирач проєктів Gulp — це інструмент для автоматизації завдань (мініфікації, тестування, об’єднання файлів тощо), написаний мовою програмування JavaScript.
Функціональність сайту
Розробка серверної частини сайту зайняла 126 годин. У ході роботи була реалізована складна структура переходів між розділами через безліч якірних і простих внутрішніх посилань. Це означає, що при натисканні на лінк користувач переходить не тільки на потрібну сторінку, але й на підхожу за змістом її частину:
Так, розділ Services відображає діяльність компанії з перелінкуванням на окремі сторінки, де кожна послуга описується більш докладно:
На сторінці послуг знаходиться блок Expertise із переліком ключових областей, на яких спеціалізується компанія. На цей блок також ведуть однойменні пункти в описі експертизи кожного члена команди. Надалі клієнт планує пов’язати ці пункти ще й із конкретними проєктами компанії.
Розділ Projects являє собою каталог завершених проєктів компанії 2-х типів: із короткою інформацією у вигляді картки та з повним описом кейса у вигляді окремої вебсторінки.
Розділ Team презентує всіх членів команди з фото, коротким описом, експертизою та прив’язкою до міста. Клік на одну з карток переносить користувача на сторінку з більш детальною інформацією, яка містить посилання на профіль LinkedIn і перелік фінансово-економічних видань, де публікувалися експерти:
Розділ Vacancies містить пропозиції компанії про роботу, а також форму з можливістю надіслати резюме навіть за відсутності вакантних місць:
У блоці новин сайту News відображаються публікації у вигляді галереї, підвантажені з профілю компанії в LinkedIn. Можливість вбудовувати цей тип контенту на сайт була реалізована за допомогою агрегатора соціальних мереж Tagembed:
Розділ Contacts містить контактні дані компанії та зручну форму зв’язку з конкретним представництвом:
Для того, чтобы расширить возможности сайта, были использованы такие популярные плагины WordPress:
- Yoast SEO — для управління SEO, який допомагає відвідувачам і пошуковим системам отримати максимальну віддачу від сайту.
- ACF (Advanced Custom Fields) — для повного контролю над екранами редагування та даними кастомних полів.
- CF7 (Contact Form 7) — для керування контактними формами на сайті та гнучкого налаштування вмісту форм і пошти.
- WP Mail SMTP — для виправлення проблем з доставляємості електронної пошти через SMTP (Simple Mail Transfer Protocol) — галузевий стандарт для надсилання електронних листів.
Для захисту сайту від спаму була використана технологія reCAPTCHA v3, встановлена через розширення від вищезгаданого плагіна CF7.
Окрім каталогу плагінів WordPress має широкі можливості для кастомізації — гнучкого налаштування сайту під запити клієнта: зміна макета, додавання різних опцій тощо. Так, наш бекендер додатково створив:
- кастомні типи записів для розділів Team і Projects;
- кастомні таксономії для розділу Services, який так само пов’язаний із розділом Projects, і для блоку з містами, пов’язаними зі співробітниками розділу Team.
В результаті клієнт може самостійно змінювати візуальні елементи сайту: порядок пунктів меню, порядок блоків, проєктів, членів команди тощо.
До речі, пам’ятаєте про наш нестандартний декоративний курсор? Клієнт довго не міг визначитися з його кольором, тому розробник додав до адмін-панелі ще й палітру кольорів для курсора. Тепер його зовнішнім виглядом клієнт зможе керувати самостійно без допомоги програміста.
Адаптивність
Як ми писали раніше, компанія Enercor прийшла до нас із макетами для десктопу. Тому наш фронтендер також подбав про зручність відвідувачів майбутнього сайту, грамотно адаптувавши макети під мобільні пристрої. Якщо ви зайдете на сайт зі смартфона чи планшета, то переконаєтесь, що сприймати текстову та візуальну інформацію буде так само зручно, як і з екрана комп’ютера:
Презентація компанії
Ще одним завданням, але вже для відділу дизайну, стала презентація компанії Enercor. Візуальне оформлення повністю відповідає фірмовому стилю компанії: витримані кольори, шрифти та корпоративна символіка. 28 слайдів пронизані своєрідними елементами у вигляді нейромереж, а весь масив інформації зручно та чітко структурований. Діловий тон оповіді пом’якшений ненав’язливою анімацією, яка дозволяє захопити та утримати увагу аудиторії:
Читайте також:
Редизайн презентації для консалтингової компаніїПідсумки
Готовий проєкт Enercor і наш досвід розробки корпоративного сайту консалтингових послуг на WordPress вкотре доводить, що вебмайданчик міжнародної консалтингової компанії може бути ненудним і гармонійно поєднувати в собі серйозну інформацію з плавною анімацією та захопливими декоративними елементами. Додайте до цього структуровану анімовану презентацію — і ви отримаєте ще один потужний маркетинговий інструмент.
