В этой части Анна делится своим личным опытом оформления портфолио. Важно понимать, что нет правильного и неправильного варианта, есть разные взгляды на то, как должно выглядеть портфолио. Для кого-то это гордость и важная часть личного бренда, для кого-то лишь инструмент, чтобы найти новую работу.
В этой части
- Версия 1. Одна страница на проект
- Чем Senior отличается от Junior
- Версия 2. Оформление в виде кейсов
- Портфолио как прототип в Figma
- Структура кейса
- Там, где NDA, заменяй контент на вайрфреймы
- Рассказывай историю
- Исследование
- Метрики
- Проекты под NDA, как быть?
- Полезные ресурсы
- Сайты-коллекции портфолио
- Отдельные сайты-портфолио
- Портфолио в Notion
- Сайты дизайн-студий для вдохновения
К моменту поиска работы у меня уже было оформлено портфолио, как нас учили в DesignSpot School и позже в Epam. Почему же я решила его полностью переделать?
Версия 1. Одна страница на проект
Изначально я оформляла портфолио по принципу «одна страница на проект» и отправляла в PDF.
Структура была такая:
- About project — краткое пояснение, о чём проект
- Challenges — основные проблемы в процессе работы
- Solution — как решили проблему, что было создано в процессе
- Feedback — отзывы или награды в некоторых проектах
Плюсы
- Сразу видно количество, тип и сложность проектов.
Быстро пробежались по экранам, посмотрели, с чем работали, позвали/не позвали на собеседование.
Минусы
- Трудно оценить масштаб и сложность работы.
- Сложно ориентироваться на техническом интервью и рассказывать о проектах, приходилось иногда искать по файлам в Фигме, чтобы показать больше нюансов.
Вот страница проекта в моём старом портфолио. Какое впечатление она у тебя вызывает? Видна ли сложность работы? Хочется ли читать текст?
К пересмотру моего портфолио меня подтолкнули две идеи:
- Никто не будет вчитываться в длинные простыни текста
- Портфолио не раскрывало то, какой вклад я сделала в проект
Из общения с ментором я поняла, что сначала люди смотрят на картинки. Если что-то цепляет, то они могут углубиться в проект. Это был первый звоночек.
Заключительный этап собеседования, техническое интервью с VP of Design Department. Рекрутер, лид, тестовое задание, защита и беседа с директором: всё шло как по маслу.
Команде я понравилась, тестовое похвалили, вот-вот получу оффер. Но вместо этого я получаю отказ и такой фидбэк:
У дизайн-директора сложилось впечатление, что на предыдущих работах ты была младшим дизайнером и не принимала решений. На интервью ты рассказала о взаимодействии с разработчиками, создании дизайн-системы, а о твоём дизайне он услышал гораздо меньше.
Сказать, что я была в шоке — ничего не сказать. Это было тяжело принять. Когда я делала самопрезентацию, рассказывала, какими менеджерскими качествами обладаю, как влияю на продукт, ход разработки, улучшая всё на своем пути. Младший дизайнер! Знаешь, в чём была моя ошибка? В портфолио!
Проекты были в формате PDF, и было тяжело рассказывать о значимых вещах. Тем более, какие-то детали к тому моменту я уже просто забыла. Классных проектов показала много, но создалось впечатление, что я мало на них дизайнила. Я претендовала на Senior-позицию, но своими же руками сократила масштаб и серьезность проектов, создав впечатление Junior.
Чем Senior отличается от Junior
Старший дизайнер может не только создавать макеты, но и влиять на ход разработки, нести ответственность за свои решения, менять конечный продукт. Работать с командой в связке, решать любые конфликты и влиять на то, как продукт выстраивает отношения с пользователями.
Существует такой подход «Slowing design» — мы не просто решаем задачу, что-то исправляем или улучшаем за короткий промежуток времени, мы думаем наперёд, прогнозируем и выстраиваем отношения с командой, пользователями и бизнесом. Мы делаем крутой продукт вместе. Кстати, всё это надо показать в портфолио.
Версия 2. Оформление в виде кейсов
Итак, вот как стал выглядеть тот же проект после апгрейда:
По такому принципу я стала переделывать все свои проекты.
Возможно, никто не будет читать текст, но здесь уже наглядно виден капитальный подход и объём проделанной работы: показан процесс, исследование, видно количество экранов.
Это уже не вырванный кусок информации о проекте, а законченный кейс. На дальнейших технических интервью по подобным кейсам мне стало проще показывать любые свои проекты.
Портфолио как прототип в Figma
Сами кейсы я оформила в Figma, сделала кликабельный прототип и начала рассылать при отклике на вакансии. Параллельно в Webflow собирала сайт-портфолио.
Свой любимый проект «Big Data» я описала по основному рабочему процессу, Design Thinking.
Структура кейса
Я вдохновилась этим примером и получилась такая структура:
- Description. Небольшое описание
- Team. Состав команды, если она была
- Role. Моя сновная роль и ответственность
- Tools. Какие инструменты использовались
- Project Background. Краткое погружение в контекст проекта, идея создания, на каком этапе тебя к нему подключили и т. д.
- Research. Анализ конкурентов, что было хорошего/плохого, прототипы, любые артефакты полезны.
- Ideation. Какие были идеи решения проблем, любопытные инсайты во время создания.
- Design & Testing. Как и для чего проводились тестирования, скрины результатов исследований.
- Measure of Success. Я часто встречала такой вопрос. Вынеси в отдельный раздел и пропиши основные метрики успеха. Этот шаг поможет на собеседованиях.
- Result. Как изменились экраны с примерами: было-стало.
- Design System. Описание дизайн-системы или другие достижения. Я много работала с документацией, переделывала дизайн-систему практически с нуля, поэтому делаю на этом акцент. Обновлённая и структурированная документация, презентации, наш отлаженный по шагам процесс работы и улучшенная коммуникация — всё это важно перечислить.
Там, где NDA, заменяй контент на вайрфреймы
Я заменила первый экран на вайрфрейм — схематичный макет, чтобы не показывать всю работу. Кстати, это хороший прием, чтобы продемонстрировать глобальные изменения в архитектуре системы. Спасибо моему коллеге Артёму, что додумался до этого первым!
Если проект создавался с нуля, то это самое интересное. Опиши, почему появилась такая идея, как развивалась.
Я пришла в этот продукт, когда он быстро рос и мне пришлось быстро адаптироваться. Что делать в таком случае? Гуглить! Проведи расследование и найди всевозможные полезные факты, которые помогут описать концепцию, идею проекта и его этапы развития. Нужно аккуратно подвести к проблемам пользователей и бизнеса.
Рассказывай историю
Рассказ о проекте должен быть целостным и строиться по единой канве, от начала до конца. Люди любят рассказы, которые захватывают их внимание. Желательно, с картинками или фотографиями. Например, я сделала фото себя пока ждала очередное собеседование. Так рассказанная история становится полнее.
Исследование
Самый интересный для меня процесс — это исследование (research). К сожалению, иногда мы ограничены бюджетом, временем или вовсе не имеем доступа к пользователям из-за специфики проекта. В нашем случае, например, было очень трудно их выловить. К счастью, пообщаться всё-таки удалось.
Также в блок про исследование я добавила анализ конкурентов. Наброски, черновики и пометки, которые писала в ходе изучения продукта — тоже помещаю в ресёрч.
Во время работы над проектами мы часто прикидываем разные варианты, строим информационную архитектуру или карту сайта. Возможно, анализируем данные в Exсel или работаем с черновыми прототипами от аналитиков и заказчиков. Всё это будет полезно показать тут. Кейс не обязательно должен содержать только финальные отполированные макеты.
Так как я работала с Big Data, собеседующие могли не понимать всю сложность такой работы. Поэтому я старалась дополнительно подсвечивать некоторые моменты, например, специфику работы фильтров.
Вайрфреймы здесь наглядно демонстрируют, как изменилась архитектура системы и почему возникла такая необходимость. Важно подсвечивать, что было и что стало. Выделяй результат!
Далее я привожу скриншоты пробных вариантов и прототипов, которые мы тестировали с командой. Если у тебя этого нет, просто покажи, как менялись экраны в ходе выработки дизайн-решения. Сколько вариантов решения были рассмотрены и почему в итоге выбрали именно конечный?
Метрики
Там, где это возможно, обязательно подтверждай свои решения метриками.
Часто на собеседованиях спрашивают, как ты измеряешь эффективность дизайна и почему выбрано именно такое решение. Лучше облегчить себе жизнь и подготовиться к таким вопросам заранее.
В ней описано, какие метрики имеет смысл проверять. Особенно будет полезно для подготовки к таким форматам как White Board Session или Home Task.
На макетах показываю, как улучшился пользовательский опыт и разгрузилась система.
Завершаю всё блоком про дизайн-систему, которую собрала с нуля, а также гайдами для разработчиков и дизайнеров. Я считаю их самыми лучшими и всегда об этом говорю на интервью. Можно также разместить фото с коллегами или процесс совместной работы.
Все артефакты собраны в едином месте. В любой момент собеседования можно к ним быстро вернуться. Не нужно открывать миллион вкладок в Figma.
Это описание кейса очень похоже на мою самопрезентацию. Когда я рассказываю о проекте, упоминаю все эти моменты. Не углубляйся в детали слишком сильно. Если это будет необходимо, тебе всегда зададут вопросы.
Рекомендую пробежаться по портфолио других дизайнеров и поискать для себя наиболее подходящую структуру и оформление.
Проекты под NDA, как быть?
Самый интересный вопрос: как публиковать портфолио, если везде NDA?
Вот пара идей, как обойти ограничения:
- Если ты оформляешь сайт, на проекты под NDA можно повесить плашку и давать доступ по одноразовому паролю. Рекрутер сможет открыть проект только один раз, а потом доступа не будет.
- Если ты оформляешь портфолио в Фигме или PDF, сделай 2 варианта. В первом варианте можно замазать часть интерфейса или логотипы, видоизменить интерфейс.
- Бонус-вариант от Саши: Можно собрать отдельное портфолио по выдуманным задачам, чтобы показать навыки. Представь, что ты работаешь в компании своей мечты и поставь себе задачу, которая могла бы быть у тебя там.
Во втором варианте можно оставить всё как есть и на собеседовании не под запись делиться экраном и рассказывать уже более детально.
Полезные ресурсы
Видео от Яндекс Практикума, в котором Костя Горский рассказывает о подготовке к собеседованиям:
presentum.io — сервис, ппомогающий подготовить портфолио. Подойдёт для новичков.
Сайты-коллекции портфолио
cofolios.com — площадка с портфолио разных дизайнеров от
semplice.com/showcase — Вдохновение для сайта-портфолио, сайт, организованный известным дизайнером Тобиасом Ван Шнайдером.
Ещё 10 примеров отличных портфолио с разборами, какие ещё могут быть разделы в портфолио
bestfolios.com – Лучший сайт с портфолио
Отдельные сайты-портфолио
Важный пример, по которому я оформляла свои работы
Claudio Guglieri, Huge Inc, ex Design Director at Microsoft. О нём Саша делал отдельную статью
Christopher Cherupil, Apple. Вот, что бывает, когда когда фронтенд-разработчик и дизайнер в одном лице. Придётся поскроллить.
Elizabeth Wang, Microsoft
Charles Zhang, SPD в Intuit
Mike Ivanchyshyn, NetApp
Dane Galbraith, Google
Ben Powell — интересный эффект с ховером на крупные заголовки.
Taamannae Taabassum, Figma — классные кейсы.
Nikita Yarunin — интересный формат.
Портфолио в Notion
Последние пару лет стали появляться портфолио продуктовых дизайнеров в Notion. Нельзя сказать, хорошо это или плохо, это просто ещё один формат, который имеет свои плюсы и минусы.
Гайд для самых маленьких: Как сделать портфолио в Notion, дёшево и сердито.
Adrian Ye, Fortinet, ex-Apple
Сергей Тимофеев Design Manager в Manychat
Паша Селезнёв, Senior Brand & UX/UI
Егор Красноперов, Head of Design в Shortcast.io. У Егора очень крутая минутная видео-презентация о его CV.
Артем Молованов, Senior Designer в Yandex Plus
Кирилл Москалёв, Lead Designer
Антон Захаров, автор канала «Дизайнер, привет»
Это CV/портфолио — далеко не эталон, и сегодня его стыдно показывать, но когда-то оно выполнило свою функцию и в 2019 позволило устроиться в Ozon. Изначальный замысел был в том, чтобы один кейс соответствовал одной организации. Это очень ограничивающий принцип. Лучше, когда кейс соответствует одной крупной задаче.Во время собеседования я использовал отдельную презентацию, которая раскрывала кейсы из моего опыта более подробно.
Сайты дизайн-студий для вдохновения
Обрати внимание на то, как описывают кейсы.
Humbleteam — фаворит, Чехия
Pixies, Россия
Pinkman, Россия
Red mad robot, Россия
Sebo, Индонезия. Вместо работ у них ссылки на живые крутые сайты. Это роскошь, поскольку довести до прода такой уровень качества на таком масштабе — крайне непростая задача.
Orizon, Канада
Halo lab, Украина. У них очень крутой UI.
— образовательный телеграм-канал о продуктовом дизайне и инструментах для него, о карьере дизайнера и эмиграции. Опечатки и обратную связь → @okunev