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

9 лучших сайтов для портфолио дизайнера

Рассказываем, на каких платформах стоит разместить свои работы.

Иллюстрация: Meery Mary для Skillbox Media

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

Надежда Куротченко
Сценарист, копирайтер и иногда фотограф. С дизайном на «вы» и очень уважительно.

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

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

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

Платформы

Behance

Behance принадлежит компании Adobe, и это один из самых известных и крупных сайтов для размещения портфолио.

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

Самое главное:

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

Что стоит учитывать:

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

Bento.me

Bento.me — относительно новый сервис для профессионалов креативной сферы. Он появился в 2022 году и уже стал популярным инструментом, чтобы презентовать себя в digital.

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

Самое главное:

• Этот сервис полностью бесплатный.
• У профиля будет уникальный адрес формата «ваше имя или никнейм» плюс «bento.me».
• Чтобы понять, как лучше располагать свой контент в профиле, можно обратиться за примерами и вдохновением в раздел Explore.

Что стоит учитывать:

• В bento можно собрать ссылки на все работы и все проекты, которые находятся в разных местах. Но это значит, что в этих источниках работы тоже должны быть качественно оформлены.
• Страницу на Bento лучше оформлять как «единое окно дизайнера». Например, добавить виджет карты с вашей локацией — для некоторых клиентов и нанимателей это важный параметр.
• Поскольку сервис появился только в декабре 2022 года, много классных имён ещё не заняты ��

Carbonmade

Carbonmade существует с 2005 года, и заявлено, что сейчас у сервиса более двух миллионов пользователей.

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

Самое главное:

• У шаблонов нет жёстких рамок, и формат портфолио можно персонализировать в зависимости от сферы. Аниматорам или дизайнерам текстиля необходимо по-разному презентовать работы, поэтому макеты достаточно гибкие, а блоки, из которых они состоят, можно кастомизировать.
• Видео, даже в разрешении 4K, можно загружать прямо на платформу. Нет необходимости использовать связку «отдельный видеохостинг плюс эмбед ссылки», как во многих других сервисах.
• Carbonmade платный, но есть бесплатная пробная версия.

Что стоит учитывать:

• Тарифы начинаются от 9 долларов в месяц. Для оплаты нужен счёт в зарубежном банке.
• Есть три уровня планов: для начинающих, Pro и безлимитный. Субдомен carbonmade включён в каждый, и дополнительно оплачивать его не нужно.
• Интерфейс только на английском языке.

Dprofile

Dprofile — российская digital-площадка для дизайнеров, агентств и представителей бизнеса. Её стали разрабатывать и развивать после массовых блокировок зарубежных сервисов для российских пользователей весной 2022 года.

Самое главное:

• Этот продукт создали российские дизайнеры для российского дизайн-рынка. Учитывали и локальные особенности, и собственный опыт работы с крупными зарубежными сервисами.
• Это не только пространство для размещения портфолио работ. В архитектуру заложили возможность искать заказчиков и исполнителей, развивать насмотренность, обучаться и получать признание от коллег и рынка.
• Для дизайнеров Dprofile бесплатный.

Что стоит учитывать:

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

Notion

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

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

Самое главное:

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

Что стоит учитывать:

• В интерфейсе нет русского языка.
• Предусмотрена интеграция файлов и элементов из множества сервисов — от Figma и Google Drive до карт и сообщений в социальных сетях.
• Бесплатный адрес конкретной страницы в Notion может выглядеть странно. В нём будет случайно сгенерированный набор цифр и букв.

Конструкторы

Tilda

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

Это довольно простой инструмент с интуитивно понятным интерфейсом. Базовый функционал можно освоить по бесплатным туториалам и курсам, которые находятся на платформе Tilda Education.

Самое главное:

• На Tilda можно сделать самый простой лендинг или поэкспериментировать с креативной вёрсткой.
• Основа Tilda — более 500 блоков, из которых можно создавать сотни комбинаций.
• Каждый блок проработан так, чтобы вам было легко адаптировать дизайн сайта под разные устройства. Адаптивность важна — благодаря этому параметру ваше портфолио будет выглядеть аккуратно в любом формате.

Что стоит учитывать:

