UX/UI-дизайнер: с чего начать и какие три работы положить в портфолио

Типичная ситуация: Figma установлена, пара бесплатных уроков пройдена, по образцу нарисованы три красивых экрана банковского приложения. Дальше непонятно. Вакансии просят портфолио с кейсами, а вы не уверены, считаются ли кейсом перерисованные чужие экраны. В этой статье — с чего начать UX/UI-дизайнеру, если опыта нет: в каком порядке учиться, что в Figma нужно сразу, а что подождёт, и какие три работы положить в портфолио, чтобы его дочитали до конца.

Чем на самом деле занят UX/UI-дизайнер

Если судить по Dribbble и Behance, дизайнер рисует эффектные экраны. В рабочем дне это занимает меньшую часть времени.

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

UX в названии профессии отвечает за логику: что человек делает, в каком порядке и где спотыкается. UI — за то, как это выглядит и читается: сетка, типографика, цвет, состояния элементов. В небольших командах обе части делает один человек, поэтому вакансии и называются «UX/UI».

Теперь о скучной части, про неё редко рассказывают. Большая доля работы — состояния, которых нет в красивых подборках: пустой список, ошибка в форме, длинная фамилия, которая не влезает в строку, медленный интернет, экран после отказа платежа. Ещё таблицы, фильтры, настройки, формы на двадцать полей. И согласования: объяснить заказчику, почему кнопка не будет «поярче и побольше», придётся много раз.

С чего начать: порядок на 12 недель

Самая частая ошибка новичка — месяц изучать кнопки Figma и ни разу не спроектировать ничего целиком. Инструмент осваивается быстрее, когда есть задача. Ниже порядок, который укладывается в 8–10 часов в неделю, то есть в вечера и часть выходных.

Двенадцать недель дают портфолио начального уровня. Первая оплачиваемая работа обычно приходит позже: кейсы придётся переделать после первых отказов и тестовых заданий, и это нормальная часть пути. Реалистичный горизонт от первого урока до первого заказа или оффера — от полугода, если заниматься без больших перерывов. Как не выпасть из такого графика, мы разбирали в статье о том, как учиться онлайн и не бросить.

Копирование чужих экранов на третьей и четвёртой неделях — упражнение для руки и глаза. В портфолио копии не кладут.

Что учить в Figma сразу, а что отложить

Figma остаётся стандартом отрасли: в ней работают команды, в ней же присылают тестовые задания. Для обучения хватает бесплатного тарифа Starter. Его ограничения касаются в основном командных файлов и режима для разработчиков, а условия время от времени меняются, поэтому сверяйтесь со страницей тарифов.

Нужно сразу:

• Автолейаут. Макет, собранный на автолейауте, растягивается и сжимается, как настоящий интерфейс. Макет из свободно расставленных прямоугольников разваливается при первой правке текста, и на собеседовании это видно за минуту.
• Компоненты и варианты. Кнопка существует в одном экземпляре, у неё есть состояния: обычное, при наведении, неактивное, загрузка.
• Стили и переменные для цвета, текста и отступов. Это основа любой дизайн-системы.
• Прототипы. Простые переходы между экранами, чтобы сценарий можно было дать человеку в руки.

Подождёт: сложная анимация, плагины на все случаи, 3D-иллюстрации, собственный набор иконок. Всё это приятно, но на первую работу не влияет.

Отдельно про нейросети. В Figma есть встроенные ИИ-функции и Figma Make, который собирает работающий прототип по текстовому описанию. Пользоваться ими стоит: быстро набросать варианты, заполнить макет правдоподобными данными, собрать черновик экрана. Но нейросеть выдаёт усреднённый экран и ничего не знает о людях, для которых вы проектируете. Объяснить, почему экран устроен так, по-прежнему должен дизайнер, и именно об этом спрашивают на собеседовании.

Три работы в портфолио

Наниматель тратит на портфолио новичка несколько минут. За это время он ищет ответ на вопрос, умеет ли человек думать о задаче или только рисует. Три работы ниже закрывают три разных сомнения.

Работа 1. Редизайн одного сценария в существующем продукте

Возьмите сервис, которым пользуетесь сами: запись к врачу, приложение доставки, личный кабинет провайдера. Весь продукт трогать не нужно, нужен один сценарий, в котором вы сами спотыкались. Попросите трёх-четырёх знакомых пройти его при вас и запишите, где они останавливались.

Эта работа показывает, что вы умеете находить проблему и доказывать её наблюдениями. «Мне не нравится их зелёный» проблемой не считается. Объём небольшой: 4–6 экранов, зато с объяснением каждого решения.

Чего избегать: редизайна гигантов вроде Spotify или Airbnb ради красоты. Над этими продуктами работают большие команды с данными, которых у вас нет, и такой кейс выглядит наивно.

Работа 2. Мобильное приложение с нуля

Здесь вы проходите весь процесс: разговор с людьми, сценарий, схема, макеты, прототип, проверка. Тему берите узкую и знакомую лично вам: учёт показаний счётчиков, расписание секции, общий список покупок для семьи. Знакомая тема избавляет от выдуманных пользователей.

