Сайт для аутстафінгової компанії
Завдання
Знайомтеся, ще один проект Webnauts – компанія IOD (Intellectual Outstaffing & Development), яка надає послуги аутстафінгу та аутсорсингу. І яка вкрай потребувала сучасної та зрозумілої платформи.
- Навіщо? Щоб продавати послуги IT-фахівців.
- Для кого? Для західних компаній, які хочуть швидко найняти потрібного спеціаліста і не помилитися з вибором.
Відповівши на ці запитання, нам вдалося створити зручний та практичний сайт, який якісно презентує (а отже, продає) IT-команду та закриває проблеми клієнтів.
Як ми це зробили? Докладніше — у нашому кейсі.
Дизайн інтерфейсу
Головний скарб аутстафінгової компанії – це її команда, а якщо команда родом із України – це мрія будь-якого західного клієнта. Адже не секрет, що українські айтішники — одні з найбільш затребуваних фахівців через високий професіоналізм і невисокий рівень претензій на оплату, чого не можна сказати про їхніх колег зі США та Європи. Через російську агресію сфера українського IT опинилася у важких умовах, але не перестала викликати інтерес і привертає ще більшу увагу світу. Тому головним завданням дизайнерів було з першого екрану познайомити гостей сайту із командою потенційних виконавців: IT professionals from Ukraine.
Call to Action (CTA) або заклик до дії
Ще однією з важливих переваг аутстаффінг є економія часу клієнта на пошук ідеального співробітника. На сайті про це говорить слоган, кричить кнопка та закликає до перегляду галерея з кандидатами, причому з першого екрану. При цьому дизайн зовсім не перевантажений: тут багато повітря і все зрозуміло навіть для тих, хто нічого не розуміє в аутстафі та аутсорсі:
Мегаменю для навігації
Другий екран пропонує більш широкі можливості для пошуку співробітника як за окремим напрямом («Profession»), так і за конкретною технологією («Technology»). А все завдяки зрозумілій навігації пошуку у вигляді мегаменю із двома розділами. Так, блок з IT-напрямками ми представили у вигляді невеликої таблички із 4 пунктів, кожен із яких підв’язаний до галереї фахівців.
Перелік технологій набагато ширший, тому ми відмовилися від громіздкого вертикального списку та розмістили категорії рядково, додавши кнопку «See more». Такий прийом набагато ефективніший з погляду зовнішнього вигляду та зручності навігації:
Фільтр пошуку на сайті
Клік на кнопку “See all” або на будь-яку з технологій переносить користувача на сторінку “Specialists”, де можливості пошуку співробітника ще ширші за рахунок додаткових фільтрів, таких як “Specialization”, “Experience”, “English level” та “Available” у вигляді повзунка:
Список, що розкривається
Наступний блок знайомить гостей сайту із послугами компанії. Ми оформили його у вигляді лаконічного списку зі стрілками попереднього перегляду. Цей прийом спрощує інтерфейс, зосереджуючи увагу на важливому, але за бажання дозволяє легко отримати доступ до інформації та в один клік розкрити додаткові відомості:
Сторінка про компанію
Блок «About us» дозволяє дізнатися більше про компанію IOD. Тут текст підкріплюється фотографією та великими цифрами у найкращих традиціях швейцарської типографіки. Велика кнопка закликає познайомитися з компанією ще ближче та переносить користувача на окрему однойменну сторінку:
Чи не UX єдиним
Наступний екран більше про UI, а не UX, і є яскравим та логічним продовженням блоку «About us». Якщо раніше головну роль на сайті грав білий колір, утворюючи «повітря» між елементами, а синій лише надавав акценту, то тут синій колір задає тон всієї композиції. Він асоціюється з надійністю, безпекою та довірою, що чудово характеризує компанію. Крім того, синій колір з ясної причини дорогий кожному члену команди, і разом з біжучим рядком «Glory to Ukraine» ще раз підкреслює приналежність компанії до України:
Список у таблиці
Блок «Outstaffing benefits» у вигляді лаконічної таблиці розкриває переваги аутстафінгу на прикладі співпраці з компанією IOD:
Оформлення заявки на команду
Наступний блок пропонує клієнтам найняти готову команду для проекту: чи то сайт, мобільний додаток, індивідуальний дизайн або комплексне просування. Клієнт може отримати команду, яка виправдала себе на ділі, лише в один клік:
Форма зворотного зв’язку
Футер, або підвал сайту традиційно представлений формою заявки, лаконічним вертикальним меню та контактними даними.
Сітка в дизайні
В основу дизайну сайту ми поклали нестандартну 16-колонну сітку з двома направляючими, згідно з якою розташовані всі блоки та елементи інтерфейсу. Весь контент ділиться на 2 половини (ліворуч заголовок, а праворуч – основний текст), завдяки чому набагато простіше сприймати інформацію. Також у композиції простежується ритм за рахунок чергування заголовків (то ліворуч, то по центру), що надає інтерфейсу своєрідну динаміку:
Ось так дизайнери внесли ясність у модель аутстафінгу за допомогою візуальної мови та звели досить складну форму трудових відносин до простого та привабливого сервісу.
Текстове наповнення сайту
Торкнувшись візуальної мови ми не можемо не торкнутися текстового змісту. Адже якщо завдання гарного дизайну переконати користувача затриматися на сайті, то завдання якісного контенту переконати його купити. Адже потенційний клієнт зрештою перейде від сканування сайту до його вивчення.
Копірайтери Webnauts постаралися зробити так, щоб сайт аутстаффінгової компанії був не тільки зручним у використанні, а й доступним для розуміння. Знайомлячись із платформою, користувач спочатку може звернути увагу на влучні заголовки і таким чином розібратися з навігацією, а потім перейти до лаконічних та простих текстів.
Доступний зміст кожної сторінки дозволяє користувачеві швидко вникнути в тематику сайту, легко розібратися з умовами та перевагами, підвищити довіру до компанії та скористатися послугами аутстафінгу.
Верстка інтерфейсу
Там, де закінчується дизайн, розпочинається фронтенд-розробка.
HTML, CSS и JavaScript — три стовпи фронтенда, на яких стоїть інтерфейс користувача. За допомогою цих мов ми перетворили дизайнерські макети на відчуваний веб-продукт.
Для того, щоб спростити та структурувати код, ми використали своєрідне розширення CSS – препроцесорну мову сценаріїв Sass та його синтаксис SCSS. А застрахувати код від помилок та зробити так, щоб сайт справно працював, нам допомогла система контролю версій Git (Global Information Tracker).
Однак, це ще не все. За основу фронтенд-розробки було взято JavaScript-фреймворк Vue.js, а також Vue.js-фреймворк Nuxt.js. Дані технології дозволяють створювати потужні веб-програми для Vue.js, серед яких Alibaba, GitLab, 9Gag, а тепер і сайт компанії IOD.
Крім того, у розробці клієнтської частини платформи ми застосували такі бібліотеки як:
- Vuex — для керування станом та зберігання даних сайту.
- Vue router — для синхронізації URL-адреси сайту з відображуваною веб-сторінкою.
- vuejs-paginate — для розбиття сайту на сторінки.
- vue-click-outside — для реагування на кліки поза елементом інтерфейсу (у нашому випадку це діалогове вікно з формою заявки):
- nuxt/i18n — для адаптації програми під мову користувача.
- cookie-universal-nuxt — для встановлення, отримання та видалення файлів cookie.
- nuxtjs/svg-sprite — для завантаження файлів SVG на сторінки сайту на Nuxt.js.
- nuxt-ssr-screen-size — для керування розміром екрана між адаптивною та десктопною версією.
- v-scroll-lock — для блокування прокручування сторінки сайту при відкритому модальному вікні:
- Swiper — для реалізації сенсорного слайдера.
Завдяки модулю Nuxt Sitemap ми створили карту сайту – важливий документ із точки зору SEO. Він містить список всіх веб-сторінок і допомагає пошуковим роботам сканувати веб-сайт.
Анімація
Анімація продовжує залишатися одним із головних трендів у веб-розробці. У своїх роботах ми застосовуємо ненав’язливі ефекти, але у цьому проекті ми зробили ставку на особливу розміреність.
Мінімалістичний курсор і плавна поява кожного елементу при скролі неспішно направляють користувача сторінками, щоб як слід познайомити з командою, умовами та перевагами. Така анімація, як би хапаючи за рукав, дозволяє клієнту уникнути помилок та зробити правильний вибір, тим самим викликаючи інтерес та довіру. Крім того, використання анімації підтверджує інноваційність сервісу і той факт, що відвідувач має справу саме з IT-компанією.
Для створення анімацій ми використовували JavaScript-бібліотеку GSAP (GreenSock Animation Platform), зокрема, і для плавної появи блоків та ліній, що розділяють контент:
Анімаційний курсор
Ковзаючий декоративний курсор у вигляді контурного кола при наведенні на посилання збільшується і змінює колір. Такий ефект був реалізований за допомогою JavaScript та функції лінійної інтерполяції:
Анімація при наведенні
Ефект зміни кольору при наведенні курсору підвищує залучення користувача і дозволяє сфокусувати його увагу на контенті всередині карток:
Ефект слайдера
При наведенні на фото з’являється ефект слайдера і викликає картку з короткими відомостями про спеціаліста, а при натисканні на неї користувач переходить на окрему сторінку з детальним резюме. Цей ефект ми реалізували за допомогою CSS:
Ефект біжучого рядка
Ми вже торкалися цього графічного прийому, який привертає увагу користувачів ще з часів старих добрих 90-х. І знову біжучий рядок увірвався не тільки в тренди веб-дизайну, але й у наш новий проект IOD. Ми реалізували ефект біжучого рядка за допомогою бібліотеки vue-marquee-text-component і тим самим підвищили інтерактивність сайту:
Адаптивність
Ми повністю взяли дизайн під контроль та адаптували макети так, щоб сайт органічно виглядав на екрані будь-яких типів пристроїв. Іноді адаптив вимагає спрощення або відсікання другорядних блоків або анімацій. Однак у цьому проекті нам вдалося зберегти всі елементи та анімаційні ефекти.
В результаті ми перебудували блоки так, щоб правильно передати зміст та не порушити логіку сайту. Крім того, кожен пункт великий і клікабельний, і поряд з грамотним розміщенням елементів дозволяє без зусиль перемикатися між пунктами та зручно вивчити весь контент, яким би не був розмір дисплея.
Гармонійний дизайн, адаптований під мобільні пристрої, — must have для будь-якого комерційного сайту, адже більше половини користувачів світу заходять на веб-сервіси саме зі смартфонів.
Функціональність сайту
Кожен блок та елемент на сайті повинен підкорятися користувачеві та справно виконувати свою функцію. Над цим завданням неабияк попрацював наш back-end розробник.
Адмінка сайту
Адміністративна панель сайту представлена Laravel Nova від розробників Laravel. Вона має привабливу та зрозумілу панель із зручним керуванням контентом за рахунок кастомізації:
Пакети Laravel Nova
Laravel Nova має величезну кількість плагінів, які розширюють її функціонал. Так, в даному проекті ми використали наступні пакети:
- laravel/telescope — для налагодження фреймворку Laravel та відстеження роботи сайту.
- protonemedia/laravel-cross-eloquent-search — для пошуку за декількома моделями сайту.
- classic-o/nova-media-library — для управління медіафайлами.
- digitalcloud/multilingual-nova — для перемикання мови сайту.
- dillingham/nova-attach-many — для зручного редагування пов’язаних моделей.
- eminiarts/nova-tabs — для угруповання деталей та взаємозв’язків у вкладки.
- optimistdigital/nova-multiselect-field — для додавання множинного вибору до арсеналу полів Nova.
- optimistdigital/nova-sortable — для зміни порядку моделей за допомогою перетягування.
- whitecube/nova-flexible-content — для гнучкої генерації контентних блоків.
- wehaa/inline-boolean-field-update — для заповнення та оновлення полів чекбоксу в режимі онлайн.
- waynestate/nova-ckeditor4-field — для редагування текстових областей.
База даних
Після встановлення всіх плагінів ми взялися за створення складної клієнт-серверної архітектури сайту — бази даних та необхідних для сайту модулів:
- Каталог спеціалістів із фільтрами. Щоб клієнт бачив не тільки красивий, але і швидко працюючий фільтр пошуку, ми проробили серйозну роботу і грамотно структурували величезну базу даних із різними видами зв’язків (один до багатьох і багато до багатьох). Найскладнішою стала реалізація зв’язків «фахівець – спеціалізація», «фахівець – досвід» та «фахівець – технології» (багато до багатьох). В результаті в адмін-панелі сайту з’явилася можливість легко та швидко створювати нові сторінки, керувати даними фахівців, а також пов’язувати спеціаліста з професією, спеціалізацією, досвідом, технологіями та рівнем англійської мови.
- Статичні сторінки. Ми створили сторінки «About us», «Contacts» та «Teams», а також налаштували керування вмістом контентом через адмінку сайту.
- Команди. В адмін-панелі сайту можна створювати команди та керувати ними, зокрема додавати та об’єднувати фахівців у групи.
- Головна сторінка реалізована з динамічним висновком фахівців, мінікаталогу та блоку з IT-командами.
- SEO-модуль. На всі сторінки сайту ми додали SEO-дані та реалізували генератор SEO-сторінок для каталогу з фільтрами. Всі комбінації фільтрів у каталозі мають унікальні SEO-дані, що автоматично генеруються: слаг, title та description.
- Форми. Ми реалізували просте та зручне відправлення форм, внаслідок чого прийом даних із форм здійснюється в одну форму, до якої можна легко отримати доступ через адмінку.
Підсумки
Грамотний дизайн, якісний контент, сучасна анімація та висока функціональність – це той результат, на який ми розраховували. Такий сайт аутстафінгової компанії здатний вражати не лише оформленням, змістом та швидкістю, а й своєю ефективністю.
