UX/UI: с чего начать новичку

Дизайнер за работой в Figma — обложка статьи про старт в UX/UI

Профессия UX/UI-дизайнера выглядит «входной» снаружи: красивые макеты, Figma, портфолио на Behance. На практике новичка чаще всего останавливает не отсутствие таланта, а размытая карта: что учить первым, как отличить интерфейс от картинки и когда уже можно откликаться на вакансии.

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

UX и UI — не одно и то же

UX (user experience) отвечает на вопрос: человек понял, куда идти, смог ли дойти и не бросил ли по пути. Это сценарии, структура экранов, тексты, ошибки, доступность.

UI (user interface) — как это выглядит и ощущается: сетка, типографика, цвет, состояния кнопок, отступы, иконки.

Хороший junior умеет оба слоя. Если рисовать только «красивые карточки» без сценария — это не продукт. Если проектировать логику без визуальной дисциплины — макет не выдержит ревью у разработчика и арт-директора.

С чего начать в первые 8–12 недель

  1. Наблюдение. Разберите 5 знакомых сервисов: регистрация, поиск, корзина, настройки. Запишите, где вы споткнулись. Это уже UX-аудит.
  2. Инструмент. Figma достаточно. Auto Layout, компоненты, варианты, сетка 8pt, стили текста и цвета. Не распыляйтесь на десять редакторов.
  3. Основы визуала. Иерархия, контраст, выравнивание, близость элементов. Типографика важнее «модных градиентов».
  4. Прототип с смыслом. Один поток: «найти курс → сравнить → записаться». Кликабельный прототип лучше десяти статичных картинок.
  5. Передача в разработку. Именование слоёв, отступы кратные 4/8, состояния hover/disabled/error. Без этого макет не берут в работу.

Портфолио: три кейса важнее двадцати картинок

Рекрутер смотрит не на «нарисовал лендинг», а на ход мысли. Для каждого кейса держите одну схему:

  • контекст и пользователь;
  • проблема (зачем менять экран);
  • ограничения (срок, платформа, бренд);
  • варианты и почему выбран этот;
  • результат: прототип, метрика или хотя бы гипотеза, что улучшится.

Перерисовка чужого приложения допустима как учебная задача — но подписывайте, что это редизайн, и покажите «до / после» и аргументы. Учебные кейсы из курса тоже работают, если там есть исследование, а не только финальный UI.

Типичные ошибки новичков

  • Стартовать с цвета и иллюстраций, минуя структуру.
  • Делать уникальные кнопки на каждом экране вместо компонентов.
  • Игнорировать мобильную ширину и длинные русские подписи.
  • Копировать Dribbble-шоукейсы: там часто нет форм ошибок, пустых состояний и доступности.
  • Молчать в сопроводительном: «сделал в Фигме» ничего не говорит о вашей роли.

Как понять, что уже можно откликаться

Минимальный порог junior UX/UI: уверенная Figma, 2–3 разобранных кейса, понимание сеток и типографики, умение объяснить решение вслух за 3–5 минут. Английский интерфейс инструментов читать нужно — термины везде одни.

Дальше рост идёт через реальные ограничения: брендбук, legacy, сроки, спор с разработчиком. Это как раз то, чему учат на практике, а не в роликах «10 трендов года».

Статья подготовлена редакцией АЦО как практический гид для новичков. Тема опирается на открытые материалы о профессии дизайнера интерфейсов, в том числе обзор Яндекс Практикума о UI-дизайнере. Это самостоятельный текст, а не перепечатка источника.

← Назад к блогу