Бажаєте розпочати навчання та знайти роботу в ніші дизайну сайтів та інтерфейсів? Пропоную вам освоїти базові навички та розібратись в тому, які саме уміння потрібні, щоб увійти в цю сферу.
Матеріал також буде дуже корисним фронтенд і бекенд-розробникам, менеджерам проєктів та всім, хто працює у сфері IT і хоче ближче познайомитися з UX/UI-дизайном.
Коли я тільки починала свій шлях дизайнера, мені було дуже складно освоїти десятки термінів, зрозуміти, що саме вчити в першу чергу; коли та яку програму використовувати. Тому вирішила написати підбірку безкоштовних уроків, які допоможуть зрозуміти сферу, які саме методики використовують дизайнери з досвідом. А ще закласти базові знання одного з найпопулярніших графічних редакторів Figma.
Відповідаю на головне питання – чи потрібно вміти малювати, щоб стати UX/UI-дизайнером?
—Ні! Дизайнер ≠ художник
Перелік уроків та їх структуру ви знайдете нижче.
Будь ласка, залишайте коментарі, повідомляйте про помилки та неточності. Буду рада почути ваші доповнення. Курс періодично оновлюється, щоб ви могли поглинати лише актуальну інформацію. Приємного читання!
- Урок 1. Дизайн. Інтерфейс. UX та UI
- Урок 2. Процес створення веб-сайту
- Урок 3. Дизайн-процес і методи UX–дизайнера
- Урок 4. Прототипування. Юзер флоу і вайрфрейми
- Урок 5. UI–дизайнер та суміжні спеціальності
- Урок 6. Інструменти дизайнера
- Урок 7. Реєстрація. Інтерфейс. Перші кроки. Навігація
- Урок 8. Урок 8. Групи. Шари. Піпетка. Імпортування зображень
- Урок 9. Фрейми. Сітки. Направляючі. Компоненти
- Урок 10. Вирівнювання. Нові примітиви. Експорт
- Урок 11. Булеві операції
- Урок 12. Градієнти. Плагіни
- Урок 13. Криві
У цій вступній частині на наочних прикладах буде розказано і показано, що таке дизайн взагалі і що він включає, ви познайомитесь з основними термінами, про які всі чули, але ніхто не розуміє.
- Що таке дизайн? Визначення та завдання дизайну. Чому важливе середовище, обставини та що таке контекст;
- Що таке інтерфейс? UI (User Interface) інтерфейс користувача. Елементи інтерфейсу користувача;
- Що таке UX, UI дизайн і в чому різниця? UI–дизайн (User Interface Design). UX–дизайн (User Experience) або досвід взаємодії;
- Види інтерфейсів. Графічний екранний інтерфейс – основне поле роботи UX/UI–дизайнера. Приклади незвичайних інтерфейсів: символьний, жестовий, голосовий. Нейроінтерфейс майбутнього.
Створення сайту вимагає злагодженої роботи команди спеціалістів. Давайте розберемося, в якій послідовності та ким розробляються веб-сайти; яке місце в цьому процесі займає UX/UI дизайн.
Хочу звернути увагу, що у цьому уроці все написано максимально простою мовою, щоб було простіше зрозуміти суть процесу. Коли це буде засвоєно, я перейду до спеціальних термінів вже у наступному уроці.
- Аналітика, збір інформації, написання технічного завдання. У яких випадках проводять дослідження, хто такі бізнес-аналітики та хто пише технічне завдання проекту;
- Пошук референсів, moodboards. Навіщо вгадувати уподобання замовників та як це економить бюджет. Behance та Dribbble;
- UX–дизайн. Користувачі та їх завдання. Екрани та схеми переходів. Малювання начерків і створення прототипу. Тестування;
- UI–дизайн. Візуальний стиль (колірна гама, шрифти, сітки). Інтерактивний дизайн;
- Презентація проекту. Як показати дизайн замовнику;
- Експорт ресурсів. Збереження іконок, картинок та ілюстрацій в окремих файлах;
- Верстка. HTML. CSS. JavaScript. Frontend–фреймворки. Bootstrap;
- Програмування. Технології backend–розробників. PHP. MySQL. Вбудовані скриптові мови графічних редакторів;
- Тестування. Ручне та автоматичне тестування;
- Розгортання (Deploy). Як відбувається розгортання сайту. Системні адміністратори та devops–інженери.
Урок 3. Дизайн-процес і методи UX–дизайнера
З уроку ви дізнаєтесь хто такий UX-дизайнер та з чим його їдять. Також там поетапно розкритий типовий дизайн-процес у зручній подачі з купою прикладів та зрозумілих аналогій. Через те, що тема може здатись доволі складною для новачків, така подача робить урок зрозумілим і легким для засвоєння.
- Хто такий UX–дизайнер? Яку принципову задачу вирішує UX–дизайнер. Чому UX–дизайнер повинен вміти та любити спілкуватись?
- Дизайн-процес. Що це? Етапи дизайн–процесу і що таке дизайн–активності?
- Етап 1 (Obsereve або Empathize). Спостереження або співпереживання (емпатія). Як зрозуміти, чим живе користувач? Дослідження предметної області (Domain Research). Інтерв’ю з користувачами (User Interview). Спостереження (Field Studies);
- Етап 2. Визначення проблем (Define). Які у користувача задачі і цілі? Формулювання проблеми (Problem Statement). Користувацькі історії (User Stories). Персони (User Personas). Мапування шляху користувача (Journey Mapping, Customer Journey Map).
- Етап 3 (Ideate). Пошук рішень. Які є варіанти для вирішення поставлених задач? Як ми можемо…? (How Might We). Брейнштормінг (Brainstorming). Скетчинг (Sketching).
- Етап 4 (Prototype). Прототипування. Втілюємо найкращі ідеї. Юзер флоу (User Flow). Вайрфрейми (Wireframes). Інтерактивні прототипи (Interactive Prototypes)
- Етап 5 (Test). Тестування. Перевіряємо, що працює. Партизанське тестування (Guerilla Testing). Юзабіліті тестування (Usability Testing).
- При потребі повторити.
- Концепція подвійного діаманту.
- Як побудувати свій дизайн–процес?
- Типовий день UX–дизайнера.
Урок 4. Прототипування. Юзер флоу і вайрфрейми
Переходимо від етапу дослідження до втілення перших варіантів майбутнього дизайну. Спочатку це буде побудова шляху користувача та екрани, де ми намагатимемось втілити увесь перелік потрібних функцій. Ви навчитесь будувати юзер-флоу, вайрфрейми та інтерактивні прототипи.
Наприкінці уроку буде корисне практичне завдання, де ви зможете відчути себе ux-дизайнером.
- Поняття Fidelity або точність дизайну. Від загального до деталей.
- User flow. Шлях користувача. Початок і кінець шляху. Дії. Рішення і розгалуження. Напрямок шляху;
- Історичний екскурс в діаграми і блок-схеми. Flowcharts. Блок-схеми. Мета візуалізації процесів;
- Task flow. Концентрація на вужчих задачах. Пропрацювання деталей;
- Wireframes. Low-fidelity wireframes. High-fidelity wireframes. Позначення зображень і іконок. Позначення текстових блоків. Різниця в деталізації low і high wireframes;
- Макети UI-дизайну. Відмінності від ваєрфреймів. Прийоми для створення естетичної привабливості;
- Wireflow і Screenflow. Юзер флоу + ваєрфрейми або UI-дизайн. Відмінності. Як позначати послідовності дій;
- Прототипи. Паперові прототипи. Інтерактивні прототипи. Як вибрати. Переваги і недоліки.
Урок 5. UI–дизайнер та суміжні спеціальності
В пʼятому уроці ми розглянемо роботу UI-дизайнера через призму того, що йому потрібно знати, щоб вправно виконувати свою роботу. Окрім того, зануримось в типовий день UI-дизайнера, а також розглянемо що собою представляють суміжні спеціальності.
Виконуйте домашнє завдання, щоб засвоїти різницю між запитами на графічний дизайн, UI-дизайн та моушн-дизайн.
- Хто такий UI–дизайнер? Визначення. Основне завдання.
- Типографія. Основні поняття. Чому знання із типографії такі важливі;
- Колір в дизайні. Підходи та сервіси для генерування кольорових палітр;
- Композиція та відступи. Варіанти композиційних підходів. Про правильні відступи та «повітря» в дизайні;
- Принципи дизайну. Баланс. Контрас. Ієрархія. Узгодженість. Повітря. Гештальт-принципи в дизайні;
- Сітки. Колонкові сітки. Базові сітки. Модульні сітки;
- Робота з іконками та зображеннями. Як працювати та де брати іконки та фото;
- Де брати ідеї? Про натхнення та професійні дизайнерські соцмережі;
- Створення фінального дизайну сторінок.Як відбувається реальний процес;
- Створення адаптивного та респонсів дизайну.Чому адаптиви важливі? Різниця між адаптивним та респонсів-дизайном. Що потрібно знати та вміти, щоб без проблем створювати адаптивні версії макетів;
- UI Kits та дизайн-системи.Розкриваємо основи. Різниця між UI Kits та дизайн-системами;
- Типовий день UI-дизайнера.Як усе виглядає на практиці;
- Анімація елементів. Робота моушн-дизайнера. Де створювати анімацію. Мікроанімації. Що робить моушн-дизайнер;
- Завдання графічного дизайнера. Короткий перелік задач, що постають перед графічним дизайнером.
Існує широкий спектр програм, які використовують UX/UI дизайнери. Для початку і в більшості випадків достатньо знати лише Figma, але згодом ви розвиватиметесь і можете захотіти спробувати нові програми. Також знання деяких програм із цього уроку може бути умовою для роботи в певній компанії або з певним замовником.
- Інструменти UX-дизайнера . Figma. Adobe XD. Penpot. Axure. Framer X. Protopie;
- Інструменти UI-дизайнера . Figma. Adobe XD. Framer X. Adobe Photoshop. Principle;
- Інструменти графічного дизайнера . Adobe Illustrator. Adobe Photoshop. CorelDRAW;
- Види графіки . Векторна графіка. Растрова графіка;
Переходимо до практичної частини. Як ви вже здогадалися, будемо використовувати Figma. Спочатку розглянемо, які переваги і недоліки є у цього графічного редактора, а потім почнемо вивчення, як з його допомогою створювати дизайн.
Починаємо з азів. Сьогодні ми вивчимо, як відмалювати прямокутник, лінію, стрілку та текстовий блок. Цього буде достатньо для створення таск флоу усіх видів та простих сторінок.
Наприкінці уроку, як завжди, на вас чекає багато практичних завдань для закріплення матеріалу.
- Чому варто вибрати Figma. Має безкоштовний доступ. Простий у освоєнні. Невимогливий до комп'ютера. Працює у браузері. Є всі необхідні функції;
- Як почати користуватися?. Реєстрація. Початок роботи;
- Огляд інтерфейсу Figma. Головне меню. Панель інструментів. Робоча область. Панель властивостей. Панель шарів;
- Малюємо прямокутник. Крок за кроком;
- Зміна об'єктів. Виділення. Переміщення. Зміна розмірів;
- Навігація. Переміщення по робочій області. Управління масштабом. Фокус на об'єкті;
- Налаштування властивостей об'єкта. Позиція та розмір. Фіксація пропорцій. Кут повороту. Заокруглення кутів. Колір заливки. Параметри обведення;
- Вікно вибору кольору. Копіювання та вставка значення кольору;
- Додаємо текст. Задаємо межі текстового блоку. Параметри тексту;
- Малюємо лінію та стрілку;
- Навіщо потрібні шари. Впорядковують та групують об'єкти. Допомагають виділити об'єкти. Визначають порядок малювання;
- Корисні команди. Скасувати останніх дій. Зробити дублікат. Видалити об'єкт. Виділяємо кілька об'єктів одразу.
Продовжуємо знайомство з основами Figma. Сьогодні дізнаємося про нові прийоми роботи з прошарками, у тому числі як їх виділяти, переміщувати, групувати, блокувати і ховати.
Навчимося вставляти растрове зображення в проєкт і дізнаємося, як працювати з піпеткою, яка дозволяє зчитати код кольору із зображень і фігур.
Останній розділ з новими командами стосується виставлення точних відстаней між об'єктами, що важливо надалі при роботі з сітками.
Цей урок розширює наш арсенал дизайнера новими прийомами, які прискорюють та спрощують процес. Наприклад, важко уявити роботу з великим проєктом без групування прошарків.
- Групи. Створення та видалення групи. Згортання та розгортання групи. Вкладені групи. Перегрупування;
- Виділення прошарків. Вибираємо вкладений прошарок. Вибираємо кілька прошарків (новий спосіб). Вибираємо діапазон прошарків. Вибираємо перекритий прошарок. Знімаємо виділення;
- Робота з прошарками. Блокування та приховування прошарків. Копіювання, вирізання та вставка прошарку. Вставка в позицію іншого об'єкта;
- Назви прошарків. Перейменування прошарків. Задавайте назви зі змістом;
- Імпорт зображень. Референси та мудборди. Імпорт із буфера обміну. Імпорт із файлу;
- Інструмент піпетка. Швидке присвоєння кольору. Присвоєння кольору пікселів зображення;
- Корисні команди. Точне позиціонування. Як поділитись проєктом.
У третій частині по основам Figma навчимося працювати з фреймами, які ще називають артбордами, сторінками та файлами, щоб не заблукати у структурі великого проєкту. Подивимося, наскільки потужні можливості приховує у собі фрейм, як сітки та колонки допомагають розподілити об'єкти та виставити відступи. Навчимося користуватися направляючими. Вперше познайомимося з обмежувачами (constraints) і компонентами.
Вам більше не будуть страшні великі проєкти, ви зможете легко структурувати будь-який файл і швидко переміщуватись його частинами.
- Фрейми. Порівняння із групами. Створення фрейму. Змінюємо розмір та заливку. Як помістити об'єкт в середину фрейму. Проста маска – обрізаємо вміст фрейму;
- Сітки та направляючі. Додавання сітки. Додавання та налаштування колонок. Додавання рядів. Напрявляючі та лінійка;
- Приклади використання фреймів;
- Поведінка вмісту фрейму при зміні розміру. Обмежувачі (Constraints). Горизонтальні обмежувачі. Вертикальні обмежувачі;
- Перше знайомство з компонентами;
- Робота з фреймами. Як підігнати розмір фрейму під вміст. Змінюємо орієнтацію фрейму;
- Ієрархія проекту. Сторінки. Організація сторінок. Файли.
У черговій частині навчимося вирівнювати об'єкти та розподіляти їх у просторі. Вивчимо нові фігури: еліпс, полігон, зірку. Вони не такі прості, як здаються на перший погляд.
Навчимось експортувати фрейми у графічні файли. Це дозволить надалі поділитися ними із замовником або розробниками. Оглянемо популярні формати зображень і зрозуміємо, у яких випадках їх використовувати.
- Вирівнювання. Одного об'єкта відносно іншого. Кількох об'єктів відносно іншого. Групи об'єктів відносно іншого зі збереженням позиції. Вирівнювання відокремлених об'єктів. Одного всередині фрейму. Рівномірний розподіл;
- Нові примітиви. Еліпс. Полігон. Зірка;
- Приклади використання фреймів;
- Експорт дизайну. Як помітити прошарок для експорту та зберегти його у файл. Формати Png, Jpg, Svg, Pdf.
У п'ятій частині основ Figma ми дізнаємося про булеві операції та навчимося використовувати їх на практиці. Це незамінний інструмент для роботи з векторною графікою, особливо з іконками та логотипами.
- Про булеві операції. Екскурс в математику і логіку;
- Види булевих операцій. Об'єднання фігур або Union selection. Віднімання фігур або Subtract selection. Перетин фігур або Intersect selection. Виключення фігур або Exclude selection;
- Обробка складних об'єктів. Перетворення у криві або Flatten selection.
У шостій частині по основам Figma ми дізнаємося, як працювати з градієнтами. А саме зрозуміємо, які існують види градієнтів, як їх створювати і налаштовувати на практиці. Поговоримо про плагіни для Figma та встановимо і використаємо декілька з них прямо під час уроку.
- Про градієнт. Визначення градієнту. Ключові точки градієнту. Заміна заливки кольору на градієнт;
- Види градієнтів. Лінійний градієнта або Linear. Радіальний градієнт або Radial. Кутовий градієнт або Angular. Градієнт у вигляді алмазу або Diamond;
- Налаштування градієнтів. Непрозорість. Колір ключових точок і піпетка. Задаєм код кольору. Додаємо ключові точки. Кут і напрямок градієнту;
- Практичні приклади. Додавання об'єму фігурі. Імітація руху. Об'ємні елементи інтерфейсу. Градієнт на фоні;
- Плагіни у Figma. Як працювати з плагінами. Інструкція по встановленню плагіну;
- Плагіни для градієнтів. Робота з плагіном uiGradient. Плагін Easing Gradients. Плагін Chromatic Figma.
У сьомій частині по основами Figma ви навчитесь працювати з кривими на просунутому рівні. І хоча ви вже знайомі з булевими операціями, які дозволяють створювати складні векторні фігури, це лише верхівка айсберга. За допомогою інструмента Pen (перекладається як перо) можна відтворити будь-яку форму.
- Теорія кривих. Криві Безьє. Види кривих;
- Малюємо лінійну криву. Інструмент Pen. Створюємо найпростішу криву з нуля;
- Редагування кривих. Інструмент Move для переміщення точок. Інструмент Bend для упраління кривизною. Інструмент Paint Bucket для заливання замкнутих контурів; Додавання та видалення точок;
- Налаштування кривих. Налаштування обводки. Перетворення обводки у криві. Скруглення кутів;
- Сайти з безкоштовними іконками. The Noun Project. Font Awesome. Cursor.in;
- Експорт у Svg. Покрокова інструкція.
Підписуйтесь на мене в Instagram – @frusia.pro – будьте в курсі анонсів нових уроків, дивіться перевірки домашок у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.
Останнє оновлення 18 лютого 2025
Продовжити навчання
Продовжити навчання
До першого уроку