book-open 1 test
UI-дизайн

Обзор 10 лучших портфолио веб-дизайнера: примеры, зачем нужно, из чего состоит

Портфолио — это клевый способ упаковать ваши навыки и продемонстрировать, на что вы готовы как дизайнер. Собрала 10 сильных образцов портфолио дизайнеров в подробный разбор. 🌿👇
Иллюстрация Fran Pulido: https://dribbble.com/shots/11458152-A-good-host-in-the-new-normal

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

Зачем веб-дизайнеру собирать портфолио

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

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

Итак, мы разобрали угол, под которым лучше изучать каждый образец, а теперь давайте начнем разбирать их друг за другом.

Также рекомендую у каждого из дизайнеров в подборке изучить способ подачи портфолио во всех каналах и обратить внимание на особенный подход к подаче : dribbble, instagram, сайт.

1. Кэт Гатто: расскажите, чем полезны и расчехлите ваши лучшие работы

Кто такая Кэт Гатто?

Кэт, дизайнер и основатель Gatto. В 2014 году решила запустить проект Gatto (что по-испански означает «кошка»), так реализовались ее увлечения дизайном и программированием.  Сейчас студия специализируется на запуске красивых и функциональных веб-сайтов.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Почему портфолио Кэт клевое?

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

Портфолио веб-дизайнера Кэт Гатто.
Портфолио веб-дизайнера Кэт Гатто.

Чему стоит поучиться у Кэт Гатто?

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

Что запомнить и взять на вооружение?

По примеру Кэти стоит провести смелый эксперимент над личным брендом.

Посмотреть пример портфолио

2. Build in Amsterdam: покажите ассортимент работ

Кто такие Build in Amsterdam?

Ребята специализируются на разработке клевых интернет-магазинов (e-commerce). ак По мнению ребят, интернет-магазин олицетворяет бренд, и поэтому он должен вдохновлять, увлекать и конвертировать в бесконечный цикл покупок.

Почему портфолио Build in Amsterdam клевое?

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

Портфолио веб-дизайнеров из Build in Amsterdam.
Портфолио веб-дизайнеров из Build in Amsterdam.

Чему стоит поучиться у Build in Amsterdam?

Каждая работа подана как тизер и история в формате презентации. Достаточно захватывающе.

Что запомнить и взять на вооружение?

Масштабная подача каждой работы минимальными средствами.

Посмотреть пример портфолио

3. Charmer Studio: подайте лучшие работы первыми

Кто такие Charmer Studio?

Charmer — это дизайн-студия, которая специализируется на создании эстетически выверенных веб-проектов. В основе работы лежит инженерный подход к поставленной задаче.

Почему портфолио Charmer Studio клевое?

Ребятам удалось с помощью минималистичной подачи раскрыть проекты в убедительном, притягательном и легком для погружения формате.

Портфолио веб-дизайнеров из Charmer Studio.
Портфолио веб-дизайнеров из Charmer Studio.

Чему стоит поучиться у Charmer Studio?

Работы Charmer выделяются интересной типографикой и сеткой.

Что запомнить и взять на вооружение?

Смакование типографики и сетки в каждом проекте.

Посмотреть пример портфолио

4. Upperquad: визуализируйте каждый шаг

Кто такие Upperquad?

Upperquad — независимая диджитал студия и креативное агенство из Сан-Франциско. Мы объединяем стратегию, дизайн и технологии, чтобы воплощать идеи и опыт в жизнь. Работают со стартапами, B2B, SMB, enterprise and SaaS проектами. Среди клиентов: Stanford, Google, Le Tote

Почему портфолио Upperquad клевое?

Ребятам удалось передать атмосферу работы творческой мастерской. Листайте кейсы и сможете фактически прожить развитие дизайн-проекта от идеи до запуска.

Портфолио веб-дизайнеров из Upperquad.
Портфолио веб-дизайнеров из Upperquad.

Чему стоит поучиться у Upperquad?

Upperquad обладает ассортиментом нестандартных проектов по визуальному сторителлингу. Здесь просто накрывает шквал творческих экспериментов.

Что запомнить и взять на вооружение?

Безудержная творческая подача каждого шага кейса в лонгридах.

Посмотреть пример портфолио

5. Rezo Zero: сопроводите каждый кейс эффектной подачей

Кто такие Rezo Zero?

Rezo Zero — цифровое креативное агентство, которое придумывает, проектирует и разрабатывает уникальные бренды и индивидуальные цифровые решения для культурных и корпоративных проектов. Команды базируются в Лионе с расширением в Париже, Франция.

Почему портфолио Rezo Zero клевое?

Каждый кейс насыщен интерактивными элементами, которые побуждают со вкусом изучить нюансы проекта.

Портфолио веб-дизайнеров из Rezo Zero.
Портфолио веб-дизайнеров из Rezo Zero.

Чему стоит поучиться у Rezo Zero?

Rezo Zero проделали фантастическую работу по погружению в культуру работы над проектом.

Что запомнить и взять на вооружение?

Подход к созданию художественной галереи вокруг каждого кейса.

Посмотреть пример портфолио

6. Shishki: покажите развитие проекта по этапам

Кто такие Shishki?

Брендинговое агентство SHISHKI из Санкт-Петербурга – команда профи, работают по всему свету и стремятся кардинально изменить бизнес к лучшему.

Основная специализация — бренд-айдентика от разработки названия и фирменного стиля до построения коммуникационной стратегии в digital-среде.

Почему портфолио Shishki клевое?

