Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

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

Завдання

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

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

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

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

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

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

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

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

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

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

Banner

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

Плагін GSAPScrollTrigger у зв’язці з бібліотекою 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 — для клонування постів.
  • WPMailSMTP — щоб надсилати листи через SMTP.

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

Захист сайту

Щоб захистити сайт від спаму, до форми була підключена технологія reCAPTCHA v3 — вона аналізує поведінку користувача на сайті до кліка на кнопку Надіслати: якщо дії мали місце, значить, користувач не бот, — і тільки після цього здійснюється надсилання даних.
Banner
Для створення спеціального кастомного поля для введення ключа сайту був використаний ще один інструмент Вордпрес – Settings API.
Тонка настройка сайту зайняла у розробника 40 годин. Тепер це не просто красивий, але й надійний сайт з широкими можливостями щодо створення та обробки контенту.

Підсумки

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

Комментарии

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Потребуєте унікального та функціонального сайту, який приносить результати?

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

Над проєктом працювали

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x