10 ошибок в портфолио начинающего дизайнера

За прошедший год я подробно рассмотрел несколько десятков портфолио и сотни проектов в рамках менторских сессий и работы ревьюером. Были портфолио и новичков, и опытных дизайнеров. В этой статье я разберу ошибки, которые встречал регулярно, поэтому тут будет небольшой винегрет из разных косяков — от небольших до глобальных структурных. Сразу уточню, что портфолио рассматриваю с точки зрения поиска работы в продуктовой компании, для фриланса не все советы будут актуальны. Если вы будете использовать этот материал, как гайд по доработке своего портфолио, займитесь сначала крупными недоработками, а потом уже переходите к полировке мелочей. Итак, без долгих предисловий, приступаем

Такая ситуация встречается у дизайнеров с опытом работы в компании и особенно часто у фрилансеров. Большое количество проектов действительно актуально для фриланса, там это служит живым доказательством объема вашего опыта. Но когда мы идем в компанию, качество важнее количества. Оставляйте в портфолио 3-5 самых проработанных, интересных и свежих проектов. У человека, который будет вас нанимать, может не быть времени разбираться в десятках проектов и выискивать там хорошие и релевантные. И тут мы плавно переходим к следующей распространенной ошибке.

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

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

Иногда встречаются проекты, где просто выложены экраны в реальном размере, один за другим без каких-либо пояснений и рассказа о проекте. Каким бы замечательным ни был интерфейс, который вы так показываете, он много потеряет от отсутствия оформления. Давайте попробуем представить, как это могло бы выглядеть, будь ваше портфолио физическим, напечатанным на бумаге. Аналогом неоформленного проекта здесь будет ситуация, когда вы привезли стопку картинок в офис работодателя, бросили их на стол и ушли, ничего не объясняя. В похожей ситуации оказывается дизайнер, открывший сваленные в кучу джипеги с вашей работой.
Постарайтесь подать ваши проекты так, как они должны выглядеть в реальной жизни, например с помощью мокапов. Расставьте акценты, покажите и полные экраны и отдельные детали. Покажите дополнительные моменты, такие как UI-кит, стили.

Даже хорошо оформленного проекта будет недостаточно, если там просто интерфейсы. Понять, насколько хорошо вы что-то спроектировали, можно только осознав, зачем вы это делали. Даже если у вас была задача нарисовать конкретные экраны или фичу, подумайте, какие задачи бизнеса и пользователя это решало. И опишите в вашем кейсе.
Процесс важен для понимания, что вы умеете проектировать, а не просто рисовать кнопки. Покажите пользовательские сценарии, job stories, прототипы; подсветите инсайты из исследований. Только не копируйте бездумно стандартную чушь с Behance, вроде персон и «ideate-design-iterate».
Результат — это то, на что смотрят при найме продуктового дизайнера. Тут нужно ответить, на что повлияла ваша работа. Увеличение DAU или LTV, уменьшение оттока пользователей или другие продуктовые метрики. А может вы ускорили прохождение определенных этапов пользовательского пути. Об этом нужно рассказывать, потому что это то, чем вы будете полезны нанимающей вас компании.

Тут мы переходим уже к более мелким нюансам. Многие вещи, которые кажутся начинающим дизайнерам мелочью, здорово выдают наличие или отсутствие опыта. Разместите часы и указатель сотового сигнала от андроида в интерфейс айфона и пытливый взгляд нанимающего вас человека сразу распознает косяк. И таких нюансов по гайдам много. Стили кнопок, свитчеров, системных уведомлений. Чтобы не попадаться, проверьте основные элементы, такие как кнопки и другие контролы, навигационные элементы, на соответствие гайдлайнам платформы, на примере которой вы показываете свой дизайн. Для проверки себя можете посмотреть на картинку выше и найти там 3 ошибки.

А также грамматические и стилистические. Может показаться чем-то очевидным, но эта беда не обходит никого, в том числе опытных дизайнеров и именитые студии. Потратьте лишние 10-15 минут на вычитку или проверку онлайн спеллчекерами. Особенно если вы делаете кейс на английском.
Почему это так важно? Очень просто — удачные и неудачные дизайн решения не всегда очевидны без понимания контекста, а вот ошибку в тексте легко может заметить кто угодно со школьным образованием. И это пойдет в минус вам как дизайнеру: может подпортить впечатление и показать вас неаккуратным.

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

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

Посмотрите на кнопки на примере выше, на какой из них текст прочитать проще? На правой, и это потому, что контраст текста относительно фона на ней больше. Человеческий глаз лучше различает контрастные элементы. Особенно это актуально для людей с нарушениями зрения. К сожалению, начинающие дизайнеры часто не учитывают этот нюанс.
Под кнопками вы видите цифры. Это коэффициент контраста цветов. Существуют определенные безопасные значения этого коэффициента, определенные в гайдлайнах WCAG. Проверить насколько контрастны элементы вашего макета можно при помощи плагинов для Figma, таких как Color contrast или подобных. Также рекомендую ознакомиться с гайдлайнами доступности, чтобы проектировать интерфейсы, удобные для всех.

Тут чаще всего встречаются две крайности — слишком крупные и слишком мелкие шрифты. Больше всего допускают подобных ошибок дизайнеры, которые мало работали с адаптивным дизайном, и внезапно начинают делать непривычный для себя формат. Те, кто привык к десктопным разрешениям как к основным, обычно начинают мельчить, взявшись за мобилку. Мобильщики наоборот, делают крупно на десктопе. Универсального рецепта нет, но если вы делаете обычный интерфейс, и пока не очень уверены в работе с масштабом, то стоит избегать шрифтов менее 14 пикселей и на десктопе и на мобильных разрешениях.

Проверяйте свои кейсы и делитесь в комментах, сколько ошибок из 10 нашли. Поздравляю тех кто не нашел ни одной. Если нашли много — есть смысл обратиться на менторство