Как составить портфолио на сайте

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

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

Что должно включать в себя порфилио и как его создать – поговорим об этом в сегодняшней статье.

Что нужно знать для создания сайта

Создание сайта – это обычно долгая и сложная работа, в которой задействуется несколько специалистов: программист, веб-дизайнер, верстальщик, маркетолог и другие сотрудники. Такой подход часто применяется в крупных компаниях, где каждый работник отвечает за свою задачу. Он вполне эффективен, особенно когда требуется сделать крупномасштабный проект типа DNS или CIAN.

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

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

Что должно быть на сайте-портфолио

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

• Первый экран. Это то место, которое видит каждый пользователь, когда заходит на сайт. Первый экран важно продумать максимально детально: постарайтесь сделать так, чтобы он заинтересовал посетителя и побудил его оставить заявку, заказать услуги. Например, если мы делаем сайт-портфолио для фотографа, то на первом экране стоит рассказать о себе и добавить кнопку «Записаться на съемку».
• Обо мне. Никакое портфолио не будет работать, если вы не расскажете, чье оно. Если вы фотографируете или занимаетесь преподаванием, то расскажите о себе. Если вы планируете размещать портфолио своей строительной компании, то расскажите, когда она была основана и кто ей руководит.
• Портфолио. Конечно же, на сайте-портфолио не обойтись без полноценного блока с портфолио. Важно, чтобы этот блок был заметен и хорошо проработан, в противном случае пользователь может его попросту пропустить.
• Этапы работ. В этом блоке постарайтесь разложить по полочкам, как происходит работа с вами. Расскажите, что и за чем следует. Например, сначала вы знакомитесь с клиентом, затем обговариваете все детали, приступаете к съемкам и, наконец, выдаете готовые фото.
• Отзывы. Если у вас уже есть отзывы, то разместите их на своем сайте. Хоть и многие относятся к ним скептически, лишними отзывы не будут.
• Призыв к действию. Последним блоком можно сделать форму типа «Остались вопросы?». Если клиента заинтересовали ваши услуги, то блок с заявкой будет к месту.

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

Создаем сайт-портфолио в конструкторе

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

Работа в нем выполняется следующим образом:

