Курс UI/UX Дизайну: Проєктування Інтерфейсів з Нуля

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

• Збирати інтерфейс у Figma, Axure і Photoshop — від фігур і стилів до прототипування переходів
• Проводити UX-дослідження: інтерв’ю, конкурентний аналіз, кількісні та якісні тести, А/Б-тестування
• Будувати карту шляху покупця (Customer Journey Map) і користувацькі історії за методом INVEST
• Проєктувати інформаційну архітектуру сайту за вісьмома принципами і навігаційні карти
• Ставити KPI, працювати з Яндекс.Метрикою і Google Analytics, рахувати CTR, CPC, CPA, ДРР і ROAS
• Проводити юзабіліті-тестування, евристичну оцінку і аудит сайту за десятьма критеріями

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

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

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

• Практика йде на двох наскрізних проєктах — інтернет-магазині та сайті/застосунку житлового комплексу — Навчаєтесь одразу на живих макетах, а не на розрізнених вправах
• Розбір методу чи програми передує практичній збірці макета — Закріплюєте кожну тему в проєкті одразу після пояснення
• Кожна програма — Figma, Axure, Photoshop — розбирається окремим уроком із конкретним результатом — Опановуєте інструмент крок за кроком, а не намагаєтесь зрозуміти все одразу
• Практичні уроки завершуються зібраним блоком макета — карткою, банером, прототипом — Після кожного заняття залишається закінчений шматок проєкту, а не чернетка
• Останній блок курсу присвячений працевлаштуванню — резюме, пошуку замовлень і портфоліо — Доводите навчання до результату, який можна показати замовнику чи роботодавцю

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

• Figma, Axure і Adobe Photoshop — основні програми для прототипування і дизайну
• Adobe Illustrator, Adobe XD, Sketch, InVision і After Effects — для окремих завдань упродовж курсу
• Акаунти на Behance і фриланс-біржах — для публікації портфоліо і пошуку замовлень

Чому самостійно зазвичай не виходить

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

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

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

Що зміниться

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

1. Інструменти Опановуєте Figma, Axure і Photoshop на практиці — фігури, стилі, шари, маски і просте прототипування
2. UX-дослідження і проєктування Збираєте бриф, вивчаєте користувачів, будуєте карту шляху покупця, інформаційну архітектуру і вайрфрейми
3. Візуальний дизайн Переносите вайрфрейми в кольоровий макет сайту і мобільного застосунку за гайдлайнами і типографікою
4. Аналітика, тестування і працевлаштування Налаштовуєте KPI і веброаналітику, перевіряєте юзабіліті та аудит сайту, оформляєте резюме і портфоліо на Behance

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

31 урок · 7 модулів · 11 годин 31 хвилина відео · з двома наскрізними проєктами — інтернет-магазином і сайтом житлового комплексу

• Від встановлення програм до першого макета інтернет-магазину 4 уроки

  Розділ відкриває курс встановленням і розбором інтерфейсу Figma, Axure і Photoshop: фігури, стилі, шари, маски і просте прототипування. Тут же збирається перший проєкт — інтерактивний прототип і кольоровий дизайн головної сторінки інтернет-магазину.

  • Основи програми Figma32:26

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

  • Основи Axure34:29

    Збираємо інтерактивний прототип головної сторінки інтернет-магазину в Axure: розмітка напрямними, складання шапки, каталогу, банера, карток товару і футера з блоків бібліотеки. Наприкінці публікуємо посилання на готовий прототип.

  • Основи Photoshop57:08

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

  • Дизайн сайту58:50

    Промальовуємо візуальний дизайн головної сторінки інтернет-магазину в Figma поверх готового прототипу: сітка, шапка, банер, картки товарів, блок «про нас» і футер. Елементи оформляємо кольором, тінями і градієнтами.

• Від брифу замовника до списку функцій сайту 3 уроки

  Розділ розбирає складання дизайн-брифу, методи дослідження користувачів — від аналітики та інтерв’ю до А/Б-тестування — і метод генерації ідей через персонажів і бар’єри, який перетворює спостереження на конкретний функціонал сайту.

  • Створення брифу6:56

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

  • Дослідження користувачів і даних у дизайні7:27

    Розбираємо методи UX-дослідження: аналітику, інтерв’ю з користувачами, конкурентний аналіз, опитування, тестування ієрархії та А/Б-тестування. Показуємо різницю між кількісними та якісними дослідженнями і коли який метод доречний.

  • Генерація ідей, матриця і функціонал2:48

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

• Повний проєкт сайту — від вайрфрейму до клікабельного прототипу 9 уроків

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

  • Принципи юзабіліті та програми9:23

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

  • Натхнення та User story14:07

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

  • Customer Journey Map8:36

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

  • Інформаційна архітектура проєкту20:49

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

  • Навігаційні карти12:13

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

  • Створення дизайну сайту55:16

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

  • Створюємо Wireframes для ключових екранів36:39

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

  • Створюємо дизайн усіх Wireframes1:18:54

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

  • Інтерактивний прототип11:53

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

• Візуальний дизайн за гайдлайнами і мобільний застосунок 4 уроки

  Розділ розбирає гайдлайни Apple для іконок, шрифтів і кольорових схем, прийоми типографіки і правила навігації сайту. Отримані прийоми застосовуються в дизайні мобільного застосунку — трьох екранів із власним клікабельним прототипом.

  • IOS guidelines та їхні специфікації, кольорові схеми10:24

    Розбираємо призначення iOS-гайдлайнів Apple та їхні специфікації: вимоги до іконок, системного шрифту San Francisco, кольорової схеми та піктограм інтерфейсу. Показуємо, як оформити квадратну іконку без заокруглень і прозорості, підібрати один-два основні кольори та налаштувати стани піктограм нижньої навігації.

  • Робота з типографікою14:54

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

  • Навігація сайту10:01

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

  • Створюємо дизайн мобільного застосунку30:03

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

