Курс з дизайну мобільних додатків: від ідеї до UX/UI

Що ви зможете після курсу

• Досліджувати користувачів і конкурентів: складати персони, сценарії та юзкейси
• Вибудовувати структуру застосунку: розставляти пріоритети функцій і будувати карту в XMind
• Проєктувати навігацію та перетворювати паперові скетчі на вайрфрейми й інтерактивний прототип
• Оформляти екрани за гайдлайнами iOS і Material Design: сітка, палітра, типографіка, іконки
• Анімувати інтерфейс в After Effects: переходи між екранами та мікровзаємодії
• Готувати макет і нарізку до передачі розробникам та оформляти кейс для Behance і Dribbble

Кому підійде курс

Курс не вчить програмуванню: Swift, Kotlin і Flutter згадуються лише під час класифікації застосунків — писати код ви не будете.

Як проходить навчання

• Кожен урок завершується завданням — Завдання складаються в один наскрізний проєкт — власний застосунок, а не розрізнені вправи
• Повний цикл дизайнера в одній програмі — Ви проходите шлях від дослідження та структури до нарізки ассетів і специфікацій для розробників
• Обидві платформи в порівнянні — Розбираєте гайдлайни Apple і Material Design і знаєте, чим дизайн під iOS відрізняється від Android
• Практика в редакторах і сервісах — Робота в XMind, Figma, Sketch, Photoshop, InVision та After Effects за розборами з уроків
• Перевірка рішень на користувачах — Прототип тестується до малювання, а правки сприймаються як нормальна частина процесу

Що знадобиться

• Смартфон — з розбору встановлених застосунків починається перше завдання
• Комп’ютер із графічним редактором: Figma, Sketch, Photoshop або Adobe XD
• XMind для карти структури та After Effects для теми анімації

Чому одному буває складно

Екран смартфона маленький: на ньому треба вмістити навігацію, контент і жести та водночас потрапити в гайдлайни iOS чи Material Design. Без системи просто збираються екрани, якими незручно користуватися, а переділки потім затягують розробку.

Заплутатися можна вже на старті: застосунок потрібен не кожному бізнесу, аудиторію легко оголосити «для всіх», а функції — насипати без пріоритетів. Курс дає послідовність: спершу задача, персони та юзкейси, потім структура та вайрфрейми і вже потім кольори та шрифти.

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

Що зміниться

Як улаштований шлях

1. Дослідження Задача та цілі застосунку, розмови із замовником і спостереження за користувачами, персони, сценарії та юзкейси, розбір прямих і непрямих конкурентів.
2. Структура та вайрфрейми Пріоритезація функцій, види ієрархії та правила інформаційної архітектури, карта в XMind, навігація, паперові скетчі, цифрові вайрфрейми та інтерактивний прототип у InVision.
3. Візуальний дизайн Сітка, палітра та типографіка, особливості платформ iOS і Android, малювання екранів за вайрфреймами, порожні стани, сплеш-екрани, Style Guide та клікабельний прототип.
4. Анімація та здача проєкту Переходи та мікровзаємодії в After Effects, нарізка ассетів під платформи, специфікації, матеріали для магазинів застосунків і кейс для портфоліо.

Програма курсу

10 уроків · 4 години 20 хвилин відео · Завдання уроків складаються в один проєкт — власний мобільний застосунок від теми до презентації.