1. Первым делом заходим на сервис и проходим быструю регистрацию.
2. Прописываем контактные данные и жмем на «Создать сайт».
3. На отобразившейся странице перед нами открывается доступ ко множеству различных шаблонов. Для примера давайте возьмем тот, что соответствует нашей тематике. Допустим, мы планируем создать сайт-портфолио для фотографа – в таком случае подойдет шаблон «Услуги фотографа» (раздел «Мероприятие»). Он был разработан специально для фотографов, единственное, там нет блока с портфолио, но не беда – соберем его сами. 
4. Начнем редактирование с главного экрана. Как я уже говорил ранее, это лицо сайта, которое должно завоевывать доверие с первой секунды. Для начала переделаем шапку сайта, где находится логотип, меню, телефон и кнопка. Наводим курсор мыши на блок и жмем «Настроить».
5. Заменяем номер телефона, наименование контакта редактируем по желанию, а вот логотип оставляем прежним. Вы же можете поменять лого: либо изменить его в текстовом варианте, либо добавить в качестве изображения – для этого следует выбрать «Тип» -> «Изображение». Также давайте изменим пункт «Отзывы» на «Портфолио» – сделать это можно через настройки самого пункта меню. В последующем на эти пункты потребуется добавить якорные ссылки, чтобы пользователи могли легко перемещаться по соответствующим блокам – такие параметры также редактируются в настройках.
6. Последним действием отредактируем кнопку: надпись ее мы оставим такой же, а вот функционал изменим. Сделаем так, чтобы при клике на нее открывалась форма, где пользователь мог бы оставить свои данные. Для этого раскрываем подраздел «Кнопка», выбираем «Тип ссылки» -> «Всплывающее окно», а в «Блок» нажимаем на «Добавить новый блок».
7. В результате нас перенаправляет в нижнюю часть сайта, где открывается доступ к форме сайта. Ее нам также следует отредактировать:
8. Для начала поменяем содержимое формы – в заголовке укажем «Закажите звонок», в подзаголовке напишем «Оставьте заявку, и мы с вами свяжемся в ближайшее время». Упростим и саму форму: оставим только два поля – имя и телефон. А в кнопке пропишем, какое действие совершает пользователь в неопределенной форме, то есть «Заказать звонок». 
9. Осталось настроить отправку формы – для этого открываем раздел «Форма» и раскрываем блок «Отправка данных с формы», куда прописываем свою электронную почту.
10. На этом редактирование шапки завершено – теперь давайте перейдем к настройке первого экрана. Изменим заголовок таким образом, чтобы было понятно, чей это сайт. В подзаголовке, как правило, раскрывается заголовок – можно рассказать о преимуществах, профессиональных качествах. Для примера напишем «Современные и креативные фотосессии для любых целей».
11. При необходимости мы также можем изменить размер шрифта и провести с ним другие манипуляции. Для этого следует его выделить и воспользоваться выпадающим меню.
12. Теперь давайте поработаем с кнопками – оставим только одну и назовем ее так: «Записаться на съемку». Для этого открываем настройки блока, изменяем «Кнопка#1», а в блоке «Кнопка#2» просто стираем текст, в результате чего она автоматически исчезает.
13. Осталось изменить фоновое изображение. Вы можете, конечно, оставить его, но лучше добавить свое. Сделать это можно через вкладку «Фоновое изображение», которая открывается с помощью кнопки в нижнем левом углу.
14. Обратите внимание на то, что мы также можем загрузить фотографию из галереи конструктора.
15. Установить картинку с компьютера мы можем через раздел «Фото». Там достаточно добавить фотографию, а затем нажать на кнопку «Использовать в блоке».
16. В результате получаем вот такой первый экран:
17. На этом создание первого экрана завершено. Теперь давайте сделаем блок, ради которого мы здесь собрались. Добавим блок-портфолио и загрузим в него свои работы. Чтобы добавить блок в Craftum, наводим курсор мыши между блоками и жмем на кнопку в виде плюсика.
18. Переходим в раздел «Фото и видео» и выбираем шаблон «Media-05».
19. Первым делом давайте поменяем заголовок на «Портфолио», а также изменим подзаголовок на «Мои самые яркие проекты, над которыми я работал».
20. Теперь можем добавлять свои работы – для этого открываем настройки блока и раскрываем подраздел «Изображения». В нем кликаем по шестеренке на одной из фотографий.
21. В левой части нажимаем на исходную фотографию, затем в отобразившемся окне загружаем свою. После этого жмем «Вставить изображение».
22. В завершение жмем на «Сохранить».
23. Далее заменяем все фотографии на свои. Обратите внимание, что мы также можем добавить дополнительные фото – для этого есть специальная кнопка.
24. Если нужно будет поработать с дизайном этого или другого блока, то перейдите в раздел «Дизайн» в настройках блока. Там доступны такие возможности, как изменение отступа блока, цвета фона и текста, редактирование внешнего вида кнопки, заголовка и подзаголовка.
25. Также мы можем переместить, дублировать, удалить либо скрыть блок. Это можно сделать с помощью кнопок в правой части блока.
26. Вот так, блок за блоком, конструируется сайт: аналогичным образом необходимо добавить другие разделы страницы, подробнее о которых мы уже говорили. Когда весь процесс будет завершен, останется лишь опубликовать сайт – для этого есть специальная кнопка в верхнем правом углу.

Заключение

После публикации сайта вы сможете делиться им со своими друзьями и распространять в интернете. Но учтите, что по умолчанию используется бесплатный домен типа «ch6141617231.tmweb.ru». Если вы хотите добиться каких-то результатов в SEO-продвижении, то лучше всего сделать его таким, чтобы он соответствовал вашей деятельности, например «photoarseny.ru».

Получить любое свободное имя вы можете в личном кабинете конструктора за дополнительную плату. А если оплатить тарифный план на год вперед, то домен в зонах .ru, .рф, .fun, .host, .site, .space, .website или .online можно подключить бесплатно. 

Руководство по созданию выдающегося портфолио

В UX дизайне портфолио значат больше чем высшее образование. Работодатели и менеджеры по набору персонала будут использовать ваше портфолио чтобы определить ваш опыт, эстетичность и, что более важно, вашу способность решать проблемы бизнеса в реальном мире.

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

1. Создайте сайт

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

1.1 Подключите веб-аналитику

Добавьте Google Analytics на ваш сайт чтобы собирать статистику посещений. Это поможет вам составить профиль ваших посетителей: кто недавно посетил ваш сайт (местоположение), как долго и какие ваши проекты он просматривал. С помощью этих данных вы сможете оптимизировать результативность своего сайта на максимум.

1.2 Сделайте вашу навигацию предельно понятной

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

Несмотря на то что сайт Тиффани содержит множество интересных кейсов, найти актуальную навигацию сложно.

1.3 Создайте дополнительные портфолио на других сайтах

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

Behance играет важную роль в поиске новых клиентов для многих компаний. У Ramotion одно из моих любимых портфолио. Почти каждая их работа получает много внимания от СМИ.

