Адобе XD-посібник – дизайн та прототипування.

Ласкаво просимо до великого навчального посібника по Adobe XD. У цьому вступі представляюся я як ваш тренер.

Яка різниця між користувацькою досвідом (UX) та інтерфейсом користувача (UI)? Які види рівнів дизайну існують і для чого найкраще використовувати Adobe XD? Відповідь тут!

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

Артборди (області малювання) можна легко створити в Adobe XD для різних роздільність та пристроїв. Які особливості потрібно врахувати, ви дізнаєтеся в цьому посібнику.

Різні налаштування сітки полегшують нам чисте розташування елементів та об'єктів між собою. Для цього ми маємо прямокутну сітку та розділення стовпців для колонок.

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

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

Існує безліч методів для імпорту активів, таких як зображення, файли, текстові документи та інші, в Adobe XD. У цьому відео я представлю деякі методи. Оскільки XD є частиною Creative Cloud від Adobe, робота з бібліотеками є надзвичайно зручною та комфортною.

Тема шрифтів та типографії є важливим компонентом нашої подорожі через Adobe XD. У цьому відео ви дізнаєтеся, як правильно та ефективно використовувати шрифти.

Форми можуть бути імпортовані в Adobe XD дуже легко або створені самостійно за допомогою інструменту шляху. Якщо об'єкт використовується більше двох разів, рекомендується додати його як символ до списку ресурсів.

Дизайн пов'язаний багато з натхненням та впливом зовнішнього середовища. Сюди входить аналогове середовище, а також цифровий світ. Тут я хочу познайомити вас з деякими порталами, які часто відвідую.

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

Сітка повторень - одна з найважливіших функцій Adobe XD. Вона допомагає нам масштабувати та заповнювати створені групи об'єктів за бажанням.

У останній частині створення односторінкової веб-сторінки ми займемося підвалом і областю для посилань. Тут ми використовуємо зручні SVG-файли та вивчаємо додаткові техніки дизайну.

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

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

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

Одним із найпотужніших інструментів для максимально ефективної візуалізації є функція автоматичної анімації Adobe XD. У цьому прикладі я поясню, як ви можете адаптивно застосовувати принцип роботи функції автоматичної анімації для будь-якого можливого сценарію.

У наступних відео ми вивчатимемо створення прототипу для інтернет-магазину. Тут ми вивчатимемо можливості створення візуально привабливих прототипів високої якості з простих артбордів. Частина 1 з 4.

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

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

Добрий дизайн використовування завжди надає користувачу зворотний зв'язок щодо стану системи. Цей зворотний зв'язок ми впровадимо у кінцеву анімацію проекту.

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

При співпраці з іншими відділами та зацікавленими особами аудіокоментування є цінною функцією для зрозумілого роз'яснення статусу проекту.

Тестувати прототип в віртуальному середовищі - це одне, а подавати його в реальний пристрій - це зовсім інша справа. І саме це можна зручно вирішити через Adobe XD, підключаючись або по USB, або через Creative Cloud. Для цього ми використовуємо додаток Adobe XD з App Store.

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

Adobe XD змінюється як ще дуже молода програма з кожним оновленням: У цьому відео я поясню в яких новинках полягають переваги переходу з версії 18 на версію 19, як використовувати функції і в яких ситуаціях вони можуть бути корисними. До них відносяться: компоненти замість символів, респонсивний розмір, вказівки, полігон-інструмент, додаткові можливості для форматування тексту та багато іншого. Бавтеся!