Курс для веб- і лендінг-дизайнерів

SaaS-кейс рівня продуктової компанії за {4 тижні}

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

Чому портфоліо не працює

Лендінг не проходить продуктовий скринінг

Продуктовий дизайнер у SaaS чи продуктовій компанії дивиться твоє портфоліо 90 секунд і шукає в ньому конкретні речі, які лендінги не містять.

• 01

  Не видно рішень, тільки смак

  На лендінгу майже кожне рішення можна пояснити естетикою. У продукті кожне рішення має причину: чому таблиця, а не картки; чому цей стан порожній; чому ця дія деструктивна. Рев’ювер шукає саме ці причини.

  layer
• 02

  Один щасливий сценарій

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

  layer
• 03

  Немає зв’язку з грошима

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

  layer
• 04

  Немає масштабу

  Три екрани не показують системності. Продуктовий кейс — це наскрізний сценарій: як людина потрапила в продукт, що зробила, за що заплатила і що побачила потім.

  layer

Що змінюється

Лендінг і SaaS — різні ремесла

Це абсолютно інший набір задач. Ось що конкретно доведеться робити інакше.

Результат курсу

Не мокап, а робочий продукт

Христина ШвецьДжуніор дизайнер, студентка курсу

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

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

Результат

Що з’явиться в портфоліо

Ліворуч — навичка, праворуч — конкретний артефакт, який можна показати після курсу.

Програма

6 лекцій, один наскрізний проєкт

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

Загалом 2 години 14 хвилин відео. Орієнтовний темп — 4 тижні.

• 01Основи SaaSтеорія16:35

  Що таке SaaS і чим продуктова робота відрізняється від того, що ти робиш зараз. Типи продуктів, патерни, які повторюються майже скрізь, і вибір ідеї для власного кейсу.

  Розбираємо

  • B2B, B2C і B2B2C: хто платить і хто користується
  • Типи за призначенням: data-centric, tool-centric, infrastructure
  • Патерни B2B: ролі, дашборди, модулі, таблиці, CRUD, інтеграції
  • Як обрати ідею, яку реально довести до кінця

  На виході

  Сформульована ідея продукту й цільова аудиторія

• 02Дослідження та архітектура продуктутеорія + практика20:50

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

  Розбираємо

  • Desk research за годину: як знайти конкурентів і як зайти в закриті B2B-продукти
  • Матриця конкурентів
  • Інформаційна архітектура та навігація
  • Три рівні навігації й чому користувач має завжди розуміти, де він
  • Use case проти user flow: у чому різниця і навіщо обидва

  На виході

  Матриця конкурентів і карта екранів твого продукту

• 03Реєстрація, онбординг та ролітеорія + практика21:21

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

  Розбираємо

  • Три способи входу: пошта з паролем, SSO, інвайти — і чому B2B вимагає SSO
  • Відновлення доступу
  • Аха-момент: як довести людину до цінності
  • Progressive disclosure і формати онбордингу
  • RBAC, DAC, ABAC: три моделі доступу і яка коли доречна

  На виході

  Signup, login, відновлення паролю, онбординг і матриця ролей та прав

• 04Дашборди та інформаційні панелітеорія + практика27:11

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

  Розбираємо

  • Типи дашбордів
  • Типи метрик
  • Підходи до data density
  • Розбір хорошого й поганого дашборду з тими самими даними

  На виході

  Головний, модульний і мікродашборд твого проєкту

• 05Робота з даними: таблиці та CRUDтеорія + практика36:34

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

  Розбираємо

  • CRUD-flow: шість способів створити об’єкт — від форми до імпорту й дублювання
  • Типи форм
  • Фільтри, сортування, пошук, пагінація, масові дії
  • Hard delete проти soft: що зникає, що архівується і коли видаляти взагалі не можна
  • Empty states & edge cases

  На виході

  User flow створення сутності, повний CRUD-цикл і таблиця, зібрана з нуля

• 06Платежі, білінг і підпискитеорія + практика11:20

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

  Розбираємо

  • Моделі прайсингу
  • Стратегії входу: freemium, free trial, sales-led
  • Апгрейд, даунгрейд і пропорційні платежі всередині циклу
  • Помилкові стани
  • Cancellation UX без темних патернів

  На виході

  Секція білінгу, сторінка планів, флоу апгрейду й скасування

Матеріали

Не тільки відео

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

• ◇

  7 брифів для кейсу

  Кожен із ідеєю, ролями, двома user flow, базовим функціоналом і розбором конкурентів. Перша лекція вчить обирати; бриф прибирає порожній аркуш.

• ◇

  PDF-розбори

  Типові помилки в sign up, UX-патерни для форм, UX-патерни для таблиць.

Хто веде

Ірина Долід

G

She’s got product and business mindsets she uses to propose, design and execute best for both the user and the company.

Senior Product Designer

6+ років у UX/UI, спеціалізація — складні SaaS та B2B-продукти. Працюю з міжнародними крос-функціональними командами: дизайн-системи, дашборди, робота з даними, білінг.

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

6+ років

у продуктовому дизайні

SaaS / B2B

основна спеціалізація

10 000+

хвилин менторства

Міжнародний досвід

• ◇

  Koos · Амстердам

  Дизайн-агенція. Серед проєктів — сайт аеропорту Дубая, 40 млн пасажирів на рік.

• ◇

  Momentus · США

  Американська продуктова компанія, платформа для управління заходами.

• ◇

  Bookable · Велика Британія

  Британський стартап: UX для API-інфраструктури бронювання.

Портфоліо і кейси

Відгуки

Що кажуть ті, хто вже проходить курс

• S

  Solomiia Студентка курсу

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

• О

  Оксана Студентка курсу

  Перш за все, стало якось зрозуміло, що у всьому можна розібратися, і що не такий страшний той SaaS як його малюють. […] Дуже зручно, що в записі, можна слухати коли зручно. Це великий плюс, що доступ до курсу не закривається, і переслуховувати коли потрібно, або повертатись до минулих відео, щоб закріпити або згадати інформацію. […] Мені дуже подобається як ти пояснюєш, структуруєш

• К

  Кіра Студентка курсу

  По лекціям усе дуже круто. Зрозуміло, я б сказала Ви нам «розжували інформацію і у рот поклали» як пташенятам.

Без сюрпризів

Що буде після оплати

1. 1

   Оплата на сторінці WayForPay

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

2. 2

   Лист із доступом

   Приходить на пошту, вказану при оплаті, протягом 60 хвилин. Усередині — посилання на Notion і всі матеріали.

3. 3

   Якщо лист не прийшов

   Перевір спам, потім напиши в Telegram @idolid і вкажи пошту, з якої проходила оплата. Відкриваю доступ вручну.

FAQ

Питання, які ставлять найчастіше

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

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

• А якщо я взагалі початківець без комерційного досвіду?

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

• Чи потрібен досвід у Figma?

  Так, робочий рівень. Ти маєш вільно користуватись автолейаутом, компонентами і варіантами. Ці інструменти в курсі не пояснюються — вони використовуються.

• Який формат курсу?

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

• Скільки часу потрібно на проходження?

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

• На скільки дається доступ?

  Назавжди. Усі майбутні оновлення курсу ти отримуєш безкоштовно.

• Чи буде практика і перевірка домашніх завдань?

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

• Що робити, якщо в мене немає ідеї для кейсу?

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

• Це курс про Figma чи про мислення?

  Про мислення, показане у Figma. Ми не витрачаємо час на інструменти, але кожна лекція закінчується не теорією, а конкретними екранами твого кейсу.

• Чи гарантує курс працевлаштування?

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