• Від ідеї застосунку до макета для розробників 10 уроків

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

  • Мобільні застосунки: види та призначення28:39

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

  • Дослідження користувачів: цілі, персони, сценарії27:26

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

  • Функції та структура застосунку26:36

    Від сценаріїв — до структури: виявляєте та пріоритизуєте функції, розбираєте види ієрархії та правила інформаційної архітектури. Будуєте функціональну карту застосунку в XMind і дізнаєтеся, як презентувати та затверджувати її із замовником.

  • Навігація та вайрфрейми24:56

    Елементи навігації та способи показу контенту: таббари, гамбургер-меню, списки, картки, онбординг. Ведете проєкт від паперових скетчів до цифрових вайрфреймів та інтерактивного прототипу в InVision із перевіркою на користувачах.

  • Візуальний дизайн і платформа iOS23:44

    База візуального дизайну: шрифти, колір, контраст і сітка. Знайомство з платформою iOS — екрани та Retina, жести, елементи керування та системні екрани; завдання — порівняти застосунки для iPhone та iPad за гайдлайнами Apple.

  • Дизайн під Android і відмінності від iOS19:27

    Дизайн під Android: система Material Design, одиниці DP і SP, жести, типографіка Roboto та характерні елементи інтерфейсу. Окремо — список відмінностей Android від iOS та нюанси кросплатформенних рішень.

  • Графічні редактори для дизайну інтерфейсів34:51

    Порівняння п’яти редакторів для дизайну інтерфейсів: Photoshop, Sketch, Figma, Adobe XD та InVision Studio — із сильними та слабкими сторонами кожного. Розбираєте сітки, символи, прототипування та нарізку ассетів для розробників.

  • Візуальний дизайн мобільного застосунку17:59

    Від вайрфреймів — до оформлення: вибір платформи та пристрою, сітка, палітра з акцентними кольорами, шрифти та іконки. Малюєте екрани за вайрфреймами, додаєте порожні стани та сплеш-екрани, збираєте клікабельний прототип і Style Guide.

  • Анімація в дизайні інтерфейсів38:42

    Види анімації в інтерфейсах: переходи між екранами, мікровзаємодії та графічні анімації. Дванадцять принципів Волта Діснея та прийоми UX in Motion, практика в After Effects — від shape-шарів і Trim Path до вивантаження в PNG-послідовність або JSON, огляд Principle, Flinto та Framer X.

  • Передача дизайну в розробку та портфоліо17:25

    Фінал проєкту: порядок у документі, нарізка іконок та графіки під платформи, специфікації через InVision Inspect або Zeplin, карта екранів. Готуєте матеріали для релізу в магазинах застосунків та збираєте кейс для Behance і Dribbble — від hero shot до екранів у мокапах.

Часті запитання

Про цей курс

• Чи потрібен досвід у дизайні інтерфейсів?

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

• У якій програмі працюватимемо?

  Окремий урок порівнює Photoshop, Sketch, Figma, Adobe XD та InVision Studio — із сильними та слабкими сторонами кожного. Sketch доступний лише на macOS, Figma працює в браузері, Adobe XD — на Windows і Mac.

• Чи залишиться в мене готовий проєкт?

  Так. Завдання уроків складаються в один застосунок: тема обирається на початку, далі — персони, структура, вайрфрейми, екрани, прототип та анімація. У фіналі — іконка, екрани в мокапах та презентація у форматі Behance.

• Курс вчить програмуванню?

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

• Під яку платформу буде дизайн?

  Розбираються обидві: окремі уроки присвячені iOS — екрани та Retina, жести, системні елементи — та Android із Material Design і одиницями DP і SP. У курсі є список конкретних відмінностей платформ одна від одної.

• Чому присвячена тема анімації?

  Переходи між екранами, мікровзаємодії та графічні анімації розбираються на принципах Волта Діснея та прийомах UX in Motion. На практиці анімація збирається в After Effects — від shape-шарів і Trim Path до вивантаження в JSON.

Доступ і матеріали

• Коли і як я отримаю доступ до курсу?

  Одразу після оплати, тієї ж секунди й автоматично. Чекати на підтвердження не потрібно. Доступ надходить двома шляхами водночас. Перший: на пошту, вказану при оформленні замовлення, приходить лист із посиланням на матеріали. Другий: те саме посилання з’являється у вашому акаунті на сайті, у розділі «Завантаження», і залишається там назавжди.

• Де зберігаються матеріали курсу?

  Усі відео та додаткові файли лежать у хмарному сховищі. Посилання на нього — у вашому акаунті на сайті, розділ «Завантаження», і в листі, який надійшов після оплати. Акаунт тут не формальність, а спосіб доставки: курс залишається в ньому назавжди. Навіть якщо лист загубився або ви згадали про купівлю через рік, посилання буде на місці.

• Чи можна завантажити матеріали, чи тільки дивитися онлайн?

  Завантажувати можна і варто. Радимо зберегти відео на комп’ютер і дивитися звідти. Причина проста: хмарне сховище не розраховане на перегляд відео. Іноді воно дозволяє увімкнути ролик просто у браузері, але якість при цьому помітно гірша за вихідну. На своєму комп’ютері ви побачите курс таким, яким його записували.

• Як довго діє доступ?

  Безстроково. Курс залишається вашим назавжди, повертатися до нього можна скільки завгодно разів. Якщо через рік чи два посилання раптом перестане відкриватися з технічних причин — напишіть на info@siluette.com.ua, ми його відновимо.

