Існує широкий спектр програм, які використовують UX/UI дизайнери. Для початку і в більшості випадків достатньо знати лише Figma, але згодом ви розвиватиметесь і можете захотіти спробувити нові програми. Наприклад, якщо ви заглибитесь у створення інтерактивних прототипів, то вам може знадобитись Protopie. Після ознайомлення ви будете орієнтуватись у сучасних програмах і зможете вибрати, що вам потрібно.
Освоївши одну програму, зможете швидко перейти на іншу — відмінності мінімальні. Наприклад, програма Framer X практично один в один перейняла базовий функціонал Figma з додаванням своїх унікальних фішок.
Також заглибимось у теорію і подивимось, що таке векторна та растрова графіка і в чому полягають їх відмінності. Та які інструменти використовуються для роботи з ними.
- Завдання 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 (читається респонсів дизайн) — це підвид адаптивного дизайну, в якому переходи між варіантами відображення плавні. При зміні розміру вікна браузера дизайн підлаштовується ніби він зроблений з гуми. Тобто структура компонування статична і бічні колонки не зникають.
Завдання графічного дизайнера
Сюди входить широке коло завдань, але я виділила лише основні, які перетинаються з UX/UI-дизайном:
- Створення логотипу та фірмового стилю;
- Відмальовка ілюстрацій і іконок;
- Створення банерів, маркетингових матеріалів, упаковки.
На відміну від дизайнера UX/UI, графічний дизайнер іноді використовує додаткове обладнання, наприклад, графічний планшет. Крім того, художня освіта і вміння малювати може дуже допомогти у професії.
Види графіки
Графічні ресурси поділяються на растрові та векторні. Коли ви почнете практикуватись, ви побачите як це впливає на роботу. Зараз я можу лише пояснити це теоретично.
Векторна графіка
Векторна графіка описує зображення за допомогою математичних формул, а точніше кривих Безьє. Таке зображення не втрачає якість при збільшенні у порівнянні з растром. У цьому його головна перевага. Використовується переважно для логотипів, іконок, ілюстрацій. До речі, Figma, Sketch та Xd є векторними редакторами, але і мають мінімальний набір функцій для роботи з растром.
Растрова графіка
Растрова графіка описує зображення за допомогою набору кольорових точок. При збільшенні такого зображення можна спостерігати пікселі — найдрібніші елементи квадратної форми. Використовується для фотографій та ілюстрацій з великою кількістю кольорів. Photoshop є найпотужнішим растровим редактором, хоча і вміє працювати з векторними фігурами.
Якщо відкрити растрове та векторне зображення у відповідних редакторах та збільшити їх, ми побачимо, що:
- Збільшений растр є сіткою пікселів;
- Збільшений вектор малюється з такою самою якістю і складається з точок і кривих, які визначають як відмалювати лінії.
Домашнє завдання
Відтепер цей курс розрахований на самостійне вивчення та виконання домашніх завдань. Розумію, що деякі завдання можуть бути непростими для вас.
Для додаткової підтримки скористайтесь чатом у телеграмі. Тут ви зможете поставити запитання, що стосуються уроків або переглянути приклади правильного виконання від інших учнів.
Чат недоступний для громадян росії.
- Оберіть сайт, який ви щодня відвідуєте. Намалюйте такс флоу в блокноті для двох типових сценаріїв використання цього сайту.
- Придумайте нову функцію для сайту, яким ви користувалися хоча б одного разу (необов'язково для вашого улюбленця з першого завдання). Створіть таск флоу для цієї нової функції.
- Створіть вайрфлоу для сценаріїв першого завдання. Можете використовувати олівець або ручку, що витирається, щоб робити правки. Постарайтеся наблизитись до оригіналу.
- Останнє завдання підвищеної складності. Створіть вайрфлоу для сценарію з другого завдання. Тут потрібно бути дуже спостережливим, тому що ви не знаєте, які елементи інтерфейсу існують взагалі. Але ви можете подивитись їх на інших сайтах.
Робіть фото ваших юзер флоу і надсилайте в дірект в Instagram @frusia.pro (не забудьте вказати, що це до третього уроку) або залишайте посилання тут у коментарях під уроком (посилання я пізніше заміню на картинки прямо у коментарях).
По кожній відповіді дам фідбек, так ви переконаєтеся, що засвоїли матеріал правильно.
Висновки
От ми й отримали уявлення, з чим доводиться стикатися UX/UI-дизайнеру у повсякденній роботі. Це був найдовший і найскладніший урок з масою нових термінів. Будь ласка, вивчіть його досконало та зробіть домашнє завдання. Все це лише теорія, наступного разу (урок вийде за тиждень) ми переходимо до практики, а саме до вивчення Figma. Обіцяю, буде ще цікавіше!
Підписуйтесь на мене в Instagram @frusia.pro, будьте в курсі анонсів нових уроків, дивіться перевірки домівок у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.
Продовжити навчання