UI/UX-дизайн часто здається професією, куди можна потрапити за кілька тижнів відео-уроків. Насправді це ремесло, у якому важить не кількість переглянутих курсів, а кількість розв'язаних задач і отриманого чесного фідбеку. Цей гайд — не обіцянка швидкого результату, а послідовність кроків, яка допомагає не загубитися на старті й не витрачати місяці на те, що не наближає до першої роботи.
Крок 1. Розберіться, що саме робить UI/UX-дизайнер
UX (user experience) — це про те, як людина досягає своєї мети в продукті: які кроки проходить, де плутається, що її зупиняє. UI (user interface) — це візуальна мова: сітка, типографіка, колір, компоненти, стани кнопок. На практиці дизайнерка чи дизайнер інтерфейсів поєднує обидві частини, але акценти в різних командах відрізняються.
Перш ніж вчитися інструментам, подивіться на звичні застосунки іншими очима. Відкрийте банківський чи поштовий застосунок і запишіть: яку задачу ви хотіли виконати, скільки екранів це забрало, де ви зупинилися й подумали «а куди тепер?». Це і є перша вправа з UX — помічати тертя.
Крок 2. Закладіть фундамент: базові принципи
Не треба вивчати все одразу. Для старту достатньо впевнено розуміти кілька тем і вміти пояснити кожну своїми словами:
- Типографіка: ієрархія заголовків, розмір основного тексту, міжрядковий інтервал, довжина рядка.
- Сітки й відступи: чому відступи кратні одній базовій величині й як це робить макет охайнішим.
- Колір і контраст: як перевірити, чи читається текст на фоні, і чому колір не може бути єдиним носієм змісту.
- Компоненти та стани: кнопка — це не один прямокутник, а набір станів: звичайний, наведення, натискання, неактивний, завантаження, помилка.
- Базові UX-евристики: зрозумілий статус системи, можливість скасувати дію, послідовність, запобігання помилкам.
Корисна звичка — вести власний конспект прикладів: скриншот гарного рішення і одне речення, чому воно працює. За кілька місяців це стане вашою особистою бібліотекою патернів.
Крок 3. Опануйте Figma на реальних задачах
Figma — основний інструмент більшості продуктових команд, тож почніть із нього. Але вчіться не «всім функціям», а тим, що потрібні в щоденній роботі: фрейми, автолейаут, компоненти й варіанти, стилі тексту й кольору, прототипування переходів між екранами.
Найкращий спосіб — перемальовувати. Візьміть екран застосунку, яким користуєтеся щодня, і відтворіть його в Figma піксель у піксель, використовуючи автолейаут і компоненти. Потім змініть ширину екрана й подивіться, що «розлізлося». Така вправа вчить більше, ніж година теорії.
Перемальовування — це тренування, а не портфоліо. Чужий дизайн, навіть ідеально відтворений, не показує ваших рішень. Використовуйте його, щоб набити руку, а в портфоліо кладіть роботи, де ви самі щось вирішували.
Крок 4. Вчіться через практику, а не через накопичення курсів
Типова пастка новачків — нескінченне навчання без результату. Встановіть собі правило: на кожну годину теорії — щонайменше година практики. Практика — це будь-яка задача з обмеженнями: конкретний користувач, конкретна мета, конкретний термін.
Ідеї для навчальних задач, які варто спробувати:
- Спростіть процес, який вас дратує: запис до лікаря, оплата комунальних послуг, пошук розкладу.
- Спроєктуйте онбординг для застосунку, який ви знаєте, для людини, яка відкриває його вперше.
- Додайте відсутній стан в існуючий інтерфейс: порожній список, помилку мережі, довге ім'я користувача.
- Візьміть участь у дизайн-грі чи челенджі з дедлайном — обмежений час привчає ухвалювати рішення.
Дизайн-ігри — один із найчесніших форматів практики: у всіх однакове завдання й термін, а результат бачать і оцінюють інші люди. Про те, як ми їх проводимо, читайте в розділі Активності.
Крок 5. Зробіть два-три перші проєкти від початку до кінця
Перший проєкт не мусить бути великим, але мусить бути завершеним. Завершений — означає, що ви пройшли весь шлях: сформулювали проблему, поговорили хоча б з трьома-п'ятьма людьми, які з нею стикаються, зробили чернетки, перевірили їх, доопрацювали й оформили фінальні екрани.
- Сформулюйте проблему одним реченням: хто, що хоче зробити, що заважає.
- Поговоріть із людьми. Питайте про минулий досвід («розкажіть, як ви робили це востаннє»), а не про гіпотетичні бажання.
- Зробіть швидкі ескізи кількох варіантів — на папері або простими сірими блоками.
- Зберіть клікабельний прототип і попросіть когось виконати задачу, мовчки спостерігаючи.
- Виправте те, де людина зупинилася, і лише тоді переходьте до візуального оформлення.
- Запишіть, що ви вирішили й чому — це основа майбутнього кейсу.
Крок 6. Шукайте фідбек регулярно
Без зовнішнього погляду легко роками повторювати ті самі помилки. Показуйте роботу рано, ще в чернетці, коли змінити щось дешево. Просіть конкретний фідбек: не «як вам?», а «чи зрозуміло, що робити на цьому екрані?» або «що тут кидається в очі першим?».
Сприймайте критику як дані, а не як вирок. Корисне правило: вислухати, перепитати, якщо незрозуміло, подякувати — і тільки потім вирішувати, що з цього брати. Не кожна порада правильна, але кожна показує, як вашу роботу бачить інша людина.
Крок 7. Станьте частиною спільноти
Спільнота дає те, чого не дає жоден курс: живі приклади, відповіді на «дурні» питання, відгуки на роботи й мотивацію не кидати. У Spaceberry Community понад 1500 дизайнерів і дизайнерок обговорюють роботу, діляться матеріалами й беруть участь в іграх та воркшопах. Не обов'язково одразу активно писати — почніть із того, щоб уважно читати, ставити питання й час від часу показувати свої роботи.
Найбільше від спільноти отримують ті, хто не тільки бере, а й віддає: коментує чужі роботи, ділиться корисним посиланням, допомагає новенькій людині з питанням, на яке сам нещодавно шукав відповідь.
Крок 8. Готуйтеся до пошуку першої роботи
Коли у вас є два-три завершені проєкти, оформлені як кейси, можна шукати першу позицію. Кілька практичних порад:
- Портфоліо важливіше за резюме. Детально про те, як оформити кейс, — у гайді Як зібрати портфоліо дизайнера.
- Адаптуйте супровідний лист під кожну вакансію: одне-два речення про те, чому вам цікавий саме цей продукт.
- Готуйтеся розповідати про свої рішення: на співбесіді часто просять пройтися кейсом і пояснити, чому зроблено саме так.
- Розглядайте стажування, волонтерські проєкти й задачі для громадських ініціатив — це реальний досвід з реальними обмеженнями.
- Ведіть таблицю відгуків: куди подалися, коли, яка відповідь. Це допомагає бачити прогрес і не опускати руки.
Відмова — це не оцінка вашого таланту. Часто це про невідповідність досвіду конкретному запиту. Просіть фідбек після співбесід: навіть коротка відповідь допоможе зрозуміти, що підтягнути.
Короткий чекліст на перші місяці
- Я можу пояснити різницю між UX і UI на прикладі знайомого застосунку.
- Я впевнено використовую автолейаут, компоненти й варіанти у Figma.
- Я відтворив(-ла) щонайменше три чужі екрани для тренування.
- У мене є два-три власні завершені проєкти з описом рішень.
- Я регулярно показую роботи й отримую фідбек.
- Я брав(-ла) участь хоча б в одній дизайн-грі чи челенджі з дедлайном.
- У мене є портфоліо, яке не соромно надіслати.
Шлях у професію — це марафон, а не спринт. Рухайтеся маленькими кроками, але регулярно, і не бійтеся показувати недосконалі роботи: саме так вони стають кращими. Більше про наші освітні формати — на сторінці Програми.