примеры, зачем нужно, из чего состоит
Обзор будет полезен начинающим веб-дизайнерам в поисках первого проекта. Веб-дизайнеры с опытом найдут здесь свежий взгляд на личный бренд. Здесь вас ждут примеры международного формата подачи и чек-лист из 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?
Каждая работа подана как тизер и история в формате презентации. Достаточно захватывающе.
Что запомнить и взять на вооружение?
Масштабная подача каждой работы минимальными средствами.
Посмотреть пример портфолио →
3. Charmer Studio: подайте лучшие работы первымиКто такие Charmer Studio?
Charmer — это дизайн-студия, которая специализируется на создании эстетически выверенных веб-проектов. В основе работы лежит инженерный подход к поставленной задаче.
Почему портфолио Charmer Studio клевое?
Ребятам удалось с помощью минималистичной подачи раскрыть проекты в убедительном, притягательном и легком для погружения формате.
Портфолио веб-дизайнеров из Charmer Studio.Чему стоит поучиться у Charmer Studio?
Работы Charmer выделяются интересной типографикой и сеткой.
Что запомнить и взять на вооружение?
Смакование типографики и сетки в каждом проекте.
Посмотреть пример портфолио →
4. Upperquad: визуализируйте каждый шагКто такие Upperquad?
Upperquad — независимая диджитал студия и креативное агенство из Сан-Франциско. Мы объединяем стратегию, дизайн и технологии, чтобы воплощать идеи и опыт в жизнь. Работают со стартапами, B2B, SMB, enterprise and SaaS проектами. Среди клиентов: Stanford, Google, Le Tote
Почему портфолио Upperquad клевое?
Ребятам удалось передать атмосферу работы творческой мастерской. Листайте кейсы и сможете фактически прожить развитие дизайн-проекта от идеи до запуска.
Портфолио веб-дизайнеров из Upperquad.Чему стоит поучиться у Upperquad?
Upperquad обладает ассортиментом нестандартных проектов по визуальному сторителлингу. Здесь просто накрывает шквал творческих экспериментов.
Что запомнить и взять на вооружение?
Безудержная творческая подача каждого шага кейса в лонгридах.
Посмотреть пример портфолио →
5. Rezo Zero: сопроводите каждый кейс эффектной подачейКто такие Rezo Zero?
Rezo Zero — цифровое креативное агентство, которое придумывает, проектирует и разрабатывает уникальные бренды и индивидуальные цифровые решения для культурных и корпоративных проектов. Команды базируются в Лионе с расширением в Париже, Франция.
Почему портфолио Rezo Zero клевое?
Каждый кейс насыщен интерактивными элементами, которые побуждают со вкусом изучить нюансы проекта.
Портфолио веб-дизайнеров из Rezo Zero.Чему стоит поучиться у Rezo Zero?
Rezo Zero проделали фантастическую работу по погружению в культуру работы над проектом.
Что запомнить и взять на вооружение?
Подход к созданию художественной галереи вокруг каждого кейса.
Посмотреть пример портфолио →
6. Shishki: покажите развитие проекта по этапамКто такие Shishki?
Брендинговое агентство SHISHKI из Санкт-Петербурга – команда профи, работают по всему свету и стремятся кардинально изменить бизнес к лучшему.
Основная специализация — бренд-айдентика от разработки названия и фирменного стиля до построения коммуникационной стратегии в digital-среде.
Почему портфолио Shishki клевое?
Ребята наглядно и в деталях показали подход к подаче редизайна крупного информационного портала (университета) и смены айдентики.
Портфолио веб-дизайнеров из Shishki.Чему стоит поучиться у Shishki?
Shishki комплексно развернули весь ландшафт развития дизайн-решения от идеи до воплощения в мелочах. Особенно интересно посмотреть на работу айдентики в сквозь все популярные форматы в диджитал.
Что запомнить и взять на вооружение?
Продуманный, смелый и системный подход каждой работе.
Посмотреть пример портфолио →
7. Embacy: привлекайте внимание анимациейКто такие Embacy?
Ребята делают диджитал-брендинг и сайты. За последние два года сделали больше сотни проектов для клиентов по всему миру — от Австралии до Калифорнии, от ЮАР до… Что-то вот
Почему портфолио Embacy клевое?
Embacy поставили себе задачей подать свой бренд живым, поэтому они мастерски применяют иллюстрацию и анимацию.
Чему стоит поучиться у Embacy?
Сильная сторона Embacy — смелые креативные миксы из графики, иллюстраций и коллажей.
Что запомнить и взять на вооружение?
Европейская крафтовая дизайн-культура.
Посмотреть пример портфолио →
8. Balkan Brothers: продемонстрируйте системный подход к работе в мелочахКто такие Balkan Brothers?
Цифровое агентство, помогающее брендам SaaS создавать потрясающие веб-сайты.
BB Agency — это креативное агентство, которое создает целостный, удобный для людей цифровой опыт для вдохновляющих брендов. Мы превращаем исследования в решения, создавая продуманные и унифицированные бренды, приложения, веб-сайты, интерфейсы и системы.
Почему портфолио 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 клевое?
Здесь огромное количество экспериментов с веб-анимацией.
Особенно интересно наблюдать связь анимации и бренда, для которого она создается.
Чему стоит поучиться у Your Majesty Co?
Среди множества экспериментов Your Majesty Co вы наверняка подберете что-то для вдохновения в своем проекте.
Что запомнить и взять на вооружение?
Смелые эксперименты с визуалом и движением.
Посмотреть пример портфолио →
10. FocusLab: расскажите о ваших ценностях и методологии работыКто такие FocusLab?
Focus Lab — «Global B2B brand agency», недавно сделали 7 подход к ребрендингу. Через Wayback Machine можно изучить 10 лет развития бренда через анализ стратегии, коммуникации, визуальной идентичности. Сейчас у ребят в портфеле уже 12 единорогов (количество клиентов, которые вышли за один миллиард долларов после брендинга).
Почему портфолио FocusLab клевое?
Здесь ТОП международной культуры как дизайна, так и айдентики.
Фактически ребята как Пол Рэнд нашего времени.
Чему стоит поучиться у FocusLab?
FocusLab последовательно и невероятно прорабатывают и воплощают бренды от стратегии до запуска.
Что запомнить и взять на вооружение?
Американская культура подачи кейсов с переплетением с культурой продукта и ценностями компании для которой создается дизайн.
Посмотреть пример портфолио →
Что веб-дизайнеру учесть при создании портфолиоТеперь, когда вы нашли вдохновение в работах других специалистов в веб-дизайне и сделали из них правильные выводы, вы можете создать собственное представительство в сети. Примите во внимание все основные рекомендации по созданию веб-портфолио, которые вы узнали из этой статьи:
- Дайте за один скролл понять, кто вы и чем полезны
- Укажите текущий статус занятости.
- Добавьте смелый индивидуальный ход.
- Продемонстрируйте ассортимент работ.
- Подайте свои лучшие работы первыми.
- Визуализируйте каждый шаг
- Покажите развитие от идеи до воплощения.
- Расскажите не только о сайтах, но и веб-сервисах
- Расскажите о ваших ценностях и методологии работы
- Сопроводите каждый кейс эффектной подачей.
- Привлекайте внимание анимацией.
- Усильте портфолио дизайн-концепциями.
Портфолио для веб-дизайнера — сильный плюс для демонстрации навыков. Клиентам и работодателям важны смелые, уверенные и упакованные специалисты, которые смогут сориентироваться в главном, разделить задачу на этапы и двигаться к цели от этапа к этапу через наглядные результаты. Поэтому сохраните себе в закладки примеры портфолио и чек-лист и вперед — экспериментировать и упаковываться.
Напомню, что прокачать дополнительные навыки веб-дизайна и дизайна интерфейсов вы можете на платформе Breezzly. На Breezzly вас обеспечат серией проектов, обучат системе работы и натренируют навыкам в целом комплексе инструментов (Figma, Principle, ProtoPie и Tilda) — все это пригодится для сборки вашего первого портфолио.
Пробуйте!
Сайт-портфолио частного веб дизайнера фрилансера. Услуги и цены.
Добро пожаловать! Я — Антон «БИТМАП» Черкасов — частный веб-мастер, дизайнер.
Специализируюсь на Frontend / UI дизайне для WEB, айдентике, полиграфии, фотографии.
Занимаюсь комплексным созданием «легких» и удобных сайтов с адаптированной версткой.
Мои услуги Портфолио
Свежие работыСайт SurgicalTools.ru
Веб-дизайн, разработка сетки и интерфейсов, программирование и наполнение адаптивного сайта-каталога хирургических инструментов….
Создание сайта MedMente.ru
Создание интернет-магазина Fotolavka.ru
Создание сайта KAMTEC.RU
Создание сайта Apriele.ru
Веб-дизайн. Создание разработка и сопровождение веб-сайтов
С 2005 года занимаясь веб-дизайном, и держа руку на пульсе сайтостроения, я предлагаю своим клиентам качественный веб-дизайн, грамотную сборку на быстрой, безопасной и удобной системе управления, валидную верстку с учетом SEO-трендов, дальнейшую поддержку и сопровождение.
Как комплексно, так и в отдельности можно заказать:
- Создание сайта «под ключ»
- Создание сайтов-визиток
- Создание сайтов-каталогов
- CSS-HTML верстку шаблонов
- Интеграцию готового шаблона на систему управления сайтом
Смотреть работы Скачать бриф
Дизайн и верстка рекламной полиграфии
С 1995 года я работаю в полиграфической индустрии. Слежу за трендами в области дизайна полиграфии, технологий печатных процессов, разбираюсь в материалах и оборудовании, законах типографики и верстки, владею всеми необходимыми графическими редакторами и профильными программами. Как комплексно, так и в отдельности у меня можно заказать:
- Создание рекламной полиграфии
- Дизайн и верстка брошюр и каталогов
- Дизайн и верстка листовок и буклетов
- Дизайн сувенирной полиграфии
- Макетирование наружной рекламы
Смотреть работы Скачать бриф
Айдентика.
Разработка логотипов и других элементов фирменного стиляСоздавая более совершенный фирменный стиль или проводя ребрендинг, вы сообщаете своим потребителям о том, что ваша компания растет и укрепляет позиции. А если вы начинаете бизнес «с нуля» то вам просто необходим грамотный и современный логотип и его минимальная адаптация под популярные носители.
Как комплексно, так и по-отдельности произвожу:
- Создание фирменного стиля
- Создание логотипа
- Создание гайдлайна
- Разработку брендбука
- Дизайн сувенирной продукции
Смотреть работы Скачать бриф
Рекламная фотография.
Ретушь и цветокоррекция
Ни одна продающая реклама или web-сайт не обходятся без качественных изображений или фотографий. Качественно отснятая и обработанная продукция напрямую влияет на формирование имиджа предприятия и узнаваемость на фоне конкурентов. Для качественного результата мало иметь профессиональное фото- и осветительное оборудование, не менее важны опыт работы в рекламе, знание законов полиграфии, владение широким спектром программного обеспечения, знания законов оптики и светопостановки.
У меня можно заказать рекламную предметную, макро, каталожную, имиджевую, интерьерную фотосъемку или обработку имеющихся некачественных фотографий.
Смотреть работы Скачать бриф
Хотите сэкономить на создании сайта? Возможность есть!
Узнайте подробности
10 потрясающих примеров веб-портфолио
Удивительная страница портфолио веб-дизайнера — один из лучших способов привлечь новых клиентов.
Отличная страница портфолио служит продолжением вашего бренда, индивидуальности и навыков. Это также ваш шанс произвести хорошее первое впечатление и представить свои таланты. Как веб-дизайнеру, вам понадобится уникальная и интересная страница портфолио, чтобы потенциальные клиенты могли ознакомиться с вашей работой. И если вы отлично справляетесь, клиенты могут захотеть, чтобы вы также создали их портфолио или веб-сайт.
Ниже мы собрали 10 отличных портфолио веб-дизайнеров, если вам нужно немного вдохновения, чтобы начать создавать свои собственные.
Что включить на веб-сайт портфолио веб-дизайна
Веб-сайт портфолио веб-дизайна должен представлять вас и вашу работу. Цветовая схема, шрифты, типографика, макет и изображения должны представлять ваш личный бренд на нескольких ключевых страницах:
Домашняя страница
Ваша домашняя страница — самая важная страница — она обязательна. Здесь вы привлекаете потенциальных клиентов привлекательными визуальными эффектами или образцами работ, которые вызывают любопытство. Вы можете представиться здесь, будь то графика, фотография или забавная анимация. Что бы вы ни выбрали, убедитесь, что оно представляет вас и ваши навыки.
Если у вас есть ниша в дизайне, например создание 3D-эффектов или создание интернет-магазинов, убедитесь, что это сразу видно.
О нас
На странице «О нас» вы найдете подробную информацию о вашей жизни, стиле работы и опыте. Клиенты хотят знать, что вы талантливый дизайнер, и добавление описания вашего опыта и навыков поможет им убедиться, что вы именно такой.
Если они уверены в ваших способностях, они с большей вероятностью обратятся к вам за проектом.
Включите любую страницу в социальной сети, которая предоставляет больше информации о вас или вашей работе в Интернете, например LinkedIn, Behance или Dribbble, чтобы показать потенциальным клиентам больше ваших талантов.
Портфолио
На странице портфолио представлены самые впечатляющие проекты. Выберите разнообразную группу проектов, которые демонстрируют различные навыки в различных отраслях, в которых вы специализируетесь. Предоставьте описание каждого из них, которое охватывает вашу ключевую роль в проекте, какие проблемы вы решали, используемые навыки и идеи, лежащие в основе стратегии, чтобы потенциальные клиенты могут видеть, в чем вы преуспеваете и как вы подходите к своей работе.
Контакты
Страница контактов часто совпадает со страницей «О нас», но необходимо предоставить контактную информацию, чтобы потенциальные клиенты могли узнать о вас.
Это также отличный способ узнать о них больше. И если вы хотите перечислить доступные услуги и тарифы, это отличное место для этого, чтобы клиенты могли проверить, сколько это будет стоить, прежде чем обращаться.
Как сделать ваше портфолио веб-дизайна заметным
Веб-сайт вашего портфолио — это первое знакомство потенциального клиента с вами. Здесь они узнают о вашем опыте и навыках.
Это работает и в обратном порядке. Прежде чем заполнять шаблон или создавать свое портфолио онлайн, подумайте, с какими типами клиентов и брендов вы хотите работать. Этот подход влияет на то, какие навыки или опыт вы выделяете в своем резюме, чтобы привлечь определенные бренды или отрасли.
10 лучших примеров портфолио веб-дизайнеров
Вот 10 примеров портфолио, которые охватывают множество различных навыков, личностей и специальностей, чтобы вдохновить ваш дизайн.
1. Virginia Orosa
Дизайнер из Дублина Вирджиния Ороса использует двухцветную розовую цветовую схему для создания уникального портфолио с широким дизайном, соответствующим широкой клиентской базе Вирджинии.
Повседневный шрифт без засечек хорошо сочетается с оттенками розовой цветовой палитры, создавая мягкий, уютный вид. Есть также тонкая анимация и переходы, такие как плавный список клиентов. Интерактивные элементы на странице портфолио стимулируют действия пользователей, чтобы увеличить время, которое они проводят на странице, и показать навыки дизайнера.
Это портфолио демонстрирует адаптивный стиль дизайна и опыт Вирджинии, доказывающий ее мастерство дизайнера визуальных эффектов и взаимодействия.
2. Ivette Felix Uy
На двухстраничном сайте бруклинского дизайнера продукции Ivette Felix Uy представлены шесть ее прошлых проектов в виде портфолио для нишевого набора навыков. Дизайн сбалансирован и визуально привлекателен для аудитории, ищущей дизайнера продукта, благодаря тому, что он сосредоточен на образах дизайна продукта и структуре тематического исследования.
Каждое тематическое исследование содержит такие сведения, как задействованная команда, тип проекта, роль Иветт и показатели успеха.
В этом онлайн-портфолио используются тонкие, но умные визуальные эффекты, чтобы продемонстрировать мастерство Иветт.
3. Шаблон Empathy
Шаблон Webflow Empathy, созданный Тайлером Хьюи из Ty Created, представляет собой прочную основу для портфолио агентства или студии веб-дизайна. Благодаря согласованным макетам и встроенной адаптивности к мобильным устройствам Empathy обеспечивает смелый, красивый и профессиональный дизайн.
При прокрутке шаблона открываются разделы, в которых дизайнеры, создающие портфолио, могут добавлять высококачественные изображения своих прошлых проектов в колонку справа. Каждое изображение сочетается с полем для добавления текста и заголовка, чтобы вы могли описать проекты и привлечь потенциальных клиентов на сайт. Со встроенными страницами для ваших проектов и услуг вы можете превратить этот шаблон в свое индивидуальное портфолио веб-дизайна.
4. Milli
Milli — агентство креативного дизайна с впечатляющими навыками и репутацией, работавшее с такими известными брендами, как Amazon, Netflix и Red Bull.
Портфолио — это больше опыт, чем статическая страница, содержащая прямоугольники для каждого раздела портфолио. Разделы «Работа», «Подключение», «О программе» и «Сообщество» подсвечиваются желтым цветом и увеличивают текст при наведении курсора. Это побуждает потенциальных клиентов нажимать на сетки, узнавая больше о том, что может предложить Milli. Вокруг прямоугольников постоянно прокручивается рамка, подчеркивающая услуги Милли: производство видео, креативная стратегия, социальные сети и многое другое. С помощью этих анимаций Милли демонстрирует свои дизайнерские навыки, чтобы доказать, почему вы можете доверять их услугам.
5. Colin Moy
Дизайнер Colin Moy создал смелый и захватывающий дизайн портфолио, демонстрирующий его таланты. Сам сайт-портфолио является частью образцов работ Колина — он даже призывает вас клонировать его и копаться в деталях.
Портфолио Колина встречает посетителей визуальным трюком, заменяя буквы в его имени на глаза. Щелчок по этим глазам активирует темный режим и запускает анимацию.
Глаза продолжают смотреть, как посетители перемещаются по сайту Колина, меняя местами буквы «О» в «О программе», «Портфолио» и «Контакты», чтобы предложить пользователям щелкнуть и развернуть, чтобы увидеть больше. Это отличная стратегия для удержания потенциальных клиентов на страницах портфолио, знакомства с работами Колина.
6. MN STUD.IO
Портфолио MN STUD.IO демонстрирует опыт основателя Марка Ноубла в области моушн-дизайна и веб-разработки. Это портфолио разработано с учетом аудитории амбициозных компаний, стремящихся создать свой бренд. MN STUD.IO тяготеет к проектам, связанным с анимацией и движением, надеясь, что ее потенциальные клиенты тоже.
Когда посетители прокручивают страницу, анимация демонстрирует прошлые проекты и скользит по экрану, поощряя щелчок. Эта интерактивность подчеркивает набор навыков агентства. Каждая страница включает в себя движение с горизонтальным скользящим текстом, вращающимися кнопками и интерактивными элементами. Это позволяет посетителям веб-сайта погрузиться в контент, давая MN STUD.
IO больше времени для продажи своих услуг.
7. Али Саид
Али Саид — графический дизайнер из Кувейта и разработчик Webflow. В основном он работает со стартапами и корпорациями в области веб-дизайна, брендинга и презентаций. Али демонстрирует свои навыки с интерактивным шаблоном, и каждый прошлый образец работы, кажется, падает на страницу, когда посетители прокручивают страницу вниз. Эта тонкая анимация демонстрирует набор навыков Али в действии в рамках его портфолио.
8. Портфолио You X
You X — это шаблон портфолио от BRIX templates. Хотя это и не портфолио конкретного человека или агентства, этот шаблон является отличной основой для портфолио веб-дизайна, поскольку он полностью настраивается в соответствии с вашими потребностями. Шаблон You X включает в себя обширные страницы, функции, параметры электронной коммерции и редактируемый файл Figma, доступный после покупки.
Ты Х — идеальный чистый холст. Шаблон следует текущим тенденциям дизайна в отношении типографики, пробелов и общего дизайна пользовательского интерфейса, позволяя пользователям делать его по-своему.
9. Шаблон Side Scroller
Шаблон Side Scroller от Aaron Grieve предлагает другой способ представления работы — прокрутку по горизонтали, а не по вертикали. Он имеет стандартный заголовок, основной текст и призыв к действию. Однако при прокрутке новый контент отображается справа, а не снизу страницы.
Боковая прокрутка создает эффект присутствия, как при перелистывании страниц брошюры. Это отличный метод продажи портфолио, поскольку он имитирует перелистывание фотокниги или физического портфолио. Шаблон полностью адаптивен и проверен на доступность с помощью панели аудита Webflow.
10. Eve Kayser
Портфолио Eve Kayser сразу бросается в глаза эффектами градиента на логотипе и изящными плавающими квадратами соответствующих цветов.
Информация об опыте Евы, краткая информация о его опыте и контактная информация находятся вверху страницы. Ссылка на недавнюю работу — это якорная ссылка, пропускающая прокрутку страницы, чтобы быстро просмотреть портфолио Евы.
Последовательный подход позволяет потенциальным клиентам сразу перейти к образцам, чтобы удовлетворить их любопытство и ускорить работу с сайтом.
Чувствуете вдохновение?
Если вы недавно закончили учебу и хотите создать свое студенческое портфолио или планируете сменить профессию, ознакомьтесь с курсом дизайнерского портфолио Университета Webflow. Этот 21-дневный курс научит вас включать визуальный дизайн в свой сайт-портфолио без написания кода. И если вы готовы создать свое портфолио сегодня, мы предлагаем множество шаблонов для начала.
14 вдохновляющих примеров портфолио UX-дизайнеров в 2023 году
Каждому UX-дизайнеру нужно портфолио. Найдите вдохновение для себя в этих замечательных примерах портфолио дизайнера UX.
Джефф Карделло
Риз Киршнер
Старший менеджер по контент-маркетингу
Веб-сайты дизайна UX от сообщества Webflow
Найдите вдохновение от сообщества Webflow для своего веб-сайта дизайна UX на Webflow Showcase.
Просмотреть сайты
Просмотреть сайты
Витрина
UX-дизайн — это создание удобного пользовательского опыта.
Лучшие портфолио дизайнеров UX обеспечивают баланс между визуально привлекательным веб-дизайном и графическим дизайном, а также удобством использования.
Не существует рецепта идеального портфолио дизайна UX, потому что каждый веб-сайт портфолио должен демонстрировать уникальные навыки создателя. Но если вы только начинаете или планируете изменить дизайн своего портфолио, немного вдохновения может помочь начать проект.
Мы составили список красивых примеров портфолио UX-дизайнеров — в произвольном порядке.
Это лишь некоторые из многих невероятных портфолио.
14 Примеры портфолио дизайнера UX
Давайте рассмотрим эти 14 портфолио UX, которые помогут вам создать свой собственный дизайн таким образом, чтобы он отражал дух вашей работы, а также ощущение того, кто вы есть.
1. Эми Ланц
Веб-сайт портфолио Эми Ланц начинается с простого заявления: «Привет! Я разрабатываю продукты и бренды».
Затем анимация заменяет слово «дизайн» другими действиями, включая исследования, рынок и поддержку, — ловко добавляя больше навыков во вступительное предложение.
Несмотря на то, что дизайнерское портфолио Эми демонстрирует ее навыки взаимодействия с пользователем, она отмечает, что слово «пользователь» раздражает ее, потому что ей нравится думать о людях, для которых она проектирует, как о друзьях и семье. Дизайн сайта Эми выделяется, потому что она сочетает в себе стандартные элементы портфолио, такие как отзывы и рейтинги навыков, со своей индивидуальностью. Пометка отзывов как «дай пять» и добавление «это как Тони Хоук, но дизайнерская версия» под ее очками навыков дает вам представление о человеке, стоящем за работой.
2. Любомир Барджич
Любомир Барджич с точностью владеет UX/UI дизайном в своем портфолио. С шестью представленными проектами на главной странице, каждый из которых занимает свой цветной блок, он дает достаточно подробностей, чтобы намекнуть на то, на что он способен.
Затем он подробно рассказывает о каждом проекте в своем письме. Эта сопроводительная копия идет глубже, чем просто избранные проекты с отзывами клиентов, его мыслительным процессом и обзором проекта.
3. Венди Шорр
Страница Венди Шорр открывается лампочкой со светящейся нитью. Это идеально соответствует ее заявлению о миссии: «Превращать яркие идеи в красивые, полезные и восхитительные цифровые продукты, которые может использовать каждый».
Прямо под сгибом вы увидите изображения прошлых проектов. На каждой странице проекта есть обширный кейс, подробно описывающий исследования пользователей, процесс и ранние прототипы Венди.
Венди также делится примерами каркасов или других эскизов, которые были частью процесса визуального проектирования. Тематические исследования UX и обширные исследовательские заметки могут легко стать ошеломляющими, но Венди разбивает информацию на удобоваримые куски. Ее подробные тематические исследования дают потенциальным клиентам огромное количество информации, побуждая их посетить страницу с контактной информацией Венди, чтобы связаться с ней.
4. Michal Maciejewski
Портфолио UX-дизайна не обязательно должно быть загружено контентом, чтобы произвести впечатление. Одностраничный веб-сайт с портфолио Михала привлекает ваше внимание, как только вы начинаете прокручивать страницу — слова «Я верю в дизайн-мышление» появляются по мере продвижения вниз по странице.
Ниже на странице вы увидите примеры лучших работ Михала, а также визуальную хронологию их многолетнего опыта. Анимация, запускаемая прокруткой, делает процесс визуально привлекательным, увеличивая шансы потенциальных клиентов добраться до контактной информации Михала в нижней части страницы.
5. Паскаль Страше
Это портфолио UI/UX начинается с фотографии Паскаля рядом с простым утверждением, объясняющим, кто он такой и что у него получается лучше всего.
Вместо обычных скриншотов в кейсах Pascal используются высококачественные изображения. Healso проводит вас за кулисы, описывая первоначальные проблемы и решения, которые привели к конечному продукту.
В разделе «Побочные проекты» Паскаль выделяет несколько увлеченных проектов, прежде чем погрузиться в философию своей работы. Включение этих личных прикосновений дает потенциальным клиентам лучшее представление о том, во что он верит и чем увлечен.
6. Вики Марченко
Иллюстрированные бумажные самолетики скользят по странице, когда вы приземляетесь на портфолио дизайна UX/UI Вики Марченко. Это в сочетании с обычным «привет!» и эмодзи со знаком мира задают дружественный тон веб-сайту.
Вики использует свой раздел «обо мне», чтобы более подробно рассказать о своем профессиональном опыте и дизайнерских навыках. Страница ее проектов также актуальна, на ней представлены некоторые из ее лучших работ и предлагается посетителям связаться с ней.
7. КОКО
Причудливый робот машет рукой, приветствуя вас в портфолио дизайнера продуктов Майкла Кохенбургера. Прямо под дружелюбной машиной Майкл объясняет, что робот представляет их аналитический подход к решению проблем, который поддерживает его работу по дизайну UX.
Далее на главной странице вы увидите избранные проекты со ссылками на связанные с ними истории клиентов. Портфолио Майкла также включает защищенный паролем раздел, полный его лучших работ. Использование защищенных паролем страниц на сайте портфолио — разумный шаг, потому что он позволяет вам выделять проекты, которыми вы не можете поделиться публично.
Узнайте, как создать портфолио дизайнеров
Создайте и визуально оформите веб-сайт с полным портфолио — совершенно бесплатно. Этот курс охватывает все, от основ сетки и flexbox до расширенных взаимодействий и работы со специальными возможностями.
Начать курс
Подпишитесь, чтобы стать инсайдером Webflow
Спасибо! Теперь вы подписаны!
Ой! Что-то пошло не так при подписке.
Начать курс
8. Даниил Новиков
Портфолио Даниэля Новикова UX/продуктового дизайнера — еще один пример громкого заявления на вершине. Дэниел начинает с «UX-дизайна для», а анимация ввода заполняет варианты, включая: влияние на бизнес, удовлетворенность клиентов, а также стартапы и масштабирование.
На диаграмме Венна показаны потребности пользователей, бизнес-цели и технологии, пересекающиеся для создания «вашего продукта» — прямое обращение к потенциальным клиентам. Даниэль сохраняет визуальный дизайн простым, используя черно-белую цветовую палитру в сочетании с цветными пятнами.
Контактная форма Даниэля — приятный штрих. Это не только побуждает потенциальных клиентов делиться конкретными подробностями заранее, но также показывает, что Дэниел имеет представление о UX-дизайне.
9. Алисия Митчелл
Алесия Митчелл начинает с четкого заявления о цели, а затем сразу же переходит к своим UX-кейсам на главной странице.
Каждое тематическое исследование объясняет роль Алисии в создании мобильного приложения или адаптивного веб-дизайна и перечисляет инструменты дизайна, которые она использовала. Алесия также включает прямую ссылку на свое резюме в формате PDF, чтобы клиенты могли более подробно ознакомиться с ее многолетним опытом и прошлой работой.
10. Ryan C. Robinson
UX-портфолио Ryan C. Robinson играет с размерностью. Его домашняя страница имеет триповый дизайн — волнистые линии, которые создают иллюзию 3D — и вместо плоской сетки проектов он выкладывает свое портфолио под невидимым углом.
В этом портфолио UX-дизайнера отсутствует двухмерность, к которой так привязаны многие дизайнеры. Райан доказывает, что он уверенно отказывается от традиционного процесса визуального проектирования.
Простой одностраничный веб-сайт Райана короткий, но эффективный. Он поддерживает интерес посетителей сайта, включая только свои лучшие проекты и направляя их к своей контактной информации и профилю LinkedIn внизу страницы.
11. Джейсон Стивенс
Джейсон Стивенс открывает сайт своего UX-портфолио с большой типографикой, объявляя, что он создает «приятный опыт для людей». Замена пользовательского опыта на «опыт для людей» сразу дает вам представление о том, какими аспектами UX-дизайна увлечен Джейсон.
Коллекция проектов веб-дизайна и электронной коммерции появляется при прокрутке главной страницы. При нажатии на любой проект открывается подробное тематическое исследование, включающее множество визуальных материалов, исследовательские заметки и детали проекта.
12. Аарон Рудик
Драматически освещенный Аарон Рудык выглядывает с первой страницы своего портфолио с движущимся фиолетовым облаком, плывущим слева от него. Оттуда вы можете либо использовать верхнюю панель навигации для доступа к определенному контенту, либо следовать прыгающей белой стрелке для прокрутки вниз.
Аарон искусно маскирует свой одностраничный веб-сайт, включив в него верхнюю панель навигации — нажатие на элементы меню просто перемещает представление к этому разделу страницы. Прокрутив вниз, вы увидите примеры его работы, а также коллекцию бесплатных клонируемых проектов Webflow.
Включение этих бесплатных подарков — это щедро, но они также служат стратегической цели. Предварительные просмотры клонируемых проектов показывают, сколько лайков, просмотров и клонов они получили от пользователей Webflow, предоставляя некоторое социальное доказательство для потенциальных клиентов.
13. Джина Ю
Джина Ю стремится создать «более человечный и чуткий мир» с помощью UX-дизайна — и это видно в ее портфолио. По всему сайту Джина вставляет цветные пятна и личные штрихи, например рекламу о своей любви к хлебу, и называет личные проекты «работой души».
В своем портфолио Джина предоставляет рекрутерам, менеджерам по найму и потенциальным клиентам соответствующую информацию, не перегружая их. Кроме того, ее использование сочетаний цветов и шрифтов облегчает чтение или беглый просмотр больших объемов текста. Беглый взгляд на сайт Джины, несомненно, впечатлит вас исследованиями пользователей и UX-проектами для таких громких имен, как Spotify.
14. Ойши Сен
Ойши Сен сочетает свое имя с эмодзи суши — намек на имя, которое произносится как японское слово «вкусно» — ойши.
Oishee использует кнопки с тенью по всему сайту, а также тонкую тень, которая появляется за изображениями при наведении курсора, что создает целостный дизайн.
Ее представленные проекты демонстрируют работы, включая редизайн веб-сайтов, исследования и тестирование пользователей, дизайн пользовательского интерфейса, информационную архитектуру, дизайн взаимодействия и многое другое.
Продемонстрируйте свои таланты с портфолио UX
Если все, что у вас есть для присутствия в Интернете, — это учетная запись Dribbble или Behance, вы упускаете важную возможность привлечь новых клиентов.
Портфолио UX-дизайнера — это больше, чем просто набор работ — это расширение вашего личного бренда. Используйте свое портфолио, чтобы показать свои таланты и индивидуальность.
Не знаете, с чего начать? Возьмите шаблон портфолио или запишитесь на наш бесплатный 21-дневный курс по дизайну портфолио.
23 февраля 2022 г.
Вдохновение
Поделиться
Рекомендуемое чтение
Вдохновение
Вдохновение
Inspiration
Подпишитесь на Webflow Inspo
Получите лучшее, самое крутое и новейшее в дизайне и без лишних затрат.
код доставляется на ваш почтовый ящик каждую неделю.
Электронная почта
Вы можете отказаться от подписки в любое время, никаких обид. Политика конфиденциальности
Все готово, следите за нашей следующей рассылкой!
К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!
Подробнее о Designer
Designer
Сила CSS, HTML и JavaScript в визуальном холсте.
Взаимодействия
Визуально создавайте взаимодействия и анимацию веб-сайта.
Подробнее о взаимодействиях
CMS
Определите собственную структуру контента и создавайте дизайн с использованием реальных данных.
Подробнее о CMS
Электронная торговля
Прощайте, шаблоны и код — визуально оформляйте свой магазин.
Подробнее об электронной торговле
Редактор
Редактируйте и обновляйте содержимое сайта прямо на странице.
Подробнее о Редакторе
Хостинг
Настройте молниеносный управляемый хостинг всего за несколько кликов.