Гараж
Що таке UI/UX дизайн: як стати дизайнером та що потрібно вміти
Зібрали в одному місці базові питання про те, чим займається UI/UX дизайнер та відповіді на них. Для тих, хто хоче почати свій шлях у цій сфері, проте ще не визначився. І для тих, кому просто цікаво.
Яка різниця між UX та UI?
UI (User Interface) — це користувацький інтерфейс. Цим терміном описують те, як продукт виглядає: кольори, дизайн, анімація, контент, форми (кнопки, мітки, поля для вводу) тощо.
UX (User Experience) — це користувацький досвід. Тут мають на увазі емоції, які користувач отримує від час користування інтерфейсом на десктопі чи мобілці. UX це рівень того, наскільки юзеру буде просто чи складно зробити те, за чим він прийшов на конкретний інтерфейс (здійснити покупку, прокласти маршрут, подивитися ціну, дізнатися погоду і т.і).
Основну різницю між UI та UX можна описати так: UI-дизайнер вирішує, як виглядає кермо автомобіля, а UX-дизайнер — як це кермо працюватиме. До UX-дизайну належить функціонал продукту, шлях користувача по інтерфейсу, його взаємодія з ним та ті емоції, які він викликає у користувачів. UI — це робота над графічним втіленням функцій інтерфейсу.
UX-дизайнери аналізують дії користувачів, створюють прототипи поведінки, проводять тестування — щоб користувачеві було легше отримати необхідний йому результат. UI-дизайнер робить все, щоб пояснити користувачеві, як користуватися продуктом.
UX-дизайн — виявлення та розв'язання проблем користувача. UI-дизайн — створення інтуїтивно зрозумілих, естетично приємних, інтерактивних інтерфейсів.
UX (User Experience) — це користувацький досвід. Тут мають на увазі емоції, які користувач отримує від час користування інтерфейсом на десктопі чи мобілці. UX це рівень того, наскільки юзеру буде просто чи складно зробити те, за чим він прийшов на конкретний інтерфейс (здійснити покупку, прокласти маршрут, подивитися ціну, дізнатися погоду і т.і).
Основну різницю між UI та UX можна описати так: UI-дизайнер вирішує, як виглядає кермо автомобіля, а UX-дизайнер — як це кермо працюватиме. До UX-дизайну належить функціонал продукту, шлях користувача по інтерфейсу, його взаємодія з ним та ті емоції, які він викликає у користувачів. UI — це робота над графічним втіленням функцій інтерфейсу.
UX-дизайнери аналізують дії користувачів, створюють прототипи поведінки, проводять тестування — щоб користувачеві було легше отримати необхідний йому результат. UI-дизайнер робить все, щоб пояснити користувачеві, як користуватися продуктом.
UX-дизайн — виявлення та розв'язання проблем користувача. UI-дизайн — створення інтуїтивно зрозумілих, естетично приємних, інтерактивних інтерфейсів.
Що робить UX-дизайнер?
Основний інтерес UX-дизайнера — зрозуміти, як продукт взаємодіє з користувачем. Його завдання — переконатися, що користувач логічно та інтуїтивно переходитиме від одного кроку до іншого.
Якщо при користуванні інтерфейсом, наприклад, банківського застосунку, ви не відразу розумієте, як саме вам здійснити платіж — отже UX зроблений погано, і дизайнери не постаралися полегшити вам користування своїм продуктом.
Дизайнери досліджують різні підходи до розв'язання конкретної проблеми користувача, аби обрати найрелевантніший за швидкістю, зручністю, логікою. Які кроки робить користувач? Які завдання йому потрібно виконати? Наскільки простий шлях від запиту до результату?
Велика частина роботи UX-дизайнерів зосереджена на з'ясуванні того, з якими проблемами зіштовхуються користувачі і як ці проблеми продукт може вирішити.
Дизайнери проводять дослідження, щоб ближче та краще зрозуміти свою цільову аудиторію та що хоче аудиторія в межах відповідної сфери. Зібравши всі отримані дані вони створюють та оцінюють прототип, з яким далі працюватиме UI-дизайнер.
Серед завдань: аналіз конкурентів, клієнтів та дослідження користувачів; прототипування, тестування, співпраця з UI-дизайнерами та розробниками; відстеження цілей, аналіз та пошук можливостей для покращення користувацького досвіду.
Велика частина роботи UX-дизайнерів зосереджена на з'ясуванні того, з якими проблемами зіштовхуються користувачі і як ці проблеми продукт може вирішити.
Дизайнери проводять дослідження, щоб ближче та краще зрозуміти свою цільову аудиторію та що хоче аудиторія в межах відповідної сфери. Зібравши всі отримані дані вони створюють та оцінюють прототип, з яким далі працюватиме UI-дизайнер.
Серед завдань: аналіз конкурентів, клієнтів та дослідження користувачів; прототипування, тестування, співпраця з UI-дизайнерами та розробниками; відстеження цілей, аналіз та пошук можливостей для покращення користувацького досвіду.
Завдання UX-дизайнера:
- аналіз конкурентів, клієнтів та дослідження користувачів;
- прототипування та тестування;
- співпраця з UI-дизайнерами та розробниками; /
- відстеження цілей продукту;
- аналіз та пошук можливостей для покращення користувацького досвіду.
- аналіз конкурентів, клієнтів та дослідження користувачів;
- прототипування та тестування;
- співпраця з UI-дизайнерами та розробниками; /
- відстеження цілей продукту;
- аналіз та пошук можливостей для покращення користувацького досвіду.
Важливо розуміти, що зараз ми найчастіше говоримо про користувацький досвід саме в контексті діджитальних продуктів, проте це може стосуватися й фізичних речей з якими взаємодіє людина: від чайника до автомобілів.
Що робить UI-дизайнер?
UI-дизайнер займається візуалізацією прототипу, який він отримав від UX-дизайнерів. Він створює всі візуальні аспекти шляху користувача: екрани, скрол, типографіка, форми, кнопки, значки, інтервали, колірні схеми, адаптивність.
Проте важливе не тільки те, як виглядає інтерфейс.
Дизайнери інтерфейсів фокусуються на всіх деталях, що стосуються шляху користувача. Від обраної кольорової гами залежить те, наскільки інтерфейс буде зручним для людей з порушеннями зору або ж наскільки легко читатиметься текст, коли на екран падає світло. А ось анімація, скрол чи кольорова кнопка можуть стати додатковими маркетинговими інструментами.
Проте важливе не тільки те, як виглядає інтерфейс.
Дизайнери інтерфейсів фокусуються на всіх деталях, що стосуються шляху користувача. Від обраної кольорової гами залежить те, наскільки інтерфейс буде зручним для людей з порушеннями зору або ж наскільки легко читатиметься текст, коли на екран падає світло. А ось анімація, скрол чи кольорова кнопка можуть стати додатковими маркетинговими інструментами.
Наприклад, EdTech застосунок Duolingo для вивчення іноземних мов проводить безліч експериментів з дизайном для перевірки його впливу на користувачів. Вимірювали навіть те, наскільки великими мають бути сльози персонажа Duo в листах, щоб студенти поверталися до своїх занять.
UI-дизайнери намагаються створити інтуїтивно зрозумілий досвід, що не вимагатиме занадто багато часу на думки «а що робити далі?». За потреби, UI-спеціалісти використовують в дизайні айдентику бренду, з яким працюють.
Завдання UI-дизайнера:
- аналіз клієнтів;
- дизайн-дослідження;
- брендинг та розробка графіки;
- інтерактивність та анімація інтерфейс;
- адаптація до всіх розмірів екрану пристрою;
- співпраця з розробниками над імплементацією.
- аналіз клієнтів;
- дизайн-дослідження;
- брендинг та розробка графіки;
- інтерактивність та анімація інтерфейс;
- адаптація до всіх розмірів екрану пристрою;
- співпраця з розробниками над імплементацією.
Чому UI та UX часто пишуть разом?
І в портфоліо дизайнерів, і в резюме, і у вакансіях компаній UI/UX часто йдуть у зв'язці. Це тому, що обидві сфери працюють в комплексі, інакше фінальний результат матиме одну слабку сторону.
Якщо не буде співпраці й роботи над обома частина інтерфейсу, то на виході матимемо або красивий зовнішньо, проте незручний інтерфейс, або корисний продукт, що буде візуально непоказним.
Попри те, що різниця в цілях та роботі UX та UI дизайнерів суттєва, вони мають розуміти хоча б базу та основні принципи іншої сфери. Оскільки UX та UI спеціалісти працюють в тісній взаємодії, щоб зробити цілісний продукт в єдиному візуальному стилі з простою структурою.
У перспективі, спеціаліст окрім UI/UX може детальніше заглибитися в додатковий аспект, наприклад, написання текстів для інтерфейсів. Що дасть йому додаткові плюси серед інших кандидатів.
Якщо не буде співпраці й роботи над обома частина інтерфейсу, то на виході матимемо або красивий зовнішньо, проте незручний інтерфейс, або корисний продукт, що буде візуально непоказним.
Попри те, що різниця в цілях та роботі UX та UI дизайнерів суттєва, вони мають розуміти хоча б базу та основні принципи іншої сфери. Оскільки UX та UI спеціалісти працюють в тісній взаємодії, щоб зробити цілісний продукт в єдиному візуальному стилі з простою структурою.
У перспективі, спеціаліст окрім UI/UX може детальніше заглибитися в додатковий аспект, наприклад, написання текстів для інтерфейсів. Що дасть йому додаткові плюси серед інших кандидатів.
Приклади UX/UI дизайну
Найпростіше розібратися у завданнях та процесі роботи в будь-якій сфері — подивитися на роботу тих, хто в ній працює.
Для кращого розуміння роботи UI-дизайнера можете ознайомитися з концепціями вебсайту для морозива Mr. Pops з можливістю онлайн-замовлення та використанням елементів айдентики бренду.
Щодо UX — зверніть увагу на кейси розробки втричі швидшого шляху купівлі квитків на сайті Укрзалізниці, оптимізації комунікації в месенджері для викладачів та студентів на Preply та реорганізації профіля користувача на сайті платіжної системи Portmone.
У кейсах ви можете побачити завдання, які стояли перед дизайнерами. А також прочитати про процес роботи над їх розв'язанням.
Для кращого розуміння роботи UI-дизайнера можете ознайомитися з концепціями вебсайту для морозива Mr. Pops з можливістю онлайн-замовлення та використанням елементів айдентики бренду.
Щодо UX — зверніть увагу на кейси розробки втричі швидшого шляху купівлі квитків на сайті Укрзалізниці, оптимізації комунікації в месенджері для викладачів та студентів на Preply та реорганізації профіля користувача на сайті платіжної системи Portmone.
У кейсах ви можете побачити завдання, які стояли перед дизайнерами. А також прочитати про процес роботи над їх розв'язанням.
Де працює UX/UI дизайнер?
Можна працювати на фрилансі. У такому випадку ви самі керуєте власним часом і місцем роботи. Але разом з тим, ви самі шукаєте клієнтів, ведете комунікацію, займаєтеся юридичними й фінансовими питаннями.
Також ви можете працювати в дизайн студії. У цьому випадку юридичні аспекти, економічні та пошук клієнтів братиме на себе студія. А комунікацією займатиметься акаунт-менеджер.
Крім того, є варіант працювати на продукт. У цьому випадку ви не створюватимете щоразу різні інтерфейси, а працюватиме над покращенням одного чи кількох конкретних.
Також ви можете працювати в дизайн студії. У цьому випадку юридичні аспекти, економічні та пошук клієнтів братиме на себе студія. А комунікацією займатиметься акаунт-менеджер.
Крім того, є варіант працювати на продукт. У цьому випадку ви не створюватимете щоразу різні інтерфейси, а працюватиме над покращенням одного чи кількох конкретних.
А UX/UI дизайнер малює картинки?
Якби питання складалися за рейтингом — це однозначно було б першим. Ні, для того, щоб працювати дизайнером інтерфейсів малювати не потрібно.
Але щоб бути крутим спеціалістом, тобі необхідне розуміння композиції, типографіки та колористики. Хороша новина — цим всім навичкам навчають на курсах з UX/UI дизайну. Це правда більше стосується UI-дизайну, проте базове розуміння знадобиться і UX-дизайнерам теж. Наприклад, при підготовці прототипів для презентації клієнту.
Якщо ж ви навпаки вмієте та любите малювати, то зможете застосувати ці навички в роботі з дизайном продукту.
Але щоб бути крутим спеціалістом, тобі необхідне розуміння композиції, типографіки та колористики. Хороша новина — цим всім навичкам навчають на курсах з UX/UI дизайну. Це правда більше стосується UI-дизайну, проте базове розуміння знадобиться і UX-дизайнерам теж. Наприклад, при підготовці прототипів для презентації клієнту.
Якщо ж ви навпаки вмієте та любите малювати, то зможете застосувати ці навички в роботі з дизайном продукту.
Чи потрібно кодити дизайнеру?
І теж ні, цим займаються розробники.
Проте все ж базові знання з HTML/CSS доведеться освоїти. Ця база знадобиться, щоб під час роботи над дизайном, враховувати принципи верстки інтерфейсів. А також при передачі вашого макету розробникам.
Заглибитися у верстку серйозніше, скоріш за все доведеться, якщо ви захочете працювати на фрілансі. Замовляючи проєкт у фрилансера, частіш за все, клієнти розраховують від дизайнера і на інтерфейс, і на його верстку.
Проте все ж базові знання з HTML/CSS доведеться освоїти. Ця база знадобиться, щоб під час роботи над дизайном, враховувати принципи верстки інтерфейсів. А також при передачі вашого макету розробникам.
Заглибитися у верстку серйозніше, скоріш за все доведеться, якщо ви захочете працювати на фрілансі. Замовляючи проєкт у фрилансера, частіш за все, клієнти розраховують від дизайнера і на інтерфейс, і на його верстку.
А якщо я хочу бути мобайл дизайнером?
Існує три види мобільних інтерфейсів:
- мобільний вебсайт;
- адаптивний дизайн;
- застосунок.
- мобільний вебсайт;
- адаптивний дизайн;
- застосунок.
Мобільна версія
Адаптивний дизайн
Мобільний застосунок
Мобільна версія
Це спеціально створена версія вебсайту, яку бачить користувач при переході з браузера на смартфоні чи планшеті. Скоріш за все, якщо ви натрапите на такий сайт, то його адреса починатиметься з «m.».
Адаптивний дизайн
Такий дизайн не потребує окремої розробки. В наш час усі інтерфейси повинні адаптуватися до різних розмірів: від екрана смартфона до ширококутного монітора. Інакше навряд хтось ними користуватиметься, та й пошукові системи понижують у видачі неадаптивні сайти
Мобільний застосунок
Це програма, розроблена з урахуванням вимог та можливостей конкретної платформи, наприклад, Android або iOS.
Загалом базових знань для створення простих мобільних інтерфейсів усіх трьох видів вам буде достатньо. Якщо говоримо про застосунки — варто познайомитися з гайдлайном платформи, для якої ви його створюєте.
Щоб створювати складні мобільні інтерфейси, наприклад, для новинних агрегаторів чи маркетплейсів, необхідно додатково прокачати навички самостійно або ж пройти курс по мобільних інтерфейсах. Щоб чітко вирішити завдання користувачів, врахувати наявні обмеження і не перевантажити інтерфейс.
Щоб створювати складні мобільні інтерфейси, наприклад, для новинних агрегаторів чи маркетплейсів, необхідно додатково прокачати навички самостійно або ж пройти курс по мобільних інтерфейсах. Щоб чітко вирішити завдання користувачів, врахувати наявні обмеження і не перевантажити інтерфейс.
Як вчитися UX/UI дизайну?
Отримати базові знання та навички і в UX-, і в UI-дизайні ви можете в Проджекторі. У інституті є цілий факультет дизайну інтерфейсів. З понад 20-ма навчальними програмами для спеціалістів різного рівня, зокрема й курси для початківців — Web Design Beginning та UX Design Beginning.
Також є два професіуми для людей без досвіду — річні програми з чіткою траєкторією навчання. На всіх курсах викладачі та ментори — практики з досвідом та ім'ям у сфері.
UI/UX Design. Professium — для тих, хто хоче навчитися створювати дизайн сайтів, посадкових сторінок та мобільних застосунків з урахуванням потреб своїх користувачів.
Mobile Design. Professium — для тих, хто хоче зосередитися створені мобільних інтерфейсів та зрозуміти специфіку дизайну для iOS і Android.
Після успішного закінчення професіумів ви отримаєте потрібні хард скіли, портфоліо для пошуку першої роботи, а також станете частиною ком'юніті випускників. Яких, до слова, лише в інтерфейсах було більше 4-х тисяч.
Крім того, ви можете знайти велику кількість лекцій корисних веб дизайнерам у нашій Бібліотеці чи пройти окремий відеокурс, щоб освоїти Figma.
Також є два професіуми для людей без досвіду — річні програми з чіткою траєкторією навчання. На всіх курсах викладачі та ментори — практики з досвідом та ім'ям у сфері.
UI/UX Design. Professium — для тих, хто хоче навчитися створювати дизайн сайтів, посадкових сторінок та мобільних застосунків з урахуванням потреб своїх користувачів.
Mobile Design. Professium — для тих, хто хоче зосередитися створені мобільних інтерфейсів та зрозуміти специфіку дизайну для iOS і Android.
Після успішного закінчення професіумів ви отримаєте потрібні хард скіли, портфоліо для пошуку першої роботи, а також станете частиною ком'юніті випускників. Яких, до слова, лише в інтерфейсах було більше 4-х тисяч.
Крім того, ви можете знайти велику кількість лекцій корисних веб дизайнерам у нашій Бібліотеці чи пройти окремий відеокурс, щоб освоїти Figma.
Автор: Денис Пристай
Фото: Наталія Азаркіна
Фото: Наталія Азаркіна
Гараж
Сподобалась стаття?