2. Расскажите историю

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

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

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

• Какая у вас подготовка? Какие ваши навыки будут наиболее полезны для UX дизайнера?
• Есть ли у вас определённый стиль? Специализируетесь ли вы на конкретных видах дизайна?

2.1 Создайте хорошие главную страницу и страницу «Обо мне»

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

Главная страница Адхама хорошо показывает его навыки.

Страница «Обо мне» это лучшее место чтобы рассказать побольше о вашем опыте, ваших хобби, интересах, а также кем бы вы хотели стать. Используйте её чтобы дать вашим будущим работодателям понять кто вы как личность.

Портфолио Эрика Бью это отличная комбинация лаконичного дизайна и запоминающейся личности.

2.2 Используйте отзывы

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

Эдмунд выделил целую страницу под отзывы.

2.3 Не пытайтесь быть UX единорогом

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

(Я очень хорош в этом и хорошо знаком с этим другим — прим. пер.) Изображение: Futurice

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

3. Думайте о там как структурировать ваши проекты

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

3.1 Расположите наиболее подходящие проекты сначала (вместо последних)

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

3.2 Создайте многообещающие превью

Начальные стадии отбора кандидатов могут быть безжалостными. Менеджер по набору персонала или работодатель должен пересмотреть десятки(если не сотни) портфолио чтобы отобрать несколько. Не удивляйтесь что они часто принимают решение меньше чем за минуту. Трой Парк и Патрик Неэман утверждают что люди тратят примерно 10-15 секунд, просматривая UX портфолио. Старайтесь кратко донести детали проекта используя текст и проверьте доступна ли основная информация на вашем сайте, используя 60-секундный тест.

Портфолио Алана Шена имеет хорошее превью для каждого проекта.

3.3 Преодолейте NDA (соглашение о неразглашении)

Для многих дизайнеров NDA является наибольшей угрозой для их портфолио. Тем не менее NDA не должно стать причиной исключить проект из портфолио. Вот несколько способов решить проблему с NDA:

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

3.4 Только не говорите что у вас нет проектов для портфолио

У всех недавних выпускников появляется одна и та же проблема — они не могут получить опыта работы без портфолио, и не могут получить портфолио без опыта работы. Я рекомендую показывать свой потенциал любыми возможными путями. Например, вы можете участвовать в Daily UI Challenge и добавить несколько лучших в ваше портфолио. DailyUI (99designs тоже хорошо подойдет — прим. пер.) особенно хорош для начинающих, потому что он не только помогает развить ваши навыки, но и делает вас заметнее в сообществе дизайнеров. Дополнительно, я рекомендую добавлять в портфолио академические работы и концепт проекты.

3.5 Делайте акцент на качестве, вместо количества

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

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

4. Описывайте в деталях

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

• Задачи проекта — Для чего проект был начат?
• Цель — Какие результаты нужно получить?
• Длительность — Сколько времени было затрачено?
• Команда — С кем вы работали над проектом? Добавьте имена и ссылки на их LinkedIn профили.
• Ваша роль — Какой вклад в проект вы сделали?
• Результат — Изображения/видео или ссылки на скачивание приложения, просмотр прототипа, исходных кодов.

Каждая работа из портфолио Итуна Чжана начинается с краткого обзора.

Этап «UX процесс», пожалуй, наиболее важная часть вашего портфолио. Как UX дизайнер вы должны очень серьезно отнестись к объяснению всего процесса, поскольку вас будут по нему оценивать.

Пример UX процесса. Изображение: Zurb.

Вы должны понимать то, что вашу работу можно оценивать только в контексте. Опишите проблему и её решение, покажите процесс который вы прошли чтобы получить финальный продукт.

• Проблема/вызов в дизайне — Это может быть что-то простое, например, несколько предложений которые расскажут о проблеме (бизнеса) которую вы решали.
• Исследование пользовательской аудитории — Опишите ваших пользователей и их нужды, мотивацию и проблемные моменты. Эта часть может включать инструменты с помощью которых вы собирали эту информацию (например персонажи и карты симпатий). Также можете упомянуть анализ конкурентов (рассмотрите сильные и слабые стороны конкурентов в решении потребностей пользователей).
• Решение — В этой части дайте ответы на следующие вопросы: Как вы решили проблему? Почему вы выбрали это решение и что повлияло на ваш выбор?
• Дизайн — Обязательно опишите как вы прошли путь от идей к конкретному решению. Покажите блок-схемы, макеты и работающие прототипы (да, это все разные вещи — прим. пер.). Работодатели должны знать что вы можете это сделать и можете смотреть на проект с точки зрения разработчика. По возможности, добавьте интерактивный прототип (например как InVision) чтобы дать возможность посетителям поиграть с ним.
• Тестирование — Как вы определяете успех/провал? Как вы тестировали ваше решение? Какие вопросы вы задавали?

