Я старался держаться в стороне от хайпа по поводу GPT-3, потому что многие проекты с ней пока были просто забавными игрушками, никак не применимыми на практике. Однако этот пример не могу обойти — я уже готов установить это и пользоваться!

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

GPT-3 решает эту проблему: просто напиши, что ты хочешь сделать на простом английском, и это превратится в понятную терминалу команду.

Сегодня я запускаю свой плагин Master для Figma на ProductHunt! Все мои любимые 38 подписчиков, давайте соберемся и выведем его в топ!

https://www.producthunt.com/posts/master-plugin-for-figma

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

Очень занятая, но классная и продуктивная неделька выдалась! Расскажу немного куда я пропадал:

• Активно изучал различные вещи, которые мне возможно понадобятся для создания нового крутого плагина для Figma: создание своего компилятора и языка программирования. Узнал про такой концепт как debounce в программировании — оказалось, что я это уже использовал раньше, но никогда не знал, что у этого есть какое-то определенное название.

• Образовательный проект Figma Virtual Campus проводили хакатон: я помогал студентам с созданием плагинов, проводил мастер класс по этой теме, и в конце был одним из членов жюри! Одна команда там создала очень важный плагин, о котором я мечтал давно: он все шрифты в файле переключает на Comic Sans.

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

• Выступил на конференции “5 to 9”, посвященной фрилансу и сайд-проектам! Рассказал про свой опыт, процесс создания плагинов для Figma и других ресурсов для дизайнеров. Было больше 1000 участников и крутые спикеры, в частности Chris Do и Aaron Draplin! Также безумно понравился рассказ Kezie Todd про её 12 сайд проектов за 12 месяцев.

• Достиг заработка больше $1k за месяц на продаже плагинов, юхуу! (Раньше было до $500.) Конечно же основным двигателем послужил запуск на PH, но даже сейчас спустя пару недель продажи продолжают идти без сильного падения. К слову о запуске: меня удивило количество спама — намного больше, чем было на прошлых запусках. Все хотят продать какие-то услуги, рекламу для твоего “стартапа”, или даже накрутить апвоуты.

Сегодня в дизайн-твиттере разлетелась новость о том, что Linear App сделали “умные” зоны наведения для контекстных меню. Многие от этого прямо в восторге! А меня удивляет такая реакция — разве не все нормальные приложения так делают? Видимо, не так много людей знает об этой фишке, поэтому расскажу тебе.

В контекстном или главном меню в виде списка со множеством уровней вложенности, при наведении на пункт содержащий группу, раскрывается эта самая группа. Но проблема в том, что когда ведешь курсор к этой группе, он может случайно попасть на другой пункт меню и группа закроется. Похоже на игру The Maze (2003), где нужно вести курсор строго по голубой линии, и в самый ответственный момент выскакивает скример на весь экран.

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

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

Ссылки к изучению по теме:
• https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
• https://youtu.be/o0NtjY17v5w
• https://twitter.com/hakimel/status/1132932935399673857

Может быть это моё окружение, но известна ли тебе хоть одна компания, использующая Adobe XD как основной инструмент для дизайна? Напиши мне если знаешь — жутко интересно!

Я вижу только как новички начинают его изучать (репутация Adobe), а потом переходят на Figma когда уже разобрались. Там есть некоторые фишки, которые привлекают изначально, и для мелких/разовых проектов он возможно и годится. Но для командной работы он пока не очень, насколько я понимаю по отзывам (сам не пользовался).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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