Как оформить портфолио

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

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

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

часть 1

Как оформить работу

Формат повествования и структура / дизайн подачи / приемы оформления элементов / покажите свой проект

Формат повествования и структура подачи отдельной работы

Для начала нужно определиться из чего будет состоять ваша презентация: что вы хотите показать и в какой последовательности.

1

Эффектная главная картинка

С нее начинается презентация, ее задача создать настроение, впечатлить зрителя и вовлечь в просмотр.

2

Содержательный заголовок, вызывающий интерес

Простой путь — использовать обычный, функциональный заголовок. Например, «Редизайн главной страницы Википедии». Будет здорово, если получится добавить немного интриги, но так, чтобы не потерялся смысл.

Дизайн-агентство Fantasy презентации всех работ начинает с вопроса What if... (Что если...)

3

Вступление (Statement)

Два-три предложения, которые описывают суть проекта.

4

Логическое обоснование (Rationale)

Описание поставленной задачи и выбранного пути решения. Тут не требуется демонстрировать свой литературый талант, описание должно быть сухим, академичным. Заголовок и вступление должны «продать» работу, а rationale погрузить в суть и объяснить основную задачу.

Роман Крихели

PROEKT AGENCY

«Портфолио должно быть безупречным, но при этом оно должно сообщать целевой аудитории ясные ответы на следующие вопросы: зачем я сделал эту работу? Для кого я сделал эту работу? Почему сделал именно так? Каков результат? Всем нравятся четенькие пацаны и девчата».

5

Пошаговая демонстрация решения с комментариями

Детали можно комментировать на макетах — поставить стрелочки и подписать, что это значит. Общее правило: пишите лаконично.

Используйте конструкцию: заголовок плюс два предложения.

6

Прямая речь

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

7

Финальная фраза и команда

Это может быть ссылка на сайт (посмотрите в действии), либо заключение: какая польза от вашего проекта. Если над проектом работала команда, то не забудьте указать всех участников.

Дизайн подачи работы

Оформление портфолио — это такой же дизайн, как и содержащиеся в нем работы. Возможно, портфолио станет вашим главным проектом.

Максим Павлов

Notamedia, креативный директор, партнер.

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

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

1

Подготовьте макеты для публикации

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

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

Сергей Попков

Партнер агентства aic .

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

2

Сделайте акцент на самых выигрышных макетах

Показывать абсолютно все — скучно. Выберите лучшие варианты, которые продадут работу.

Если важен объем, соберите второстепенные макеты в группу и покажите все вместе, плиткой. Это продемонстирирует проработанность, но не утомит зрителя.

Варианты логотипов, как части визуальной идентификации проекта Making Content Beautiful / Studio—JQ

Максим Павлов

Notamedia, креативный директор, партнер.

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

Не показывайте работы, за которые вам стыдно, показывайте только то, чем гордитесь.

3

Сделайте повествование разнообразным

Текст в начале и череда макетов заставят зрителя зевать на третьем экране. Монотонность надо убивать.

4

Помещайте дизайн на носители (mockup)

Лучший вариант, конечно же, иметь свои.

Можно потратить деньги, снять один раз и потом использовать многократно. Это придаст вашему портфолио стиль. Но для экономии можно использовать и готовые (бесплатные или купленные) мокапы. Их минус в том, что они встречаются от студии к студии и хорошие мокапы легко распознаются. Вопрос в том, на кого вы ориентируетесь. Заказчик, скорее всего, не обратит внимания, а вот дизайнеры узнают.

Фирменный стиль можно вписывать в визитки, фирменные бланки, плакаты. Сайт вписать в компьютер, либо использовать фотографию человека с ноутбуком или телефоном.

Можно использовать и несуществующие девайсы.

Сергей Попков

Партнер агентства aic .

Часто начинающие дизайнеры прибегают к так называемым фейк-концепциям. Они берут какой-нибудь известный ресурс и переделывают его на свое усмотрение.

Пример. Дизайнер Артем Тройной очень подробно описал процесс редизайна сайта The New York Times, что очень хорошо раскрывает его способности как дизайнера, несмотря на то, что проект не был реализован.

http://nytimes.tematroinoi.com

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

5

Используйте необычный ракурс макетов

Популярный прием — показывать макеты в изометрии (изображение без перспективы).

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

6

Покажите детали

Шрифт, цвета и графические элементы созданные для проекта (иконки, формы и т.д.)

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

7

Сделайте короткие видео

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

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

Secret Project Anton Aheichanka for InVision (слева) и Restaurant Menu Sergey Valiukh for Tubik Studio.

8

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

Которые поддерживают стилистику проекта. Либо, наоборот, будьте лаконичны и направьте все внимание на работу. Выбор зависит от работы и задумки — как вы хотите презентовать.

9

Добавьте атмосферные фотографии

Коррелирующие с тематикой работы.

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

10

Творческий процесс всегда интересен

