мяу-дизайн – Telegram
мяу-дизайн
2.86K subscribers
1.15K photos
91 videos
37 files
263 links
т.е. «мяу»

публикует поучительные картинки про дизайн и пытается не упомянуть свой армейский дневник @kefiijrw
Download Telegram
Схема-список на экране в вагоне метро. Дизайнер решил по-максимуму использовать площадь экрана и расположить линию по диагонали, чтобы влезло больше станций (с географией это не соотносится).
Видно, что если попытаться переложить её же в более стандартные форматы отображения ветки — в линию по горизонтали или вертикали, то получится хуже: станций влезает меньше, при этом остается дофига пустого пространства (туда сразу хочется всунуть прогноз погоды).
Если же выходить за пределы головоломки «как разместить семь шариков с подписями», но не упираться в «ну вообще-то тут просто нужен экран с подходящими задаче пропорциями, ну типа как в московском метро над дверьми», то можно сделать предположение, что крупные названия станций (особенно следующей!) всё же важнее, чем показ уже пройденных станций.

Тут бы я вам лучше показал не безумные умения из фотошопа, а картинки из портфолио, но в ноябре исполнится три года, как уже готовый анонс сделанного студийного проекта на эту тему не может выпуститься (и, вероятно, уже никогда не сможет) и поэтому остается под NDA, так что сорян.
Дизайнер аналогичного экрана уже в трамвае: холд май бир.
Иногда необходимо ломать шаблон, потому что он может быть ложным советчиком в процессе понимания устройства интерфейса.

Например, есть устоявшийся формат текстовой капчи: какие-то каракули, рядом текстовый инпут для ввода того, что человек сумел распознать в каракулях.

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

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

То есть механизм капчи совсем новый, но визуальный шаблон обычный, и получается, что он тут — ложный советчик. Если бы ползунок внизу не был бы похож на текстовый инпут, разобраться с капчей было бы проще, даже если встречаешь ее впервые.
Ну и сразу еще про капчи. Недавно Бирман на своем канале показывал капчу, где надо было признать дорожный знак с нарисованным светофором за светофор.

У меня случилось что-то похожее. Когда робот принуждает тебя признать мотоцикл велосипедом, чтобы он позволил тебе пройти дальше, в голове вспыхивает пучок ассоциативных связей с антиутопиями от Терминатора с его борьбой людей против машин до 1984 с его двоемыслием.
Пора присоединяться
мяу-дизайн
Ох. В это сложно поверить, но после пяти лет вялого доделывания уже упоминаемого тут скрипта кастомизации скругления углов в Иллюстраторе я его всё же доделал. Предыстория: https://news.1rj.ru/str/meow_design/451 Графоманский занудный разбор вопроса, подробности, инструкция…
This media is not supported in your browser
VIEW IN TELEGRAM
Спустя год после релиза дотянулись ручки сделать нормально и завести гитхаб-репозиторий для скрипта кастомизации скругления углов в Иллюстраторе: https://github.com/kefiijrw/Round-Corners-Customization-for-Illustrator

Еще я его немного обновил, добавив в панель настроек чекбокс сокрытия профиля кривизны.
Кстати, недавно обнаружил, что ничто не мешает сделать уродливое скругление и у экрана. Вот углы дешевого андроид-смартфона и айфона:
Хотя с почти двукратной плотностью пикселей (247 vs 457 dpi) сделать приятный разглаженный угол попроще, конечно.
Разбейте простенькое стеклышко, чтобы получить супероружие для финального босса — солидного стеклища. Пластиковая крышка еще и обточена фрезеровкой, чтобы легко ломалась по шву как плитка шоколада.
Несмотря на кажущуюся тупость — «разбейте стекло, чтобы получить разбиватель стекла» — такой вариант кажется всё же более адекватным, чем окошки в вагонах московского метро.

Я как-то ради интереса пытался просто приоткрыть эту крышку, скрывающую переключатель — это ужас, срывать пломбы и раскручивать проволоку так себе занятие при катастрофе. Шансы есть только если на адреналине перекусишь зубами проволоку вместе с крышкой.
Дизайн таких штук непрост, так как надо подружить казалось бы противоречивые требования «В случае пиздеца должна быть максимально доступной» и «В спокойное время должна максимально мешать случайному или хулиганскому задействованию».

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

Получаются две крайности: или мириться со сорванными стопкранами и украденными молотками во имя поддержания доступной безопасности, или обматывать всё опломбированной проволокой, смещая безопасность в сторону театра безопасности: «не беспокойся, аварийное открывание дверей есть, просто ты им не сможешь воспользоваться».

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

Дизайнер/бильдредактор Медузы под гнетом профдеформации, вероятно, считает очевидным для всех, что это имя фотографа.

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

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