мяу-дизайн
2.9K subscribers
1.19K photos
95 videos
37 files
275 links
т.е. «мяу»

публикует поучительные картинки про дизайн и пытается не упомянуть свой армейский дневник @kefiijrw
Download Telegram
Фигма не так давно добавила поддержку вариативных шрифтов, для этого в выпадайку начертаний добавили пункт Variable font axes.

А еще в Фигме кучу параметров можно контролировать через переменные, и для этого в том же меню существует пункт Apply variable.

Доля случаев, когда я с первого раза правильно выбирал из этих двух пунктов: слишком маленькая!

Это примерно как обновленные иконки сервисов гугла: да, там есть разница и при вдумчивом изучении понятно, что есть что, но в суете рутины решение принимается автоматически, не сфокусированным сознанием, а фоновой мозговой деятельностью на основе триггера «тут есть слово Variable, жми».
А потом заходишь в продукт Адоба, а там дизайнер нашел самое подходящее место для новой кнопки Save to Adobe cloud storage.
Ужасная инфографика турнирной сетки, прекрасный образец для препарирования дизайнерских ошибок.

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

Эти линии, обрамляющие пары команд, еще зачем-то остались и в следующих трех колонках, когда уже и разделять ничего не надо, просто будто семечек насыпали.
Если просто убрать эти линии, избыточная визуальная нагрузка пропадет. И сразу станет понятна причина, почему к этим линиям вообще прибегнули: дизайнер не знает про теорию близости или просто поленился придвинуть играющие команды друг к другу.
Сделаем это за него. Теория близости заработала, пустое пространство — лучший разделитель.
Чтобы в линиях-перемычках было больше пользы, пускай они идут не от пары команд, а от конкретной команды, вышедшей в следующий раунд. Всякие умники по форме перемычек сразу смогут распознать победы андердогов над фаворитами, ну а для остальных эту будет просто тропинкой команды по турниру. Соответственно, справа в несыгранных еще этапах в этих черных линиях пока нет нужды, там и так понятна иерархия (опять же благодаря теории близости).
стало — было
Меня пожурили, что я на канале кормлю семечками «а-ха-ха, какой-то дизайнер лоханулся» вместо открытия каких-то глубинных глубин дизайна.

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

https://t.me/meow_design/504
Написание статьи как поиск эйлерова пути в ориентированном графе из тезисов

https://t.me/meow_design/1057
Создание интерфейса как решение системы уравнений-ограничений

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

Очень упрощенно алгоритм можно описать так:
— Из текущего положения делаются небольшие шаги в разные стороны.
— Среди этих шагов фиксируется тот, который дал наибольший прирост.
— Процедура повторяется до тех пор, пока существуют шаги, дающие хоть какой-то прирост.
— Поздравляю, вы великолепны и достигли вершины!
Сложно не заметить, что метод практически дословно описывает стратегию некоторых компаний A/B-тестированиями прокарабкаться вслепую в прекрасное будущее.

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

Так что жесткий мир больших корпораций с их завязанными на KPI премиями объединяет с идеологическими авторитарными системами общая установка: график любой ценой должен идти вправо вверх, и лучшее решение в любой момент времени — то, которое дает наибольшее «вверх»!
Но, во-первых, такой метод является «жадным», потому что поощряет сиюминутный рост без оглядки на последствия. Премия-то вот родненькая, только руку протяни показатели выполни, а дальше уже как-нибудь разберемся. Мой любимый пример возможных последствий: Рязанское чудо.
Во-вторых, такой метод является «близоруким», так как им можно найти только локальный максимум. Любой ближайший холмик станет ловушкой, потому что для достижения еще большей вершины придется спуститься с холмика вниз (запрещено! график должен идти вправо и вверх!) или уметь прыгать очень далеко (навык не развит, маленькими шагами как-то привычно и безопасней) без каких-либо гарантий моментального успеха (показатели упали! вернуть всё назад и наказать виновных!).
Я пытался найти какую-то поясняющую иллюстрацию, но они все показывают поиск минимумума (ведь метод на самом деле называется градиентного спуска), а я рассказывал на примере поиска максимума показателя.

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

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

Выглядит это как-то так. Здесь температурой обозначается вероятность перескока на худшую позицию по аналогии с выстраиванием атомов металла в кристаллической решетке во время процесса отжига, в честь которого и назвали метод.
This media is not supported in your browser
VIEW IN TELEGRAM
Так в основном работают дизайн-студии. В самом начале ищутся самые разные подходы к задаче («концепции»), оценивается их перспективность. Какая-то из концепций выбирается за основную, но по мере работы еще возможен перескок на другую перспективную концепцию, даже если в первой итерации она выглядит сырой и менее проработанной, чем уже достигнутый результат текущей концепции. Со временем по мере работы над проектом вероятность таких масштабных смен концепций уменьшается, допускаются всё меньшие и меньшие изменения, чтобы проект сошелся ко сроку.

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