4.1 Создайте сильную историю

Ваши проекты это история о вас и ваших проектах, повествование о вашем путешествии, ваши успехи и проблемы, ваши препятствия на пути.

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

Саймон Пен преподносит каждую часть дизайна как отдельную историю, дополненную превосходными изображениями. История разработки Amazon Prime Music из портфолио Саймона.

4.2 Опишите влияние вашей работы

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

Другой пример из портфолио Саймона. Результат проекта ILC NSW ‘AT Magic’

4.3 Не зацикливайтесь на визуальном представлении

Не делайте вид что вы визуальный дизайнер (если вы не он). Запомните, что целью портфолио не является показать ваши потрясающие навыки дизайнера. Наличие компетентных навыков визуального дизайна определенно будет плюсом, но не путайте их с главной задачей вашей должности — «решением проблем бизнеса разрабатывая опыт взаимодействия».

Портфолио Слава Кима уделяет слишком много внимания изображениям и не предоставляет основной информации о UX процессе.

4.4 Не концентрируйтесь только на конечной цели

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

Майкл Щепаньский представляет каждую часть как волнующую историю которая подчеркивает его проницательность.

4.5 Не переоценивайте свой вклад

Не врите. Несложно присвоить себе все заслуги за проект, над которым работала целая команда. Запомните, честность — это наилучшая стратегия: если вы что-то не умеете делать или у вас в этом нет опыта — не говорите об этом в вашем портфолио! Четко и честно обозначьте свою роль и тех, кто с вами работал.

Заключение

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

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

В статье собрано 20 примеров страниц «Портфолио» от разных компаний, чтобы вы оценили, насколько хорошо они сделаны, и что-то применили у себя. Или исправили.

А еще у нас есть статья с объяснением, как сделать свой сайт-портфолио на Google Sites всего за 1 час – без навыков программирования.

Студия Артемия Лебедева

Ссылка – https://www.artlebedev.ru/everything/

Особенности

1. Креативное название портфолио – «Задизайнено».
2. Показано общее число работ – и оно внушительное. И растет почти каждый день. Посмотрите сейчас на сайте: число будет уже не 3621.
3. Работы разделены не только по направлениям деятельности студии, но и по сферам бизнеса клиентов. В любом из направлений есть свое разделение:

1. Если нажать на кнопку «Все теги», можно идти закрывать свою жалкую студию в провинции дополнительно проникнуться:

1. Принцип организации работ – плитки, которые долго-долго листаешь вниз:

1. Если навести курсор на конкретную работу, можно увидеть оформленные ссылками аспекты ее создания:

1. Внутри:

• описывается поставленная задача и расписывается процесс ее решения;
• указывается, что было создано в рамках решения задачи:

• информация обо всех исполнителях проекта:

1. В конце страницы с работами есть панель расшаривания в соцсетях. Согласитесь – лучше поделиться своим портфолио, а не просто скопировать / вставить ссылку на него.

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

Компания «Алтэк»

Ссылка – https://altekpro.ru/portfolio/

Особенности

1. Интересная особенность портфолио на этом сайте – строка поиска:

1. В шапку портфолио также включены отзывы клиентов и их список – хороший прием для усиления впечатления от списка работ.
2. Работы разбиты по категориям для облегчения просмотра конкретного направления деятельности. Кнопка «Все» настроена по умолчанию, она же возвращает список всех работ.
3. Принцип организации:

Список сделан с пагинацией – 15 страниц работ внушают!

1. Внутри любой работы:

• большая фотография заведения;
• ее описание:

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

Строительная компания «Интехстрой»

Ссылка – http://almetfasad.ru/portfolio/

Особенности

1. Странное деление работ – всего одна категория «Отделка фасада», нажатие на которую не меняет список работы – они такие же, как и в категории «Все».
2. Список выполнен следующим образом:

1. Полный список работ можно посмотреть, если нажать на кнопку «Посмотреть еще» внизу.
2. При наведении курсора на любую работу появляется ее описание:

• нажатие на лупу откроет фотогалерею по этой работе;
• нажатие на звенья открывает подробное описание работы.

1. Как она выглядит изнутри:

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

Фабрика мебели Льва Соловьева

Ссылка – http://www.sl-mebel.ru/portfolio/

Особенности

