Бажаєте розпочати навчання та знайти роботу в ніші дизайну сайтів та інтерфейсів? Тоді читайте статтю нижче. Тут я зібрала must-have для майбутнього дизайнера.

Матеріал також буде дуже корисним програмістам, верстальникам, менеджерам проектів та всім, хто працює у сфері IT і хоче ближче познайомитися з UX/UI-дизайном.

Коли я тільки починала свій шлях дизайнера, мені було дуже складно освоїти десятки термінів, зрозуміти, що саме вчити в першу чергу; коли та яку програму використовувати. Цей список і наступні уроки я постараюся написати для таких самих початківців, як я кілька років тому. Буду знайомити поступово і пояснювати простою мовою, показуючи все на пальцях.

Відповідаю на головне питання – чи потрібно вміти малювати, щоб стати UX/UI-дизайнером?

—Ні! Дизайнер ≠ художник

Для кожної теми буде написано окремий матеріал і якщо він вже доступний, то буде відзначений зеленою галочкою. Просто клацаємо на заголовок з і вивчаємо.

Будь ласка, залишайте коментарі, повідомляйте про помилки та неточності. Буду рада почути ваші доповнення. Статті будуть надалі оновлюватися на основі ваших запитань та пропозицій. Приємного читання!

Як будемо живі, то будем і ситі.

Життя прожити — не поле перейти.

Урок 1. Дизайн. Інтерфейс. UX та UI

У цій вступній частині на наочних прикладах буде розказано і показано, що таке дизайн взагалі і що він включає, ви познайомитесь з основними термінами, про які всі чули, але ніхто не розуміє.

  • Що таке дизайн? Визначення та завдання дизайну. Чому важливе середовище, обставини та що таке контекст;
  • Що таке інтерфейс? UI (User Interface) інтерфейс користувача. Елементи інтерфейсу користувача;
  • Що таке UX, UI дизайн і в чому різниця? UI–дизайн (User Interface Design). UX–дизайн (User Experience) або досвід взаємодії;
  • Види інтерфейсів. Графічний екранний інтерфейс – основне поле роботи UX/UI–дизайнера. Приклади незвичайних інтерфейсів: символьний, жестовий, голосовий. Нейроінтерфейс майбутнього.

Читати перший урок

Дизайн. Інтерфейс. UX і UI

Урок 2. Процес створення веб-сайту

Створення сайту вимагає злагодженої роботи команди спеціалістів. Давайте розберемося, в якій послідовності та ким розробляються веб-сайти; яке місце в цьому процесі займає UX/UI дизайн.

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

  • Аналітика, збір інформації, написання технічного завдання. У яких випадках проводять дослідження, хто такі бізнес-аналітики та хто пише технічне завдання проекту;
  • Пошук референсів, moodboards. Навіщо вгадувати уподобання замовників та як це економить бюджет. Behance та Dribbble;
  • UX–дизайн. Користувачі та їх завдання. Екрани та схеми переходів. Малювання начерків і створення прототипу. Тестування;
  • UI–дизайн. Візуальний стиль (колірна гама, шрифти, сітки). Інтерактивний дизайн;
  • Презентація проекту. Як показати дизайн замовнику;
  • Експорт ресурсів. Збереження іконок, картинок та ілюстрацій в окремих файлах;
  • Верстка. HTML. CSS. JavaScript. Frontend–фреймворки. Bootstrap;
  • Програмування. Технології backend–розробників. PHP. MySQL. Вбудовані скриптові мови графічних редакторів;
  • Тестування. Ручне та автоматичне тестування;
  • Deploy. Як відбувається розгортання сайту. Системні адміністратори та devops–інженери.
  • Аналітика, збір інформації, написання технічного завдання. У яких випадках проводять дослідження, хто такі бізнес-аналітики та хто пише технічне завдання проекту;
  • Пошук референсів, moodboards. Навіщо вгадувати уподобання замовників та як це економить бюджет. Behance та Dribbble;
  • UX–дизайн. Користувачі та їх завдання. Екрани та схеми переходів. Малювання начерків і створення прототипу. Тестування;
  • UI–дизайн. Візуальний стиль (колірна гама, шрифти, сітки). Інтерактивний дизайн;
  • Презентація проекту. Як показати дизайн замовнику;
  • Експорт ресурсів. Збереження іконок, картинок та ілюстрацій в окремих файлах;
  • Верстка. HTML. CSS. JavaScript. Frontend–фреймворки. Bootstrap;
  • Програмування. Технології backend–розробників. PHP. MySQL. Вбудовані скриптові мови графічних редакторів;
  • Тестування. Ручне та автоматичне тестування;
  • Deploy. Як відбувається розгортання сайту. Системні адміністратори та devops–інженери.

