9 впечатляющих сайтов портфолио UI дизайнеров для вашего вдохновения

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

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

В чем смысл UI портфолио?

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

В нем должны идеально сочетаться индивидуальность, практичность и контент. Таким образом, ваши проекты и кейсы будут представлены в эстетически приятной и простой для понимания форме. В конечном итоге, портфолио — это рассказ истории о том, кто вы, каковы ваши увлечения в этой сфере и каким принципам дизайна вы следуете?

С учетом этого давайте познакомимся с девятью замечательными UI дизайнерами, которые отлично справились с задачей создания портфолио. Посмотрим, чему мы можем у них научиться.

1. Сэм Смолл

UI/UX дизайнер из Канзас-Сити Сэм Смолл страстно увлечен дизайном. Это сразу заметно при попадании на главную страницу его портфолио. Оно является свидетельством универсальности, потому что демонстрирует его опыт работы в области веб-дизайна, брендинга и айдентики, экологической графики и рекламы.

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

Когда мы переходим к его проектам, мы видим, что опыт Сэма значительно выходит за рамки пользовательского интерфейса. Он применяет многосторонний подход к созданию фирменного стиля: сочетает смелые изображения с информативным текстом и даже со странной абстрактной анимацией, чтобы полностью раскрыть идею. В начале своей работы “Керамика Джоуи Уотсона” Сэм предварительно знакомит читателя с концепцией, перечисляет свои функции, имя клиента, указывает компании, которые также участвовали в реализации сайта и дату его завершения. Такая информация крайне важна, потому что будущие работодатели и заказчики смогут получить полное представление о проекте, даже если у них нет времени на его подробное изучение.

В целом, портфолио Сэма четкое, информативное и вызывает интерес у посетителя его сайта.

Что нового мы можем узнать из опыта Сэма Смолла?

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

Основные рекомендации

Портфолио — это шанс продемонстрировать ваши творческие способности, поэтому не делайте его скучным. Как вариант, применение ярких цветов может сделать его еще интереснее, но при этом не отвлекать внимание от сути!

Посмотреть портфолио Сэма можно здесь.

2. Джеремайя Шоу

Джеремайя Шоу — художник/дизайнер, который специализируется на 3D-иллюстрациях, анимации, дизайне интерфейсов и брендинге. В настоящее время работает в Google.

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

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

Что насчет его проектов? Благодаря минимальному количеству текста и чистому  макету, образы Джеремайя говорят сами за себя. Он демонстрирует  применение передовых тенденции UI дизайна, но очевидно, что у него есть свой уникальный стиль, который остается неизменным. Это подтверждает его способность как следовать указаниям, так и бросать им вызов.

В его проекте Geo Jam Band мы видим трансформацию карандашных набросков в конечный продукт, что дает нам возможность взглянуть на его творческий процесс. Подобные детали предоставляют невероятно ценную информацию о подходе к дизайну, и Джеремайя прекрасно справился с задачей!

Чему мы можем научиться у Джеремайя Шоу?

Отличный способ развить воображение читателя — продемонстрировать, как ваша работа будет выглядеть в “настоящем” приложении. В своем проекте “Nike Badges” Джеремайя показывает нам, как его проект будет смотреться “в реальных условиях”. Он даже помещает фотографии людей, которые держат приложение после тренировки. Клиентам нравится видеть безупречный продукт, а такое внимание к деталям только улучшит историю, которую вы пытаетесь им рассказать.

Основные рекомендации

Иногда меньше значит лучше. Вы не ошибетесь, если сделаете чистую и понятную презентацию своей работы!

Посмотреть портфолио Джеремайя можно здесь.

3. Менгди Чжан

Исходя из портфолио Менгди Чжан, дизайнера продуктов из Нью-Йорка, она стремится создавать эмоциональные связи и передавать социальные ценности посредством дизайна. Мы сразу же познакомимся с ее индивидуальностью через ее систему ценностей.

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

Что касается проектов, Менгди тщательно продумала содержание текста. Она вносит ясность в свой творческий процесс путем предоставления четкого описания своего вклада в совместный проект. Работы Менгди демонстрируют широкий спектр навыков, начиная от UI/UX дизайна и заканчивая рисованием и созданием иллюстраций.

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

Что интересного для нас есть у Менгди Чжан?

Удобство восприятия не должно зависеть от детального представления и подробного объяснения сути вашего портфолио!

Основные рекомендации

Если вам необходимо углубиться в детали, выделите ключевые слова

4. Бэди

Помните предыдущее портфолио, когда мы говорили о важности удобства восприятия? Портфолио Бэди, UI дизайнера из Сингапура, попадает в самую точку. Быстрая прокрутка вниз без необходимости уходить с главной страницы дает обзор его проектов, краткие сведения о его опыте и перечень ключевых клиентов. Это значит, что в течение нескольких минут мы узнали все, что нам нужно было узнать о том, кто такой Бэди.