• Бесплатно можно создать один сайт. Но ему нельзя дать полностью собственное имя — только добавить в адрес субдомен к tilda.ws.
• Платные тарифы уровня Personal или Business открывают возможности оптимизировать SEO, чтобы клиенты находили ваше портфолио из поисковиков, использовать собственные шрифты или создавать рассылки.
• Tilda — разработка родом из России, и этот сервис можно оплачивать рублями с российской карты. Но также есть и версии для других стран с возможностью оплаты в долларах.

Readymag

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

Самое главное:

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

Что стоит учитывать:

• У Readymag относительно высокий порог входа, и чтобы освоить все возможности, понадобится время.
• Платные тарифы открывают доступ к расширенному пакету функций. Например, вы сможете закрывать некоторые проекты паролем, чтобы их не видели все посетители вашего сайта.
• Для оплаты нужен счёт за рубежом, а для студентов и некоммерческих проектов предусмотрена скидка 50%.

Webflow

Webflow — онлайн-инструмент для создания сайтов без программирования.

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

Самое главное:

• Бесплатно можно создать один несложный сайт с доменом webflow.io и с ограничением загрузки.
• Стоимость сервиса — от 14 долларов в месяц. Кроме оплаты собственно функционала платформы, может потребоваться оплата «рабочего места» — Workspace. Если вы фрилансер, и для оформления портфолио на Webflow вам не нужны коллеги, то Workspace бесплатный. Для командной работы — от 16 долларов в месяц.

Что стоит учитывать:

• Освоить Webflow сложнее, чем другие конструкторы. Работа в нём потребует погрузиться в основы вёрстки. С другой стороны, эти навыки — преимущество для любого digital-дизайнера.
• На маркетплейсе можно купить шаблон для портфолио. Большинство стоят меньше 100 долларов.
• Для оплаты нужна карта зарубежного банка, а для обучения по собственным материалам Webflow — знание английского языка.

Squarespace

Это SaaS -платформа, позволяющая создавать сайты без программирования и без знания CSS, HTML и других языков разметки.

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

Самое главное:

• Пробная версия даёт бесплатный доступ на 14 дней — обычно этого достаточно, чтобы изучить возможности сервиса. Платная подписка стоит от 16 долларов в месяц.
• Интерфейс на английском и переведён на несколько других европейских языков, но русской версии у сервиса нет.
• Основа Squarespace — база шаблонов, созданных профессиональными дизайнерами.

Что стоит учитывать:

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

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Читайте также:

Успешное портфолио на Behance. Подробное руководство

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

Иллюстрация: Полина Честнова для Skillbox Media

Тони Емельянов

UI/UX-дизайнер, видеоблогер, предприниматель. Проектирует интерфейсы, создаёт развлекательно-образовательный контент и обучает дизайну.

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

Behance — идеальная площадка, чтобы презентовать себя как профессионала, увидеть обратную связь от дизайн-сообщества и получить предложения о работе.

Перед вами — большое руководство по продвижению на этой платформе, в котором мы расскажем:

• какие особенности есть у площадки Behance;
• что писать в профиле дизайнера.
• как правильно оформить кейс.

Что такое Behance и зачем эта площадка дизайнерам

Behance — мировая онлайн-платформа, принадлежащая компании Adobe. Это крупный и популярный ресурс, который объединяет:

• маркетплейс иллюстраций, шрифтов, мокапов и других инструментов;
• каталог вакансий;
• доски настроения — подборки проектов как источник вдохновения и развития насмотренности.

Но главное — здесь представители креативных сфер оформляют профессиональные профили и показывают свои работы. Такие презентации проектов на Behance называют кейсами.

Задача кейсов — показать дизайн-работу с разных сторон и в развитии. То есть не только результат, но и процесс, который за ним стоит, или контекст, в котором этот результат живёт. Это отличает Behance от Dribbble, где обычно представляют только шоты — одну или несколько финальных картинок без условий и подробностей.

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

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

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

Сильный профиль на Behance — профессиональное преимущество, и иногда его достаточно, чтобы получить работу мечты.

Оформление профиля на Behance. Зачем это нужно и на что обращать внимание

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

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

Зачем оформлять страницу на Behance

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

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

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

Как оформлять аккаунт на Behance

Язык профиля

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

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

Имя

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

Профессия

Составьте одно короткое предложение — буквально парой слов опишите, чем именно вы занимаетесь и что самое главное о вас должны видеть гости профиля. Например: «Дизайнер интерфейсов в Google» или «Junior-UI/UX-дизайнер, магистратура HSE Art & Design».

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

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

