Промосайт послуг UX/UI дизайну

Завдання

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

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

Дизайн інтерфейсу

Все почалося з UX-аналізу та розробки прототипів, і тільки за цим слідує його величність UI — візуальний дизайн у вигляді концептів сторінок та відтворення макетів. В результаті ми отримали зручний та привабливий сайт. Проста навігація, великий шрифт, що рухається, і мікроанімації — тренди, які відразу ж звертають на себе увагу і, до речі, ще довго відчуватимуться у світі UI/UX. Мінімалістичний та акуратний інтерфейс так чи інакше перегукується з фірмовим стилем Webnauts. Це і читальні шрифти без засічок, і непомітні сірі кольори з червоним відтінком, що надає сайту особливого акценту і динамічності.

80 годин аналітичної та творчої роботи — і дизайн-проєкт готовий! Ну і як без магії у вигляді анімації? Далі розповімо про це детальніше.

Верстка сайту

У тандемі з дизайнером розробник втілив макети в життя за допомогою трьох китів фронтенду: HTML, CSS(SCSS) та JavaScript.

Анімований прелоадер

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

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

Ефект паралаксу

Плагін GSAPScrollTrigger у зв’язці з бібліотекою locomotive-scroll.js допоміг реалізувати приголомшливий ефект паралаксу на основі плавного прокручування сторінки:

Ефект рядка, що біжить

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

За бажанням можна детально ознайомитися з кожною з робіт. Один клік переносить користувача на окрему сторінку, де в лаконічній, цікавій та доступній формі описуються завдання проєкту та творчий процес (тут потрібно віддати належне нашим копірайтерам), і, звичайно ж, результат, підкріплений численними зображеннями:

Мікроанімації

Особливо цікаво взаємодіяти із мікроанімацією зображень. Це спочатку картинки на сайті здаються статичними і сірими, але як тільки курсор “стосується” фотографії – вона немов оживає і знаходить фарби:

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

Ефект повороту при наведенні

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

Щоб нашій аудиторії було приємно взаємодіяти з сайтом через анімацію, наш фронтендер використовував 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 — вона аналізує поведінку користувача на сайті до кліка на кнопку Надіслати: якщо дії мали місце, значить, користувач не бот, — і тільки після цього здійснюється надсилання даних.

Для створення спеціального кастомного поля для введення ключа сайту був використаний ще один інструмент Вордпрес – Settings API.

Тонка настройка сайту зайняла у розробника 40 годин. Тепер це не просто красивий, але й надійний сайт з широкими можливостями щодо створення та обробки контенту.

Підсумки

Через 255 годин командної роботи дизайнерів та розробників вийшов привабливий, сучасний та зручний сайт-портфоліо послуг UX/UI та графічного дизайну на WordPress. Поєднання мінімалізму, зрозумілої навігації та ховер-анімації з перших секунд дарує користувачам захоплюючий та захоплюючий досвід. Чи можна бажати більшого від сайту дизайнерських послуг?

Задача

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

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

Дизайн интерфейса

Всё началось с UX-анализа и разработки прототипов, и только за этим следует его величество UI — визуальный дизайн в виде концептов страниц и отрисовки макетов. В результате мы получили удобный и привлекательный сайт. Простая навигация, крупный движущийся шрифт и микроанимации — тренды, которые сразу же обращают на себя внимание и, к слову, ещё долго будут ощущаться в мире UI/UX. Минималистичный и аккуратный интерфейс так или иначе перекликается с фирменным стилем Webnauts. Это и читабельные шрифты без засечек, и неброские серые цвета с красным оттенком, придающим сайту особый акцент и динамичность.

80 часов аналитической и творческой работы — и дизайн-проект готов! Ну и как же без магии в виде анимации? Дальше расскажем об этом подробнее.

Вёрстка сайта

В тандеме с дизайнером разработчик воплотил макеты в жизнь с помощью трёх китов фронтенда: HTML, CSS(SCSS) и JavaScript.

Анимированный прелоадер

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

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

Эффект параллакса

Плагин GSAP Scroll Trigger в связке с библиотекой locomotive-scroll.js помог реализовать потрясающий эффект параллакса на основе плавной прокрутки страницы:

Эффект бегущей строки

Первый экран встречает пользователей бегущей вдоль экрана строкой “WEBNAUTS DESIGN”. Подобный, но более зрелищный эффект можно наблюдать, если навести курсор на одну из работ портфолио: помимо бегущей красной полосы с укрупнённым названием получаем ещё и окно предварительного просмотра, демонстрирующее проект в миниатюре:

При желании можно подробно ознакомиться с каждой из работ. Один клик переносит пользователя на отдельную страницу, где в лаконичной, интересной и доступной форме описываются задачи проекта и творческий процесс (здесь нужно отдать должное нашим копирайтерам), и конечно же, результат, подкрепленный многочисленными изображениями:

Микроанимации

Особенно интересно взаимодействовать с микроанимацией изображений. Это сначала картинки на сайте кажутся статичными и серыми, но как только курсор “касается” фотографии — она словно оживает и обретает краски:

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

Эффект поворота при наведении

Занимательным получился эффект поворота при наведении курсора на ссылки и элементы меню, а изменение цвета дополнительно фокусирует внимание пользователей на желаемом объекте:

Чтобы нашей аудитории было приятно взаимодействовать с сайтом посредством анимации, наш фронтендер использовал 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 — для клонирования постов.
WP Mail SMTP — для отправки писем через SMTP.

Без дополнительных WP плагинов были реализованы формы, но не без других технологий. Заявки из формы на сайте отправляются на электронную почту с использованием подхода Ajax, который ускоряет обмен данными в фоновом режиме.

Защита сайта

Чтобы защитить сайт от спама, к форме была подключена технология reCAPTCHA v3 — она анализирует поведение пользователя на сайте до клика на кнопку Отправить: если действия имели место быть, значит, пользователь не бот, — и только после этого осуществляется отправка данных.

Для создания специального кастомного поля для ввода Ключа сайта был использован ещё один инструмент Вордпресса — Settings API.

Тонкая настройка сайта заняла у разработчика 40 часов. Теперь это не просто красивый, но и надёжный сайт с широкими возможностями по созданию и обработке контента.

Итоги

Спустя 255 часов командной работы дизайнеров и разработчиков получился привлекательный, современный и удобный сайт-портфолио услуг UX/UI и графического дизайна на WordPress. Сочетание минимализма, понятной навигации и ховер-анимации с первых секунд дарит пользователям увлекательный и захватывающий опыт. Можно ли желать большего от сайта дизайнерских услуг?