Однако настоящая магия его портфолио проявляется в проектах. При клике на проект “Happy 2 help”, сразу становится ясно, что Бэди из тех, кто детально разбирается в проблеме. Он сочетает великолепные изображения с правильным количеством информации и проводит нас через все этапы процесса дизайн-мышления. Таким образом, проект Бэди ставит галочки во всех нужных пунктах — от постановки задачи до стадии обратной связи. Он даже включает элементы гайда по стилю, которые обосновывают его выбор цветовой палитры. Это дает еще более полное представление о его подходе к дизайну.

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

Чему можно научиться у Бэди?

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

Основные рекомендации

Наличие блога — это еще одно преимущество к вашему и без того многостороннему предложению.

Посмотреть портфолио Бэди можно здесь

5. Том Паркс

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

Анализ его проектов раскрывает весь спектр талантов Тома. В своем проекте  “Timechain” он умело применяет свободное пространство, с помощью которого разделяет блоки контента и изображения. Том выбирает смелые, эффектные цвета и вставляет в проект небольшие фрагменты информации с его описанием. Это сделано не для того, чтобы отодвинуть саму работу на задний план, а наоборот раскрыть ее суть. Забавные анимации демонстрируют поведение, которое мы не смогли бы увидеть в статичном изображении, что придает его проекту иной подтекст. Портфолио Тома, безусловно, оставляет неизгладимое впечатление!

Что нового мы можем узнать из опыта Тома Паркса?

Понятно, что ему нравятся смелые решения. Поэтому и вам не стоит их бояться. Немногие люди выберут иллюстрированного динозавра в качестве представления приложения для обеспечения безопасности, как это сделал Том. Но если вы можете обосновать свои решения, то можно немного поэкспериментировать!

Основные рекомендации

Сочетание ярких цветов и белого пространства сделает ваш макет свежим, захватывающим и приятным для навигации.

Посмотреть портфолио Тома можно здесь.

6. Стефан Хийенурм

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

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

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

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

Что интересного для нас есть у Стефана?

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

Основные рекомендации

Лучше показать пять потрясающих проектов, чем 20 посредственных. Качество всегда важнее количества.

Посмотреть портфолио Стефана можно здесь.

7. Брэдли Хейнс

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

Помимо захватывающей дух эстетики, он демонстрирует совершенный уровень детализации, который необходим для оценки его роли в проектах. Это ясно из упоминания им крупных клиентов (Lonely Planet и Airbnb лишь некоторые из них).

Чему мы можем научиться у Брэдли?

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

Основные рекомендации

Едва заметная анимация может произвести сильное впечатление!

Посмотреть портфолио Брэдли можно здесь.

8. Кори Снайдер

Tangerine Industries — это персональное портфолио Кори Снайдера, дизайнера, который специализируется на интерактивном дизайне. При попадании на его сайт практически сразу становится понятно, почему он удостоен таким количеством наград. Благодаря проектам из совершенно разных сфер бизнеса, очевидно, что у Кори достаточно разносторонний опыт.

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

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

Что мы можем почерпнуть из портфолио Кори Снайдера?

Предоставление информации о том, как выстроена логика проекта позволит клиенту поставить себя на место дизайнера. Чем больше информации вы включите в этот процесс (в том числе полученный опыт, ошибки и изменения направления), тем понятнее будет, каково это работать с вами.

Основные рекомендации

Поэкспериментируйте с навигацией; это может помочь вам выделиться еще больше!

Посмотреть портфолио Кори можно здесь.

9. Синем Курт

Мы не могли завершить этот список, не добавив немного волшебства, которое создают портфолио выпускников CF. Синем, выпускница направления UI дизайна CareerFoundry, закончила программу в 2019 году и теперь работает UX/UI дизайнером. Давайте посмотрим, что делает ее портфолио достойным быть в этом списке.

Синем сразу подумала о том, чтобы посетителям ее веб-сайта не приходилось долго искать то, что им нужно. На ее главной странице есть все: обзор кейсов, отзывы и раздел “обо мне” с сильным акцентом на ее личные качества. Оцените удобство восприятия!

В работе над кейсом “Plantasy”, Синем ничего не упустила. В начале мы видим обзор, который определяет конечные цели проекта. Синем подробно описывает анализ конкурентов, интервью, опросы и персоны/персонажи пользователей. Вся информация хорошо структурирована и легко воспринимается читателем. Визуальные элементы являются отличным дополнением к контенту и сопровождают читателя на протяжении всего процесса, от идеи до финальной части. В свой проект “inner peace” она также включает гайд по стилю для представления типографики. Это свидетельствует о том, насколько подробно она поработала над каждой функцией.

Что интересного есть для нас у Синем Курт?

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

Основные рекомендации

Если вы младший дизайнер, это не значит, что качество вашей работы будет хуже, чем у других. 

Посмотреть портфолио Синем можно здесь.

На этом мы завершаем наш список вдохновляющих UI портфолио! Для дальнейшего изучения этого вопроса посетите такие сайты, как behance, dribbble и site inspire. Если вам нужны подсказки, которые помогут собрать контент для вашего портфолио (и прокачать навык дизайн-мышления), прочтите статью: 5 задач проектирования для начинающего дизайнера.