Обязательная часть — тестирование прототипа. Дайте его пяти людям с конкретным заданием («добавьте показания за октябрь») и молча наблюдайте. Пяти человек хватает, чтобы увидеть большинство грубых проблем: на эту цифру опирается известное исследование Nielsen Norman Group 2000 года. Тест можно провести вживую или удалённо через Maze. В кейсе покажите, что сломалось и что вы изменили после теста. Раздел «что я переделал» ценнее идеальных финальных экранов.

Работа 3. Веб-сервис с данными

Третья работа — скучный интерфейс, и в этом её сила. Кабинет администратора небольшой студии, панель заказов для интернет-магазина, CRM для репетитора. Таблицы, фильтры, формы, статусы, пустые состояния, ошибки, версия для узкого экрана.

Большая часть оплачиваемой работы у начинающих — именно такие интерфейсы. Кейс показывает, что вы понимаете состояния и адаптивность и умеете собрать маленькую дизайн-систему: цвета, типографику, десяток компонентов с вариантами. Проверьте контраст текста: стандарт доступности WCAG требует для обычного текста соотношение не ниже 4,5:1. Строка о том, что вы это проверили, отличает вас от половины новичков.

Структура кейса, которую можно взять сегодня

1. Задача — 2–3 предложения: для кого продукт, что не работало, какая у вас роль.
2. Что выяснили — с кем говорили или за кем наблюдали, 3–4 находки с цитатами.
3. Сценарий — путь пользователя по шагам, схема экранов.
4. Решения — 3–5 главных экранов. У каждого подпись:
   какая была проблема → что сделано → почему так.
5. Проверка — кому показывали прототип, что не сработало, что изменили.
6. Система — цвета, шрифты, компоненты, состояния (один экран).
7. Итог — что получилось, что сделали бы иначе, ссылка на прототип.

Кейс читается за три-четыре минуты. Если прокрутка занимает десять экранов, сокращайте. Где размещать и как подписывать работы, подробнее описано в материале о портфолио без опыта.

Где обычно ломается

Картинки без объяснений. Десять экранов в ряд и подпись «приложение для йоги». Нанимателю не из чего понять, как вы думаете.

Выдуманные исследования. Персона «Мария, 28 лет, любит путешествовать» и опрос на двести человек, которого не было. Опытный дизайнер видит это сразу, и доверие к остальному кейсу пропадает. Три настоящих разговора честнее и полезнее.

Только счастливый путь. В макетах нет ни одной ошибки, пустого экрана, длинного имени. Значит, вы не думали о том, как продукт живёт в реальности.

Шаблон вместо работы. Готовый UI-кит с заменой цвета узнаётся по первому экрану. Китами пользоваться можно и нужно, выдавать их за своё решение нельзя.

Бесконечная полировка. Первый кейс переделывается третий месяц, второго нет. Покажите работу опытному дизайнеру в профессиональном сообществе, соберите замечания, исправьте и двигайтесь дальше.

Кому профессия не подойдёт

Тем, кто хочет рисовать и не хочет объяснять. Каждое решение придётся защищать перед людьми, которые видят иначе, и уступать, если их довод сильнее.

Тем, кого раздражают правки. Макет переделывается после заказчика, после разработчиков, после теста. Это обычный ход работы, обижаться на него бессмысленно.

Тем, кто ждёт быстрого входа. Вакансий начального уровня меньше, чем желающих, а требования к портфолио за последние годы выросли. Сильные три кейса дают шанс, слабые десять его не дают.

Художественное образование при этом не обязательно. Насмотренность и аккуратность нарабатываются, а иллюстрации в интерфейсах обычно заказывают отдельным специалистам.

Что сделать на этой неделе

Выберите сценарий для первой работы: один сервис, одно действие, которое вас раздражает. Попросите трёх человек пройти его при вас и запишите, где каждый замешкался. Откройте FigJam и нарисуйте этот путь по шагам. Это уже начало первого кейса, и оно не требует умения работать в Figma.

Курс «UX/UI-дизайнер» в Moment School сейчас готовится, его программа построена вокруг тех же трёх проектов. Если хочется идти в своём темпе и под свою цель, программу можно собрать в Moment Flow.

Частые вопросы

Нужно ли уметь рисовать, чтобы стать UX/UI-дизайнером?

Нет. Интерфейс собирается из сетки, текста и готовых элементов. Нужны внимание к деталям, чувство порядка и готовность разбираться в чужой задаче. Набросок экрана ручкой на бумаге осилит любой.

Заменят ли нейросети дизайнеров интерфейсов?

Нейросети уже забирают рутину: черновые экраны, варианты компоновки, тексты-заглушки. Выяснить, в чём проблема пользователя, выбрать решение и отстоять его перед командой пока может только человек. Поэтому в портфолио важнее показать ход мысли, чем аккуратность пикселей.

Где лучше размещать портфолио: Behance, Notion или свой сайт?

Для начала хватит Behance или страницы в Notion со ссылками на прототипы в Figma. Свой сайт имеет смысл делать, когда кейсы уже отлажены. Нанимателю важнее содержание кейса, чем площадка.

Сколько работ нужно в портфолио?

Три подробных кейса лучше десяти картинок без описания. Если есть четвёртая работа слабее остальных, уберите её: портфолио оценивают по худшему кейсу.