Портфолио UX/UI-дизайнера должно показывать не только красивые экраны, а умение решать пользовательскую и бизнес-задачу: исследовать проблему, продумать сценарий, собрать структуру, сделать wireframe, разработать интерфейс, подготовить прототип, объяснить решения и оформить кейс так, чтобы работодатель понял ход мысли. Новичку важно показать не “я красиво нарисовал приложение”, а “я понял задачу, спроектировал путь пользователя и сделал интерфейс, который помогает человеку выполнить действие”.
«`Зачем UX/UI-дизайнеру портфолио
«`UX/UI-дизайнера оценивают не только по визуальному вкусу. Работодателю или заказчику важно понять, умеет ли дизайнер думать о пользователе, задаче бизнеса, структуре интерфейса, сценариях, ошибках, доступности, адаптиве и передаче макета в разработку.
Красивые экраны без объяснения часто выглядят как набор картинок. Сильный кейс показывает процесс: что было нужно сделать, какие были ограничения, кто пользователь, как он проходит путь, какие решения приняты и почему.
Портфолио UX/UI-дизайнера показывает:
- умеете ли вы понимать задачу;
- можете ли описать пользователя и его сценарий;
- умеете ли строить структуру интерфейса;
- делаете ли wireframes перед финальным дизайном;
- понимаете ли разницу между UX и UI;
- умеете ли работать с компонентами;
- можете ли делать прототип;
- понимаете ли адаптив;
- умеете ли объяснять дизайнерские решения;
- можете ли подготовить макет для разработчика.
Главная мысль
Портфолио UX/UI-дизайнера — это не галерея красивых экранов. Это доказательство, что вы умеете проектировать понятный интерфейс под задачу пользователя и бизнеса.
Каким должен быть хороший UX/UI-кейс
«`Хороший кейс должен быть понятен даже человеку, который смотрит его быстро. Не нужно прятать смысл за длинным описанием. Структура должна быть простой: задача, пользователь, проблема, решение, экраны, прототип, вывод.
В хорошем UX/UI-кейсе есть:
- короткое описание проекта;
- цель и задача;
- описание аудитории;
- пользовательский сценарий;
- карта экранов или структура;
- wireframes или черновые прототипы;
- финальные UI-экраны;
- объяснение ключевых решений;
- адаптив или мобильная версия, если она нужна;
- интерактивный прототип;
- компоненты или мини-дизайн-система;
- ограничения и что можно улучшить дальше.
Важно
Не оформляйте кейс как “сначала красивые картинки, потом ещё красивые картинки”. Работодатель должен видеть, как вы думали: почему именно такая структура, почему такие кнопки, почему такой путь пользователя.
Даже учебный проект можно подать сильно, если показать логику. Например: “пользователь хочет выбрать курс, но боится ошибиться; поэтому в интерфейсе есть фильтры, сравнение, честные параметры, блок безопасности и понятная карточка курса”.
«`Какие инструменты использовать
«`UX/UI-дизайнеру не нужно в каждом проекте использовать десятки инструментов. Важно уверенно владеть основным рабочим процессом: исследование, структура, wireframes, UI, прототип, компоненты и презентация кейса.
| Инструмент | Зачем нужен | Что показать в портфолио |
|---|---|---|
| Figma | Макеты, компоненты, прототипы, дизайн-система | Финальные экраны, компоненты, интерактивный прототип |
| FigJam / Miro | Сценарии, карты, структуры, CJM, заметки исследования | Путь пользователя, структура сервиса, логика сценария |
| Google Docs / Notion | Описание кейса, выводы, постановка задачи | Структурированное описание проекта |
| Behance | Публикация визуальных кейсов | Красиво оформленную презентацию проекта |
| Tilda / Webflow | Публикация лендингов и простых сайтов без кода | Живую страницу, если проект можно собрать |
| Google Forms / опросы | Простое исследование аудитории | Короткие выводы по пользователям |
Для старта достаточно
Figma + понятное описание кейса + прототип + 3–5 сильных экранов. Не перегружайте проект инструментами, если они не помогают объяснить решение.
Проект 1. Лендинг онлайн-курса
«`Лендинг онлайн-курса — хороший проект для UX/UI-портфолио, потому что в нём есть понятная бизнес-задача: объяснить ценность обучения, снять сомнения, показать программу, тарифы, условия и привести пользователя к заявке.
Задача проекта
Спроектировать лендинг курса так, чтобы пользователь понял, чему он научится, кому подходит программа, сколько стоит обучение, какие есть риски, какой документ выдаётся и что проверить перед оплатой.
Что продумать
- первый экран с ясным обещанием без завышенных гарантий;
- блок “кому подойдёт курс”;
- структуру программы;
- формат обучения;
- тарифы и стоимость;
- блок преподавателей;
- частые вопросы;
- блок безопасности: договор, рассрочка, возврат, документ;
- форму заявки;
- мобильную версию.
Что показать в портфолио
- задачу лендинга;
- структуру страницы;
- wireframe;
- финальный UI;
- адаптивную версию;
- объяснение ключевых блоков;
- прототип переходов по странице.
Как усилить кейс
Добавьте блок “что проверить перед оплатой курса”: договор, рассрочка, возврат, документ после обучения и реальные отзывы. Это покажет, что вы думаете не только о продаже, но и о доверии пользователя.
Проект 2. Мобильное приложение для привычек
«`Приложение для привычек — хороший проект для тренировки UX-сценариев. Здесь важно не просто нарисовать красивые карточки, а продумать: как пользователь добавляет привычку, отмечает прогресс, получает напоминания и не бросает приложение через два дня.
Задача проекта
Спроектировать мобильное приложение, которое помогает пользователю отслеживать привычки: спорт, вода, чтение, сон, обучение, прогулки, медитация или рабочие задачи.
Что продумать
- onboarding;
- создание новой привычки;
- выбор частоты;
- напоминания;
- главный экран с прогрессом;
- календарь отметок;
- статистику;
- пустые состояния;
- ошибки и отмену действий;
- мотивационные подсказки без давления.
Что показать в портфолио
- персону или описание пользователя;
- user flow;
- wireframes;
- 5–8 ключевых экранов;
- интерактивный прототип;
- экран ошибки или пустого состояния;
- объяснение, как приложение удерживает пользователя.
Сильный UX-вопрос
Не “как красиво показать привычки?”, а “как помочь пользователю вернуться к привычке, если он пропустил несколько дней?”.
Проект 3. Интернет-магазин или каталог товаров
«`Каталог товаров показывает умение работать с карточками, фильтрами, сортировкой, категориями, поиском, корзиной и товарной страницей. Это прикладной проект, который легко понять работодателю.
Задача проекта
Спроектировать интерфейс интернет-магазина или каталога, где пользователь может быстро найти товар, сравнить варианты, посмотреть характеристики и перейти к покупке.
Что продумать
- главную страницу;
- категории товаров;
- фильтры;
- сортировку;
- карточку товара в каталоге;
- детальную страницу товара;
- выбор параметров: цвет, размер, комплектация;
- корзину;
- оформление заказа;
- пустые состояния;
- мобильную версию.
Что показать в портфолио
- структуру каталога;
- логику фильтров;
- карточки товаров;
- страницу товара;
- сценарий покупки;
- адаптив;
- объяснение, как интерфейс помогает выбрать товар.
Пример проекта
“Каталог мебели”: пользователь выбирает комод, стол или ТВ-тумбу, фильтрует по размеру, цвету, материалу и цене, смотрит размеры, комплектацию, фото, условия доставки и добавляет товар в корзину.
Проект 4. Личный кабинет ученика
«`Личный кабинет ученика — сильный проект для UX/UI-дизайнера, потому что здесь много сценариев: обучение, прогресс, уроки, задания, дедлайны, обратная связь, сообщения и документы после курса.
Задача проекта
Спроектировать личный кабинет онлайн-школы, где студент видит курс, прогресс, уроки, домашние задания, комментарии наставника и следующие шаги.
Что продумать
- главный экран кабинета;
- список курсов;
- страницу урока;
- прогресс обучения;
- домашние задания;
- статусы проверки;
- уведомления;
- чат или комментарии;
- дедлайны;
- пустые состояния;
- мобильную версию.
Что показать в портфолио
- сценарий студента;
- карту экранов;
- wireframes;
- финальные экраны;
- прототип прохождения урока;
- состояния задания: не отправлено, на проверке, принято, нужно исправить;
- объяснение, как интерфейс снижает тревожность ученика.
Хороший UX-акцент
Ученик должен понимать, где он находится, что уже пройдено, что нужно сделать сейчас и что будет дальше. Это важнее декоративного оформления.
Проект 5. Сервис записи на услугу
«`Сервис записи подходит для салонов, врачей, психологов, репетиторов, фитнес-тренеров, консультаций, ремонта, юридических услуг и других направлений. Здесь важно продумать быстрый путь от выбора услуги до записи.
Задача проекта
Спроектировать интерфейс, где пользователь выбирает услугу, специалиста, дату, время, оставляет контакты и получает подтверждение записи.
Что продумать
- каталог услуг;
- карточку специалиста;
- выбор даты и времени;
- форму записи;
- подтверждение;
- изменение или отмену записи;
- напоминания;
- ошибки: время занято, данные заполнены неверно;
- мобильную версию;
- сценарий повторной записи.
Что показать в портфолио
- user flow записи;
- экраны выбора услуги;
- календарь и время;
- форму;
- экран успешной записи;
- ошибочные состояния;
- объяснение, как уменьшили количество шагов.
Важно
В сервисе записи критичны понятные статусы. Пользователь должен точно понимать: запись создана, ожидает подтверждения, отменена или требует оплаты.
Проект 6. Финансовое приложение
«`Финансовое приложение — хороший проект для тренировки сложной информации. Здесь важно показать данные так, чтобы пользователь не терялся: доходы, расходы, категории, лимиты, платежи, цели и история операций.
Задача проекта
Спроектировать приложение для учёта личных финансов, бюджета, расходов, накоплений или финансовых целей.
Что продумать
- главный экран с балансом;
- добавление операции;
- категории расходов;
- график расходов;
- бюджет по категориям;
- финансовые цели;
- историю операций;
- фильтры по периоду;
- предупреждение о превышении лимита;
- безопасность и приватность.
Что показать в портфолио
- основной сценарий пользователя;
- главный экран;
- экран добавления операции;
- экран аналитики;
- состояния предупреждений;
- прототип;
- объяснение, как интерфейс упрощает работу с цифрами.
Пример UX-решения
Вместо перегруженного экрана с десятками цифр показать 3 главных показателя: баланс, расходы за месяц и превышение бюджета. Детали можно раскрывать по клику.
Проект 7. Редизайн существующего сайта
«`Редизайн — сильный кейс, если он сделан не по принципу “мне не нравится стиль”, а через разбор проблем. Нужно показать, что было неудобно, какие задачи решались и как новый интерфейс стал понятнее.
Задача проекта
Взять существующий сайт или приложение и улучшить его структуру, навигацию, карточки, формы, визуальную иерархию, мобильную версию или путь пользователя.
Что продумать
- какие проблемы есть в старом интерфейсе;
- какие цели у пользователя;
- какие шаги мешают выполнить действие;
- что можно упростить;
- какие блоки нужно переставить;
- как улучшить форму;
- как сделать мобильную версию удобнее;
- как объяснить изменения не только “красотой”, но и пользой.
Что показать в портфолио
- скриншоты “до”;
- список найденных проблем;
- цель редизайна;
- новую структуру;
- экраны “после”;
- сравнение до/после;
- объяснение решений.
Важно
Не называйте чужой сайт “плохим” без аргументов. Формулируйте профессионально: “сложно найти фильтр”, “не видно цены”, “кнопка теряется”, “форма требует лишние данные”, “на мобильном экране блоки перегружены”.
Проект 8. Дашборд для бизнеса
«`Дашборд — хороший проект для UX/UI-дизайнера, который хочет показать работу со сложными данными. Здесь важно не просто красиво нарисовать графики, а сделать интерфейс, где руководитель быстро понимает ситуацию.
Задача проекта
Спроектировать дашборд для продаж, маркетинга, онлайн-школы, склада, финансов, HR, маркетплейсов или клиентской поддержки.
Что продумать
- кто пользователь дашборда;
- какие решения он принимает;
- какие KPI важны на первом экране;
- какие фильтры нужны;
- как показать динамику;
- как выделить проблемные показатели;
- какие таблицы нужны;
- что должно быть кликабельным;
- как не перегрузить экран.
Что показать в портфолио
- роль пользователя: руководитель, аналитик, менеджер;
- список метрик;
- структуру дашборда;
- экран с KPI;
- фильтры;
- детальную таблицу;
- состояния: нет данных, ошибка, загрузка;
- объяснение визуальной иерархии.
Сильный вопрос
Не “какие графики поставить?”, а “какое решение должен принять человек, когда откроет этот дашборд?”.
Проект 9. Маркетплейс или карточка товара
«`Проект по маркетплейсу показывает умение работать с e-commerce: товар, фото, характеристики, отзывы, доставка, цена, варианты, кнопка покупки и доверие покупателя.
Задача проекта
Спроектировать карточку товара или небольшой маркетплейс, где пользователь может найти товар, изучить характеристики, сравнить варианты и оформить покупку.
Что продумать
- главное фото товара;
- галерею изображений;
- характеристики;
- выбор цвета, размера или комплектации;
- цену и скидку;
- доставку;
- наличие;
- отзывы и рейтинг;
- вопросы покупателей;
- похожие товары;
- добавление в корзину;
- мобильную версию.
Что показать в портфолио
- структуру карточки товара;
- главный сценарий покупки;
- экраны desktop и mobile;
- состояния: нет в наличии, выбран вариант, ошибка;
- объяснение, как интерфейс помогает выбрать товар;
- прототип покупки.
Пример проекта
“Карточка мебели”: пользователь видит размеры, материал, цвет, фото в интерьере, комплектацию, доставку, сборку, отзывы и кнопку покупки. Такой проект хорошо показывает работу с товарной информацией.
Связанное направление
Проект 10. Onboarding и регистрация в приложении
«`Onboarding — это первые шаги пользователя в продукте. Такой проект полезен, потому что показывает умение объяснять ценность, не перегружать человека и довести его до первого действия.
Задача проекта
Спроектировать onboarding и регистрацию для приложения: обучение, финансы, фитнес, доставка, сервис записи, маркетплейс, трекер привычек или личный кабинет.
Что продумать
- первый экран;
- объяснение ценности приложения;
- минимальное количество шагов;
- регистрацию через email или телефон;
- выбор цели пользователя;
- разрешения и уведомления;
- ошибки ввода;
- восстановление пароля;
- первое полезное действие после входа;
- экран успешного старта.
Что показать в портфолио
- user flow регистрации;
- экраны onboarding;
- форму входа;
- ошибки и подсказки;
- экран первого действия;
- интерактивный прототип;
- объяснение, как уменьшили трение на старте.
Важно
Onboarding не должен быть презентацией на 10 экранов. Пользователь хочет быстрее понять пользу и перейти к действию.
Как оформить UX/UI-кейс
«`UX/UI-кейс нужно оформлять так, чтобы его было удобно смотреть. Не превращайте его в длинную ленту без структуры. Лучше выделить этапы: задача, исследование, структура, wireframes, UI, прототип, результат.
Удобная структура кейса:
- Название проекта. Например: “Личный кабинет ученика онлайн-школы”.
- Задача. Что нужно было спроектировать и зачем.
- Аудитория. Кто пользователь и какая у него проблема.
- Сценарий. Как пользователь проходит путь.
- Структура. Карта экранов или блоков.
- Wireframes. Черновая логика экранов.
- UI-решение. Финальные экраны.
- Компоненты. Кнопки, поля, карточки, состояния.
- Прототип. Кликабельный сценарий.
- Вывод. Что получилось и что можно улучшить.
Шаблон описания кейса
“Цель проекта — спроектировать [интерфейс] для [аудитория]. Основная проблема пользователя — [проблема]. Я продумал сценарий [сценарий], сделал структуру [экраны], подготовил wireframes, финальный UI и прототип. Ключевые решения: [решения]. В будущем можно улучшить [что именно]”.
Кейс можно публиковать на Behance, в Notion, на личном сайте, в PDF-презентации или отдельной странице. Главное — чтобы он был понятным, аккуратным и не состоял только из мокапов.
«`Ошибки новичков
«`Новички часто делают визуально приятные работы, но забывают показать UX-логику. Из-за этого портфолио выглядит как набор красивых экранов, а не как дизайнерская работа.
Частые ошибки:
- показывать только финальные экраны без задачи;
- не объяснять, кто пользователь;
- не показывать сценарий;
- делать дизайн без wireframes;
- копировать стиль популярных приложений без смысла;
- перегружать экраны декоративными элементами;
- не показывать мобильную версию;
- забывать про пустые состояния и ошибки;
- не делать прототип;
- не объяснять, почему принято такое решение;
- делать кейс слишком длинным и хаотичным;
- использовать мелкий текст и слабую иерархию в самом кейсе.
Главная ошибка
Считать, что UX/UI — это только красота. На практике UX/UI-дизайнер проектирует путь пользователя и делает интерфейс понятным, полезным и удобным.
Как выбрать курс, где будет нормальное портфолио
«`Если вы выбираете курс по UX/UI-дизайну, обязательно смотрите, какие кейсы будут в портфолио после обучения. Хороший курс должен учить не только Figma, но и проектированию интерфейсов: задаче, аудитории, сценариям, структуре, wireframes, UI, прототипам и презентации решений.
В хорошем курсе должны быть:
- разница между UX и UI;
- основы исследования пользователей;
- постановка задачи;
- user flow и сценарии;
- информационная архитектура;
- wireframes;
- работа в Figma;
- компоненты и auto layout;
- визуальная иерархия;
- типографика и цвет;
- адаптивные интерфейсы;
- прототипирование;
- подготовка макета к разработке;
- несколько проектов для портфолио;
- проверка домашних работ;
- обратная связь по кейсам.
Если курс обещает “UX/UI-дизайнер с нуля”, но в программе почти всё время уходит только на Figma и красивые экраны, а UX-части мало, стоит проверить обучение особенно внимательно.
Где сравнить обучение
Итоговый чек-лист портфолио UX/UI-дизайнера
«`Перед публикацией кейса проверьте:
- у проекта есть понятная задача;
- описана аудитория;
- понятна проблема пользователя;
- показан сценарий;
- есть структура экранов;
- есть wireframes или промежуточный этап;
- финальный UI аккуратный и читаемый;
- есть ключевые состояния интерфейса;
- есть мобильная версия, если она нужна;
- есть интерактивный прототип;
- объяснены дизайнерские решения;
- есть компоненты или элементы дизайн-системы;
- понятно, что можно улучшить дальше.
Главный вывод
Для портфолио UX/UI-дизайнера лучше сделать 3–5 сильных кейсов, где видно мышление: задача, пользователь, сценарий, структура, прототип и UI. Красивые экраны важны, но без объяснения решений они не показывают профессиональный уровень.
Итог
«`Начинающему UX/UI-дизайнеру стоит собрать портфолио из проектов, которые показывают разные сценарии: лендинг, мобильное приложение, каталог товаров, личный кабинет, сервис записи, финансовый интерфейс, редизайн, дашборд, карточку товара и onboarding.
Главное — показывать не только финальную картинку, а весь ход работы: какая была задача, кто пользователь, какой сценарий спроектирован, какие решения приняты и как интерфейс помогает человеку выполнить действие.
С чего начать
Если вы только выбираете обучение, посмотрите подборку курсов по UX/UI-дизайну. Если пока не понимаете разницу между направлениями, начните со статьи кто такой UX/UI-дизайнер. Для сравнения полезно также посмотреть чем занимается графический дизайнер.
