Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс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. Поєднання мінімалізму, зрозумілої навігації та ховер-анімації з перших секунд дарує користувачам захоплюючий та захоплюючий досвід. Чи можна бажати більшого від сайту дизайнерських послуг?

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

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

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