Описание идей и исследований, стоящих за брендом Amie — нового стартапа, разрабатывающего инструмент повышения продуктивности без потери радости, — меня безумно вдохновило! Этот тред просто хочется распечатать и повесить на стену. И такими я вижу правильные кейсы на ваших этих бехансах. Здесь нет ненужной технической базы, типа “почему мы выбрали шрифт с засечками”, или “как мы выбрали оттенок красного из тысячи”. Нет поверхностных и притянутых за уши причин, объясняющих решения, будто тебе кажется что твоя работа не стоит своих денег, и ты пытаешься найти какие-то оправдания.

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

К слову, я написал эту характеристику довольно сухо, разложив всё по полочкам, подобно тому же проекту с беханса. Но сам тред намного более витееватый и немного абстрактный, что также оказывает нужный эффект. Прочти сам тред (в виде статьи для удобства): https://threader.app/thread/1310667533712752641 (или оригинал в твиттере)

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

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

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

Блокирующая анимация

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

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

Асинхронная анимация

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

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

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

Советую изучить гайд по моушену в Материал дизайне. А также поупражняйся: какие анимации на этой странице блокирующие, а какие параллельные? https://material.io/design/motion/understanding-motion.html При желании ответы можешь прислать мне или оставить в комментариях. :)

Тестирую Variants в Figma. Очень круто, что сохраняются оверрайды теперь! 😍

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

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

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

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

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

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

При этом многие дизайнеры были обеспокоены, когда Студия Артемия Лебедева представила ИИ дизайнера, который умеет находить довольно интересные и необычные на мой взгляд визуальные решения. Но без живого дизайнера тут тоже не обойтись: он просматривает сгенерированные картинки, выбирает подходящие, верстает с ними макеты. Нужно не бояться искусственного интеллекта, а учиться применять его возможности в своей работе.

Figma для 3D? Не совсем, но близко: вышел новый веб инструмент для создания 3D, который живёт в веб среде — Spline. (spline.design) Я давно хотел продолжить осваивать трёхмерное пространство, и этот инструмент меня вдохновил с первых секунд! Тут можно не только творить композиции из примитивов, но и создавать с ними интерактивные инсталляции в вебе. Кликни сердечко: https://my.spline.design/heart-ca5a067ab84484b8aed9820809d1f473/ ❤️

Я наигрался с анимациями и решил переместить свои объёмные творения в Figma. Экспортировал прозрачный объект со светом и непрозрачный без света, использовал второй как маску, и вот получился 3D объект с легко изменяемым цветом прямо в Figma! Пока их только два, но я буду дополнять набор: https://figma.fun/kR6xZM

Что это? Концептуальный визуальный язык программирования. Понимаю ли я тут что-то? Нет. Круто ли это? Очень!

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

Демо: http://xzzulz.github.io/xra9/

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

“Визуальный редактор кода” — на этот раз ближе к дизайну, — Modulz выходит 21 декабря! Этот инструмент сильно напоминает Figma снаружи, но внутри всех элементов лежит реальный рабочий код. Сейчас между элементами дизайна и разработки есть огромный разрыв. Хоть мы и уже ушли из дизайна интерфейсов в фотошопе, дизайнеры всё ещё создают “картинки”, которые разработчикам приходится описывать с нуля.

Зарождаются и инструменты, которые стремятся сократить этот разрыв. Modulz, Visly, Plasmic, Cabina, Handoff, Views, Subform† — это визуальные редакторы кода. В то время как Figma упрощает процесс передачи макетов в разработку, эти задают вопрос: а нужен ли он вообще? Они говорят, что создают лучшую альтернативу графическим редакторам — ну что ж, будем смотреть как всё будет меняться в течение следующих пары лет. Потенциал у них явно большой.

Следующий тип инструментов, которые пытаются эту проблему решить: конвертеры из графических редакторов в код (aka Figma to Code). Примеров приводить не буду, так как пока не нашёл ни одного, который бы хорошо справился со своей задачей. Большинство тупо берут доступные свойства в Figma и воссоздают их в коде. А это значит, что макет хоть и выглядит правильно, да не работает: никакой семантики, логики, а про адаптивность я вообще молчу.

Я как-то представил себе такую шутку: было бы классно, если бы файлы в Figma как-то связывались с кодовой базой, но не так, чтобы просто создавался код из Figma, а чтобы релевантные для отдельных элементов части импортировались из Figma как переменные, но при этом сами элементы создавались бы вручную. Кто-то сделал из чего-то похожего стартап: Contrast App позволяет объединить кодовую базу в StoryBook и Figma и проводить их сравнения при изменениях.

Вот вам и ответ на вопрос “должны ли дизайнеры уметь кодить” — да, они будут кодить, если дать им графический интерфейс, который будет достаточно мощным, чтобы разработка визуальной части интерфейса могла быть сделана теми же усилиями, а то и меньшими, чем сейчас рисовать прямоугольники в Figma.

Почему не стоит делать иконки вариантами?
Самая главная проблема — огромный список без превью. Figma только решили проблему свапа компонентов: раньше это делалось в огромном многоуровневом списке. Сейчас в меню Swap Instance не только легко ориентироваться, но есть и превью, и самое главное для иконок — поиск. Можно даже добавлять синонимы в описание компонента, чтобы легче их находить. Все эти прелести исчезают при использовании вариантов — у тебя остаётся один общий компонент “какой-то иконки”.

Как тогда улучшить организацию библиотеки иконок?
Просто оставь всё как есть. Каждая иконка — отдельный компонент. Разные цвета — стили. Если очень хочется и тебе кажется это удобным, можешь создать разные виды одной иконки как варианты, например если иконка имеет три размера, оберни три компонента в один вариант. Если иконка имеет пять вариаций толщины линии, тоже можно их объединить. Однако смотри на контекст использования: если на одной странице тебе вряд ли понадобится использовать иконки разной толщины или размера, значит не так часто надо придётся между ними переключаться и можно оставить их отдельными компонентами.

Замечательная словолитня, все работы которой находятся в открытом доступе, Velvetyne не перестаёт радовать! Один из их акцидентных шрифтов под забавным названием Pilowlava был перерисован в 3D для использования в 3D среде. И вот какая красота из этого вышла:
https://velvetyne.fr/news/pilowlava-3d/

Модели в разных форматах (.blend, .c4d, .fbx, .obj) можно скачать свободно и использовать в любых своих творениях уже сейчас. Pilowlava 3D распространяется под лицензией Free Art License, которая требует указания автора при использовании.

Зацени новый дизайн сайта ЦРУ: https://www.cia.gov/ Как тебе эти анимации, современная типографика, и в целом трендовый лук? Круто видеть, когда государственная организация идёт в ногу со временем.

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