Читати другий урок

Процес створення веб-сайту

Урок 3. Щоденні завдання UX/UI–дизайнера. Програми для дизайну

Розглядаємо типові завдання UX/UI-дизайнера і трохи зачіпаємо суміжну область – графічний дизайн, з якою ви часто перетинатиметеся. Дивимося, які програми підходять для конкретного виду дизайну. Знайомимося з новою термінологією, яку ми торкалися на минулих уроках, але не називали речі своїми іменами.

  • Завдання UX-дизайнера. Створення user flow. Відмальовання wireframes. Створення прототипу. Usability-тестування;
  • Інструменти UX-дизайнера. Figma. Moqups. Axure;
  • Завдання UI-дизайнера. Підбір палітри кольорів. Робота з типографікою. Вибір, обробка іконок та зображень. Створення UI kit. Відмальовка сторінок. Adaptive та responsive дизайн;
  • Інструменти UI-дизайнера. Figma. Sketch. Xd;
  • Види графіки. Векторна графіка. Растрова графіка;
  • Завдання графічного дизайнера. Створення іконок, ілюстрацій. Відмальовка банерів;
  • Інструменти графічного дизайнера. Illustrator. Photoshop.

Читати третій урок

Щоденні задачі UX/UI-дизайнера

Урок 4. Основи Figma I

Переходимо до практичної частини. Як ви вже здогадалися, будемо використовувати Figma. Спочатку розглянемо, які переваги і недоліки є у цього графічного редактора, а потім почнемо вивчення, як з його допомогою створювати дизайн.

Починаємо з азів. Сьогодні ми вивчимо, як відмалювати прямокутник, лінію, стрілку та текстовий блок. Цього буде достатньо для створення таск флоу усіх видів та простих сторінок.

Наприкінці уроку, як завжди, на вас чекає багато практичних завдань для закріплення матеріалу.

  • Чому варто вибрати Figma. Безкоштовний. Простий у освоєнні. Невимогливий до комп'ютера. Працює у браузері. Є всі необхідні функції;
  • Як почати користуватися?. Реєстрація. Початок роботи;
  • Огляд інтерфейсу Figma. Головне меню. Панель інструментів. Робоча область. Панель властивостей. Панель шарів;
  • Малюємо прямокутник. Крок за кроком;
  • Зміна об'єктів. Виділення. Переміщення. Зміна розмірів;
  • Навігація. Переміщення по робочій області. Управління масштабом. Фокус на об'єкті;
  • Налаштування властивостей об'єкта. Позиція та розмір. Фіксація пропорцій. Кут повороту. Заокруглення кутів. Колір заливки. Параметри обведення;
  • Вікно вибору кольору. Копіювання та вставка значення кольору;
  • Додаємо текст. Задаємо межі текстового блоку. Параметри тексту;
  • Малюємо лінію та стрілку;
  • Навіщо потрібні шари. Впорядковують та групують об'єкти. Допомагають виділити об'єкти. Визначають порядок малювання;
  • Корисні команди. Скасувати останні події. Зробити дублікат. Видалити об'єкт. Виділяємо кілька об'єктів одразу.

Читати четвертий урок

Основи Figma I

Урок 5. Основи Figma II

Продовжуємо знайомство з основами Figma. Сьогодні дізнаємося про нові прийоми роботи з прошарками, у тому числі як їх виділяти, переміщувати, групувати, блокувати і ховати.

Навчимося вставляти растрове зображення в проєкт і дізнаємося, як працювати з піпеткою, яка дозволяє зчитати код кольору із зображень і фігур.

Останній розділ з новими командами стосується виставлення точних відстаней між об'єктами, що важливо надалі при роботі з сітками.

Цей урок розширює наш арсенал дизайнера новими прийомами, які прискорюють та спрощують процес. Наприклад, важко уявити роботу з великим проєктом без групування прошарків.

  • Групи. Створення та видалення групи. Згортання та розгортання групи. Вкладені групи. Перегрупування;
  • Виділення прошарків. Вибираємо вкладений прошарок. Вибираємо кілька прошарків (новий спосіб). Вибираємо діапазон прошарків. Вибираємо перекритий прошарок. Знімаємо виділення;
  • Робота з прошарками. Блокування та приховування прошарків. Копіювання, вирізання та вставка прошарку. Вставка в позицію іншого об'єкта;
  • Назви прошарків. Перейменування прошарків. Задавайте назви зі змістом;
  • Імпорт зображень. Референси та мудборди. Імпорт із буфера обміну. Імпорт із файлу;
  • Інструмент піпетка. Швидке присвоєння кольору. Присвоєння кольору пікселів зображення;
  • Корисні команди. Точне позиціонування. Як поділитись проєктом.

