Промо-сайт услуг UX/UI дизайна Webnauts
Задача
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. Сочетание минимализма, понятной навигации и ховер-анимации с первых секунд дарит пользователям увлекательный и захватывающий опыт. Можно ли желать большего от сайта дизайнерских услуг?
Комментарии