Лучшие портфолио UX/UI сами по себе являются тестом UX. Посетитель — это менеджер по найму или клиент, задача — «понять этого дизайнера менее чем за две минуты», и сайт либо проходит тест, либо нет.
Дизайнеры, попавшие на собеседование, редко имеют самый эффектный сайт. Зато у них самый понятный: роль изложена в одной строке, два-три примера из практики, демонстрирующие путь от проблемы к результату, и макет, который не отвлекает от работы.
Ниже представлены восемь портфолио UX и UI дизайнеров, работающих в данной сфере. Pixpa сгруппированные по тематике и отобранные из более широкой галереи Примеры портфолио в области UI/UX. .
Каждый вариант предлагает достойные внимания варианты дизайна, цвета и шрифта, а также одно решение, которое стоит позаимствовать.
Сильное Портфолио UI/UX В одной строке объясняется, каким вы дизайнер, а затем приводятся два-три примера из практики, демонстрирующие переход от проблемы к результату.
Благодаря этому интерфейс работает плавно, и работа не отвлекает от страницы. Он быстро загружается и читается на телефоне.
Каждый из представленных ниже сайтов заслужил свое место по четырем критериям: насколько хорошо дизайн соответствует выполняемой работе, насколько четко структурированы примеры успешных кейсов, выполняет ли сайт свою реальную задачу по привлечению вакансий или клиентов, и как он выглядит на мобильных устройствах.
Эти четыре портфолио представляют собой работы отдельных UX/UI-дизайнеров: один дизайнер, несколько примеров выполненных проектов и макет, оптимизированный для быстрого ознакомления менеджера по найму с работой.
UI/UX дизайн. Нью-Йорк.
Elizabeth Lodvikov Картина начинается на тёплом кремовом фоне, роль героини указана одной строкой угольно-серого цвета, а справа — обрезанный портрет.
Цветовая палитра намеренно мягкая: кремовый цвет, угольно-черный текст и единственный приглушенный терракотовый акцент на кнопке «Поздороваться».
Эта теплота воспринимается гораздо более по-человечески, чем стандартный темный режим, а чистый геометрический шрифт без засечек фокусируется на том, за чем пришел посетитель.
UX/UI дизайн. Лондон.
Gaelle Monin Главная страница — это и есть суть проекта. Под тонким, воздушным логотипом и тегом "UX/UI Design", подчеркнутым персиковой линией, нарисованной от руки маркером, страница сразу переходит в сетку проектов, без необходимости прокручивать описание.
Цветовая палитра остается преимущественно белой, поэтому цвет создается самими работами: финансовая панель с круговой шкалой расходов, приложение с рецептами и функцией импорта данных, экраны мобильных устройств внутри макетов гаджетов. Один теплый акцент не позволяет сетке выглядеть слишком стерильной.
UX/UI дизайн. Мэриленд.
Sasank Anipeddi На сайте размещены материалы в темном стиле, выполненные шрифтом с засечками, что редкость в области, где по умолчанию используются шрифты без засечек.
Почти чёрный фон, белый текст и зелёная подсветка его имени придают ему спокойный, уверенный тон, больше напоминающий журнальный дизайн, чем шаблон.
Навигационная панель разделяет разделы «Примеры из практики», «Блог» и GitHub в отдельные папки, и каждое тематическое исследование имеет метки метода (Исследование пользователей, Конкурентный анализ, Тестирование удобства использования), так что структура работы видна еще до того, как вы ее откроете.
UX-дизайн и концепт-арт. Саннивейл.
Matthew Park Превращает главную страницу в галерею, оформленную в разных цветовых блоках. Каждый проект размещен в отдельном блоке, занимающем всю страницу, в разном насыщенном цвете: синем, бирюзовом, пурпурном, индиго, бежевом, и на каждом из них представлен макет продукта, снятый на ноутбук или телефон.
Это эффектно в хорошем смысле, потому что цвет служит ориентиром, а за этим стоит реальный SaaS-проект: Lacework , Endgame , Xona . Логотип выполнен тихим заглавным шрифтом без засечек, позволяя заставкам говорить сами за себя.
В должностях, связанных с продуктом и стратегией, умение принимать решения востребовано не меньше, чем мастерство, поэтому эти две области предполагают выполнение конкретной работы и наличие собственной точки зрения.
Дизайн продукции. Берлин.
Marcin Spiewak Начинается всё с крупного, жирного шрифта на тёмно-угольном фоне, где перечислены все занимаемые им должности: графический дизайнер, веб-дизайнер, UI-дизайнер, UX-дизайнер, затем каждая из них зачеркивается, и в итоге получается «Продуктовый дизайнер», а слово «Берлин» выделено зелёным цветом. Это однострочная история карьеры, рассказанная шрифтом.
Фотография, сделанная им в поле в полный рост, оживляет темную цветовую палитру, а ссылки на проектные плитки ведут к Figma Для всех, кто хочет узнать всё досконально.
Разработка продукта и стратегия.
Майкл Коллинз Сайт выполнен в минималистичном стиле с использованием чистого шрифта без засечек на светло-бежевом фоне, с темно-красным логотипом в качестве единственного цветового акцента. Такое сдержанное использование цвета – стратегический ход.
Проектная сетка состоит из полноэкранных фотографий с наложенными на них узнаваемыми именами клиентов. Silvertree , ExxonMobil , lululemon Таким образом, доверие к бренду обеспечивается логотипами, а не дизайном. Небольшой значок замка отмечает закрытые для просмотра примеры проектов, что является неявным сигналом о соблюдении компанией соглашения о неразглашении конфиденциальной информации.
Когда деятельность компании охватывает несколько дисциплин, существует риск того, что сайт будет выглядеть как несколько портфолио, скрепленных вместе. Этот же сайт обеспечивает целостность информации.
Мультимедийный и пользовательский дизайн.
Forest Он использует крупный, ориентированный на типографику заголовок "Привет, я Форест!", набранный огромными жирными черными буквами на светло-сером фоне, с горизонтальной бегущей строкой, отображающей перечисленные им дисциплины: дизайн пользовательского интерфейса, моушн-графика, графический дизайн, видеомонтаж.
Монохромная палитра предотвращает ощущение разрозненности разнообразной практики, а бегущие строки отображают широкий спектр навыков без перегруженной сетки. Пользовательский интерфейс расположен рядом с анимацией и графикой, а не претендует на чисто UX-ориентированный подход, и сайт честно об этом заявляет.
UX/UI дизайн и дизайн медиаискусства. Феникс.
Isabella Zelasko Этот сайт, созданный в сотрудничестве с UX/UI-специалистами, UX-исследователями, разработчиками игр и интерактивными медиа, оформлен в насыщенном сливовом цвете с кремовыми засечками, что больше напоминает галерею, чем шаблон.
Проекты демонстрируются по одному, каждый из них помечен соответствующей дисциплиной и инструментами (гейм-дизайн + UI-дизайн или веб-дизайн, HTML и CSS), а сетка навыков из шести карточек превращает широкий спектр практик в области компетенций, которые можно быстро просмотреть.
Это работа на начальном этапе карьеры: макет пользовательского интерфейса игры и студенческий веб-проект, но она представлена с той ясностью, которой часто не хватает в портфолио начинающих специалистов.
Если посмотреть на все восемь вариантов, то снова и снова встречается одна и та же горстка решений. Ни одно из них не связано со вкусом. Все они направлены на то, чтобы посетитель быстро освоился на рабочем месте.
Портфолио, созданное для получения постоянной работы, имеет другую структуру, чем портфолио, созданное для получения постоянной работы. преследование клиентов-фрилансеров Определите, для чего предназначен сайт, а затем создавайте его, исходя из этого.
Pixpa 's Шаблоны портфолио UI/UX Они построены на основе тематических исследований и проектных таблиц, поэтому выбор строки выше в основном зависит от того, какие разделы вы включите.
Пять ошибок, которые легко пропустить, но которые быстро исправить, как только вы их заметите.
Вам не нужно писать код или нанимать разработчика. Процесс короткий.
Портфолио UX/UI оценивается так же, как и любой интерфейс: помогает ли он посетителю быстро выполнять свою работу.
Четко обозначьте свою роль, покажите два-три примера решения проблемы, держите работу на виду и не мешайте дизайну. Каждый из сайтов выше хорошо решает одну из этих задач. Заимствуйте решение, а не внешний вид.
Оформите портфолио, которого оно заслуживает, бесплатно в течение 15 дней.
От двух до четырех. Глубина важнее широты: одно подробное комплексное исследование, демонстрирующее, что ваши идеи ценнее шести поверхностных галерей проектов.
Рецензенты решают, способны ли вы логически рассуждать над проблемами, а не подсчитывают количество выполненных заданий.
Только если этого требует соглашение о неразглашении, и даже тогда хотя бы один проект должен быть полностью публичным. Портфолио, где ничего нельзя просмотреть без предварительного обращения к вам, теряет посетителя, у которого было всего несколько секунд.
Если большая часть вашей работы выполняется под соглашением о неразглашении, создайте один собственный проект, который вы сможете демонстрировать открыто.
Одно краткое описание того, кто вы и на чем сосредоточены, один сигнал о вашей надежности, ссылки на два-три примера успешных проектов и одно четкое действие для связи.
Пропустите раздел о миссии. Существует более полный список. элементы, которые следует включить в ваше портфолио Если вам это нужно, но задача главной страницы — быстро направить посетителя к нужному ресурсу.
Нет. Большинство качественных портфолио UX/UI создаются с помощью конструктора сайтов, и для менеджера по найму это не имеет значения.
Лучше потратить время на написание подробных примеров кода, чем на отладку CSS.
Портфолио UX-дизайнера делает акцент на процессе и результатах: проблема, исследование, принятие решений и измеримый результат. Портфолио UI-дизайнера опирается на визуальное мастерство: макет, шрифты, цвет и проработка интерфейса.
Большинство работающих дизайнеров демонстрируют оба подхода, отдавая предпочтение тому, на чём сосредоточена их основная деятельность.
Pixpa Тарифные планы начинаются от 5.40 долларов в месяц при годовой подписке Basic, и каждый план включает 15-дневный бесплатный пробный период без необходимости ввода данных кредитной карты и 30-дневную гарантию возврата денег. последние цены на тарифные планы разбито по уровням.
Единой лучшей платформы не существует. Pixpa Подходит для дизайнеров, которым нужно портфолио, встроенный блог и удобная система шаблонов в одном месте с поддержкой в режиме реального времени.
Если вы хотите взвесить все варианты, вот подробный анализ. лучшие конструкторы сайтов для UI/UX дизайнеров сравнивает их рядом.
Да, особенно на начальном этапе карьеры или при переходе на новую работу. Хорошо структурированная, инициированная вами переработка проекта доказывает, что вы способны продумать проблему, даже если у вас еще нет завершенной и подтвержденной работы, на которую можно было бы сослаться.
Чётко обозначьте это как концепцию.