Промо-сайт послуг UX/UI дизайну Webnauts
Завдання
Webnauts Design – промо-сайт дизайнерських послуг Webnauts, що повністю розкриває креативну сторону нашої компанії. Основне завдання проекту — створити презентаційний сайт-портфоліо послуг веб-дизайну, який містив би в собі мінімум інформації та максимум наочності.
Потреба в окремому сайті з’явилася через усталену, самодостатню та сучасну дизайн-команди, послуги якої вийшли далеко за межі UI/UX дизайну. Не секрет, що проектуванням інтерфейсу займалися наші хлопці, тому відвідувач сайту ризикує отримати вау-ефект, навіть не переходячи до розділу з портфоліо.
Дизайн інтерфейсу
Все почалося з UX-аналізу та розробки прототипів, і тільки за цим слідує його величність UI – візуальний дизайн у вигляді концептів сторінок та відтворення макетів. В результаті ми отримали зручний та привабливий сайт. Проста навігація, великий шрифт, що рухається, і мікроанімації — тренди, які відразу ж звертають на себе увагу і, до речі, ще довго відчуватимуться у світі UI/UX. Мінімалістичний та акуратний інтерфейс так чи інакше перегукується з фірмовим стилем Webnauts. Це і читальні шрифти без засічок, і непомітні сірі кольори з червоним відтінком, що надає сайту особливого акценту і динамічності.
80 годин аналітичної та творчої роботи – і дизайн-проект готовий! Ну і як без магії у вигляді анімації? Далі розповімо про це детальніше.
Верстка сайту
Анімований прелоадер
Цікавим завданням стала реалізація анімованого прелоадера, мета якого – повідомити про процес завантаження сайту та прикрасити очікування користувача. Дизайнер запропонував повідомити про прогрес завантаження за допомогою кругового індикатора, що біжить, і використовувати дорогоцінний час користувача з тим, щоб привітати його різними мовами світу.
Пожвавити і стилізувати індикатор під дизайн не склало особливих труднощів, а ось анімація з блоком привітань далася непросто. Але все ж таки після успішних спроб зрозуміти алгоритм наш розробник отримав потрібний результат:
Ефект паралаксу
Плагін GSAPScrollTrigger у зв’язці з бібліотекою locomotive-scroll.js допоміг реалізувати приголомшливий ефект паралаксу на основі плавного прокручування сторінки:
Ефект рядка, що біжить
Перший екран зустрічає користувачів рядком “WEBNAUTS DESIGN”, що біжить вздовж екрана. Подібний, але більш видовищний ефект можна спостерігати, якщо навести курсор на одну з робіт портфоліо: крім червоної смуги, що біжить, з укрупненою назвою отримуємо ще й вікно попереднього перегляду, що демонструє проект у мініатюрі:
Мікроанімації
Особливо цікаво взаємодіяти із мікроанімацією зображень. Це спочатку картинки на сайті здаються статичними і сірими, але як тільки курсор “стосується” фотографії – вона немов оживає і знаходить фарби:
Ефект повороту при наведенні
Цікавим вийшов ефект повороту при наведенні курсору на посилання та елементи меню, а зміна кольору додатково фокусує увагу користувачів на бажаному об’єкті:
Щоб нашій аудиторії було приємно взаємодіяти з сайтом через анімацію, наш фронтендер використовував JavaScript-бібліотеку GSAP (GreenSock Animation Platform).
Для прискорення процесу верстки був використаний збирач Gulp — інструмент, що дозволяє автоматизувати рутинні завдання веб-розробки.
Адаптивність
Оптимізації сайту ми приділяємо особливу увагу, адже понад 50% інтернет-трафіку припадає саме на мобільні пристрої.
Через маленький екран сайт повинен справляти на користувача максимально позитивне враження. Тому в мобільній версії ми змістили фокус уваги з інтересу на зручність.
Через те, що в мобільній версії відсутня ховер (наведення курсору), анімаційних ефектів поменшало. Так, блок із портфоліо був видозмінений: тепер замість ховер-ефекту спостерігаємо статичну та клікабельну обкладинку кейсу.
Функціональність сайту
Коли верстка готова, береться за справу бекенд-розробник і розміщує сайт на платформі. Для цього була вибрана найпопулярніша у світі CMS – WordPress (WP), яка має нескінченну кількість надбудов та можливостей.
Давайте подивимося, як влаштовано головну сторінку. Навігація на сайті здійснюється за допомогою якірних посилань, які переміщують користувача у потрібну частину лендінгу:
Плагіни WordPress
Легко і швидко створювати кастомні поля можна за допомогою ACF (Advanced Custom Fields). Це не магія, це плагін – така міні-програма, яка збільшує стандартні можливості сайту на Вордпресі. Наш бекендер встановив кілька плагінів на всі випадки життя:
- ShortPixel Image Optimizer — для оптимізації зображень.
- WP Super Cache — для кешування даних.
- Yoast SEO — для пошукової оптимізації сайту.
- LocoTranslate — для перекладу рядків, вшитих у код (відповіді форми, помилки у полях форми, текст у полях форми та інші дрібні фрагменти).
- Polylang — для перекладу таксономій та створення мовних версій сторінок (Головна та Кейси).
- Yoast Duplicate Post — для клонування постів.
- WPMailSMTP — щоб надсилати листи через SMTP.
Без додаткових WP плагінів було реалізовано форми, але не без інших технологій. Заявки з форми на сайті надсилаються на електронну пошту за допомогою підходу Ajax, який прискорює обмін даними у фоновому режимі.
Захист сайту
Щоб захистити сайт від спаму, до форми була підключена технологія reCAPTCHA v3 — вона аналізує поведінку користувача на сайті до кліка на кнопку Надіслати: якщо дії мали місце, значить, користувач не бот, — і тільки після цього здійснюється надсилання даних.