• Веброаналітика для дизайнера 5 уроків

  Розділ показує, як розкладати бізнес-ціль на KPI, як влаштована digital-воронка продажів, чим відрізняються Яндекс.Метрика і Google Analytics, як читати теплові карти і WebVisor та рахувати метрики ефективності реклами — CTR, CPC, CPA, ДРР і ROAS.

  • Формуємо цілі та KPI вашого продукту5:45

    Показуємо, як розкладати абстрактну бізнес-ціль на три вимірні KPI — обсяг, ціну та якість — на прикладах інтернет-магазину, реклами в Google AdWords і Facebook. Розбираємо, як розставляти пріоритети між показниками, якщо досягти їх усіх одночасно не вдається.

  • Діджитал-воронка6:39

    Розбираємо структуру digital-воронки продажів — від знайомства з брендом у соцмережах до купівлі — і інструменти для кожного з трьох етапів: рекламу та SMM, лендинг з лід-магнітом, email-розсилку та пошукові оголошення. Окремо говоримо про відеомаркетинг і про те, як аналіз воронки допомагає знаходити слабкі етапи та коригувати УТП.

  • Яндекс.Метрика і Google Analytics для дизайнера11:45

    Порівнюємо Яндекс.Метрику і Google Analytics: різні умови підрахунку відмов і як їх вирівняти через Google Tag Manager, а також відмінності в наборі функцій — WebVisor, карти кліків і скролінгу в одного сервісу проти багатоканальних послідовностей, обчислюваних показників і А/Б-тестів в іншого. Пояснюємо, навіщо ставити обидва лічильники одночасно і які звіти перевіряти регулярно.

  • Теплові карти, вебвізор4:24

    На конкретному сайті показуємо, де в Яндекс.Метриці знаходяться WebVisor, карта кліків і карта скролінгу та як ними користуватися: WebVisor записує рухи курсора і кліки за кожним візитом, карта кліків показує найклікабельніші елементи сторінки, карта скролінгу — на яких блоках затримується увага. Розбираємо, як ці інструменти допомагають зрозуміти, чому відвідувач не доходить до цільової дії.

  • Аналіз ефективності11:46

    Розбираємо ключові метрики ефективності реклами та формули їх розрахунку: CTR, CPC, CPA, ЧРВ і ROAS, а також стандартну й розширену електронну торгівлю в аналітиці. Пояснюємо, чому невиконані замовлення спотворюють статистику і яку роль відіграє наскрізна аналітика, і формулюємо правила порівняння кампаній між собою.

• Юзабіліті-тестування і аудит сайту 4 уроки

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

  • Методи дослідження юзабіліті11:09

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

  • Практика з експертизи сайту15:21

    Проходимо десять критеріїв базового аудиту сайту: актуальність дизайну, зрозумілість навігації та адаптація під мобільні пристрої, robots.txt і карта сайту, протокол HTTPS, швидкість завантаження, якість контенту, биті посилання та відсутність дублів у метатегах title і description.

  • Евристична оцінка10:34

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

  • Експертиза компонентів і юзабіліті-тестування16:38

    Вивчаємо експертизу компонентів сайту: складання портретів цільової аудиторії, поведінкових сценаріїв і перевірку кожного сценарію на швидкість взаємодії, кількість помилок і задоволеність користувача. Розглядаємо проведення юзабіліті-тестування з фокус-групою та сервіси для нього — Яндекс.Метрику з WebVisor, Usability Hub, Optimal Workshop, Crazy Egg та Usabilo.

• Резюме, портфоліо і перші замовлення 2 уроки

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

  • Складання резюме та пошук роботи55:59

    Як оформити резюме на HeadHunter і профіль на фриланс-біржах, де шукати вакансії на кількох майданчиках і як відбирати студії за вартістю години та надійністю оплати. Розбір супровідного листа, тестових завдань, безпечної угоди та спілкування із замовниками на співбесіді.

  • Оформлюємо та створюємо портфоліо на Behance28:01

    Збірка кейсу для портфоліо на Behance: мокапи пристроїв, десктопна та мобільна версії, елементи сильної презентації — логотип, карта сайту, вайрфрейми, палітра та типографіка. Публікація проєкту з прев’ю, тегами та категоріями.

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

Про цей курс

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

  Ні — курс відкривається встановленням і розбором базових програм (Figma, Axure, Photoshop) і не спирається на попередні теми.

• Які програми знадобляться для навчання?

  Основні — Figma, Axure і Adobe Photoshop; окремі уроки також використовують Illustrator, Adobe XD, Sketch, InVision і After Effects.

• Чи навчить курс верстати сайти?

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

• Чи розбирається дизайн мобільних застосунків?

  Так, окремий розділ присвячений дизайну мобільного застосунку — трьом екранам із власним клікабельним прототипом; з мобільних гайдлайнів детально розібрані лише рекомендації Apple (iOS).

• Що потрапить у портфоліо після курсу?

  Інтерактивний прототип і дизайн інтернет-магазину, повний проєкт сайту нерухомості з клікабельним прототипом, дизайн мобільного застосунку і опублікований на Behance кейс з мокапами, прев’ю, тегами і категоріями.

• Чи вчить курс шукати замовлення і роботу?

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

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

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

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

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

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

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

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

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

  Безстроково. Курс залишається вашим назавжди, повертатися до нього можна скільки завгодно разів. Якщо через рік чи два посилання раптом перестане відкриватися з технічних причин — напишіть на 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 теж буває, але час відповіді не обіцяємо.