1. Портфолио представлено разделами – каждое со своими фотографиями работ – «Мебель для баров и ресторанов», «Мебель для частных интерьеров», «Реставрация мебели» и т. д. Работы разделены пагинацией.
2. Фотографии любой из категорий можно посмотреть в режиме слайд-шоу, а потом вернуться к эскизам.
3. При наведении на любую картинку появится всплывающая подсказка, которая укажет на то, что работа над мета-тегом alt не делалась:

1. При этом если щелкнуть на работу, все будет в порядке:

В этом портфолио хочется на каждую работу увидеть не только галерею хороших фотографий, но и прочитать хотя бы коротенькое описание – например, кому в голову пришло нарядить диван в куртку-«косуху»?!

Ателье «Гардероб»

Ссылка – http://www.g-atelier.ru/portfolio

Особенности

1. Интригует надпись «На этой странице представлены изделия, созданные мастерами ателье Гардероб для наших клиентов. Часть 1». Как будто глава в истории. Во вторую часть можно попасть, если подо всеми работами нажать кнопку «Смотреть еще».
2. Список работ оформлен плитками, которые просто листаешь до конца страницы. Ничего не подписано.
3. Если навести курсор на конкретную работу, появится значок лупы, на который можно щелкнуть и перейти на страницу с галерей снимков. Здесь неожиданность – при листании фотографий будут показаны не / не только снимки с другого ракурса, а другие работы ателье. Это вводит в некое заблуждение:

А вот тут не совсем ясно, что хотели показать:

1. Сильный прием в конце списка работ – призыв к действию с формой обратной связи:

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

Компания «Репаблайк»

Ссылка – http://republike.ru/portfolio.html

Особенности

1. Положительное впечатление от того, что все работы подписаны.
2. Работы разбиты по категориям, которые расположены не сверху, а чуть ниже и сбоку:

1. Обращает на себя внимание желание создателей сайта мотивировать посетителей захотеть такую же презентацию:

1. При наведении на работу появляется интригующий вопрос:

1. Каждая работа внутри состоит из нескольких частей:

• слайд-шоу презентации:

• все рабочие аспекты:

• подробное описание работы:

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

Агентство «Текстерра»

Ссылка – /portfolio/

Особенности

1. Вообще портфолио «Текстерры» состоит из разделов о клиентах, отзывах, кейсах, сертификатах и непосредственно работах. Свои труды агентство емко характеризует:

1. Очень (!) оригинально обыгранное число работ в портфолио. Читайте:

1. Работы оформлены пиктограммами-категориями:

1. При открытии любой из них появляется непосредственно портфолио работ с названием направления, кратким описанием и подписанными скриншотами. При наведении на любую работу появляется ссылка «Подробнее»:

1. Страница в категории «Контент» внутри содержит ссылку на оригинал и качественный скриншот всей (!) статьи, которую можно расширить в соцсетях, а также прямо со страницы перейти в следующую работу.
2. Работы в других категориях по структуре внутреннего представления отличаются между собой. Вот, например, вид изнутри одной из работ в категории «Создание сайтов»:

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

В категории «Видео-контент» в примерах работ логично показаны отснятые ролики.

Как и все портфолио целиком, так и любая работа заканчиваются призывом к действию с заполнением формы обратной связи:

Если собрать работы «Текстерры» в один файл, это будет white paper и маркетинг-кит в одном. Как и любой специалист из мира интернет-маркетинга, стремлюсь к тому, чтобы иметь такой же багаж, пусть это и чертовски сложно.

Фабрика художественных кузнечных изделий OST

Ссылка – http://ostmetal.com/portfolio/

Особенности

1. Основная страница портфолио содержит короткий текст, рассказывающий о компании OST, список работ. Обратите внимание – картинки защищены водяными знаками:

1. При наведении на работу появляется лупа. Если щелкнуть, открывается модальное окно – фотогалерея с описанием проекта и географическим размещением объекта

1. Портфолио можно поделиться в соцсетях. На это есть прямое указание:

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

Мастерская «Глагол»

Ссылка – https://glagol-maket.ru/blog/cases

Особенности

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

1. Подробное описание работы одновременно является записью из раздела «Кейсы» блога макетчика:

1. Для каждого проекта указываются выходные данные:

и рассказано об исполнителях:

1. Для каждого кейса можно посмотреть подробно весь процесс создания макета:

1. Все кейсы заканчиваются призывом поделиться им в социальных сетях, , заказать макет или перейти в блог главного макетчика:

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

Компания «Ремск»

Ссылка – http://remsk.net/portfolio.html

Особенности

1. Работы разбиты по категориям, подписаны, разделены пагинацией и содержат краткое описание:

