Как выучить UX/UI‑дизайн самостоятельно с нуля: план на 3 месяца
Пошаговый план: этапы, сроки, бесплатные материалы и практика после каждого блока.
О чём эта статья
Начинающие UI/UX-дизайнеры часто задаются вопросом: реально ли научиться дизайну бесплатно, качественно и самостоятельно? Курсы стоят дорого, информации в интернете море — как понять, что действительно поможет в профессии, и самое главное — как структурировать всю эту информацию и сделать своё обучение последовательным и качественным?
В этой статье вы найдёте пошаговый план обучения: мы разобрали и нашли бесплатные и структурированные ресурсы для обучения продуктовому дизайну. Получилась своего рода дорожная карта — от теории к практике, — чтобы вы могли развиваться в дизайне без бюджета, но с пользой. От вас требуется только следование построенному плану и интерес к делу.
Дизайн — это не просто визуальный стиль, это жёсткая дисциплина мышления, требующая постоянного обучения.
Как устроено самообучение
Кому подходит:
- начинающим UX/UI-дизайнерам, желающим обучиться с нуля
- людям, рассматривающим смену профессии на UX/UI-дизайн
- самостоятельным обучающимся, ищущим структурированный план
Что нужно знать перед стартом:
UX (user experience) отвечает за логику и удобство продукта, UI (user interface) — за то, как он выглядит. Это разные, но неразделимые навыки — учить нужно оба.
Специального образования не нужно, но нужна усидчивость: результат виден не после первого урока, а после первых 3–4 собственных макетов.
Закладывайте 8–10 часов в неделю — при таком темпе 4 месяца дают крепкую базу и 2–3 проекта в портфолио.
С первой недели работайте руками в макете, а не только смотрите теорию — насмотренность без практики не конвертируется в навык.
Финальная цель — не пройти определённое количество уроков.
Цель — перестать нуждаться в инструкции.
Каждый новый раздел начинается с теории. Вы разбираете не только, что представляет собой тот или иной принцип, но и зачем он нужен, как работает и где применяется в реальных интерфейсах.
После теории — реальные примеры. Вы начинаете разбирать интерфейсы, компоненты и дизайнерские решения, чтобы постепенно формировалось главное дизайнерское умение — видеть и анализировать дизайн, а не просто повторять то, что выглядит красиво.
Также после каждого важного блока есть практика. Задания построены так, чтобы заставить вас применить изученный принцип, а не просто воспроизвести готовый макет.
| Этап | Длительность | Ключевые навыки |
|---|---|---|
| Введение в дизайн | 2–3 недели | Композиция, типографика, цвет |
| Основы UX/UI-дизайна | 3–4 недели | Создание макетов, прототипирование |
| User Experience | 4–6 недель | Исследование пользователей, юзабилити |
| User Interface | 3–4 недели | Визуальный язык |
| Освоение инструментов | 4–6 недель | Photoshop, Illustrator, Figma |
Установите себе реалистичные дедлайны. Обучение UX/UI-дизайну с нуля до уровня джуниора занимает 4–6 месяцев при интенсивной работе по 15–20 часов в неделю. Не торопитесь, но и не растягивайте процесс на годы — рынок быстро меняется, и затянувшееся обучение может привести к устареванию знаний ещё до выхода на работу.
Начало обучения
00 — Введение в дизайн
Первое, с чего стоит начинать, — это база, на которой строится дальнейшее обучение. Здесь важно понять, как работает дизайн и почему визуальные решения влияют на восприятие и поведение человека.
Что изучите: теория цвета, визуальная коммуникация, контент и контекст, форма и функция, дизайн-мышление, Human-centered Design, User-centered Design и основы Design Principles.
На изучение блока — 1 неделя, 3 занятия по ~3 часа. Не нужно смотреть все материалы подряд. Двигайтесь по таблице: сначала основной материал (обучающее видео), затем дополнительный (книги, статьи), после чего выполняйте указанную практику.
| Тема | Материал | Что нужно понять |
|---|---|---|
| Теория цвета | Теория цвета — Хабр | Как устроен цветовой круг и как по нему подобрать гармоничную палитру: комплементарную, аналоговую, триаду, тёплую или холодную. |
| Визуальная коммуникация | 5 Principles of Visual Design in UX — Nielsen Norman Group | Как масштаб, иерархия, баланс и контраст задают порядок, в котором пользователь считывает экран. |
| Принципы дизайна (гештальт) | Использование законов гештальт-психологии в дизайне интерфейса — Хабр | Почему близко расположенные, похожие и объединённые фоном элементы воспринимаются как одна группа и как этим управлять в макете. |
| Форма и функция | Laws of UX — Aesthetic-Usability Effect | Почему красивый интерфейс кажется удобнее, чем он есть, и почему это не заменяет проверку удобства. |
| Дизайн-мышление | What is Design Thinking? — Interaction Design Foundation | Из каких этапов состоит дизайн-мышление — от эмпатии до тестирования прототипа — и зачем начинать с проблемы, а не с решения. |
| Человекоцентричный дизайн | What is Human-Centered Design? — Interaction Design Foundation | Почему решение строится вокруг реальных людей и их контекста и улучшается короткими итерациями с проверкой. |
Практика
После материалов закрепите знания на реальных примерах:
- Выберите 3 любых цифровых продукта или визуальных объекта. Определите, какую информацию они передают и кому. Разберите, как на восприятие влияют цвет, форма, размер, расположение и контраст. Для одного из примеров сформулируйте проблему и предложите решение, опираясь на изученные принципы.
Выберите один цифровой продукт и проведите его разбор с позиции дизайнера.
Для примера возьмём Apple.com — у него достаточно разных визуальных решений, поэтому на нём удобно разобрать и коммуникацию, и форму/функцию, и контекст.
Ваша задача — не оценить сайт как красивый или некрасивый, а объяснить, какие дизайнерские решения он использует, какую задачу они решают и на кого рассчитаны.
Этап 1. Основы UX и логика продукта (недели 1–3)
Цель этапа — научиться мыслить не «как красиво», а «как понятно и удобно». Это база, без которой красивый интерфейс всё равно будет плохо работать.
Что изучить:
- Что такое UX-дизайн и чем он отличается от UI
- Пользовательские сценарии (user flow) и путь пользователя (customer journey map)
- Информационная архитектура: как группировать и структурировать контент
- Основы юзабилити: эвристики Нильсена, закон Фиттса, закон Хика
- Wireframing — создание низкодетализированных прототипов на бумаге и в инструменте
| Тема | Материал | Что нужно понять |
|---|---|---|
| UX и UI | UX vs UI: в чём разница — vc.ru | Чем UX (логика, сценарии, структура) отличается от UI (визуальный слой) и почему одно без другого не работает. |
| User flow и CJM | User Journeys vs. User Flows — Nielsen Norman Group | Как карта пути клиента описывает опыт целиком, а user flow — шаги внутри одного продукта ради одной задачи. |
| Информационная архитектура | Информационная архитектура и путь пользователя в UX — vc.ru | Как информационная архитектура задаёт структуру продукта и почему без неё не сработает даже хороший сценарий. |
| Эвристики юзабилити | 10 Usability Heuristics for User Interface Design — Nielsen Norman Group | Какие 10 эвристик Нильсена помогают быстро найти типовые проблемы интерфейса без тестирования на людях. |
| Законы Фиттса и Хика | Восемь именных законов в UX-дизайне (часть 1) — Хабр | Почему важные кнопки делают крупными и ставят ближе и почему лишние варианты замедляют выбор. |
| Вайрфрейминг | What is Wireframing? The Complete Guide — Figma | Чем отличаются вайрфреймы разной детализации и почему структуру экрана согласуют до визуального дизайна. |
Практика этапа:
Спроектировать логику и структуру экранов для простого сценария, прежде чем добавлять визуал.
Выбрать один сценарий (например, «заказать еду»). Нарисовать блок-схему пути пользователя от открытия приложения до подтверждения заказа. На основе схемы сделать 4–5 lo-fi вайрфреймов экранов этого пути.
Бумага и ручка для черновика; FigJam или Figma для чистовой версии.
Схема из прямоугольников-экранов, соединённых стрелками переходов, плюс серия серых блочных вайрфреймов без цвета и шрифтов — только формы и текст-заглушки.
Продуман путь пользователя и структура экранов — это основа, на которую в этапе 2 «наращивается» визуал.
Этап 2. Инструменты и UI-дизайн (недели 4–7)
Цель этапа — освоить основной рабочий инструмент дизайнера и научиться собирать визуально аккуратные интерфейсы: типографику, сетку, цвет, компоненты.
Что изучить:
- Figma — интерфейс, слои, фреймы, автолейауты, компоненты и вариант-свойства
- Типографика в интерфейсах: иерархия, кегли, межстрочный интервал
- Сетки и отступы, модульные системы (8-point grid)
- Цвет и контраст, основы доступности (accessibility, WCAG)
- UI-киты и дизайн-системы: как устроены и зачем нужны
| Тема | Материал | Что нужно понять |
|---|---|---|
| Основы Figma | Figma Design for beginners — Figma Learn (официальный курс) | Как собрать в Figma первый адаптивный макет с нуля — фреймы, текст, автолейаут, компоненты и прототип — на бесплатном тарифе. |
| Компоненты и варианты | Guide to components in Figma — Figma Learn | Как главный компонент и его копии позволяют менять элемент во всём макете сразу и как варианты описывают его состояния. |
| Типографика в интерфейсах | Font Sizes in UI Design: The Complete Guide — Learn UI Design | Какие размеры шрифта приняты для веба, iOS и Android и почему новичку лучше опираться на них. |
| Сетка и отступы (8pt) | Введение в систему 8pt сеток — Хабр | Зачем размеры и отступы делать кратными 8 и как это упрощает макет и передачу в разработку. |
| Контраст и доступность (WCAG) | Контрастность цветов в интерфейсе — Дока | Какой контраст требует WCAG (4.5:1 для обычного текста, 3:1 для крупного) и как проверить его в макете. |
| UI-киты и дизайн-системы | Design Systems 101 — Nielsen Norman Group | Чем UI-кит отличается от дизайн-системы и как готовые наборы элементов делают интерфейс единообразным. |
Практика этапа:
Пересобрать интерфейс любимого приложения в Figma «по памяти» — это лучшая тренировка насмотренности.
Собрать простую мини-дизайн-систему: кнопки, поля ввода, карточки — на 5–6 компонентов.
Бесплатная альтернатива — официальные интерактивные уроки Figma Learn.