Как оформить успешное портфолио на Behance [гайд+идеи]

Что такое Behance и портфолио на нём? Это окно, через которое потенциальные клиенты и сообщество увидят ваши лучшие работы. Важно подготовить портфолио со вкусом и одновременно с пониманием того, как привлекать внимание. Благодаря этому клиенты найдут вас или примут решение о сотрудничестве.

Готовы узнать секреты эффективного портфолио на Behance вместе с конструктором сайтов Weblium – тогда начинаем.

Как заполнить профиль на Behance?

Начните с фундамента вашего профиля на Behance. Он должен быть крепким, ведь первое впечатление имеет значение. Учитывайте, что язык Behance – английский. Именно на нём ваши кейсы будут больше просматривать.

Выбор профессионального фото

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

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

Кто вы? Что вас вдохновляет? Какие ваши сильные стороны? Будьте лаконичными, но открытыми – это ваш шанс рассказать свою историю. Используйте ключевые слова, которые помогут вам найти клиентов.

Опыт и образование

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

Как выбрать проекты для портфолио на Behance

• Чем гордитесь. Забудьте о просто нормальных работах – они лишние. Подумайте о своем идеальном клиенте и о том, какие проекты он мог бы искать. Например, если вы хотите работать дополнительно над мобильными приложениями, покажите несколько ярких примеров таких проектов.
• Разнообразие. Покажите свою уникальность, демонстрируя разные стили и направления. Вы должны создать ощущение, что вы способны выполнить различные задачи. Возможно, у вас есть опыт работы с UX/UI, анимацией или даже рекламой – покажите это, оформляя портфолио веб-дизайнера.
• Количество работ. Не перегружайте портфолио на Behance. Ограничитесь 10-15 интересными проектами. Это позволит подчеркнуть ваши лучшие работы и не оттолкнет посетителей из-за слишком большого количества материалов.

Кейс и работа: в чем разница?

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

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

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

Стандартная структура оформления кейса на Behance

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

1.Название проекта. Добавьте выразительное и лаконичное название, отображающее суть вашего проекта и привлекающее внимание аудитории.

2.Задание. Опишите основную цель проекта, проблемы, которые вы решали, и ожидаемые результаты.

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

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

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

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

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

8.Инструменты. Укажите софт, используемый при разработке сайта. Это могут быть графические редакторы, инструменты прототипирования, CMS, библиотеки, языки программирования. Если это конструктор (например, Weblium) – укажите его.

9.Ключевые слова. Добавьте ключевые релевантные слова, которые помогут пользователям Behance найти ваш проект во время поиска.

10.Соавторы, контакты, призыв. Также не забудьте указать соавторов, год создания проекта, свои соцсети и контакты. В конце поблагодарите за просмотр и скажите о том, что будете рады сотрудничеству.

Как выкладывать работы на Behance правильно: советы по изображениям, анимациям и видео

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

[количество блоков] Для удобного просмотра идеальное количество блоков в кейсе между 7 и 15, однако для содержательных кейсов можно увеличить количество блоков.

[длина кейса] Общая длина блоков в кейсе должна составлять около 15000-20000 пикселей; избегайте создания слишком длинных кейсов без необходимости.

[длина кейса] Behance сам оптимизирует ширину изображений в кейсе до 1400 пикселей. Но можно загружать изображения высокого качества для просмотра в полноэкранном режиме по клику.

[строение блоков] Стройте кейс из отдельных содержательных блоков, экспортируйте каждый блок в качестве отдельного изображения для быстрой загрузки.

[формат изображений] Загружайте статические блоки на Behance в формате PNG или JPG, выбирая формат, который лучше сохраняет качество изображения для каждого конкретного случая.

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

[GIF-анимация] Интеграция гифок в кейс проста (как обычных картинок), но их качество ниже, чем у видео; максимальный размер изображений на Behance – 50 МБ.

[загрузка видео] Для высококачественной анимации используйте видеоформат и встраивайте видео в кейс Vimeo для гибкой настройки воспроизведения.

[настройка воспроизведения] При встраивании видео используйте ключи autoplay=1, muted=1 и autopause=0 для автовоспроизведения, отключения звука и одновременного воспроизведения нескольких видео.

Как создавать превью для кейсов в портфолио на Behance

Мокапы

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

Коллажи

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

Key Visual

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

Графические рамки и оверлеи

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

Один экран

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

Имитация фото

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

Как правильно подбирать ключевые слова для кейсов в портфолио на Behance

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

Как подобрать лучшие ключевые слова, чтоб оформить портфолио веб-дизайнера правильно? Всё просто.

Определите тему вашего проекта. Перед подбором ключевых слов уточните тематические аспекты вашей работы. Создавали ли вы дизайн магазина, блога или лендинга? Запишите специфику вашего веб-проекта.

⬇️

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

⬇️

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

⬇️

Упомяните использованные инструменты. Включите ключевые слова, касающиеся софта или технологий, которые вы использовали при создании вашего проекта, таких как «Figma», «Weblium», «CSS».

⬇️

Обобщите методы работы. Запишите ключевые слова, характеризующие ваш подход к дизайну, такие как, например, «responsive design», «mobile first» или «minimalism».

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

Как креативно оформить портфолио веб-дизайнера на Behance

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

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

Редизайн сайта (или «до и после»)

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

Демонстрация процесса разработки сайта

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

Влияние вашей работы на результаты клиента

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

Поиск концепции и референсы

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

Использование веб-технологий

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

Видеопрезентация вашей работы

Создавайте презентации, чтобы показать процесс работы над сайтом и интересные моменты. Видео может содержать быструю съемку работы (speed art) на экране компьютера. Не забудьте добавить голосовой комментарий, в котором можно объяснить свои действия и раскрыть свои творческие процессы. Также можно использовать видео, чтобы продемонстрировать финальный продукт в действии.

Weblium на Behance

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