Если нажать на кнопку «Читать далее», откроется фотогалерея конкретной работы:

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

Агентство «ПраздникON»

Особенности

1. Портфолио представлено в виде трех разделов:

1. Портфолио детских праздников начинается с «убойного» примера:

1. То же самое можно сказать про портфолио организации юбилеев:

1. Страницы в этом разделе портфолио организованы следующим образом:

• фотогалерея:

• запись мероприятия:

• схема работы с заказчиком:

• и еще несколько продающих моментов:

• и в конце сразу две формы обратной связи:

1. Что вы можете сделать с любой работой из портфолио и в целом со страницей? Правильно:

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

Студия PhotoIDEAL production

Ссылка – https://photo-ideal.ru/portfolio/

Особенности

1. Портфолио состоит из шести тематических разделов:

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

1. По каждой работе можно связаться со студией, заполнив форму обратной связи:

То портфолио, которое не требует длинных (возможно, коротких тоже) текстовых описаний. Фотографии говорят сами за себя: интернациональные группы медицинских работников, предметы дорого парфюма, рекламные материалы, интерьеры, как со страниц модных журналов.

Автосервис DUBOKSERVIS

Ссылка – http://dubokservis.ru/nashi-raboty/

Особенности

1. Работы в портфолио организованы по принципу «До и после» и подписаны названием марок автомобилей, работы разделены пагинацией:

1. Количество моделей и результат работу внушают уважение у меня как у водителя. Собственно… все!

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

Клининговая компания «От чистого сердца»

Особенности

1. Портфолио идет между двумя сквозными блоками сайта:

• конкурентные преимущества компании:

• список клиентов:

1. Работы подписаны и имеют релевантные фотографии:

1. Если навести на работу курсор, ее «кружок» превратится в квадрат изображения:

1. Положительный момент – на многих фотографиях показаны сотрудницы в форменной одежды, где хорошо читается название компании – «От чистого сердца».

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

Тату-студия «Эй, капитан!»

Ссылка – http://haycaptaintattoo.com/portfolio

Особенности

1. Портфолио долго (от слова «очень») загружается – единственный подобный пример из подборки.
2. Все работы подписаны и снабжены водяным знаком салона:

1. По щелчку на любой работе открывается окно с увеличенной фотографией:

1. Если листать фотографии, это будет не эта же работа с другого ракурса, а другая – с новой татуировкой:

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

Кондитерская Coolnws Foods

Ссылка – https://www.coolnws.ru/home_sweet/portfolio/

Особенности

1. Работы в портфолио разделены на категории, но нет категории «Все». Полный список тортов можно вернуть нажатием на ссылку «Портфолио»:

1. Любой торт изнутри выглядит следующим образом:

• каждый торт, внимание, имеет свой артикул:

• подписанная фотография, которую можно увеличить:

• информация о торте:

• «продающие» моменты:

• похожие торты:

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

Сеть салонов лазерной эпиляции и косметологии «Подружки»

Ссылка – https://podruge.ru/portfolio/

Особенности

1. Портфолио разделено на категории. И первая же обеспечивает ему статусность и названием, и фотографией:

1. Если открыть раздел «Звезды», все станет яснее ясного:

1. Открываем карточку:

1. Раздел портфолио «До и после» не такой эстетически привлекательный, зато необходимый для такой компании. Как видите, здесь подкатегории работ:

1. Если открыть подкатегорию, будет галерея работ по конкретной услуге:

1. Раздел «Видео» – ролики с процессом наведения красоты:

Что сказать – таким портфолио можно гордиться. Поток богатых и знаменитых клиентов и клиенток в «Подружки» после таких лестных комментариев обеспечен.

Компания «Свое»

Ссылка – http://art-doors.ru/portfolyo/

Особенности

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

1. Под списком работ идет очень большой для такого типа страниц текст:

1. Если на работу навести курсор, появится надпись «Смотреть», можно ее открыть. Внутри – полноценный кейс по проекту – текст, который чередуется с большими увеличивающимися изображениями:

1. Страница любой работы и страница с портфолио имеют в конце заявку на расчет:

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

Компания «Климатический сезон»

Ссылка – https://www.climatseason.ru/portfolio/

Особенности

1. Здесь есть фильтр работ по объектам и по видам. Все работы подписаны, указан их тип и категория использованного оборудования:

1. Подробное описание работы выглядит так:

1. Информация о любой работе включает в себя:

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

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

Агентство «Дом недвижимости»

Ссылка – http://www.domnedv.ru/page167/portfolio/

Особенности

1. Портфолио имеет классическое оформление блога – картинка / название / дата публикации / текст-анонс:

