Промосайт з послуг підбору та аутстафінгу фахівців

Про клієнта

Американський сервіс «ArcHHunter» надає послуги з найму, підбору та аутстафінгу фахівців у сфері дизайну, проєктування та архітектури. Їхні молоді фахівці можуть надавати послуги на умовах часткової або повної зайнятості. Також вони готові консультувати, розробляти та реалізовувати проєкти як онлайн, так і офлайн.

ArcHHunter вперше звернулися до нашої компанії за розробкою сайту. Враховуючи напрямок їхньої діяльності та клієнтуру, до сайту були пред’явлені такі побажання: стриманість, легкість, простота, збалансованість тексту та зображень. Також важливими були можливості подальшого масштабування сервісу – розробки на його основі особистих кабінетів претендента та спеціаліста, каталогу професіоналів тощо.

Завдання

На початку роботи над проєктом у нашому розпорядженні були лише орієнтовні побажання щодо кольору та дизайну: крім базової легкості та простоти, клієнт хотів, щоб сайт був виконаний у сірих тонах. Також було озвучено побажання про впровадження опитувальника в процесі реєстрації заявки, який інтерактивно допомагав краще зрозуміти потреби замовника.

Рішення

Як приклад дизайну був прийнятий запропонований клієнтом малюнок на Wixsite.

Wixsite — це конструктор сайтів. Він дозволяє будь-якій людині, яка навіть не володіє знаннями в області програмування, створити власний сайт.

На основі прикладу від замовника наші спеціалісти розробили власний дизайн сайту, виконаний переважно у сірих тонах. Клієнту було запропоновано прототипи та узгоджено кінцевий результат.

Промо-сайт для сервісу «ArcHHunter» складається з головної сторінки, портфоліо та сторінки кожного реалізованого проєкту. Також ми інтегрували короткий та лаконічний опитувальник для кращого розуміння потреб замовника.

Реалізація проєкту

Сайт виконаний на останній версії PHP фреймворку Laravel.

Laravel являє собою PHP-фреймворк — набір інструментів і шаблонів, які істотно полегшують і прискорюють розробку продукту. Значна частина наших проєктів була написана на Laravel.

Переваги Laravel:

дозволяє створити будь-який без обмежень проєкт;
функціональність підлаштовується під конкретні завдання;
дозволяє реалізувати проєкти будь-якої складності, онлайн-сервіси, впровадити нестандартну функціональність;
чисельні готові пакети сприяють швидкому наповненню сайту потрібними функціями та можливостями;
у сам фреймворк закладено способи захисту від двох найпоширеніших у мережі небезпек: XSS-атаки та SQL-ін’єкції;
управління кешуванням допомагає заощаджувати час завантаження сторінок.

У реалізації була використана база даних MySql і підключена бібліотека Vue.js для динамічного відображення контенту. Серед іншого такий комплекс рішень з боку фронтенду та бекенду — відсутність будь-яких компромісів у плані продуктивності.

Інакше кажучи, сайт працюватиме максимально швидко — як зараз, так і під високими навантаженнями у майбутньому. Цим не можуть похвалитися проєкти, реалізовані на CMS (наприклад, WordPress).

Vue.js — це прогресивний фреймворк для створення інтерфейсів користувача. На відміну від фреймворків-монолітів, він придатний для поступового впровадження. Vue повністю підходить і для створення складних односторінкових додатків, якщо використовувати його спільно з сучасними інструментами та додатковими бібліотеками.

До особливого бажання замовника також відноситься детальна панель адміністратора, в якій можна змінювати всі частини сайту, а також створювати та редагувати проєкти в портфоліо.

Блоки та дизайн промо-сайту

Традиційно такий продукт складається з кількох смислових блоків. Вони проводять відвідувачів за продуманим сценарієм, спонукаючи заповнити опитувальник у процесі реєстрації заявки.

Блок «Наша команда»

У цій частині промо-сайту робиться особливий акцент на молодих та талановитих фахівцях «ArcHHunter». Усі фотографії дизайнерів, конструкторів та архітекторів виконані у стилі компанії та гармонійно вписуються у загальний контент. Картка кожного фахівця несе інформацію, яка дає змогу заочно визначитися з вибором.

«Портфоліо»

У цьому блоці приділяється особлива увага виконаним проєктам. Адже для майбутніх клієнтів компанії дуже важливо побачити візуальне втілення робіт дизайнерів та архітекторів компанії, яка безпосередньо чи опосередковано займається архітектурним дизайном.

Блок сформований у такий спосіб, щоб майбутнім замовникам було легко орієнтуватися у типі проєктів: архітектура, ландшафт, інтер’єр, графічний дизайн чи дизайн продукту. У портфоліо відображаються реалізовані проєкти компанії.