Бэкстейдж фотосьемки, прототипы сайта, мудборды и развеска на стене.

Это классно выглядит и действительно продает работу. Покажите, как вы работаете, как общаетесь в команде, как рисуете эскизы иконок, как они выглядят в аутлайне.

С работой все ясно — вот она аккуратная, понятная. А когда вы показываете как вы работали, объем работы, то это продает вас как эксперта, как человека, который понимает, что он делает.

Часто бэкстейдж смотреть интереснее, чем саму работу.

11

Закончите впечатляющей картинкой

Помните про «эффект края» — лучше всего запоминается первое и последнее.

12

Стимулируйте действия

Добавьте форму с контактами и кнопки для расшаривания в социальных сетях.

Не стесняйтесь просить поделиться работой. Если для вас это важно, сообщите людям, они поддержат.

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

13

Учитывайте язык аудитории

Если ваша цель — международный рынок, и вы хотите найти клиентов за пределами страны или выиграть интернациональный конкурс, пишите по-английски.

awwwards .com — сайт, который ежедневно выбирает и продвигает лучшие работы веб-дизайнеров и разработчиков по всему миру.

Приемы оформления элементов

1. Цветной или иллюстративный фон

Подберите иллюстрацию, которая соответствует тематике вашей работы сделайте ее фоном.

2. Косые черты, разбивающие страницу на смысловые блоки

Этап исследования на красном фоне, фокусировка на синем и т.д.

3. Детали интерфейса, с постепенным приближением

Соберите комбинацию фотографий, которая позволит рассмотреть детали разного уровня.

4. Специальная типографика

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

5. Акцент на мелких деталях при помощи «лупы»

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

Покажите ваш проект

Позаботьтесь о том, как ваша работа будет выглядеть после публикации.

1

Уделите внимание thumbnail

Именно по изображению для предварительного просмотра люди решают смотреть проект или нет.

У вас много конкурентов и thumbnail — это ваше оружие в борьбе за внимание. Чем оно совершеннее, тем больше шансов на победу.

Нередко отличная работа набирает мало просмотров из-за неудачного превью. И наоборот, смотришь работу — мусор, но thumbnail такой эффектный, что люди покупаются.

2

Стилистика списка проектов

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

Обратите внимание, как смотрятся все превью ваших работ рядом друг с другом в сетке постов.

3

Продумайте заголовок и описание проекта для публикации в социальных сетях

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

часть 2

Дизайн главной страницы

Обложка / Краткое описание / Сетка проектов / Одностраничное портфолио / Контакты и ссылки на социальные сети / Меню

Первый экран или обложка

Мы выделили три основных подхода к оформлению обложки.

1

Первый экран — презентация вас или студии

В этом случае на обложку помещается фотография и яркая фраза, которая говорит о том, куда человек попал.

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

Если качественной фотографии нет, то лучше подобрать релевантную иллюстрацию или обойтись цветным фоном.

2

Обложка — ваша последняя работа

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

3

Сайт начинается с сетки проектов

Название или имя пишется мелко в углу, дополнительные разделы спрятаны в меню.

Краткое описание

Два-три предложения, которые дадут посетителю основную информацию.

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

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

Сетка проектов

Варианты, как могут быть представлены работы, множество:

Самое простое, когда одна работа занимает весь экран.

Другой вариант — по ширине работы в одну колонку, но по высоте на экран вмещается несколько работ:

Следующая категория: две колонки. Работы могут быть равными по ширине, либо чередоваться. Некоторые работы могут быть выделены и занимать обе колонки. Работы могут иметь поля или располагаться вплотную друг к другу.

Еще одна категория: 3 или 4 колонки. Работы так же могут выделяться, занимая несколько колонок.

В сетку постов можно выносить не все работы, а только лучшие. Например, 9 работ и внизу кнопка «посмотреть все работы», которая либо отправляет человека на другую страницу, либо подгружает остальные проекты.

Работы можно разбить на категории и сделать рубрикацию.

Одностраничное портфолио

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

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

Контакты и ссылки на социальные сети

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

Добавляя кнопки, которые позволяют опубликовать вашу работу в социальных сетях (Twitter, Facebook, Google + и т.п.), вы обеспечиваете приток аудитории. Каждый раз, добавляя новый проект, выкладывайте его в социальные сети. Это поможет привлечь внимание не только к новым проектам, но и к портфолио в целом.

Но позаботьтесь о том, чтобы меню не портило внешний вид всего сайта. Для этого не делайте пунктов меню слишком много (оптимально — не больше пяти), и они должны быть короткими. Три слова для одного пункта меню — перебор.

Самые распространенные пункты меню: о себе, работы, контакты, блог.

Иногда в меню указывают направления: айдентика, веб, иллюстрация и т.д.

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

Введение

Задача и идея

Дизайн-исследование и фокусировка

Оcновы графического дизайна

Прототипирование

Контент

Дизайн