1. Если открыть любую работу, она также будет выглядеть как обыкновенная статья, если не вчитываться:

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

1. Любой работой из перечня и портфолио в целом можно поделиться в социальных сетях.

Самое странное и простое оформление портфолио в подборке. И самое информативное с точки зрения текстовой составляющей. Повторюсь – надо читать каждую конкретную работу – там очень интересно.

Не говори, что делаешь. Покажи, что сделал

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

Судя по футеру, сайт никак не менялся с 2015 года. Тем не менее, он в выдаче поисковых систем, иначе я бы его не смог найти. С точки зрения «Яндекса» все не так уж плохо. Но для людей, потенциальных клиентов, отсутствие у компании работ – тревожный звоночек и повод быстро уйти искать конкурентов с портфолио.

Если хотите, чтобы ваше портфолио как минимум смотрели, помните, что его характеризует:

1. Наращивайте число работ – что бы ни говорили, но список из 1-2 пунктов внушает слабо. Однако если их сотни, лучше показывать самые лучшие.
2. Разделяйте работы на категории – тем самым вы упрощаете поиск для клиентов, которых интересуют наиболее близкие их сфере деятельности.
3. Подписывайте работы и фотографии – так вы показываете, что именно и для кого было сделано.
4. Подробно описывайте каждую работу – просто показывать их в общем списке недостаточно – надо рассказать, для этого создавайте отдельную страницу под каждую из них. Не скупитесь на фотографии – показывайте фото объекта с разных ракурсов.
5. Демонстрируйте в портфолио известных клиентов, их фотографии и отзывы – это работает на возрастание клиентской лояльности и повышение статуса.

6. Если в портфолио очень много примеров:

   • сделайте пагинацию;
   • спрячьте часть работ за кнопкой «Посмотреть еще»;
   • сделайте поиск по портфолио.

1. Заканчивайте описание работ призывом к действию – предложение связаться с вами и получить такой же классный результат будет более чем уместным.

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

Хотите самостоятельно продвигать свой бизнес? Закажите разработку стратегии в нашей компании. Подробнее

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

• Показать свою экспертность. Фотографии (или описания результатов) отлично продают и формируют впечатление, что ваша компания разбирается в обозначенной теме и умеет довести дело до конца.
• Помочь клиенту определиться с хотелками. Пользователь не всегда точно понимает, что ему нужно, а глядя на портфолио сможет найти откликающийся ему проект или в целом понять, подходит ли ему ваш стиль (например, в случае с дизайном).
• Рассказать о своем продукте. Для сложных систем или новых технологий порой проще показать получившийся результат, чем пытаться подробно рассказать о них. К слову, полезность крауд-маркетинга лучше объяснить именно через портфолио кейсов (посмотрите на наш пример).
• Обосновать цены. Если вы демонстрируете результаты, рассказываете о своем подходе и перечисляете выполненные работы, то у пользователей появляется меньше вопросов за что он платит.
• Вызвать доверие пользователей. Чем больше и подробнее портфолио, тем проще поверить, что компания давно на рынке и пользуется популярностью. Согласитесь, подозрительно, если компания не говорит о своих клиентах, но указывает, что на рынке много лет.

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

Кому необходимо портфолио

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

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

Где разместить портфолио на сайте

Базово рекомендуем три раздела, где портфолио проектов компании будет уместно:

Главная страница

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

На Главной достаточно показать несколько последних или лучших проектов. 3-5 кейсов и ссылки на полный список будет достаточно. Например, блок с примерами работ строительной компании:

Можно также показать примеры работ в виде слайдера:

Раздел портфолио

Как вы поняли из предыдущего пункта — на сайте стоит сделать раздел с примерами работ. Здесь размещаем все отзывы, которые смогли собрать с клиентов за все время работы. Несколько рекомендаций по оформлению:

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

Если кейсов слишком много (более 15-20), то стоит добавить разделение по услугам или запросам пользователей:

Страница услуги

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

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

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

Что разместить на странице проекта

Фотографии

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

Хорошо делить фотографии на До и После, чтобы подчеркнуть результаты работ:

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

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

Графики или таблицы

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

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

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

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

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

Подробнее об особенностях и техниках сторителлинга можно прочитать здесь.

Отзыв клиента

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

Ссылка на форму заявки

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

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

Дополнительные рекомендации

Несколько советов, которые помогут увеличить эффект от портфолио на сайте.

