Консалтинговая компания Nordcore & Swift Technical занимается подбором персонала для крупнейших международных компаний.

Swift Technical занимается подбором и предоставлением персонала, временного и постоянного, и технико-консультационными услугами. Nordcore — карьерным консультированием B2C и корпоративным обучением B2B.

Клиент пришел по рекомендации своих друзей, Megapolis Pro. Для них мы сделали полноценное медиа и онлайн-магазин по продаже плитки и тротуара.

Результат работ

Разработали сайт, максимально раскрывающий компанию, её направления деятельности и услуги. Проработали имиджевую составляющую и узнаваемый образ.

Нам предстояло сделать презентабельный имиджевый сайт рекрутингового агентства с разделением по направлениям. Показать экспертность и современность за счет визуального языка, отстроиться от конкурентов.

Вводные данные

Нам предоставили несколько брендбуков разной актуальности, несколько сайтов, разные логотипы и внушительные презентации под 100 страниц текста.

У клиента 2 независимых, но родственных бизнеса — он хотел объединить их и презентовать в едином пространстве.

Начало работ

На первой встрече Петр, дизайн-директор, обсудил будущий проект с несколькими ЛПР компании. На листе бумаги накидали примерный прототип и зафиксировали наполнение страниц. С этой информацией и вводными данными проект отправился к дизайнеру, ко мне.

Я принялась разворачивать проект: ознакомилась с брендбуками, вычитала презентации, вникла в бизнес клиента, отсмотрела сайты конкурентов и отрисовала черновой прототип. Далее прототип собирался из скриншотов презентаций, чтобы верно распределить информацию. Созвонилась с клиентом, показала прототипы, согласовали — перешли на этап концепции.

Холдинг

Помните, что у клиента два бизнеса, которые он хочет объединить? На этапе прототипа я поняла, что объединить их можно в холдинг. Так на сайте появились три раздела: «Холдинг», Swift Technical и Nordcore.

Для холдинга я придумала отдельный логотип — фиолетовый с синим. У ST он оранжевый с синим, а у Nordcore — зеленый с синим. Далее синий, голубой и фиолетовый выступили общими и объединяющими цветами в проекте.

Концепция

Из всего увиденного и скомпонованного я начала делать концепцию. Основой послужили брендбуки холдинга. И мне, и клиентам они очень понравились, поэтому старались сделать максимально близко к нему.

Однако, для сайта решила добавить некоторые универсальные элементы, привычные для веб-пространства. А более декоративные элементы, свойственные презентациям и плакатам, убрала.

Основных концептов главной было два. Либо мы показываем на первом экране сразу разделение по компания и услугам, и остаемся более официальными. Либо мы на первом экране показываем фотографии рабочих из разных сфер, чтобы создать более доверительные и теплые отношения с пользователем, а услуги переносим на второй экран.

На созвоне мы коллективно выбрали более дружелюбный вариант. После я откорректировала его и приступила к дизайну.

Дизайн

На этапе дизайна сначала полностью отрисовала главную страницу, окнули её с ЛПР и пошли дальше, покорять оставшиеся страницы. Всего их вышло 16: 8 уникальных и 8 типовых. А также не забыла про всплывающие окна, рекламные блоки, UI kit и мобильную адаптацию.

Разработка и правки

Далее последовала сложная разработка с наложением экранов друг на друга (и под друга) и с кучей летающих треугольников. Разработчик Данил негодовал, сталкивался с трудностями отображения анимации и эффектов в разных браузерах.

От некоторых эффектов пришлось отказаться, например от прозрачных стеклянных всплывающих окон. Сделали их однотонными. Шум с треугольников также убрали, чтобы в браузере Safari все корректно отображалось.

По факту все проблемы были и остаются только с нативным браузером от Apple. Наверное, через несколько лет мы уже выучим все его косяки и будем уворачиваться от них, как Нео из «Матрицы» от пуль.

А пока что у нас в команде существует 3 этапа контроля проектов: сначала всей командой отсматриваем каждый блок и каждый элемент по окончанию дизайна, затем после верстки смотрим сами и даем на проверку коллегам по цеху, а в конце проверяем все после наполнения сайта. Правки от нашей команды и от коллег отправляются в большой гугл-документ со скриншотами.

Факап со страницей 404

Я задумала красочную 404 страницу с крутящимся диско-шаром, его радужным свечением, а также с музыкой. У меня проблем никаких не было. А вот разработчик знатно попотел.

Сначала возникли проблемы с воспроизведением музыки. Браузеры запрещают проигрывать музыку без ведома пользователя. Вы должны совершить какое-либо действие для того, чтобы музыка заиграла.

Окей, я отрисовали проигрыватель, как у «Яндекс.Музыки» или «Спотифай». Далее оказалось, что на маленьких экранах его не видно, так как он находится в нижнем левом углу. Хорошо, мы его прикрепили к низу экрана. Музыка играет, на всех мониторах видно, даже анимация воспроизведения есть.

Пошли тестить анимацию радужного диско-шара в разных браузерах. Везде все было хорошо, но Safari отказался плавно проигрывать вообще ВСЮ анимацию на странице. А вся анимация была в формате gif...

Как оказалось, Safari некорректно работает с gif форматом еще с 2008 года. 15 лет Apple не могут починить gif-анимацию, отчего она дергается и зависает.

Мы пытались перевести gif в mp4, но mp4 с прозрачным фоном весит, как целый самолет. В итоге мы просто убрали анимацию для браузера Safari.

Нативные пользователи Apple, извините нас, пожалуйста. Никакого вам диско-шара с радугой.

Котиков в массы

Веселье на странице 404 не закончились. Поняв настроение и вайбы заказчика, я нашла, куда еще можно вставить прикольчик.

На сайте есть раздел с вакансиями, похожий на hh.ru, с фильтрами, поиском и карточками. Но также у этой страницы может быть пустое состояние, когда пользователь ищет вакансию, которой на сайте нет.

Именно в этот момент мы скрасим негодование пользователя мемом с котиком, который тоже ищет работу.

Заключение

Проект получился довольно ярким, выделяющимся на фоне других консалтинговых агентств. Однако, заигрывая с летающими треугольниками, диско-шарами и котиками, мы не забывали про удобство пользования сайтом.

Уверены, что Swift Technical & Nordcore теперь будут получать в разы больше заявок с сайта. Обязательно попросим у них метрики спустя время❤️‍🔥