Портфолио дизайнера: примеры и полезные советы
Наличие портфолио дизайнера — маст-хэв для любого специалиста в отрасли. Это шанс наглядно продемонстрировать свои способности на примере кейсов и исследований, которые показывают рабочий и творческий процесс, а также контекст проекта.
Рассматривая кандидатуру дизайнера, неважно, на разовый проект или на полную занятость, потенциальные клиенты или работодатели рассчитывают увидеть безупречное портфолио. Поэтому мы советуем потратить время и усилия на то, чтобы проанализировать работы, определить свои сильные стороны и создать впечатляющее портфолио, которое убедит даже самого взыскательного работодателя в вашем профессионализме.
В статье расскажем, как сделать портфолио дизайнера и продемонстрируем лучшие примеры.
01. Софи Бриттен
В портфолио графического дизайнера Софи Бриттен много «воздуха» и интересных акцентов. На первом экране главной страницы она разместила графику в виде строительных блоков ярких цветов. Этот мотив далее повторяется на всех страницах, тем самым связывая их воедино и формируя отчетливый личный бренд.
По мере прокрутки, меню сайта фиксируется на экране, обеспечивая удобную навигацию по портфолио.
Кроме того, на странице «About» белый фон меняется на ярко-синий, хотя дизайн остается созвучным главной концепции.
Что запомнить:
Первое впечатление — решающее. Скорее всего, потенциальные работодатели и клиенты просматривают десятки дизайн портфолио, среди которых можно и затеряться. Поэтому выделите специальность и область экспертизы так, чтобы они привлекали взгляд и запоминались.
Используйте главный экран сайта для презентации своих навыков и перечисления тех сфер, в которых вы наиболее сильны.
Софи сделала именно так — указала свое имя и специализацию. Крупная типографика и много негативного пространства вокруг текста помогают сфокусировать внимание посетителей сайта на важной информации.
02. Литал Карни
Оформление портфолио дизайнера имеет большое значение — и это особенно на данном примере. Энергичное сочетание цветов — вот первое, что бросается в глаза в портфолио Литал.
Макет главной страницы имеет актуальную среди дизайнеров блочную структуру, выглядит просто и одновременно стильно. Для каждого проекта Литал подобрала свой фон, цвета которых отлично сочетаются между собой.
Она также разработала собственный логотип, который зафиксирован на экране и при нажатии ведет на главную страницу. Благодаря тонкому свечению логотип-буква хорошо видим на темном фоне.
Что запомнить:
Будьте доступны для связи. Ведь вся идея личного сайта-портфолио заключается в том, чтобы привлечь внимание к своим работам и получить заказ. Сделайте так, чтобы потенциальным заказчикам было легко с вами связаться — разместите контактную информацию в заметном месте. Обязательно добавьте адрес электронной почты, номер телефона и ссылки на аккаунты в социальных сетях.
Есть несколько вариантов публикации контактной информации: вы можете создать отдельную страницу с контактами, разместить их в футере сайта или на странице «Обо мне». А можете использовать сразу все варианты, чтобы наверняка.
В своем портфолио Литал скомбинировала разные способы. Кнопка «Let's Talk» — Давайте поболтаем, закреплена на экране и двигается по мере просмотра страницы. Нажав на нее, клиент переходит к контактной форме в нижней части страницы. Кроме того, дизайнер добавила адрес электронной почты, номер телефона и ссылки на аккаунты в соцсетях на странице «Обо мне».
3. Салони Джоши
Для своего портфолио продуктовый дизайнер Салони Джоши создала лаконичную структуру сайта. На главном экране — только короткое приветствие и ссылки для связи. Далее она демонстрирует свои проекты.
Каждая из работ сопровождается анализом и описанием, демонстрирующими ход мыслей, логику исследований и спектр навыков дизайнера. Также Салони указывает роль, основную миссию и таймлайн.
Кроме того дизайнер рассказывает о мозговых штурмах, макетах сайтов, прототипах, UX-исследованиях и других ключевых элементах любого процесса проектирования интерфейсов. Все это сопровождается изображениями и кратким пояснительным текстом.
Что запомнить:
Укажите текущий статус занятости. Те, кто просматривают портфолио, обычно сразу хотят понять статус занятости. Вы дизайнер-фрилансер и открыты для любых предложений или работаете полный рабочий день как наемный работник?
Салони разместила эту важную информацию в стратегическом месте — на первом экране своего сайта. Так потенциальным клиентам и работодателям нет необходимости искать нужные сведения — они видят их сразу. Дизайнер указала должности, которые ей приходилось занимать ранее. Посетители, которые хотят узнать больше, могут найти дополнительную информацию в ее резюме, нажав на соответствующую кнопку в меню.
04. Приянка Гойал
Привлекательное портфолио продуктового дизайнера и иллюстратора Приянки Гойал трудно проигнорировать. Жизнерадостное сочетание иллюстрации и яркого оранжевого фона балансируются элегантной белой рамкой, на которой размещаются элементы навигации сайта – кнопки социальных сетей, значок гамбургер-меню и логотип.
Ниже Приянка разместила свои работы на асимметричном макете – это выглядит необычно и цепляет внимание. Для каждого проекта она выбрала одно ключевое изображение поверх цветного фона. Выдерживая единый стиль для каждого из этих фонов, ей удалось связать все элементы дизайна воедино.
Что запомнить:
Отразите свою индивидуальность. Тем, кто посмотрит ваше UX-портфолио, будет интересно узнать, что вы за человек. Помимо демонстрации работ и заполнения раздела «Обо мне», постарайтесь добавить нотку индивидуальности в графику и текстовый контент.
Иллюстрация в верхней части портфолио Приянки, как и смелая цветовая палитра отражают ее характер. В начале раздела с кейсами она также добавила теплое приветствие, которое переводится как: «Чувствуй себя как дома, в холодильнике есть лимонад» и показывает ее дружелюбие.
05. Иви Ченг
Сайт портфолио дизайнера Иви Ченг говорит о профессионализме его создателя. Она представила четкое описание своего профессионального опыта, создала простую навигацию по сайту и продемонстрировала только четыре лучших проекта. Но самым впечатляющим аспектом ее портфолио является анализ кейсов.
Как у любого UX-дизайнера, работа Иви не связана исключительно с визуальной составляющей. Тем не менее, ей удалось рассказать о своих проектах детально и в привлекательной манере. Помимо изображения и названия, каждый кейс начинается с описания проблемы, с которой столкнулась команда. Каждый раздел пронумерован для дополнительной ясности. Иви детально объясняет весь процесс исследования, начиная с опроса пользователей и заканчивая анализом конкурентов.
В заключение она перечисляет выводы, к которым пришла команда, демонстрирует предлагаемое решение и обоснование, почему это будет работать. В финальном разделе Иви говорит о продолжении работы с заказчиком в рамках полного жизненного цикла продукта, а не только этого одного проекта.
Что запомнить:
Сопроводите примеры портфолио дизайнера пояснениями и изображениями. Иви — талантливый писатель — обратите внимание на ее статьи по ссылке в меню сайта, для того чтобы полностью показать свой рабочий процесс, она использует визуальные инструменты. Добавление изображений и графики в кейсы не только делает текст более читаемым и привлекательным, но и помогает посетителям вникнуть в тонкости рабочего процесса.
Иви включила снимки интерфейсов «до» и «после», а также изображения опросов, бумажных прототипов и карт, которые ее команда использовала на протяжении исследования. Реальные фотографии «рабочих моментов» Иви вместе с командой помогают разбить монотонность текста и добавить индивидуальности.
06. Бриттни Джонсон
Продуктовый дизайнер Бриттни Джонсон — настоящий многопрофильный эксперт. Благодаря анимированной иллюстрации на главной странице ее способности в графическом дизайне и иллюстрации становятся очевидными сразу же.
Она кратко перечисляет свои навыки на первом экране сайта в интересной, интерактивной манере. При наведении курсора на соответствующий текст на другой стороне экрана появляется изображение соответствующего проекта. Она также добавила ховер-эффект, который выделяет текст другим цветом по отношению к оттенку фона каждого изображения.
Бриттни в целом использует цвет очень щедро, благодаря чему дизайн ее портфолио выглядит ярко и выделяется среди других.
Что запомнить:
Расскажите о процессе в целом, а не только о конечном продукте. Никто не расскажет о том, сколько сил вложено в каждый проект, лучше, чем дизайнер. Конечный результат – это, как правило, лишь верхушка айсберга. Кроме этого, команда проводит обширные исследования, пользовательские тестирования, итерации, работает с прототипами и выполняет много другой работы.
Демонстрация всего процесса, через который прошли вы и ваша команда, позволит оценить ваши возможности, понять, как вы принимаете решения и какими навыками обладаете.
Бриттни профессионально подошла к этому вопросу. Четко зафиксировав конечный результат в правой части экрана, она использовала выпадающий список, чтобы разбить описание всего процесса на легко усваиваемые куски. Так она облегчила чтение для посетителей и сформировала у них более позитивное восприятие сайта и информации. Она в сжатой форме рассказала обо всех этапах – от постановки первоначальной цели, проведения исследований и определения персон пользователей до разработки конечного продукта.
07. Омар Аламрани
На первом экране портфолио UX- и UI-дизайнера Омара Аламрани много негативного пространства, что концентрирует внимание посетителей только на его имени, сфере и месте работы. Благодаря фавикону портфолио легко обнаружить среди других открытых вкладок браузера.
Информацию по каждому из кейсов Омар организовал очень тщательно. Прогресс-меню в правой части экрана обеспечивает легкую навигацию по описанию проекта. Дизайнер выгодно демонстрирует свои навыки – от проведения аналитических исследований до конструирования пользовательских интерфейсов.
В конце Омар добавил интересный раздел, где делится размышлениями на тему того, какой потенциал развития и улучшения есть у каждого интерфейса. Так он дает понять, что постоянно учится и к каждому проекту относится серьезно.
Что запомнить:
Используйте четкий микротекст. Продуктовые дизайнеры знают, как хорошо написанный микротекс важен для UX. Его главная задача та же, что у структуры и дизайна интерфейса, – облегчить пользователям навигацию и понимание продукта.
Постарайтесь учесть это в своем UX-портфолио. Сделайте так, чтобы микротекст был четким и уместным. Это позволит посетителям легко понять структуру сайта и беспрепятственно переходить со страницы на страницу. Хорошо, если получится добавить в микротекст индивидуальности или разбавить его юмором. Так ваше портфолио будет выделяться из среди других.
Если вы, наоборот, предпочитаете простой и четкий текст, воспользуйтесь примером того, как Омар оформил меню сайта и контактную форму. Таким образом, вы точно донесете свою мысль до аудитории.
Первое, что вы в портфолио веб дизайнера Пондсуды Джун Саэлим, – это анимация. Это хороший способ привлечь внимание и выделить портфолио на фоне остальных.
Пондсуда решила отойти от привычного всем классического меню и разместила каждый из его элементов по разным углам. В эту структуру она также добавила различные ховер-эффекты. Например, если вы находитесь на странице конкретного проекта, при наведении курсора мыши на меню откроется список всех ее работ в разбивке по дисциплинам. Это дает посетителям общее представление о реализованных ею проектах и областях знаний, с которыми она работает.
Еще один интересный штрих – интерактивная игра, которая появляется при наведении курсора на букву 'R' в меню. Задача: составить из разлетевшихся в разные стороны букв имя «Пондсуда». Оригинальное дополнение к портфолио UX-дизайнера!
Что запомнить:
Подумайте о том, чтобы добавить резюме. Хотя это не обязательно, добавление в портфолио резюме дизайнера может помочь потенциальным работодателям или клиентам узнать вас лучше. Вы можете разместить там всю самую важную информацию, не перегружая при этом сайт.
Пондсуда добавила ссылку на свое резюме прямо в меню навигации. При создании портфолио дизайнера лучше всего публиковать резюме либо на странице «About», либо дать ссылку на скачиваемый файл.
Вместо того, чтобы демонстрировать на первом экране свои работы, UX-дизайнер Матильда Амитрано решила показать полноэкранное видео горного пейзажа. Вместе с цитатой, которая отражает ее взгляд на дизайн, это сразу формирует у посетителей впечатление о ее характере.
При разработке сайта Матильда учла опыт взаимодействия с пользователями. Сайтом удобно пользоваться – меню фиксируется в верхней части экрана, а кнопка «Back to top» — Вернуться к началу — позволяет посетителям перемещаться по портфолио.
Что запомнить:
Укажите базовые сведения о каждом проекте. Конечно, кейс каждого из ваших проектов должен содержать описание всего процесса, но лучше начать его с какой-то сухой информации. Как правило, сюда включаются ваша роль в проекте, кто заказчик, с кем вы сотрудничали и когда проект состоялся.
Детальные кейсы Матильды охватывают весь процесс, и в этом ей помогает использование изображений, фотографий, графики и других визуальных инструментов. Она приводит точные сведения о сроках каждого проекта, о других участниках команды, которые тоже были вовлечены в разработку, остановился ли проект на этапе идеи или был реализован.
10. Микаэлла Тверски
Портфолио для дизайнера Микаэллы (Мики) Тверски имеет классический вид и в то же время передает ее индивидуальность.
Негативное пространство и крупный текст часто встречаются в UX-портфолио, но Мики добавила собственный штрих к этой знакомой схеме. Она не только объединила два разных стиля шрифтов, но и перефразировала известную поговорку, что приковывает внимание посетителей. Комичное дополнение в футере сайта тоже отражает ее личность и приглашает задержаться на сайте подольше.
Кроме того, к изображениям на своей домашней странице Мики добавила hover-эффект. При подведении курсора мыши черно-белые изображения становятся цветными. Это улучшает восприятие посетителей сайта и помогает им сосредоточиться на конкретном проекте.
Что запомнить:
Включите в портфолио только лучшие работы. UX-портфолио – это шанс показать свои лучшие навыки, поэтому убедитесь, что вы включили только те проекты, которыми гордитесь. Нет смысла привлекать внимание к тому, в чем вы сами не заинтересованы, или к работе, которую не хотели бы делать в будущем.
Микаэлла разметила в портфолио лишь несколько избранных проектов. Каждый из них точно отражает ее возможности как специалиста. Дополнительные проекты, которые не совсем попадают в категорию главных, она добавила в раздел «Cache» — Кэш. Таким образом Мики демонстрирует полный спектр своих навыков и интересов, в т.ч. к иллюстрации и более концептуальным разработкам.
Как оформить портфолио дизайнера
Теперь, когда вы нашли вдохновение в работах других дизайнеров и сделали из них правильные выводы, вы можете создать собственное представительство в сети. Примите во внимание все основные рекомендации по созданию портфолио дизайнера, которые вы узнали из этой статьи:
Дайте сразу понять, кто вы и что вы делаете.
Будьте доступны для связи.
Укажите текущий статус занятости.
Отразите свою индивидуальность.
Сопроводите кейсы пояснениями и изображениями.
Расскажите о процессе в целом, а не только о конечном продукте.
Используйте четкий микротекст.
Подумайте о том, чтобы добавить резюме.
Укажите базовые сведения о каждом проекте.
Включите в портфолио только лучшие работы.
Команда Wix ❤️