• Регулярное обновление. Пользователь должен видеть, что портфолио постоянно пополняется. И дело не в том, что актуальная информация более привлекательна, у клиента может сложиться впечатление, что сайт заброшен и компания больше не работает.
• Показываем то, чем гордимся. Не нужно создавать портфолио ради портфолио, отбираем проекты, где были достигнуты привлекательные результаты и есть, что рассказать.
• Упор на разнообразие. Если вы предоставляете несколько услуг, то рекомендуем собирать кейсы по каждой из них. В портфолио не должно быть уклона только на одну услугу. Также ориентируйтесь на разную аудиторию, например, размещайте примеры работ с небольшими компаниями и крупными клиентами или проекты из разных тематик.
• Рассказываем о кейсах в соцсетях. Не раз говорили о необходимости аккаунтов в соцсетях, даже для B2B-сегмента. Новый проект — отличный инфоповод для поста в соцсетях.
• Делимся портфолио на тематических площадках. О самых удачных проектах полезно рассказывать на сторонних площадках, где находится ваша целевая аудитория. Приток новых клиентов гарантирован. Инструкция, как правильно выбирать площадки для публикации.
• Добавьте возможность поделиться вашим проектом. Так пользователю будет легче отправить ссылку на проект другу, коллеге, родственнику. Некоторые клиенты постят результаты работ в соцсетях, что также повысит узнаваемость вашей компании.
• Настройте веб-аналитику. Яндекс.Метрика и Google Analytics помогут понять, на какие страницы заходят чаще и делают ли с них заказы. Например, если зайти в Метрике в отчет «Популярное» и отсортировать просмотры раздела портфолио, то вы сможете увидеть наиболее посещаемые страницы:

Что делать с NDA (соглашение о неразглашении)

Если ваши клиенты не хотят разглашать свои данные, это нормально. Важно правильно работать с этим:

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

Также вы не обязаны добавлять в портфолио все проекты, отбирайте те работы, по которым можно показать больше информации

Примеры оформления портфолио для вдохновения

И еще несколько примеров оформления портфолио, которые выглядят привлекательно.

Интересно показали информацию о клиентах не только списком, но и на карте города:

Отличные заголовки для анонсов фотосессий:

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

Даже для юридических услуг можно показать портфолио и вот хороший пример:

И пример историй успеха клиентов образовательного портала:

В заключение

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

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

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

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

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

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

Второе — создайте референс-листы на Pinterest. Для этого вбейте в строку поиска «web design» и сохраните понравившиеся работы на свою доску. Pinterest хорош тем, что он показывает не только самые последние работы, но и те, которые набрали наибольшее количество лайков или попали в другие доски. Таким образом вы увидите в выдаче историю лучших изображений за все время.

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

Слова про сказку следует понимать не только в переносном смысле. Около 30% работ в портфолио дизайнеров — несуществующие работы. Это наброски, макеты, фейки и так далее. Наша задача — показать себя с выгодной стороны, собрать лайки и комментарии.

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

Делайте фейки. Возьмите продукт, который вам нравится, который вы любите. Например, фотоаппараты Leica. Сделайте фейковый лендинг фотоаппаратов. Возьмите новую коллекцию купальников Victoria’s Secret. Сделайте лендинг для нее. Сделайте новую концепцию сайта Nike. И не важно, что Nike наплевать на вашу концепцию, а Victoria’s Secret, может быть, никогда не узнает о вашем существовании. Главное, что это один из лучших способов разгона своего портфолио.

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

Превью должно быть сочным и ярким. Это очень важно для Behance, поскольку от качества превью зависит количество просмотров. Хорошее превью — это ювелирная работа. Человек листает ленту и вдруг в серой массе видит вашу яркую обложку, на которую хочется кликнуть. Цель достигнута!

Даже если вам удалось «продать» посетителю обложку кейса в вашем аккаунте на Behance, не стоит забывать и о его содержании. Здесь дизайнеры часто ленятся: показывают ту же обложку, только в большом размере. Это неправильно: всегда старайтесь подать кейс в виде истории. При этом не забывайте, что оптимальная длина кейса —16 000 пикселей.

Учитывайте, что глазу человека надо расслабляться при просмотре, поэтому делайте кейс контрастным: спокойная страница, например, со списком вакансий, и яркая страница. Не забывайте вставлять интерактивные элементы, например, GIF-изображения. Выполнить эти правила несложно, а польза для портфолио большая.

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

Можно ответить в духе Яндекса: «делайте крутые сайты…», но с Behance немного легче. Решение о выводе в топ (добавлении ачивки или шильдика Featured) редакция Behance принимает по многим параметрам, и один из них — анимационная вставка. Обычно все выигрышные кейсы делают с анимационными вставками и видеороликами.

Чтобы стать известным на Behance, дизайнер должен придерживаться следующих правил:

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