Галерея

Картки в портфоліо під час прокручування виводяться плавною анімацією. На сторінці кожного проєкту розміщується детальна інформація та галерея. І як завжди, ми приділили максимум уваги зручності сайту для використання на мобільних пристроях.

Крім цього, адміністратор сайту має можливість самостійно додавати категорії проєктів і проєкти. Кожен проєкт має функцію редагування метаданих для налаштування SEO.

Блок опитувальника

Форма опитувальника інтерактивно допомагає краще зрозуміти потреби клієнта. Після надсилання заявки з контактами клієнту пропонується пройти невеликий динамічний опитувальник. Він дозволяє точніше виявити клієнтські потреби та підготувати до першого контакту комерційну пропозицію.

Після проходження ступеня з контактами, в панелі адміністратора з’являються відповіді на навідні запитання, які прив’язуються до контактів клієнта.

Опитувальник складається з 5 пунктів і залежно від попереднього вибору клієнту пропонуються різні варіанти відповідей. Для адміністратора залишена можливість змінювати текст, картинки та кількість варіантів відповідей.

Квіз реалізований як модальне вікно, де контент всередині динамічно змінюється за допомогою підключеної бібліотеки Vue.js.

Дизайн

Весь дизайн виконаний у досить стриманих і ненав’язливих сірих тонах, які так чи інакше наводять відвідувача на думки про сучасну лаконічну архітектуру та дизайн. Всі основні елементи (іконки, зображення та кнопки) виконані в одному стилі та підтримують загальний настрій сайту — простоту та елегантність.

Результат

Після робіт, проведених командою фахівців Webnauts, клієнт отримав недорогий, але дуже стильний, логічний продукт з найму спеціалістів у сфері дизайну, проєктування та архітектури, який дійсно працює. Ми розробили не тільки надійний і безпечний сайт, але й фірмовий дизайн, доповнений якісним текстом і зручною формою опитувальника у процесі реєстрації заявки.

Ми впевнені, що цей проєкт має велике майбутнє, і вже зараз спільно клієнтом працюємо над тим, щоб рухатись далі — від промо-сайту до великого технологічного онлайн-сервісу для молодих спеціалістів та роботодавців у сфері архітектурного дизайну.

О клиенте

Американский сервис «ArcHHunter» оказывает услуги по найму, подбору и аутстаффингу специалистов в сфере дизайна, проектирования и архитектуры. Их молодые специалисты могут предоставлять услуги на условиях частичной или полной занятости. Также они готовы консультировать, разрабатывать и реализовывать проекты как онлайн, так и оффлайн.

«ArcHHunter» впервые обратились в нашу компанию за разработкой сайта. Учитывая направление их деятельности и клиентуру, к сайту были предъявлены следующие пожелания: сдержанность, легкость, простота, сбалансированность текста и изображений. Также важны были возможности дальнейшего масштабирования сервиса — разработки на его основе личных кабинетов соискателя и специалиста, каталога профессионалов и т.д.

Задача

В начале работы над проектом в нашем распоряжении были только ориентировочные пожелания по цвету и дизайну: помимо базовой лёгкости и простоты, клиент хотел, чтобы сайт был выполнен в серых тонах. Также было озвучено пожелание о внедрении опросника в процессе регистрации заявки, который интерактивно помогал бы лучше понять потребности заказчика.

Решение

В качестве примера дизайна был принят предложенный клиентом набросок на Wixsite.

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

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

Промо-сайт для сервиса «ArcHHunter» состоит из главной страницы, портфолио и страницы каждого реализованного проекта.Также мы интегрировали краткий и лаконичный опросник для лучшего понимания потребностей заказчика.

Реализация проекта

Сайт выполнен на последней версии PHP фреймворка Laravel.

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

Преимущества Laravel:

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

В реализации была использована база данных MySql и подключена библиотека Vue.js для динамического отображения контента. В числе прочего такой комплекс решений со стороны фронтенда и бэкенда — это отсутствие каких-либо компромиссов в плане производительности.

Иначе говоря, сайт будет работать максимально быстро — как сейчас, так и под высокими нагрузками в будущем. Этим же не могут похвастаться проекты, реализованные на CMS (например, WordPress).

Vue.js — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, она пригодна для постепенного внедрения. Vue полностью подходит и для создания сложных одностраничных приложений, если использовать его совместно с современными инструментами и дополнительными библиотеками.

К особому пожеланию заказчика также относится детальная панель администратора, в которой можно менять все части сайта, а также создавать и редактировать проекты в портфолио.

Блоки и дизайн промо-сайта

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