Услуги

  • Сайты

  • Контент

  • Продвижение

  • Битрикс24

  • Приложения

Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс
		Array
(
    [0] => 
    [1] => https://webnauts.pro/wp-content/uploads/2022/07/promo-site-for-uxui-design-services-1536x714.png
    [2] => 1536w
)
		

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

Задача

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

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

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

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

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

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

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

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

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

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

Banner

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

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

Banner

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

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

Banner

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

Banner

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

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

Banner

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

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

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

Banner

Чтобы нашей аудитории было приятно взаимодействовать с сайтом посредством анимации, наш фронтендер использовал JavaScript-библиотеку GSAP (GreenSock Animation Platform).
Для ускорения процесса вёрстки был использован сборщик Gulp — инструмент, позволяющий автоматизировать рутинные задачи веб-разработки.

Адаптивность

Оптимизации сайта мы уделяем особое внимание, ведь более 50% интернет-трафика приходится именно на мобильные устройства.

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

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

Banner

Функциональность сайта

Когда вёрстка готова, за дело берётся бэкенд-разработчик и размещает сайт на платформе. Для этого была выбрана самая популярная в мире CMS — WordPress (WP), имеющая бесконечное количество надстроек и возможностей.

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

Banner

Под раздел Кейсы был создан кастомный тип записей и связанные с ним кастомные таксономии Тип и Услуги:

Banner

Плагины 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 — она анализирует поведение пользователя на сайте до клика на кнопку Отправить: если действия имели место быть, значит, пользователь не бот, — и только после этого осуществляется отправка данных.

Banner

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

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

Итоги

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

Нуждаетесь в уникальном и функциональном сайте, который приносит результаты?

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

Над проектом работали