Аватар

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

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

Шапка или обои профиля

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

Если не загружать собственное изображение в шапку, в нём можно сделать отображение превью нескольких ваших проектов.

Био или «О себе»

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

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

Ссылки

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

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

Рецепт успешного кейса

Когда у вас грамотно оформлен профиль, пора готовить и публиковать свои кейсы.

В этой части материала мы расскажем:

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

Главные советы

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

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

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

Хороший дизайн — это хорошо решённая задача, а не просто красивая картинка или анимация.

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

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

К примеру, если ваша работа связана с UX, сохраняйте себе:

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

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

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

Как придумать идею для портфолио?

Один из главных вопросов начинающих дизайнеров — «Как собрать портфолио, чтобы попасть на работу, если я ещё не работал в студии и не выполнял заказы?»

Или наоборот: дизайнер работает в крутой компании, но контракт запрещает ему публиковать какие-либо материалы или подробности проектов.

В таких случаях на Behance можно и нужно публиковать концепции, придуманные исключительно для портфолио.

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

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

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

Какие проекты оформлять в кейсы?

Установка «чем больше — тем лучше» не подходит для портфолио на Behance.

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

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

Поэтому вот несколько советов:

• Хорошо, когда в профиле доступно всего несколько работ, но они лучшие из тех, что вы когда-либо делали.
• Хотя бы один из кейсов должен быть о проекте этого года. Так заказчик поймёт, что вы «в строю», занимаетесь своим портфолио и продолжаете работать в дизайне.
• Устаревшие проекты лучше убирать в архив.
• Каждая работа, которую вы презентуете на Behance, должна демонстрировать что-то новое в вашем портфолио — тему, предмет, навык, стиль и тому подобное.
• Если вы мультидисциплинарный дизайнер или если вы умеете работать в разных стилях, проиллюстрируйте каждый одним-двумя проектами.

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

Для успеха кейсу на Behance нужна драматургия. Но это не так сложно, как кажется на первый взгляд:

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

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

Блоки можно оформить в стилистике проекта — это добавит истории цельности.

Большинство кейсов дизайнеры составляют из примерно одной и той же последовательности элементов:

1. Первый экран

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

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

2. Описание проекта

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

3. Описание задачи и цели

В этом блоке можно набрать текст из пары абзацев: о клиенте, его брифе и о цели вашей работы.

Если есть желание или если вам важно использовать шрифт, которого нет в библиотеке сервиса, текст тоже можно сверстать на карточки и загрузить изображением.

4. Блоки подготовительной работы

В эту категорию входят анализ рынка, описание пользователей, различные карты взаимодействия с продуктом, скетчи, референсы, мудборды, прототипы и так далее. Особенно полезно добавлять их в UX/UI-кейсы.

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

5. Визуализация решений

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

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

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

6. Кредиты и ссылки

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

В имена, названия студий и компаний зашивайте ссылки на них — это проявление вежливости.

В самом конце иногда добавляют фразу «Спасибо за просмотр». Но не стоит писать «Ставьте лайк, подписывайтесь на меня», на Behance это считают дурным тоном.

Обложка кейса

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

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

Советы о технических нюансах

Интерфейс на Behance интуитивно понятный, но есть моменты, которые могут вызывать вопросы и сложности.

Формат изображений

Типы файлов

На Behance можно загружать JPEG, PNG и GIF. Файлы с расширениями .pdf, .psd, .tff, .doc, .pdf платформа не воспринимает.

Но можно встраивать коды из Adobe XD, Vimeo, YouTube, GIPHY, SoundCloud, Spotify, а также прямые ссылки на проекты в Figma, Marvel, Codepen.

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

Ширина

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

Но на Behance есть режим просмотра Lightbox View — он активируется, если нажать на конкретную картинку, и тогда она откроется в максимально доступном разрешении — 2800 px. Так что в некоторых случаях есть смысл экспортировать изображения из графического редактора в полуторном или двойном размере.

Вес

Ориентируйтесь на то, что изображения должны весить до 10 МБ: если они будут больше, это замедлит загрузку, и зритель может потерять интерес и уйти со страницы.

Максимальный размер файлов на Behance — 50 МБ.

Высота

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

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

Обложка

Картинка-обложка на Behance должна быть не менее 808×632 px, а в ленте рекомендаций и в подборках они отражаются в одном стандартном размере — 202×158 px.