• Лист із доступом не надійшов — що робити?

  Насамперед: доступ у вас є в будь-якому разі. Увійдіть на сайт і відкрийте розділ «Завантаження» — посилання на курс уже там, незалежно від того, дійшов лист чи ні. Найчастіше лист губиться через одруківку в адресі під час оформлення замовлення. Ще варто заглянути до теки «Спам». Не виходить розібратися — не витрачайте час: напишіть на info@siluette.com.ua або в чат у правому нижньому куті сайту, ми допоможемо.

• На яких пристроях дивитися курс?

  Найкраще на комп’ютері або ноутбуці: завантажте відео й відкрийте будь-яким звичним плеєром. Знадобляться встановлені відеокодеки — на більшості комп’ютерів вони вже є. Завантажити курс можна на скільки завгодно пристроїв. А от телефон ми не радимо, і з двох причин. На маленькому екрані погано видно деталі, особливо якщо в уроці показують інтерфейс програми. І на телефонах часто немає кодеків для форматів, у яких записані відео.

Оплата та повернення

• Якими способами можна оплатити?

  Банківською карткою Visa, MasterCard або «Простір», через Google Pay, Apple Pay, Masterpass, Visa Checkout, платіжний QR-код, Botpay у Telegram чи Privat24. Є й оплата частинами: Монобанк (3 або 4 платежі), А-Банк (2, 3 або 4 платежі та розстрочка), Банк Глобус (8 платежів), «Скибочка» від OTP Bank (3 платежі), миттєва розстрочка та оплата частинами від ПриватБанку.

• Чи приймається картка, випущена не в Україні?

  Так. Платіжна система приймає картки з Євросоюзу та будь-яких інших країн. Одна деталь, про яку часто забувають: банк може попросити підтвердити платіж — у мобільному застосунку або кодом із СМС. Якщо оплата не проходить, перевірте застосунок банку та повідомлення.

• Як працює знижка 20% при купівлі кількох курсів?

  Додайте до кошика два курси або більше — знижка застосується автоматично до всіх товарів у кошику. Два курси: мінус 20% на обидва. П’ять курсів: мінус 20% на всі п’ять. Знижка поєднується з будь-якими акційними цінами й діє на весь каталог без винятків.

• Чи можна повернути курс або гроші?

  Цифрові товари поверненню та обміну не підлягають. Це загальне правило для всіх електронних товарів в Україні — постанова Кабінету Міністрів № 172 від 19 березня 1994 року. При цьому ми завжди на зв’язку. Якщо доступ не відкривається, посилання перестало працювати або файли пошкоджені — напишіть на info@siluette.com.ua, вкажіть дату та номер замовлення. Відновимо. Якщо щось незрозуміло в самому курсі, теж пишіть — підкажемо.

• Чи можна оплатити від організації за рахунком?

  Поки що ні. Ми працюємо лише з приватними покупцями — безготівкової оплати за рахунком від юридичних осіб зараз немає.

Як проходить навчання

• Чи є зворотний зв’язок із викладачем і перевірка завдань?

  Ні. Усі курси — це записи уроків для самостійного вивчення: викладач не відповідає на запитання і не перевіряє домашні завдання. Саме тому курси коштують значно дешевше за навчання з куратором. Ви отримуєте той самий матеріал, але займаєтеся самі та у своєму темпі.

• Чи видається сертифікат?

  Так, цифровий сертифікат — на запит і безкоштовно. Напишіть на info@siluette.com.ua, вкажіть ім’я та прізвище саме в тому вигляді, в якому хочете бачити їх у сертифікаті, і ми надішлемо його протягом доби.

• Чи потрібен досвід, щоб почати?

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

• Чи є терміни проходження курсу?

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

• Чи можна поділитися курсом з іншою людиною?

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

Підтримка

• Куди писати, якщо щось не працює?

  Найкраще на info@siluette.com.ua. Є й чат у правому нижньому куті сайту, але пошта надійніша: там можна все описати докладно та додати знімки екрана. Прохання: опишіть, що саме ви робили і що пішло не так, та додайте знімок екрана з помилкою. Так ми вирішимо питання одразу, а не з’ясовуватимемо півдня, що сталося.

• Як швидко відповідає підтримка?

  У робочий час, з 9:00 до 19:00, на пошту зазвичай відповідаємо протягом години, у чаті — за кілька хвилин. Після 19:00 теж буває, але час відповіді не обіцяємо.