Читати п'ятий урок

Основи Figma II

Урок 6. Основи Figma III

У третій частині по основам Figma навчимося працювати з фреймами, які ще називають артбордами, сторінками та файлами, щоб не заблукати у структурі великого проєкту. Подивимося, наскільки потужні можливості приховує у собі фрейм, як сітки та колонки допомагають розподілити об'єкти та виставити відступи. Навчимося користуватися направляючими. Вперше познайомимося з обмежувачами (constraints) і компонентами.

Вам більше не будуть страшні великі проєкти, ви зможете легко структурувати будь-який файл і швидко переміщуватись його частинами.

  • Фрейми. Порівняння із групами. Створення фрейму. Змінюємо розмір та заливку. Як помістити об'єкт в середину фрейму. Проста маска – обрізаємо вміст фрейму;
  • Сітки та направляючі. Додавання сітки. Додавання та налаштування колонок. Додавання рядів. Напрявляючі та лінійка;
  • Приклади використання фреймів;
  • Поведінка вмісту фрейму при зміні розміру. Обмежувачі (Constraints). Горизонтальні обмежувачі. Вертикальні обмежувачі;
  • Перше знайомство з компонентами;
  • Робота з фреймами. Як підігнати розмір фрейму під вміст. Змінюємо орієнтацію фрейму;
  • Ієрархія проекту. Сторінки. Організація сторінок. Файли.

Читати шостий урок

Основи Figma III

Урок 7. Основи Figma IV

У черговій частині навчимося вирівнювати об'єкти та розподіляти їх у просторі. Вивчимо нові фігури: еліпс, полігон, зірку. Вони не такі прості, як здаються на перший погляд.

Навчимось експортувати фрейми у графічні файли. Це дозволить надалі поділитися ними із замовником або розробниками. Оглянемо популярні формати зображень і зрозуміємо, у яких випадках їх використовувати.

  • Вирівнювання. Одного об'єкта відносно іншого. Кількох об'єктів відносно іншого. Групи об'єктів відносно іншого зі збереженням позиції. Вирівнювання відокремлених об'єктів. Одного всередині фрейму. Рівномірний розподіл;
  • Нові примітиви. Еліпс. Полігон. Зірка;
  • Приклади використання фреймів;
  • Експорт дизайну. Як помітити прошарок для експорту та зберегти його у файл. Формати Png, Jpg, Svg, Pdf.

Читати сьомий урок

Основи Figma IV

Урок 8. Основи Figma V

У п'ятій частині основ Figma ми дізнаємося про булеві операції та навчимося використовувати їх на практиці. Це незамінний інструмент для роботи з векторною графікою, особливо з іконками та логотипами.

  • Про булеві операції. Екскурс в математику і логіку;
  • Види булевих операцій. Об'єднання фігур або Union selection. Віднімання фігур або Subtract selection. Перетин фігур або Intersect selection. Виключення фігур або Exclude selection;
  • Обробка складних об'єктів. Перетворення у криві або Flatten selection.

Читати восьмий урок

Основи Figma V

Урок 9. Основи Figma VI

У шостій частині по основам Figma ми дізнаємося, як працювати з градієнтами. А саме зрозуміємо, які існують види градієнтів, як їх створювати і налаштовувати на практиці. Поговоримо про плагіни для Figma та встановимо і використаємо декілька з них прямо під час уроку.

  • Про градієнт. Визначення градієнту. Ключові точки градієнту. Заміна заливки кольору на градієнт;
  • Види градієнтів. Лінійний градієнта або Linear. Радіальний градієнт або Radial. Кутовий градієнт або Angular. Градієнт у вигляді алмазу або Diamond;
  • Налаштування градієнтів. Непрозорість. Колір ключових точок і піпетка. Задаєм код кольору. Додаємо ключові точки. Кут і напрямок градієнту;
  • Практичні приклади. Додавання об'єму фігурі. Імітація руху. Об'ємні елементи інтерфейсу. Градієнт на фоні;
  • Плагіни у Figma. Як працювати з плагінами. Інструкція по встановленню плагіну;
  • Плагіни для градієнтів. Робота з плагіном uiGradient. Плагін Easing Gradients. Плагін Chromatic Figma.

Читати дев'ятий урок