Объём кейса

Количество блоков в кейсе обычно зависит от масштаба проекта. Среднее их число — от пяти до 15: это включает и изображения, и эмбеды видео, и текстовые пояснения. Меньше пяти делать не стоит — это уже сложно будет назвать полноценным кейсом. А большое количество блоков обычно делают в UI/UX-презентациях, где нужно показать ресёрч, схемы, вайрфреймы.

Хорошая длина совокупности всех блоков — около 20 000 пикселей. Если получается значительно больше, вы должны быть уверены, что оно того стоит.

Не стоит раздувать кейс, чтобы создать ощущение большой проделанной работы — больше не значит лучше.

С чего начать дизайн Behance-кейса

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

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

Видео или GIF?

Гифки в Behance-кейсах получаются заметно более низкого качества, чем видео, но у GIF-изображений есть пара плюсов:

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

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

Как встроить видео

Сначала загрузите ролик на видеохостинг Vimeo. Это даст дополнительные возможности настройки.

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

Чтобы встроить ролик со стороннего ресурса, нужно:

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

Ключи у разных видеосервисов могут отличаться. В этом материале мы рассматриваем встраивание видео из Vimeo.

Ключ autoplay=1 поможет сделать так, чтобы видео воспроизводилось автоматически. Важно, что в некоторых веб-браузерах оно всё равно не будет автоматически запускаться, если только в плеере не отключён звук. Эту задачу решит ключ muted=1.

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

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

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

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

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

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

Выводы

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

• Не каждый проект имеет смысл оформлять в кейс.
• Каждый кейс должен привносить что-то новое в портфолио.
• Не каждый проект, который вы презентуете, должен иметь реального заказчика.

2. Не забывайте, что Behance-кейс — это презентация процесса работы над проектом с демонстрацией результата:

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

3. Помните о технических нюансах:

• Кейс строится из отдельных небольших блоков, а не из одной или нескольких длинных картинок.
• Стремитесь к общей длине в 15 000–25 000 пикселей.

4. Насыщайте кейс закулисными деталями и добавляйте анимацию и видео, чтобы разнообразить статичный контент.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Читайте также:

• Первый проект для дизайнерского портфолио
• Как продвигать портфолио на Behance
• Как дизайнеру сделать портфолио

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

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

Как оформить

Кейс о своей работе: гайд для дизайнеров

Встретимся через полчаса: 6 сервисов для быстрого создания портфолио

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

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

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

Мы не включили в обзор сервисы Stampsy, Readymag, Tilda, Medium и Tumblr — с их помощью можно создавать портфолио в виде блогов, сайтов и лендингов, но придётся потратить на это несколько часов, зато результат получится впечатляющим.

Редакция нетологии

Clippings

Бесплатно вы создадите портфолио на домене сервиса и добавите до 16 работ. Каждый проект либо загружается как PDF-файл, либо как публикация на стороннем сайте. В последнем случае информация автоматически подгружается и преобразуется в карточку.

Парсер работает нестабильно. В некоторых статьях он заменяет кавычки «» на “” и неправильно считывает заголовок страницы, а также периодически не может найти дату публикации. Карточки работ после редактируются вручную — от заголовка и описания до превью, даты и названия издания.

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

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

Pressfolios

Ещё один сервис для пишущих. Публикации добавляются по ссылке автоматически или вручную из PDF. Вся информация в карточках редактируется.

Кроме самого портфолио, на получившемся мини-сайте размещается текст об авторе, а в «подвале» — большая фотография, подробная биография и контакты для связи.

Главный минус — интерфейс не русифицирован и много элементов на странице на английском.

Читать также

Contently

Регистрируетесь, добавляете истории — ссылки на публикации. Карточки текстов полностью редактируются. Из дополнительных особенностей: Contently считает количество расшариваний текстов в социальных сетях и суммирует их, а заодно отображает количество ваших подписчиков. Почему-то только из Twitter, Tumblr и LinkedIn, но не из Facebook.

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

Профессия

UX/UI дизайнер

Узнать больше

• Научитесь разрабатывать интерфейсы, решающие задачи бизнеса
• Пройдите все этапы разработки дизайна продукта с нуля
• Освойте веб- и мобильный дизайн, проектирование и UX‑аналитику

Behance

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

dribbble

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

Читать также

AllYOU

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

Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.