Ребята наглядно и в деталях показали подход к подаче редизайна крупного информационного портала (университета) и смены айдентики.

Портфолио веб-дизайнеров из Shishki.
Портфолио веб-дизайнеров из Shishki.

Чему стоит поучиться у Shishki?

Shishki комплексно развернули весь ландшафт развития дизайн-решения от идеи до воплощения в мелочах. Особенно интересно посмотреть на работу айдентики в сквозь все популярные форматы в диджитал.

Что запомнить и взять на вооружение?

Продуманный, смелый и системный подход каждой работе.

Посмотреть пример портфолио

7. Embacy: привлекайте внимание анимацией

Кто такие Embacy?

Ребята делают диджитал-брендинг и сайты. За последние два года сделали больше сотни проектов для клиентов по всему миру — от Австралии до Калифорнии, от ЮАР до… Что-то вот

Почему портфолио Embacy клевое?

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

Портфолио веб-дизайнеров из Embacy.
Портфолио веб-дизайнеров из Embacy.

Чему стоит поучиться у Embacy?

Сильная сторона Embacy — смелые креативные миксы из графики, иллюстраций и коллажей.

Что запомнить и взять на вооружение?

Европейская крафтовая дизайн-культура.

Посмотреть пример портфолио

8. Balkan Brothers: продемонстрируйте системный подход к работе в мелочах

Кто такие Balkan Brothers?

Цифровое агентство, помогающее брендам SaaS создавать потрясающие веб-сайты.

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

Почему портфолио Balkan Brothers клевое?

Balkan Brothers выделяются созданием айдентики для всех точек контакта для технологических компаний: веб-приложение, сайт, реклама, билборды и другие оффлайн-носители.

Портфолио веб-дизайнеров из Balkan Brothers.
Портфолио веб-дизайнеров, дизайнеров интерфейсов и бренд-дизайнеров из Balkan Brothers.

Чему стоит поучиться у Balkan Brothers?

Balkan Brothers на высоком уровне подают портфолио во всех каналах: dribbble, instagram, сайт.

Что запомнить и взять на вооружение?

Минималистичный и в то же время комплексный способ подачи работ по диджитал брендингу (и со вкусом).

Посмотреть пример портфолио

9. Your Majesty Co: усильте портфолио концептуальными экспериментами

Кто такие Your Majesty Co?

Your Majesty Co — это дизайнерская и технологическая фирма с офисами в Нью-Йорке и Амстердаме, которая создает цифровые продукты и бренды для Netflix, Airbnb, adidas, Samsung, Spotify, BMW, Universal Music Group, Bentley, Absolut, American Express и Red Bull. У компании более 200 наград, в том числе «Инновационный сайт года», «Каннские львы», «Jay Chiat Awards» и др.

Почему портфолио Your Majesty Co клевое?

Здесь огромное количество экспериментов с веб-анимацией. Особенно интересно наблюдать связь анимации и бренда, для которого она создается.

Портфолио веб-дизайнеров и бренд-дизайнеров из Focus Lab.
Портфолио веб-дизайнеров и бренд-дизайнеров из Your Majesty Co.

Чему стоит поучиться у Your Majesty Co?

Среди множества экспериментов Your Majesty Co вы наверняка подберете что-то для вдохновения в своем проекте.

Что запомнить и взять на вооружение?

Смелые эксперименты с визуалом и движением.

Посмотреть пример портфолио

10. FocusLab: расскажите о ваших ценностях и методологии работы

Кто такие FocusLab?

Focus Lab — «Global B2B brand agency», недавно сделали 7 подход к ребрендингу. Через Wayback Machine можно изучить 10 лет развития бренда через анализ стратегии, коммуникации, визуальной идентичности. Сейчас у ребят в портфеле уже 12 единорогов (количество клиентов, которые вышли за один миллиард долларов после брендинга).

Почему портфолио FocusLab клевое?

Здесь ТОП международной культуры как дизайна, так и айдентики. Фактически ребята как Пол Рэнд нашего времени.

Портфолио веб-дизайнеров и бренд-дизайнеров из Focus Lab.

Чему стоит поучиться у FocusLab?

FocusLab последовательно и невероятно прорабатывают и воплощают бренды от стратегии до запуска. 

Что запомнить и взять на вооружение?

Американская культура подачи кейсов с переплетением с культурой продукта и ценностями компании для которой создается дизайн.

Посмотреть пример портфолио

Что веб-дизайнеру учесть при создании портфолио

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

  1. Дайте за один скролл понять, кто вы и чем полезны
  2. Укажите текущий статус занятости.
  3. Добавьте смелый индивидуальный ход.
  4. Продемонстрируйте ассортимент работ.
  5. Подайте свои лучшие работы первыми.
  6. Визуализируйте каждый шаг
  7. Покажите развитие от идеи до воплощения.
  8. Расскажите не только о сайтах, но и веб-сервисах
  9. Расскажите о ваших ценностях и методологии работы
  10. Сопроводите каждый кейс эффектной подачей.
  11. Привлекайте внимание анимацией.
  12. Усильте портфолио дизайн-концепциями.

Вывод и рекомендация

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

Напомню, что прокачать дополнительные навыки веб-дизайна и дизайна интерфейсов вы можете на платформе Breezzly. На Breezzly вас обеспечат серией проектов, обучат системе работы и натренируют навыкам в целом комплексе инструментов (Figma, Principle, ProtoPie и Tilda) — все это пригодится для сборки вашего первого портфолио. Пробуйте!