Сайт для аутстаффинговой компании
Задача
Знакомьтесь, ещё один проект 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.
- Формы. Мы реализовали простую и удобную отправку форм, в результате чего прием данных из форм осуществляется в одну форму, к которой можно легко получить доступ через админку.
Итоги
Грамотный дизайн, качественный контент, современная анимация и высокая функциональность — это тот результат, на который мы рассчитывали. Такой сайт аутстаффинговой компании способен впечатлять не только оформлением, содержанием и скоростью, но и своей эффективностью.
