Сьогодні розглянемо, які завдання виконує UX/UI–дизайнер і за допомогою яких програм. Торкнемося графічного дизайну у контексті UI. Познайомимося з новими словами, які будем постійно зустрічати у роботі. Дуже багато інформації перегукується з минулим уроком, але сьогодні більше заглиблюємось у деталі та вивчаємо професійні терміни.
Для початку достатньо знати лише Figma, але згодом ви розвиватиметесь і спробуєте нові програми. Після ознайомлення зорієнтуєтесь, що вивчати далі.
Освоївши один графічний редактор, зможете швидко перейти на інший — відмінності мінімальні. Наприклад, програми Figma та Adobe Xd практично один в один копіюють Sketch.
І, звичайно, розберемось у чому різниця між векторною та растровою графікою.
- Завдання UX-дизайнера
- Створення юзер флоу
- Таск флоу
- Вайрфлоу
- Скрінфлоу
- Відмальовка вайрфреймів
- Лоу-фіделіті вайрфрейми
- Хай-фіделіті вайрфрейми
- Створення прототипу
- Usability-тестування
- Інструменти UX-дизайнера
- Завдання UI-дизайнера
- Підбір кольорової палітри
- Робота з типографікою
- Підбір, обробка іконок та зображень
- Створення набору елементів інтерфейсу
- Відмальовка сторінок
- Створення адаптивного та респонсів дизайну
- Інструменти UI-дизайнера
- Види графіки
- Векторна графіка
- Растрова графіка
- Завдання графічного дизайнера
- Інструменти графічного дизайнера
- Домашнє завдання
- Висновки
Припустимо, що вас найняла компанія на ранньому етапі створення сайту. Ще нічого немає, ні екранів, ні дизайну, готова лише технічна документація. Менеджер проєкту пояснює, що новий сервіс призначений для купівлі та продажу різноманітних речей. Нам ставлять завдання придумати юзер флоу для покупки товару.
User flow (читається юзер флоу) — це покрокова схема взаємодії з веб-сайтом для вирішення поставленої користувачем завдання. Включає дії та переходи між екранами, через які проходить користувач для досягнення своєї мети.
Додамо трохи конкретики і уявимо, що наш користувач хоче купити велосипед.
Юзер флоу обов'язково відповідає на такі питання:
- Хто є користувачем? У нас це покупець (роль користувача);
- Яка у нього мета? Хоче купити велосипед. Відповідь випливає із завдання менеджера;
- Які кроки зробити, щоб виконати ціль? Що конкретно потрібно зробити користувачеві, щоб купити велосипед. Які кнопки натиснути та через які екрани пройти?
Тепер за діло береться UX-дизайнер. Відповідаючи на останнє запитання, можна припустити, що користувач почне з головної сторінки, де напише велосипед у формі пошуку. Після чого потрапить на сторінку результатів пошуку із фотографіями та цінами велосипедів. Вибравши відповідний, перейде на наступний екран з більш детальною інформацією та кнопкою купити. Натиснувши яку, перейде до форми оплати. Після підтвердження покупець побачить повідомлення дякую за покупку.
Ця відповідь дуже спрощена, але має дати вам уявлення про те, яку інформацію несе в собі юзер флоу. Насправді ви повинні відмалювати схему. Залежно від деталізації їх буває 3 види: таск флоу, вайрфлоу, скрінфлоу.
Task flow (читається таск флоу) — послідовність дій в рамках якогось завдання. Ця схема включає лише назви екранів і дій. Часто вам навіть не потрібно торкатися комп'ютера. Робите малюнок маркером у блокноті або на дошці. Схеми можуть включати розгалуження залежно від вибору користувача:
Запам'ятайте ключові моменти при складанні таск флоу:
- У прямокутниках вписується назва екрана (головна сторінка, результати пошуку, деталі товару, кошик, вибір способу оплати тощо);
- під екраном (прямокутником) іноді корисно розписати можливі дії користувача, але тільки якщо це необхідно – уникайте зайвої деталізації, це робиться на етапі малювання вайрфреймів;
- стрілочкою позначається перехід між екранами. Для ясності їх можна підписувати. Наприклад: натискаємо кнопку купити, клацаємо на результат пошуку, клацаємо на картку.
Після відмальовки та правок на папері можна перемалювати схему в графічному редакторі, іноді це робиться відразу:
Wireflow (пишається разом, читається вайрфлоу) — це послідовність нарисів екранів (вайрфреймів). Ця схема включає грубі начерки екранів з важливими елементами інтерфейсу (кнопки, поля форм, місця для картинок) та діями. Їх також часто малюють вручну:
Деталізація та пропрацювання залежить від ситуації. У цьому прикладі все спрощено до максимуму, але основні елементи інтерфейсу на кожному екрані чітко виділено. Для уточнення усі деталі прописують текстом:
Screenflow (пишеться разом, читається скрінфлоу) — послідовність екранів із готовою UI-частиною. Цей вид використовується на більш пізніх етапах розробки. Тут дизайн кожного екрану виконаний із максимальною (фінальною) деталізацією. Виконується лише у графічних редакторах та спеціалізованих програмах (наприклад Overflow допомагає малювати стрілочки для з'єднання екранів):
Wireframe (читається вайрфрейм) – це статичний малюнок конкретного екрана, який визначає розташування та розмір UI елементів. Візуальна частина завжди обмежується чорно-білою палітрою та простими фігурами.
Якщо продовжити наше припущення з роботою в компанії, то після обговорень нас можуть попросити відмалювати вайрфрейми для головного екрана та юзер флоу покупця.
Залежно від завдання може використовуватися як у технічній документації для розробників, так і слугувати базою для UI-дизайнера. Можуть бути відмальовані як і юзер флоу у блокноті, на дошці чи у графічному редакторі. Існують навіть спеціальні програми для імітації ручних начерків на комп'ютері (Balsamiq Wireframes).
Все це робиться, щоб визначити, як краще розмістити елементи інтерфейсу, щоб користувачам було максимально зручно виконувати конкретні завдання на сайті.
На малюнку вгорі ліворуч зображено вайрфрейм, а справа закінчений дизайн (постарався UI-дизайнер). За ступенем деталізації вайрфрейми можна поділити на два види.
Лоу-фіделіті вайрфрейми
Low-fidelity wireframes (читається лоу-фіделіті вайрфреймс) – дуже грубі та швидко виконані начерки екранів. Зазвичай містять мінімум тексту, в більшості випадків він замінений горизонтальними лініями, всі кнопки та зображення показані прямокутниками (іноді використовуються круги). Часто розташування та розмір елементів є приблизними.
Хай-фіделіті вайрфрейми
High-fidelity wireframes (читається хай-фіделіті вайрфреймс) – точно виконані начерки екранів. Містять весь текст; розташування, розміри кнопок та інших елементів максимально наближається до фінального дизайну. Вимагають набагато більше часу на створення, містять більше деталей.
Prototype (читається прототайп) або інтерактивний прототип – це дизайн екрана, який реагує на дії користувача. Тобто це не статична картинка, як у випадку з вайрфреймами або юзер флоу. Прототипи дозволяють зрозуміти, як працюватиме веб-сайт до початку програмування, виявити проблемні та незручні екрани. Часто використовуються для тестування з реальними користувачами.
Інтерактивні прототипи запускаються в браузері на комп'ютері або у спеціальних додатках на смартфоні і можуть виглядати, як справжні закінчені продукти. Але насправді це лише підробки, жодних серйозних обчислень чи обробки даних там виконуватись не може.
Наш інтерактивний прототип на основі попередніх скетчів може бути використаний для подальшого тестування. Для однієї функції іноді може бути розроблено кілька прототипів і вже на основі звітів usability-тестування приймається рішення, який варіант затверджувати.
Usability-тестування (юзабіліті) або перевірка ергономічності – це дослідження, щоб перевірити, наскільки зручно використовувати інтерфейс для виконання конкретного завдання. Такі тести виконуються на реальних людях із використанням інтерактивних прототипів або на готових продуктах.
У більшості випадків UX-дизайнер дає пристрій із запущеним прототипом, пояснює, що потрібно зробити та спостерігає за користувачем. Далі все ретельно конспектується та надалі аналізується. Іноді для коментарів використається диктофон. Провівши безліч тестів, можна робити висновки про те, наскільки вдале обране рішення або яка гіпотеза спрацювала краще.
Існують спеціальні сервіси для віддаленого usability-тестування. Там прототипи запускаються на комп'ютерах користувачів і ведеться відеозапис екрану з голосовими коментарями досліджуваних (іноді пишеться відео з веб-камери, так що ви можете навіть бачити вираз обличчя та емоції користувача).
- Блокнот та маркер – дозволяє швидко створювати грубі нариси вайрфреймів, робити замальовки юзер флоу. Незамінний інструмент на ранніх етапах;
- Figma — ідеально підходить для всіх завдань. Дозволяє навіть створювати інтерактивні прототипи із простою анімацією та запускати їх на смартфоні. Працює на усіх платформах (Windows, MacOS, Linux) та у браузері. Поставляється з безкоштовним набором вайрфреймів. Конкуренти також непогані – Sketch та Xd – є все необхідне;
- Moqups — спеціалізований додаток для створення вайрфреймів та юзер флоу з компонентами на всі випадки (для вебсайтів, мобільних та настільних додатків). Стане у нагоді, якщо не хочете все малювати вручну чи немає часу на пошук готових бібліотек для Figma. Працює прямо у браузері. Потрібна реєстрація, але можливості безкоштовної версії на високому рівні;
- Axure — надає розширені можливості по роботі з інтерактивними прототипами. Є можливість генерувати HTML, що дозволяє вбудовувати Google Analytics (або будь-який інший сервіс для відстеження поведінки користувачів) та проводити складні віддалені usability-тести.
UI дизайн включає візуальну частину і визначає зовнішній вигляд і естетичний вигляд проєкту. Це один з фінальних етапів процесу розробки інтерфейсу користувача, коли ми працюємо з дуже точною версією. Коло завдань дуже широке і може посперечатись з дизайном досвіду взаємодії.
Палітра або кольорова схема — це набір базових кольорів, які використовуються, як основа у дизайні. Допомагає створювати цілісні сторінки, спрощує та значно прискорює роботу, тому що підбір потрібно виконати лише один раз.
Зазвичай використовується готова палітра, яка базується на фірмовому стилі чи рекламних матеріалах. Якщо таких немає, можна використати логотип, щоб отримати кілька базових кольорів, а решту підібрати самостійно. Якщо клієнт нічого немає, то всю кольорову схему ви робите самі. Краще займатися створенням палітри кольорів після створення вайрфреймів, щоб розуміти, які елементи інтерфейсу і відповідно кольори вам знадобляться.
Коли підбираєте палітру самостійно, то зверніть увагу на кольори конкурентів та суміжні області. Знайдіть якнайбільше існуючих прикладів, складіть мудборд.
Є безліч сервісів для створення кольорових схем (Adobe Color, Coolors, Colormind, Colorhunt , Palettr), які генерують новий набір на основі лише одного базового кольору або завантаженого зображення.
Робота з типографікою
Типографіка — це правила, принципи та прийоми оформлення тексту. Типографіка є одним із розділів графічного дизайну. Дозволяє подати текст найзрозумілішим чином для сприйняття читачем. UI-дизайнер займається підбором шрифту, визначає розміри, відстані між рядками і символами. Визначає стилі заголовків, параграфів, списків та інших текстових елементів сторінки. Давайте познайомимось з ключовими термінами.
Шрифт — це набір символів, оформлених в одному стилі, що складають єдину систему.
Гарнітура — це набір шрифтів, об'єднаних в одне сімейство.
Кегль — це висота літери шрифту.
Інтерліньяж – це міжрядковий інтервал або відстань між рядками.
Докладніше з типографікою та її основними принципами познайомимося пізніше. А поки можете оцінити складність цієї дисципліни поглянувши на малюнок нижче.
Підбір, обробка іконок та зображень
Іконки – це прості та чіткі образи (зображення) для прискорення розуміння та сприйняття інформації. UI-дизайнери часто використовують готові набори іконок, яких існує безліч (Fontawesome, Lineicons). Іноді іконки потрібно редагувати або перефарбовувати. UI-дизайнер повинен стежити, щоб усі іконки були витримані у єдиному стилі.
Зображення використовуються для покращення подачі та доповнюють текст. Фотографії та ілюстрації обрізають, підганяють по розмірам, проводять кольорову корекцію.
Існують безкоштовні та платні сайти для підбору ілюстрацій та фотографій (Freepik, Unsplash, Shutterstock). UI-дизайнери не часто самі малюють іконки і ілюстрації. Це більше робота графічного дизайнера.
Створення набору елементів інтерфейсу
UI-kit (читається юай-кіт) або User Interface Kit — це набір елементів інтерфейсу для подальшого проектування сторінок сайту. Набір буде відрізнятись для стартапу, блогу та соціальної мережі. Найпоширеніші елементи: кнопки, елементи навігації, поля вводу, списки, перемикачі, форми і так далі.
UI-kit у сучасних графічних редакторах робиться на основі компонентів. Це дозволяє значно прискорити внесення змін. Уявіть собі ситуацію. У вас є 20 зображених екранів. Несподівано замовник захотів змінити заокруглення кнопок незважаючи на всі вмовляння дизайнерів. Використовуючи UI-кіт на основі компонентів, вам доведеться внести зміни лише в одному місці, правки на всіх сторінках будуть зроблені автоматично і миттєво. Чи це не магія? Без компонентів (наприклад, якщо ви використовуєте Photoshop) вам доведеться пройтись по усім сторінкам і переробити кожну кнопку вручну.
Відмальовка сторінок
На основі створеної кольорової гами, типографіки, сітки, UI-набору починається створення головних сторінок. Якщо замовник затверджує дизайн, то й усі інші сторінки сайту беруться до роботи.
Трохи про сам процес. Розвію поширений міф. UI-дизайнери рідко все вигадують самі з нуля. Найчастіше вони шукають натхнення на таких сайтах, як Behance та Dribbble, де найкращі колеги зі всього світу діляться своїми роботами. Це не означає, що все просто копіюється, ні. Але дизайнер може підглянути якусь деталь, вдале поєднання кольорів, шрифтів, сітку, компонування елементів. Таким чином, новий дизайн поступово синтезується зі світогляду та вашого досвіду, а також із уже існуючих вдалих рішень. З напрацюванням проєктів у вас поступово сформується свій неповторний стиль з унікальними фішками. Але пам'ятайте, що на це потрібно дуже багато часу та зусиль.
Mockup (читається мокап) — це дизайн відмальованої сторінки. Також мокапом називають дизайн сторінки або екрана, який вставлений у фотографію або ілюстрацію з пристроєм, на якому передбачається його використання. Коли ви бачите фото з ноутбуком і запущеним сайтом, знайте, що це також мокап.
Створення адаптивного та респонсів дизайну
Adaptive design (читається адаптив дизайн) або адаптивний дизайн — це проектування сайту, структура якого змінюється в залежності від пристрою (розміру екрану), базуючись на кількох макетах фіксованої ширини.
При розробці цього виду дизайну виділяють ключові варіанти відображення, між якими відбувається різкий перехід. Ці точки ще називають breakpoints (читається брейкпоінтс). При зміні розміру вікна браузера сайт буде адаптовуватись «ривками» при перемиканні від одного відображення до іншого. Кожне відображення може мати унікальне компонування.
Наприклад, відображення для настільних комп'ютерів (де зазвичай використовуються великі монітори), дизайн може включати праву колонку з додатковою інформацією. У відображенні для смартфона того ж сайту ця бічна колонка сховається, оскільки екран вузький.
Responsive design (читається респонсів дизайн) — це підвид адаптивного дизайну, в якому переходи між варіантами відображення плавні. При зміні розміру вікна браузера дизайн підлаштовується ніби він зроблений з гуми. Тобто структура компонування статична і бічні колонки не зникають.
Кожна з цих програм чудово справляються з усіма завданнями UI-дизайнера. Після вивчення Figma ви швидко освоїте решту, якщо буде потрібно.
- Figma – однозначний лідер списку. Надає найширші можливості для UI-дизайнера та працює на всіх платформах (Windows, MacOS, Linux) і навіть у браузері. При цьому робить це дуже швидко та безкоштовно;
- Sketch – платний ($99 з оновленнями на рік) графічний редактор лише для macOS. Саме він послужив натхненням для Figma та Xd. При цьому за деякими функціями поступається Figma (наприклад, немає кольорових стилів);
- Xd – платний графічний редактор (підписка $10 на місяць) для Windows та MacOS від компанії Adobe. Має гарний набір функцій і добре підходить, як і два інших учасника списку.
Види графіки
Графічні ресурси поділяються на растрові та векторні. Коли ви почнете практикуватись, ви побачите як це впливає на роботу. Зараз я можу лише пояснити це теоретично.
Векторна графіка
Векторна графіка описує зображення за допомогою математичних формул, а точніше кривих Безьє. Таке зображення не втрачає якість при збільшенні у порівнянні з растром. У цьому його головна перевага. Використовується переважно для логотипів, іконок, ілюстрацій. До речі, Figma, Sketch та Xd є векторними редакторами, але і мають мінімальний набір функцій для роботи з растром.
Растрова графіка
Растрова графіка описує зображення за допомогою набору кольорових точок. При збільшенні такого зображення можна спостерігати пікселі — найдрібніші елементи квадратної форми. Використовується для фотографій та ілюстрацій з великою кількістю кольорів. Photoshop є найпотужнішим растровим редактором, хоча і вміє працювати з векторними фігурами.
Якщо відкрити растрове та векторне зображення у відповідних редакторах та збільшити їх, ми побачимо, що:
- Збільшений растр є сіткою пікселів;
- Збільшений вектор малюється з такою самою якістю і складається з точок і кривих, які визначають як відмалювати лінії.
Завдання графічного дизайнера
Сюди входить широке коло завдань, але я виділила лише основні, які перетинаються з UX/UI-дизайном:
- Створення логотипу та фірмового стилю;
- Відмальовка ілюстрацій і іконок;
- Створення банерів, маркетингових матеріалів, упаковки.
На відміну від дизайнера UX/UI, графічний дизайнер іноді використовує додаткове обладнання, наприклад, графічний планшет. Крім того, художня освіта і вміння малювати може дуже допомогти у професії.
Залежно від переваг і стилістики графічного дизайнера може використовуватися як растровий, так і векторний редактор.
- Illustrator – потужний платний ($21 на місяць) векторний графічний редактор для платформ Windows та MacOS від компанії Adobe. Використовується для відмальовки та редагування іконок та ілюстрацій;
- Photoshop – потужний платний растровий редактор від тої ж компанії. Мабуть, це найфункціональніший растровий редактор з існуючих. Дозволяє ретушувати і змінювати фотографії, створювати колажі;
- Gimp – безкоштовний растровий графічний редактор із широким набором функцій, який поступається Photoshop лише через свою молодість.
У списку немає Figma, Sketch та Xd, хоча вони теж дозволяють працювати з векторною графікою, малювати іконки та ілюстрації (чого нам буде цілком достатньо для початку). А ось у роботі з растром у цих програм дуже серйозні обмеження. Вам доступні лише обрізка фото, базова корекція кольору і маски.
Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.
За реквізитами пишіть в дірект Інстаграму @frusia.pro
Курс і уроки залишаються безкоштовними.
Домашні завдання більше не перевіряються для громадян росії.
- Оберіть сайт, який ви щодня відвідуєте. Намалюйте такс флоу в блокноті для двох типових сценаріїв використання цього сайту.
- Придумайте нову функцію для сайту, яким ви користувалися хоча б одного разу (необов'язково для вашого улюбленця з першого завдання). Створіть таск флоу для цієї нової функції.
- Створіть вайрфлоу для сценаріїв першого завдання. Можете використовувати олівець або ручку, що витирається, щоб робити правки. Постарайтеся наблизитись до оригіналу.
- Останнє завдання підвищеної складності. Створіть вайрфлоу для сценарію з другого завдання. Тут потрібно бути дуже спостережливим, тому що ви не знаєте, які елементи інтерфейсу існують взагалі. Але ви можете подивитись їх на інших сайтах.
Робіть фото ваших юзер флоу і надсилайте в дірект в Instagram @frusia.pro (не забудьте вказати, що це до третього уроку) або залишайте посилання тут у коментарях під уроком (посилання я пізніше заміню на картинки прямо у коментарях).
По кожній відповіді дам фідбек, так ви переконаєтеся, що засвоїли матеріал правильно.
Висновки
От ми й отримали уявлення, з чим доводиться стикатися UX/UI-дизайнеру у повсякденній роботі. Це був найдовший і найскладніший урок з масою нових термінів. Будь ласка, вивчіть його досконало та зробіть домашнє завдання. Все це лише теорія, наступного разу (урок вийде за тиждень) ми переходимо до практики, а саме до вивчення Figma. Обіцяю, буде ще цікавіше!
Підписуйтесь на мене в Instagram @frusia.pro, будьте в курсі анонсів нових уроків, дивіться перевірки домівок у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.
Stay tuned!
