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, который вам не жалко отдать джунам для экспериментов. Если вы добавите файл при помощи этого способа, на превью вашей работы появится иконка скрепки, которая ведёт на скачивание файла.
Как создать портфолио на Behance
В современном мире, где визуальное восприятие играет ключевую роль, Behance становится неотъемлемым инструментом для дизайнеров, чтобы поделиться своим творчеством с мировым сообществом.
Что такое Behance и зачем эта площадка дизайнерам
Behance — это онлайн-платформа для творческих людей в различных областях искусства и дизайна, где они могут публиковать и продвигать свои изображения, иллюстрации, анимации, видео и пр. Эта площадка является неотъемлемым инструментом для тех, кто стремится сделать свое творчество более видимым.
Behance — это не просто галерея проектов, но и креативное сообщество творческих личностей. Здесь можно взаимодействовать с талантливыми людьми, вдохновляться их кейсами, открывать новые тенденции, участвовать в конкурсах, делиться опытом и находить предложения о работе.
Работы, размещенные на платформе, могут заметить не только локальная аудитория или крупная компания, но и весь мир. Платформа помогает формировать и укреплять личный бренд дизайнера.
Профессия «Иллюстратор»
Станете профессиональным иллюстратором даже без художественного образования. Освоите программы Illustrator и Photoshop, соберете портфолио и научитесь продвигать личный бренд.
Какие проекты можно публиковать на Behance
Графический дизайн
Создавая портфолио как графический дизайнер, расскажите о самых интересных кейсах. Не стоит добавлять проекты, темы которых вас больше не привлекают. Выделяйте главное и делитесь теми работами, которые соответствуют тенденциям дизайна и объективно отражают навыки.
Можно продемонстрировать свои работы по созданию логотипов, фирменного стиля, дизайна упаковок, этикеток и другой атрибутики бренда.
Веб- и UX/UI-дизайн
При поиске работы UX/UI-дизайнером важно сначала понять, чем именно хотите заниматься — дизайном интерфейсов, корпоративными сайтами, промосайтами или лендингами. Если вы претендуете на роль продуктового дизайнера, то все проекты, не относящиеся к UX/UI-дизайну, нужно убрать. Никаких презентаций, натюрмортов, листовок — этого там быть не должно. Из оставшегося выберите несколько самых сильных работ — можно всего одну-две, но те, которые вы сможете довести до ума и красиво оформить, а еще хорошо про них рассказать. Лучше меньше проектов — но классного качества.
Покажите экраны, которые отличают ваш проект от остальных, — те, где была интересная графика, сложные композиционные решения, интересные типографические находки. Хорошо, если вы сможете поместить в портфолио видеоролик с шоурилом и показать, как выглядит ваше приложение, какая в нем анимация, заснять пользовательский путь через прототип в Figma.
Иллюстрация и живопись
В портфолио лучше добавлять те иллюстрации, которые вам хотелось бы повторять и развивать. Те работы, которые вы выберете, будут костяком вашего портфолио. Они показывают вашу предпочитаемую нишу. Логично показывать в портфолио работы с теми заказчиками, с которыми вы хотите ассоциироваться в дальнейшем, и не показывать те проекты, работать в которых вам не понравилось.
Помимо самой картинки должен быть сопроводительный текст, в котором есть подробности процесса работы. Должно быть словесное описание иллюстрации — это поможет слабовидящим и тем, кому сложно сформулировать собственное описание. Должна быть информация о том, для кого и когда эта работа была сделана, какие были этапы создания работы, где она использовалась.
Фотография
Размещайте художественную фотографию, показывайте работы до и после их ретуши.
Моушн-дизайн
Создавая портфолио как моушн-дизайнер, публикуйте трехмерные модели, анимацию и визуальные эффекты для фильмов, видеоигр, рекламных кампаний и цифровых продуктов. Демонстрируйте свои идеи, фантастические объекты и идеальные копии объектов реального мира.
Дизайн одежды
Представляйте свои коллекции и дизайнерские работы в сфере моды, размещайте фотографии, демонстрирующие ваше видение стиля.
Архитектура и дизайн интерьера
Публикуйте архитектурные проекты, концепции зданий, демонстрируйте ваш подход к созданию уникальных интерьерных решений.
Типографика и печать
Представляйте свои авторские шрифты и творческие решения в типографике. Размещайте дизайны буклетов, афиш, бизнес-карточек и других печатных материалов.
Как оформить аккаунт на Behance
Оформление аккаунта играет ключевую роль в создании положительного впечатления от вашего портфолио. Рассмотрим шаги по оформлению каждого элемента.
Язык профиля. Выберите язык, на котором будет представлен ваш профиль. Выбирайте английский, если ваши проекты могут заинтересовать аудиторию разных стран.
Имя. Укажите свое полное имя или псевдоним. Важно, чтобы он был легко читаемым и запоминаемым.
Профессия. Четко определите свою профессиональную область (графический дизайнер, иллюстратор, фотограф и т. д), чтобы другим пользователям было проще вас найти.
Аватар. Загрузите качественное изображение: ваше фото или характерный символ, связанный с вашим творчеством.
Шапка или обои профиля. Это может быть ваш проект, кейс или вдохновляющее изображение.
Графа «о себе». Опишите ваш творческий подход, стиль, особенности работы и используемые техники.
Ссылки. Добавьте ссылки на ваши профили в социальных сетях, личный сайт или резюме. Это позволит другим пользователям легко находить вас на других ресурсах.
Профессия «Графический дизайнер»
Подготовите уникальное портфолио из нескольких работ. Наставники проверят выпускной проект и предложат идеи, чтобы вы смогли уверенно демонстрировать свои навыки будущим заказчикам.
Как сделать портфолио на Behance
Качественные работы. Отбирайте для публикации только лучшие проекты. Качество работ — основной фактор, определяющий ваш профессионализм.
Идеи для кейса. Выделяйте ключевые моменты в каждом проекте, которые могут заинтересовать тех, кто смотрит ваш профиль. Делайте акцент на творческом подходе и уникальных решениях.
Специализация и стиль. Четко определите свою профессиональную область и стиль работы.
Презентация проекта. Добавьте к каждому кейсу подробное описание. Расскажите о поставленных задачах, используемых техниках, процессе и достигнутых результатах.
Яркая обложка и визуал. Обложка проекта — первое, что видит зритель. Сделайте ее выразительной и привлекательной. Выбирайте качественные изображения для демонстрации проектов.
Выделяйте проекты, в которых вам удалось реализовать нечто особенное. Это может быть интересный вызов или нестандартное техническое решение. Покажите широкий спектр своих навыков. Включайте в кейсы как небольшие, так и крупные проекты, демонстрируя свою универсальность.
Как оформить кейс на Behance
Создать и качественно оформить кейс на Behance необходимо для успешной презентации своих навыков и опыта. Выберите тот проект, который хотите выделить. Помните, что он должен быть визуально привлекательным для зрителя и демонстрировать ваши интересы.
Создайте эффектную обложку и понятный заголовок кейса. Опишите контекст: что нужно было решить и какие цели были поставлены перед вами. Расскажите, как вы готовились к реализации проекта: это могут быть исследования, анализ рынка и конкурентов.
Определите ключевые моменты вашего проекта, которые необходимо подчеркнуть: важные этапы, уникальные креативные решения, различные визуальные элементы, макеты и промежуточные результаты.
Разработайте единый стиль кейса, чтобы создать цельное впечатление. Подготовьте высококачественные изображения и задайте логичную композицию блоков, обеспечив легкость восприятия информации. Если ваш дизайн включает анимацию, интерактивные элементы или другие особенности, внесите их в кейс для дополнительного визуального воздействия.
Если проект был выполнен в команде, добавьте ссылки на ваших коллег и партнеров. Подчеркните ваши профессиональные достижения, добавив блоки с отзывами клиентов и наградами.
Форматы кейсов
При создании дизайн-кейса важно уделить внимание и техническим аспектам, чтобы контент выглядел профессионально и был легким для восприятия.
Формат изображений. Выберите тот, который подходит для вашего контента. Обычно JPEG подходит для фотографий, в то время как PNG обеспечивает более высокое качество для графики.
Типы файлов. Используйте векторные изображения (SVG) для логотипов или иконок, а растровые (JPEG, PNG) для фотографий.
Оптимальная ширина. Рекомендуемая ширина изображений обычно составляет от 1200 до 2000 пикселей.
Размер файлов. Оптимизируйте изображения для улучшения загрузки страницы. Стремитесь к сбалансированному соотношению качества и веса файла.
Пропорции изображений. Соблюдайте их, чтобы они выглядели гармонично на странице и правильно отображались на различных устройствах.
Избыточный контент. Лучше не перегружать кейс, а выбрать ключевые моменты и информацию.
Видео или GIF. Может добавить интерактивности. Убедитесь, что они хорошо интегрированы в ваш кейс и не отвлекают от основного контента.
Как сделать презентацию в Behance и получить Features/ленточку/бейджик. 10 критериев успеха.
Behance — это отличное место для вдохновения, где находятся работы, на уровень которых хочется калиброваться, а также среда, куда заходят HR компаний, рекрутеры и работодатели.
Features/ленточки/бейджики дают возможность попасть в топ и быть замеченными первыми, поэтому они помогают увеличить количество заказов и получить предложения о работе.
Кураторы галерей Behance не дают информации почему они номинировали ту или иную работу. Чтобы разобраться в этой ситуации я изучала проекты, искала взаимосвязь и думала о причинах выбора работы в топ. В итоге, методом проб и ошибок, я вывела структуру, которая помогла мне получить свои Features и успешно оформлять презентации на заказ. У меня сформировался принцип построения проекта, и, думаю, будет полезно этим поделиться!
Первый экран — определяющая эмоция
Первый экран задает весь тон презентации, говорит о стилеобразовании, эмоции всего проекта. Это первая точка эмоционального контакта кураторов и зрителей с проектом, поэтому сделайте этот контакт впечатляющим, чтобы увеличить лояльность к проекту. Используйте графику, фотографии, анимации, самый удачные экраны интерфейса. Цель — восхитить зрителя и мотивировать смотреть дальше.
Прикрепляю отличный пример, где показана эмоция проекта за счет текстовых и композиционных приемов, пиксельной графики человека, интерфейсом и цветовым решением.
UX — обоснованность визуального решения
Для галереи Взаимодействие (Interaction) крайне важно показать UX шаги. Какую задачу бизнеса вы решали? Какая потребность пользователей? Какие этапы построения логики прошли — интервью, персонажи, sitemap, cjm, userflow, прототипы. Опишите и покажите любые другие шаги, которые помогли сделать вам удобный продукт и подтвердите результат в цифрах.
Кураторы оценивают взаимодействие с продуктом, а значит UX также важен, как и UI.
Сетка и pixel perfect
Сетка лежит в основе любого проекта и может рассказать о вашей художественной задумке (прогрессивные сетки или золотое сечение), а также о верности гайдам IOS и Android. Покажите что ваш проект не только результат исследования и творчества, но и годный продукт для технической реализации.
Анимация
Презентация, в которой есть немного анимации, вовлекает и восхищает зрителей больше. Не обязательно создавать сложные анимации, достаточно анимировать легкие участки в After Effects
Еще лучше, если вы покажите видео, как пользоваться вашим продуктом. Самый легкий способ — снять видео с экрана программой OBS https://obsproject.com/ru или любой другой. Сделайте прототип в Marvel или Figma, будет простой и рабочий вариант. Пример в моей работе www.behance.net/gallery/75315295/Weather-UIUX-app-design Cнятый экран я положила в After Effect и дописала текст 🙂
Tasty pieces (вкусные кусочки)
Анализируя работы, которые получили Feature, можно заметить, что каждый проект имеет участки повышенной эмоциональности. Они помогают презентации стать еще сильнее, вызвать у кураторов wow-эффкт и дать вам заветный Features. Также tasty pieces интересны зрителям и побуждают поставить лайк и сохранить работу.
Пример, где посреди презентации появляется tasty piece, который возвращает внимание зрителей и кураторов. Интерфейс не отражает полезной сути продукта, а действует как дополнение к окружающей графике.
Последний экран
Значение последнего экрана тоже выведено опытным путем. Проекты, которые оставляют после себя приятные эмоции, имеют больше шансов на успех. Можно впечатлить зрителя последним tasty pieces, можно пожелать хорошего настроения, можно оставить шутку или маленькую анимацию сердечка. Любая идея должна быть направлена на то, чтобы зрителю стало хорошо и он оставил лайк, а куратор features.
Новаторство
Если вы видите работу, которая не выполнила все пункты выше, но получила бейджик, значит, этот проект приблизился к иконе современного дизайна или был отмечен за своё новаторство. Видимо, когда работа сделана безупречно, вопросов у кураторов к ней не остается.
Работа уровня нормы
Конечно, все пункты выше работают при условии, что сам проект и презентация выполнены на уровне нормы. Это значит, что вы можете выбрать любой относительно современный стиль. Сайты 90х годов имеют крайне мало шансов получить Features. Даже популярный стиль Словак, который многими любим и востребован, имеет только один Feature Interaction. Это значит, что не стоит делать на него упор если бейджики ваша цель.
Пример, работы Анастасии Словак ниже www.behance.net/tataslovak.
Длина презентации
В проектах безупречного качества обычно 6 экранов. Если вы чувствуете, что ваша работа не такая, значит нужно показать минимум один пользовательский путь. Например, покажите в интернет-магазине главную страницу, каталог, карточку товара, корзину, процесс оплаты товара и сопроводительные модальные окна. Получается процесс от попадания на сайт до покупки — это один пользовательский путь. Не забывайте находить участки для tasty pieces. Ими могут стать баннера, блок подписки, скидки и другие маркетинговые обвесы.
Проверьте свою презентацию вопросом, хватило ли вам удовольствия от просмотра или хочется еще? Длина должна быть достаточная чтобы зрители получили наслаждение.
Презентация Behance — это хлеб и зрелище!
Обложка
Выбор обложки также имеет роль. Есть небольшие мысли как можно сделать выигрышное решение:
- Сделайте принскрин галереи Interaction, чтобы было видны последние обложки других участников
- Нарисуйте свою обложку такой, чтобы она выделялась среди остальных
- Обложка должна иметь tasty piece, чтобы максимально вовлечь зрителей в просмотр
Пиар презентации
У меня есть предположение, что работы, которые получили наибольший социальный отклик, становятся успешными претендентами на Features. Ведь, если за пару дней ваша работа набрала 2 000 просмотров и 500 лайков, значит, она одобрена обществом дизайнеров и мотивирует куратора выставить работу в топ.
Для пиара я использую все возможные площадки в социальных сетях Facebook https://www.facebook.com/groups/461999237551673/ и VK https://vk.com/behancerussiateam. Покопайте больше и вы найдете новые источники пиара своих работ.
Лайфхаки
- Чтобы получить ленточку XD, не обязательно делать работу в XD.
- Чтобы получить ленточку Students Show, не обязательно быть студентом.
- В проектах делайте упор на свою сильную сторону. Если у вас впечатляющие иллюстрации или motion design, покажите их больше и в настройках презентации выставите галереи Illustration и Motion design.
- Вступайте во всевозможные организации и галереи.
AIGA ID
С данной группой часто случаются проблемы. За членство я заплатила $50, но так и не получила Signup Code. Информации в интернете что делать тоже не нашла, поэтому написала в support текст “I am writing with regard to AIGA Signup Code. I don’t know where it is, but I need it to Sign Up & Showcase Your Work. I’ve paid for my membership.
I would sincerely appreciate If you sent me the AIGA Signup Code, or explain where can I find it.”
На что мне ответили, что “You should have received your gallery code with your welcome email. In case you have misplaced it, the gallery code for the AIGA group is … ”. То есть код должен был содержаться в приветственном письме, но его там не оказалось.
Личный опыт
Через Behance меня нашли рекрутеры Сбербанка, ВТБ, Россельхоз, Wildberries, ANGRY, ряд стартапов, отечественных и иностранных заказчиков. Одна ленточка дает буквально каждодневные сообщения на протяжение двух недель, потом спрос постепенно гаснет, так как в топ попадают новые ребята, но даже через несколько лет, проделанный труд помогает мне проходить собеседования и находить новые заказы. Портфолио с любой отметкой одобрения — это не напрасный труд, так что есть за что стараться! 🙂
Желаю всем вдохновения и сил преодолеть этот барьер! Если кто хочет услышать мой отзыв на работу в Behance — прикрепляйте в комментариях, буду рада помочь и посмотреть первые 10–20 презентаций 🙂
Прототипирование в Figma: 5 советов, которые помогут вам эффективно донести сообщение
Сегодня речь снова пойдет о создании прототипов. Но не тех, которые точно отражают логику и функциональность продукта. Мы поговорим об использовании этой функции Figma для презентации концепций и идей заинтересованным сторонам.
Всякий раз, когда я вижу суперсложный прототип в Figma, я думаю: «Круто! Но зачем?»
Это мысленно возвращает меня к десятому принципу Дитера Рамса: «Хороший дизайн — это как можно меньше дизайна«. Указанный принцип не только определяет мой подход к созданию продуктов, но и лежит в основе моего собственного процесса проектирования. В любом проекте моя цель — сделать только то, что необходимо, чтобы передать основной замысел, поэтому моя команда действует точно и уверенно.
Я очень прагматичен и тщательно выбираю инструменты, которые способны обеспечить самый лучший результат. Бывают моменты, когда высокая детализация приносит большую пользу, но не слишком часто. Существуют специальные программы для создания сложных прототипов (например, Protopie, Principle и т.д.), но лично мне не приходилось использовать их для выражения своих идей.
Вместо этого я предпочитаю работать в Figma, инструменте, который я знаю лучше всего. Здесь можно быстро собрать что-то простое, но достаточное для того, чтобы донести основную идею. Затем, когда концепция согласована, я перехожу к работе над кодом вместе с инженером, чтобы довести ее до ума.
Когда я создаю высокодетализированные прототипы?
Есть три сценария, в которых я прибегаю к созданию прототипов высокой точности:
- Чтобы представить сложную концепцию, сделав ее более понятной
- Чтобы подробно объяснить какое-то сложное взаимодействие
- Для получения обратной связи от реальных или потенциальных клиентов
В каждом из этих случаев дизайн требует максимальной детализации, чтобы в дальнейшем команда чувствовала себя уверенно и действовала согласованно. В первом речь идет о руководителях. Во втором — об инженерах. А в третьем — мы пытаемся получить подтверждение того, что идея сработает для наших клиентов.
В моей практике чаще всего встречается пункт 1, поэтому именно на нем я и сфокусируюсь.
Согласовываем сложную концепцию, сделав ее более понятной
Как дизайнеры, мы всегда стараемся сделать абстрактное конкретным, особенно для тех, кто платит за наши услуги. Если клиенты не могут понять наши идеи, мы недолго продержимся в бизнесе, не так ли? Поэтому в тех случаях, когда мне нужно представить новую большую концепцию, я без колебаний приступаю к созданию высокодетализированного прототипа. Это эффективный инструмент коммуникации для разъяснения и продвижения сложных идей.
Недавно я узнал о работах знаменитого дизайнера Ээро Сааринена и наткнулся на несколько упоминаний о том, что прототипирование было ключевым элементом его подхода, в частности, презентации идей. Его концепции часто выходили за рамки привычного, и даже при наличии подробных чертежей заказчику было сложно визуализировать их. О чем идет речь могли понять другие дизайнеры, но не заказчик. Поэтому Сааринен начал создавать мини-модели, чтобы сделать для своих клиентов абстрактное конкретным. Так они охотнее расставались с деньгами и делали возможной его новаторскую работу.
Примерно так же я отношусь к прототипам Figma.
Я воспринимаю их как «презентации со сверхспособностями«, потому что они помогают мне доносить мои идеи до спонсоров. Это инструмент убеждения, а не функциональный прототип, который должен в итоге превратиться в реальный продукт. Как и при создании презентаций, я следую определенным принципам, чтобы извлечь максимум из того, что может предложить мне Figma как инструмент прототипирования.
Figma-прототипы как презентации со сверхспособностями
Я думаю о презентациях и прототипах как о членах одной семьи.
Если презентации — это простые прототипы, то прототипы — это мощные презентации.
Чтобы извлечь из них максимум пользы, я следую пяти принципам:
1. Не пытайтесь воссоздать веб-приложение в своем Figma-прототипе
Первое правило Prototype Club (прим. — отсылка к “Бойцовскому клубу”) — не пытаться воссоздать веб-приложение в Figma-прототипе. Второе правило Prototype Club? Держу пари, вы уже догадались ��.
Не каждая кнопка должна быть кликабельной. Не каждая ссылка должна куда-то вести.
Прототип должен рассказать вашу историю.
Показывает ли конкретный сценарий то, что вам нужно? Усиливают ли все взаимодействия ту идею, которую вы пытаетесь донести?
Если да, то вы двигаетесь в правильном направлении.
2. Структурируйте прототип как презентацию
Я смотрю на свои артборды как на кадры мультфильма.
Поэтому я предпочитаю выстраивать их линейно — так, как я бы разместил раскадровку или слайды презентации.
Я следую структуре «слева направо», «сверху вниз», которая нативно используется в Figma для перемещения по фреймам. Я использую свой любимый плагин Super Tidy для переименования фреймов в соответствии с их положением на холсте. Как и в своих презентациях, я не называю фреймы вручную — мне трудно поддерживать порядок, учитывая то, как часто я добавляю промежуточные состояния между существующими фреймами.
Полезная функция Figma, которая была создана специально для прототипирования, — именованные маркеры «Flow». Они позволяют получить читаемую линейную структуру, не называя фреймы, и при этом четко обозначить места, где начинается и заканчивается каждый сценарий взаимодействия.
3. Создавайте состояния, но не спешите связывать их между собой
Я не соединяю экраны стрелками, пока не буду уверен, что спроектировал большую часть состояний, которые требуются мне для прототипа.
Я провожу ранние итерации, открыв страницу в режиме презентации и просто перемещаясь по сценарию с помощью стрелок, чтобы понять, каких состояний мне не хватает. На этом этапе добавить недостающие состояния просто: создайте новый фрейм или два, перетащите их в нужное место на холсте и запустите плагин Super Tidy, чтобы задать фреймам имена, которые отражают обновленный порядок.
Добавление, удаление и перемещение состояний становится гораздо более трудоемким и раздражающим, когда вы добавляете интерактивные связи между фреймами, поэтому я откладываю эту задачу на потом.
4. Добавьте возможность пропустить часть фреймов для большей гибкости
Я не против того, чтобы мои Figma-прототипы были в основном линейными, потому что моя цель — рассказать историю, а не показать каждое состояние.
Но при этом я люблю добавлять в сценарий «точки пропуска», чтобы обеспечить большую гибкость повествования во время презентации. Эти точки часто проявляются в навигации, позволяя мне пропускать несколько фреймов и перемещаться как вперед, так и назад, когда это необходимо.
Маркеры сценариев также могут быть полезны для этой цели, но я предпочитаю добавлять интерактивные элементы, поскольку это более естественный и привычный прием. Точек пропуска не должно быть слишком много, только в ключевые моменты.
5. Положитесь на силу умной анимации
В Figma есть волшебная кнопка. Она называется «Smart Animate».
Я понятия не имею, как она работает, но большую часть времени она просто работает. Иногда она выдает интересные решения, которые нужно лишь немного подправить. А в других случаях она делает что-то явно не то, и вы вычеркиваете соответствующий вариант из своего списка.
Я хочу подчеркнуть, что использование Smart Animate не делает вас менее профессиональным дизайнером. Напротив, умение использовать эту функцию грамотно делает вас супердизайнером ��.
Поэтому воспринимайте те возможности, которые дает вам умная анимация как своего рода творческую точку отсчета.
Это просто еще один инструмент. Извлеките из него максимум пользы!