6 важных обновлений Behance, которые сделают ваше портфолио интересней
В жизни каждого дизайнера наступает момент, когда он набирается смелости, чтобы показать труды своей деятельности миру. Кто-то собирает сайт-портфолио, кто-то выкладывает шоты на dribbble, но сложно найти дизайнера, который ничего бы не слышал про Behance. Для многих Behance является дефолтной площадкой для портфолио, несмотря на все свои ограничения. Более того, Беханс даже успел стать именем нарицательным. Костыли площадки существовали на протяжении долгого времени, к ним привыкли. Они воспринимаются чем-то само собой разумеющимся и сразу учитываются при разработке кейса. Но за последние пару лет Adobe внёс столько изменений и фич в площадку, сколько не было за предыдущие 10 лет. Давайте разбираться с самыми интересными обновлениями.
Интеграция кликабельных прототипов
Встраивать прототипы из InVision или Marvel можно было и раньше, ничего новаторского в этой фиче нет, но с обновлением функционала прототипов в Figma, кейсы можно украшать макетами с анимацией и ховерами. Уже лучше, чем просто джипеги, не правда ли?
Чтобы добавить прототип в кейс, вам необходимо залинковать макеты в Figma, поколдовать с анимацией переходов, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Встроить мультимедиа» или «Встроить прототип». Аналогичный алгоритм присутствует и у Adobe XD, но лично мне привычнее работать с Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, поскольку доступ к исходнику можно получить через инспектор кода. Во избежание этого, макеты можно перенести в новый документ, запретить копирование объектов либо растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалочку в исходнике.
Встраивание 3D-объектов
Этот функционал поможет дизайнерам интерьера показать комнату изнутри, дав возможность зрителю прогуляться с помощью 3D -тура. Данная функция также подойдёт, если нужно вставить 3D — объект. Например, если необходимо показать дизайн предмета, который вы задизайнили. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk.
Алгоритм действий тот же, что у прототипов. К тому же список источников для импорта достаточно обширный:
Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp, Cincopa, Codepen, Creddle, Dailymotion, Dartfish, Eko, Facebook video posts, Figma, Flixel, Flowvella, Genial.ly, Gfycat, Giphy, Google Maps, Google VR, Imgur, Interlude, Itch.io, InVision App, Issuu, JotForm, Knightlab, Kuula 360, Mailjet, Marvel, Matterport, Mixcloud, Prezi, ProttApp, Scribd, Shapeways, Sketchfab, Sirv.com, SlideShare, SoundCloud, Soundgine, Spotify, Tableau, Twitch, Twitframe, Verold, Vimeo, Vizor, Wirewax, Wufoo, Youtube, Juxtapose.
Приятным сюрпризом было увидеть в этом списке Figma. Несмотря на то, что это прямой конкурент Adobe XD, который захватил значительную часть рынка, Adobe допускает, что многим дизайнерам удобней работать именно с Figma.
Возможность вложить файл в кейс
При создании кейса вы можете дать ссылку на скачивание файла. У вас есть возможность указать ссылку для покупки шрифта, который использовался в кейсе или ui-kit, который вам не жалко отдать джунам для экспериментов. Если вы добавите файл при помощи этого способа, на превью вашей работы появится иконка скрепки, которая ведёт на скачивание файла.
6 важных обновлений Behance. Интеграция прототипов, 3D-объектов, NFT-токенов, стримы
В жизни каждого дизайнера наступает момент, когда он набирается смелости показать результат своей деятельности всему миру. Кто-то собирает на сайте портфолио и загружает шоты на Dribbble, но сложно найти дизайнера, который ничего не слышал о Behance. Для многих Behance является портфолио-платформой по умолчанию, несмотря на ее ограничения и нюансы. Более того, ему даже удалось стать именем нарицательным. Ошибки платформы существуют так долго, что пользователи к ним привыкли, и теперь они воспринимаются как должное и сразу учитываются при разработке кейса. Но за последние пару лет Adobe внесла в платформу столько изменений и функций, сколько не было за предыдущие 10 лет. Давайте разберемся с самыми впечатляющими обновлениями.
Интеграция интерактивных прототипов
Раньше можно было встраивать прототипы из InVision или Marvel, в этой функции нет ничего инновационного, но после обновления функциональности прототипа в Figma кейсы можно украсить макетами с анимацией и эффектом наведения курсора. Это лучше, чем просто JPEG, не так ли? Чтобы добавить в кейс прототип, вам необходимо связать макеты в Figma, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Embed Media» или «Embed Prototype». Аналогичный алгоритм присутствует в Adobe XD, но лично я больше привык работать с сервисом Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, так как к исходному коду можно получить доступ через инспектор кода. Чтобы этого избежать, вы можете перенести макеты в новый документ, запретить копирование объектов или растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалку в исходном файле.
Добавление 3D-объектов
Эта функция поможет дизайнерам интерьеров показать комнату изнутри, позволяя наблюдателю совершить прогулку с помощью 3D-тура. Кроме того, эта функция подходит, если вам нужно вставить 3D-объект. Например, если вы хотите показать дизайн созданного вами предмета. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk. Алгоритм действий такой же, как и у прототипов. Кроме того, список источников для импорта довольно обширен: Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp, Cincopa, Codepen, Creddle, Dailymotion, Dartfish, Eko, видео посты Facebook, Figma, Flixel, Flowvella, Genial.ly, Gfycat, Giphy, Google Maps, Google VR, Imgur, Interlude, Itch.io, InVision App, Issuu, JotForm, Knightlab, Kuula 360, Mailjet, Marvel, Matterport, Mixcloud, Prezi, ProttApp, Scribd, Shapeways, Sketchfab, Sirv.com, SlideShare, SoundCloud, Soundgine, Spotify, Tableau, Twitch, Twitframe, Verold, Vimeo, Vizor, Wirewax, Wufoo, Youtube, Juxtapose. Несмотря на то, что Figma является прямым конкурентом Adobe XD, захватившим значительную часть рынка Adobe, было приятно увидеть ее в этом списке.
Возможность прикрепить файл к кейсу
При создании кейса вы можете указать ссылку на скачивание файла. У вас есть возможность предоставить ссылку на покупку шрифта, который использовался в кейсе или ui-kit, который вы не прочь подарить Junior-дизайнерам для экспериментов. Это было возможно и раньше, но Adobe решила избавиться от этого костыля. Если вы добавляете файл с помощью этого параметра, в окне предварительного просмотра вашей работы появится иконка скрепки, что приведет к загрузке файла.
Creative Challenges
Это раздел с небольшими мастер-классами по продуктам Adobe: Photoshop, Illustrator, XD. Здесь вы найдете ежедневные задания для практического изучения функциональности графических редакторов. Задачи короткие и простые, идеально подходят для начинающих. По завершении результат можно отобразить в виде кейса, а лучшие работы получат достижения. Приятным бонусом станет дополнительная ачивка для коллекции.
Проведение собственных стримов
Теперь вы можете не только смотреть прямые трансляции и вебинары, но и записывать свои собственные. Теперь Behance предоставляет возможность проведения вебинаров на собственной платформе. Стримы можно записывать, демонстрируя работу на iPad или ПК. Если у вас есть что рассказать о работе с Fresco, Illustrator или Photoshop на iPad, сделайте это на Behance. Раздел Live был создан именно для этого. Завершенные трансляции будут сохранены в разделе Live Streams. Проводить трансляции через Zoom удобно, но для подключения к платформе вам необходимо привязать свою учетную запись Zoom к вашему профилю Behance. Пошаговая инструкция по ссылке.
Платные подписки на авторов
Дизайнеры и художники теперь имеют возможность монетизировать свой контент с помощью Behance. Вы можете пометить файлы для загрузки или видео-уроки с помощью кнопки «Premium Content». Такой контент можно скачать по подписке; размер ежемесячной подписки зависит от вас. На момент написания этой статьи данная функция доступна не всем пользователям, но ее можно получить, подав заявку на участие в бета-тестировании. Вы можете найти этот раздел, перейдя по ссылке.
Маркетплейс NFT-объектов
Нет, это не шутка. Теперь вы можете разместить в портфолио свои NFT-токены. Behance позволяет размещать работы в своем профиле на вкладке NFT, если вы продаете свои работы через торговые площадки. Для этого вам необходимо добавить кошелек и привязать учетную запись платформы к своему портфолио с помощью MetaMask, Phantom или Temple. Тип фреймворка, на котором хранится ваш NFT-токен, не имеет значения; главное, чтобы через MetaMask можно было сделать ссылку. На карточке токена отображается название, описание, ID токена и адрес контракта, а также ссылки, по которым эту работу можно купить. Когда мы изучаем обновления на платформе, становится ясно, что Adobe возлагает большие надежды на Behance. Соответственно, у нас, как у пользователей этой платформы, появляется все больше и больше инструментов, которые дают возможность вдохновляться и делиться своим творчеством с аудиторией. Делитесь своей работой, вдохновляйтесь и подписывайтесь на аккаунты автора на Behance, Instagram или Facebook. Перевод статьи uxplanet.org
Анимация в Figma от 0 до постинга на Behance
Новичок в веб-дизайне? Восхищаешься красивыми анимированными кейсами на Behance, но не знаешь, как сделать анимацию и добавить видео в свою презентацию? Тогда эта статья специально для тебя: я пошагово расскажу, что надо делать!
При подготовке презентации своего нового проекта для Behance я столкнулась с такими проблемами:
- Идея моей анимации слишком сложная, и ни один тьюториал не смог мне подсказать, как воплотить её в реальность;
- Видеохостинг Vimeo изменился и перестал делать, как я хочу;
- На Behance видео постится с дефолтным плеером и выглядит некрасиво.
Моя анимация
Я делала лендинг в рамках учебного проекта Логомашины. Тема «мужская парфюмерная вода Feromon 47». На Behance уже, как минимум, больше сотни концептов на эту тему! Поэтому мне необходимо было сделать что-то необычное и, конечно же, создать качественную интересную анимацию. Вот самая сложная из них:
Как сделать
Конечно, мне проще было сделать её в After Effects, но у меня была идея-фикс научиться, наконец, анимации именно в Figma!
Шаг 1. Придумываем крутую идею для нашей анимации. Если в голову ничего крутого не приходит, то смотрим референсы на https://www.awwwards.com/, например. Я подсмотрела там идею для анимации заголовков, но, в итоге, от неё отказалась.
Моя идея была такова: пользователь видит, что это блок с описанием нот аромата, наводит мышку на любую из картинок, и видит гифку в треугольнике по центру, и более-менее понимает, что это за растения, и как может пахнуть Feromon 47, т.е. идея сделать визуализацию аромата.
Шаг 2. Делаем макет будущей анимации в Figma.
Шаг 3. Далее смотрим на Youtube тьюториалы по анимации в Figma в зависимости от того, что и как именно хотим заанимировать, например:
Шаг 4. Получаем просветление и понимание того, как нам надо дорисовать макет для анимации, чтобы он работал, и делаем это.
Шаг 5. Заходим в режим прототипа и проводим стрелочки для соединения нужных фреймов и настраиваем параметры нашей анимации. Я очень долго тыкалась в настройках, пробуя различные варианты, потому что результаты получались очень неожиданными, а тьюториалы я не смотрела.
Чтобы фрейм треугольника не перекрывал нижние карточки делаем Flattern (правой кнопкой мыши). Если это тоже не помогает, то рисуем хитрый маленький невидимый треугольник поверх большого треугольника, и к нему привязываем анимацию!
Шаг 6. Добиваемся того, чтобы наша основная анимация работала, как было задумано. Например, в своей анимации я выбрала мгновенную (instant) анимацию по наведению (while hovering), чтобы при наведении мышки на каждую из фотографий гифка в треугольнике сменялась мгновенно. Приятным и неожиданным сюрпризом для меня стало то, что гифки реально проигрываются.
Шаг 7. Ни в коем случае не пытаемся проделать то же самое с заголовками — ничего не получится, проверено! Если у вас такая же многоуровневая анимация, как в моём проекте, то для заголовков необходимо использовать уже другой вид анимации в Figma — анимацию через компоненты. Спасибо кураторам Логомашины за то, что подсказали мне поискать тьюториалы именно на эту тему: https://youtu.be/ZQdmwpbe1fM
Шаг 8. Получаем новое просветление, в моём случае готовим 2 варианта заголовков: невидимые (0% непрозрачности) и видимые (100% непрозрачности), потому что заголовки должны мягко проявляться. Выделяем их вместе и оборачиваем в компоненты (create multiple components). Затем создаём наши варианты (create as variants). Я назвала варианты «Default» и «Normal» соответственно.
Шаг 9. Настраиваем несложную анимацию в режиме прототипа.
НЕ РАБОТАЕТ ФИГМА
Не работает графический редактор Figma? Сначала убедитесь, что у вас есть хорошее интернет-соединение и что вы используете поддерживаемый браузер. Может быть также полезно очистить кэш браузера и попробовать войти в необходимый проект через другой браузер или в режиме инкогнито.
Если проблема не исчезает, проверьте, доступен ли сам сайт Figma на данный момент. Для этого можно воспользоваться специальными сервисами мониторинга, например, «DownDetector». Если сайт фигма работает нормально, но у вас все еще возникают проблемы, обратитесь к поддержке Figma и опишите свою проблему. Можете также обратиться к сообществам пользователей Фигмы на форумах и сайтах социальных сетей, может быть кто-то уже сталкивался с подобной проблемой и предложит решение.
Одной из частых проблем, связанных с работой в Figma, является медленная скорость работы или зависание страницы. Это может быть вызвано большим количеством элементов на странице или небольшой оперативной памятью компьютера. Попробуйте удалить ненужные элементы или закрыть другие программы, которые могут занимать много памяти.
Если проблема не решается, можно попробовать перезагрузить компьютер или даже сменить устройство, если доступно. Также есть версия Figma для настольных компьютеров, которая может работать лучше, чем веб-версия, в зависимости от технических характеристик вашего компьютера и браузера.
В целом, если Figma не работает должным образом, не отчаивайтесь — есть несколько способов решения проблемы. Для начала попробуйте проверить свои настройки и связь с интернетом, а затем обратитесь за помощью к сообществу или поддержке Фигмы.
Уроки Figma — 01. Скачивание и установка программы фигма
Figma — перо инструмент кривых Безье
�� Топовый плагин для Фигмы? Figmotion — Figma plugin или «как я анимировал щупалец»
Уроки Figma — Бесконечный слайдер. [Фигма]
Как починить глюки за несколько секунд (фишки Фигма) / Reload tabs in Figma
Компоненты в Figma — Грамотная работа с компонентами в макете Фигма