UX-дизайнер с нуля. Как выйти на первый проект
Но есть проблема. Большинство материалов о входе в профессию написаны либо курсами, которые хотят продать обучение, либо людьми, которые забыли, каково это начинать с нуля. В итоге человек смотрит красивые роадмапы, чувствует себя перегруженным и откладывает старт ещё на три месяца. Сегодня даю реалистичный план.
Что такое UX и UI: важно понять это с самого начала
Большинство новичков путают UX и UI или воспринимают их как одно и то же.
UX (User Experience) это про опыт использования. Удобно ли пользоваться продуктом? Решает ли он проблему пользователя? Понятна ли навигация? Это исследования, прототипирование, проверка гипотез. UX-дизайнер думает о том, как люди взаимодействуют с продуктом.
UI (User Interface) это про внешний вид. Как выглядят кнопки, какие цвета, какие шрифты, насколько всё визуально согласованно. UI-дизайнер работает с визуальной стороной интерфейса.
На практике в большинстве небольших компаний один человек делает и то, и другое. Его называют UX/UI дизайнером или просто продуктовым дизайнером.
UX это мышление, UI это исполнение. Можно освоить Figma идеально и делать красивые интерфейсы, но без UX-мышления это будет красиво, но не функционально. Компании хотят обоих качеств, и именно это сочетание даёт оффер.
Figma за 2 недели: детальный разбор каждого этапа
Теперь конкретика. Разберём первые две недели с Figma по дням, потому что именно здесь большинство сдаются: либо изучают всё подряд и теряются, либо смотрят видео без практики и ничего не запоминают.
Принцип обучения Figma: 20% теории, 80% практики. Каждый новый инструмент сразу применяете на реальном макете.
Неделя первая — базовые инструменты
День первый—второй: интерфейс и основные инструменты. Фреймы (не артборды, а именно фреймы, это важно), прямоугольники, текст, цвета, выравнивание.
Цель — сделать простую карточку товара.
День третий—четвёртый: компоненты и варианты. Это один из самых важных концептов Figma. Создаёте кнопку делаете из неё компонент и создаёте варианты: Default, Hover, Disabled.
Цель — кнопочная библиотека из пяти состояний.
День пятый—шестой: авто-лейаут. Это та функция, без которой дизайн рассыпается при изменении контента. Учите сначала горизонтальный авто-лейаут, потом вертикальный, потом вложенный.
Цель — навигационное меню, которое растягивается при добавлении пунктов.
День седьмой: практический проект. Делаете полностью один экран мобильного приложения с использованием всего, что изучили.
Неделя вторая — продвинутые возможности
День восьмой—девятый: прототипирование. Связываете экраны между собой, добавляете переходы, делаете интерактивные компоненты.
Цель — три экрана мобильного приложения с работающими переходами.
День десятый—одиннадцатый: стили и токены. Цветовые стили, стили текста, эффекты. Как это работает в масштабе.
Цель — создать простую цветовую систему из 10 цветов.
День двенадцатый—тринадцатый: работа с контентом и иконками. Как вставлять и управлять изображениями, где брать иконки (Iconify прямо в Figma), как работать с реальным контентом.
День четырнадцатый: итоговый проект. Делаете пять связанных экранов приложения с компонентами, стилями и прототипом. Это ваш первый артефакт для будущего кейса.
Как создать первый кейс, который работает: структура и механика
Кейс в нашем случае это история о том, как вы решили проблему.
Именно это смотрит работодатель. Не финальный экран, а ваш процесс мышления. Мог ли ты понять проблему? Правильно ли ты её исследовал? Логично ли решение вытекает из исследования?
Как выбрать проект для первого кейса
Лучший вариант для первого кейса редизайн реально существующего продукта с очевидными проблемами. Почему? Потому что продукт уже существует, вы не придумываете задачу из воздуха, и есть с чем сравнивать.
Хорошие кандидаты: приложение местного такси или доставки с плохим UX, сайт районной поликлиники, приложение для коммунальных платежей, сайт небольшого магазина, мобильное приложение банка с плохими отзывами.
Критерий выбора: реальные жалобы пользователей в отзывах. Открываете App Store или Google Play, читаете отзывы и там буквально будут перечислены проблемы. Это и есть ваше исследование проблемы.
Структура кейса
Часть первая — контекст и проблема. Что это за продукт, кто им пользуется, какие конкретные проблемы существуют. Здесь важна конкретность: не «неудобный интерфейс», а «пользователи не могут найти функцию X, потому что она спрятана в трёх уровнях меню».
Часть вторая — исследование. Как вы проверили, что проблема существует. Минимум пять коротких интервью с реальными людьми плюс анализ отзывов. Это самая важная часть кейса с точки зрения демонстрации UX-мышления.
Часть третья — анализ конкурентов. Посмотрели как два-три конкурента решили ту же проблему. Что работает, что нет, какой подход взяли за основу.
Часть четвёртая — процесс дизайна. Wireframes, принятые решения, почему выбрали именно этот подход. Не финальный дизайн, а путь к нему.
Часть пятая — финальное решение. Финальные экраны в Figma с прототипом.
Часть шестая — результаты или гипотезы. Если есть реальные данные, отлично. Если нет, то сформулируйте гипотезы: «Ожидаем, что такое решение снизит время на выполнение задачи X на 30%».
Итог
Войти в эту профессию невероятно просто, если вы довольно творческий человек, освоить её можно бесплатно, нужно лишь желание.