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

Трохи згодом я відкрив для себе плагін Elementor, і він вразив мене своїми величезними можливостями. З його допомогою можна було будувати повноцінні сторінки без глибокого занурення в код, не покладаючись на бібліотеку тем із репозиторію WordPress.
Щодня я продирався крізь терни його функцій та налаштувань: підбирав кольори та шрифти, працював із внутрішніми та зовнішніми відступами, але все одно погано розумів, як зробити сайт красивим та як змусити всю цю магію краси запрацювати.
Як створювати такі ж сайти, як у великих брендів? Думки про те, що мої проєкти схожі на “привіт із 2005 року”, вибивали мене із сідла натхнення, і час від часу я відчував синдром самозванця…
У чому різниця між UI та UX? Аналогія з автомобілем
Але одного дня я вирішив: “Все, досить!”Я мушу вивчити веб-дизайн і стати справжнім веб-майстром. Я просто зобов’язаний пробратися крізь цей дрімучий ліс фарб та стилів. На першому ж уроці свого марафону “Шлях до Майстерності” я познайомився з головними мешканцями цього лісу. Їх звати UI та UX. Я чув про них і раніше, але чомусь не надавав особливого значення їхній важливості.

Уявіть, що UI (User Interface) — це салон автомобіля: красиве кермо, оббите шкірою, зручні кнопки на панелі, зрозумілий спідометр, приємний колір підсвітки. А UX (User Experience) — це сам досвід водіння: наскільки плавно їде машина? Чи зручно сидіти в кріслі у довгій поїздці? Чи легко керувати? Наскільки вона безпечна?
UI: Мистецтво першого враження або “салон автомобіля”
Давайте ж розберемо цей “салон” детальніше. Абревіатура UI розшифровується як “User Interface”, що в перекладі з англійської означає “інтерфейс користувача”. Він складається з:
- Макету, в якому відображено, як елементи розташовані на сторінці.
- Колірної палітри, яка створює настрій та формує впізнаваність бренду.
- Типографіки, яка відповідає за шрифти та читабельність.
- Зображень: картинок, фотографій, іконок.
- Елементів керування: кнопок, слайдерів, полів для введення.
Мета хорошого UI — створити довіру та задоволення від використання. Красивий і зрозумілий інтерфейс каже користувачеві: “Ми професіонали, ми дбаємо про деталі, нам можна довіряти”.
Приклади UI
Прикладом чудового UI є сайт Stripe. Він хороший тим, що на ньому багато “повітря”, у нього зрозуміла ієрархія і всі елементи виконані в єдиному стилі.

UX: Повага до шляху користувача або “досвід водіння”
Тепер давайте подивимося на досвід водіння. Абревіатура UX розшифровується як “User Experience”, або “досвід користувача”. Він відповідає за логіку та функціонал.
Швидше за все, ви знаєте, що є авто з ручною коробкою передач, а є з коробкою “автомат”. Є ті, що заводяться ключем, а є ті, що кнопкою. Таким же різним може бути і UX. Але в лісі веб-дизайну існує стандарт, так звані “Стільники користувацького досвіду”. Він говорить, що хороший User Experience має бути:
- Корисним (Useful): Чи вирішує ваш сайт реальну проблему? Чи дає він ту інформацію, за якою прийшла людина? Некорисний, але красивий сайт — це просто дорога цифрова картина.
- Зручним (Usable): Наскільки легко користуватися сайтом? Чи зрозуміла навігація? Чи не потрібно робити 10 кліків, щоб знайти номер телефону?
- Бажаним (Desirable): Чи викликає дизайн емоції? Чи хочеться повертатися на сайт не тільки через користь, а й тому, що він “класний”? Це про брендинг, естетику і ту саму “магію”.
- Таким, що легко знайти (Findable): Чи може користувач легко знайти те, що йому потрібно, всередині сайту (через меню, пошук)? І чи може він знайти сам сайт у Google?
- Доступним (Accessible): Чи зручно користуватися сайтом людям з обмеженими можливостями (наприклад, з поганим зором)? Це про повагу до всіх користувачів.
- Таким, що викликає довіру (Credible): Чи виглядає сайт надійно? Чи є на ньому контакти, відгуки, зрозуміла інформація про вас? Чи повірить ваша цільова аудиторія, що ви — справжній експерт, а не шахрай?
Приклади UХ
Мета хорошого UX — зробити шлях користувача до його мети максимально коротким, логічним і приємним, щоб він захотів повернутися знову.
Приклад геніального UX — це Duolingo. Він зручний: один екран — одна дія, бажаний: гейміфікація, персонажі та корисний: люди справді вчать мову.

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

- Скляна пляшка (зліва): Виглядає стильно, класично. Це хороший UI. Але щоб дістати з неї кетчуп, потрібно трясти і стукати — це мука. Це жахливий UX.
- Пластикова пляшка (справа): Може, вона виглядає не так преміально. Але ви просто перевертаєте її і легко видавлюєте рівно стільки кетчупу, скільки потрібно. Це чудовий UX.
Завдяки цій візуалізації я сформулював для себе головний висновок: найкрасивіший у світі дизайн марний, якщо він не допомагає людині легко і просто вирішити її завдання.
Тепер я розумію, що мій шлях — це стати не просто “автостилістом” (UI), але й “інженером-конструктором” (UX). Дякую, що проходите цей шлях зі мною. А щоб перетворити ці знання на практику, у наступному уроці ми зробимо перші кроки у Figma для початківців — найпопулярнішому інструменті для сучасного веб-дизайну. До зустрічі!