Основи Figma VI

Урок 10. Основи Figma VII

У сьомій частині по основами Figma ви навчитесь працювати з кривими на просунутому рівні. І хоча ви вже знайомі з булевими операціями, які дозволяють створювати складні векторні фігури, це лише верхівка айсберга. За допомогою інструмента Pen (перекладається як перо) можна відтворити будь-яку форму.

  • Теорія кривих. Криві Безьє. Види кривих;
  • Малюємо лінійну криву. Інструмент Pen. Створюємо найпростішу криву з нуля;
  • Редагування кривих. Інструмент Move для переміщення точок. Інструмент Bend для упраління кривизною. Інструмент Paint Bucket для заливання замкнутих контурів; Додавання та видалення точок;
  • Налаштування кривих. Налаштування обводки. Перетворення обводки у криві. Скруглення кутів;
  • Сайти з безкоштовними іконками. The Noun Project. Font Awesome. Cursor.in;
  • Експорт у Svg. Покрокова інструкція.

Читати десятий урок

Основи Figma VII

Основи UI–дизайну

  • Типографіка. Види шрифтів. Основні поняття в типографіці. Правила підбору пар шрифту. Сайти з безкоштовними шрифтами;
  • Колір. Моделі представлення кольору (RGB, CMYK). Анатомія кольору (тон, світло, насиченість). Кольорове коло. Комбінування кольорів;
  • Композиція. Симетричний та асиметричний баланс. Статика та динаміка. Вектори уваги;
  • Принципи дизайну. Гештальт-принципи дизайну. Добірка інших важливих принципів та методик.
  • Модульні сітки. Переваги сітки. Колонкова сітка. Модульна сітка. 8-піксельна сітка;
  • Іконки. Стилі іконок. Правила підбору іконок. Сайти з безкоштовними іконками. Зміна іконок під проект. Створення унікальних іконок;
  • Фотографії. Правила вибору фотографій. Сайти із безкоштовними фотографіями. Кадрування. Корекція кольору. Видалення об'єктів;
  • Де брати ідеї? Натхнення для дизайнера. Мудборд. Корисні сайти;
  • Робота зі змістом. Керування увагою. Візуальний сторітеллінг;
  • Дизайн для мобільних пристроїв. Responsive дизайн. Адаптивний дизайн.

Основи UX/UI–дизайну

Основи UX–дизайну

  • Основи дизайн-мислення. UX-стратегія;
  • Створення структури проекту. Mindmapping;
  • UX-дослідження, частина 1: Аналіз конкурентів, Lean Canvas, User Persona;
  • UX-дослідження, частина 2: Customer journey map;
  • Wireframing. Методики та інструменти;
  • UX-тестування: глибинні інтерв'ю, опитування, сортування карток;

Просунутий рівень Figma

Просунутий рівень Figma

  • Дизайн форми реєстрації — виконуємо справжнє завдання, реальні проблеми та їх вирішення;
  • Компоненти та стилі. Стилі кольору. Стилі тексту. Стилі об'єктів. Компоненти. Робимо UI-kit;
  • Обмеження (Constraints). Види обмежень. Гнучкі компоненти;
  • Автоматичне компонування (Auto Layout). Автоматичне розміщення. Робимо перелік коментарів;
  • Прототипування. Тригери. Переходи. Анімація;
  • Підготовка ресурсів. Чого чекають замовник та розробники. Експорт, поінти. Формати графічних файлів (jpeg, png, svg).

Просунутий рівень Figma

Портфоліо та пошук роботи

  • Портфоліо — що це, навіщо та скільки робіт виставляти? На який ринок орієнтуватися, чому клієнти зі США платять у 5-10 разів більше?
  • Де взяти роботи для портфоліо — робимо замовлення для вигаданих клієнтів, виконуємо безкоштовні тестові завдання на Upwork.
  • Де розмістити портфоліо — соцмережі, персональний сайт, Behance, Dribbble.
  • Що таке фріланс — віддалена робота на замовників із будь-якої точки планети.
  • Огляд популярної фріланс-біржі Upwork.
  • Робота на компанію в офісі або віддалено — плюси та мінуси, сайти для пошуку роботи.

Портфоліо та пошук роботи

Потрібен ваш фідбек!

Кожна з викладених вище тем буде розкрита в окремому уроці на цьому сайті. Відкрита до пропозицій написати на інші теми.

Підписуйтесь на мене в Instagram – @frusia.pro – будьте в курсі анонсів нових уроків, дивіться перевірки домашок у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.

Останнє оновлення 20 квітня 2022