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