Даня из Лабпикс

Ребят, у меня получилось восстановить основной телеграм-канал вот тут @fromlabpics

Буду постить соответственно туды ☺️

Оливье осилено, снова работаем 🙂

С Новым годом 🥰

Работаю над образовательным контентом про красивый дизайн, уже полгода как, в котором описываются супер-необычные темы в визуале. Например, okLCH-палитры, работа с эмоциями, связка внутри дизайн-системы отступов и скруглений как пропорцию и тд... 🥵

Пока готова только текстовая теория с анимациями, но хочется разбавить стримами и интерактивом

Я хочу обкатать как раз таки эту текстовую теорию и получить фидбек, чего не хватает или сложно объяснено, чтобы сделать всё еще круче

Готов открыть эту красоту пяти людям за символические 5 тысяч, так что отпишите, а я уж завалю вопросами 😘

Нам очень нужны несколько миддл ux/ui и 3д-художник. Прям очень-очень

Отпишите мне с портфолио пожалста 🙏

Доллар спереди или сзади? По идее, спереди, так ведь в сериалах пишут всегда... И да, и нет.

Исконное написание — доллар спереди, без пробела, тысячи отделены запятой, а центы точкой. С рублями же иначе, тысячи отделены пробелом, копейки запятой, потом пробел и знак ₽.

При этом при локализации понятность становится важнее традиций, из-за культурных различий сканирования.

Так, если американец увидит цену в рублях, то ему будет когнитивно проще воспринять "₽10,000.00", хоть это и кажется странным, "10 000,00 $" не вызывает у нас диссонанса и считывается нативно.

Уместно и вообще отказываться от знака валюты, если валюта очевидна. Так не будет косвенной ассоциации с денежными затратами. Например, когда в оффлайне продается повседневный товар, валюту опускают или заменяют на ".-", наверное, это показывает отсутствие копеек, но немного грязнит объект.

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

Часто вижу споры по поводу того, нужна сетка или не нужна. Хоть сам ей не пользуюсь, этот канал нужен, чтобы добиться именно понимания сути. Суть сетки или направляющих — показать ту самую "силовую линию"

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

Всё просто: в таком случае десятки находятся под десятками, сотни под сотнями и так далее. Каждый разряд формирует свою "силовую линию" и снижает когнитивную нагрузку при сканировании. Если делать по левой стороне, то будет "лесенка" в рязрядах, с которой сложно разобраться на интуитивном уровне; с правой — будто считаем в столбик

Говоря именно о сетке, она должна помогать, а не мешать, выравнивать, а не быть основой концепции, как правило. Это просто один из методов добиться важнейшего параметра хорошего дизайна — предсказуемости

У каждого ведущего дизайнера, обремененного отбором людей в команду, есть свой абстрактный чек-лист, по которому можно определить уровень кандидата. Для кого-то это понимание ресерчей, для кого-то — знание UX-эвристик наизусть.

Лично я, упоротый на визуале, сразу обращаю внимание на работу с воздухом. С определенным опытом приходит понимание, что "пусто" — огонь, он очень полезен, но обжечься легко.

Мне нравится метафора с ножками табуретки: достаточно хотя бы 3 опоры, чтобы "удержать" плоскость (сделать композицию устойчивой), а "разделять ножки" можно как раз через воздух. Как и говорил в прошлых постах, воздух — просто более чистенький сепаратор.

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

Опыт — взгляд на одну вещь под разными углами.

Насчет этого есть один короткий диалог про цвет, который произошел лет 5 назад. Я работал в команде с 3D-артистом Сашей, и он привык работать пипеткой и брать цвета "на глаз". При этом мне буквально дискомфортно не "математизировать": надо, чтобы всё делилось на 10 или подчинялось какому-нибудь другому "правилу окр-щика". И, думаю, для многих это жиза, хоть и Саша де-факто был прав

Есть и другая ситуация: я залип на книжку о дизайне в Читай-городе и узнал, что некоторые дизайнеры подбирают шрифты ОТ ИХ НАЗВАНИЯ. Это звучит ужасно, но обе ситуации возникают исключительно от страха и желания рационализировать то, что априори невозможно/бессмысленно рационализировать

Думаю, что имеет место как "интерфейс по сеточке", так и "лютейший артхаус", главное — выразительность, консистентность и уверенность в собственном решении. Противно смотреть, когда работа скучная или "ни туда ни сюда". Это ж не ЕГЭ, чтоб бояться ошибиться

Немного бесполезных деталей о дизайне

В поле ввода цвета можно вносить hex-код цвета в формате #RRGGBB. Это понятно и логично.

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

А если дописать еще 2 символа к шестизначному коду, то они будут означать 16-битную запись прозрачности. Имеет больше смысла, потому что внутрь дизайн-системы можно аккуратно ввести работу с опасити буквально через hex-коды. Например, #00000080 будет значить "Черный с 50% прозрачности".

Пользуйтесь! 💋

Решил наваливать базу еще в инсте, можете подписаться, @danyafromlab, а я пока перешлю постик оттуда, а с вас мнение, потому что вопрос щепетильный!

В своё время для меня была большим открытием оптическая компенсация — то, когда "на глаз" лучше, чем под линейку

И ещё большим открытием стала именно цветовая компенсация, то, когда одинаковый цвет кажется разным в разных контекстах. Плюс об этом нигде не было расписано в далёком ~2020, поэтому я начал выводить для себя чёткие правила такого поведения.

Во-первых, холодные и тёплые цвета ведут себя по-разному. Синий выглядит темнее жёлтого, при этом синяя линяя в 1 пиксель кажется почти чёрной, а жёлтая — белой. То есть важно, сколько площади занято цветом.

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

Если не знать магию, все кажется физикой 🤫

Когда делал хедер, появилась мысль, вопреки всемирно известной теореме "автолейаут пизже фреймов", что использовать последние — нормально. Просто все зависит от контекста.

Бывает, чтобы скомпоновать композицию, мы просто распихиваем всё по углам: логотип слева, навигацию по центру, корзину справа; получается норм. Но Auto Layout с отступами "Auto" просто уравнивает margins и та самая "навигация по центру" съезжает

Спасает либо Фрейм, либо Ignore Auto Layout, чтобы расположить контент по абсолютным значениям (Relative > Absolute). Тогда мы жёстко фиксируем правило, например, "center, center" и макет становится чище

Есть ещё нетривиальные Left-Right (Top-Bottom для вертикали) и Scale. В первом случае, элемент будет прижиматься к сторонам при растяжении фрейма (будто паттерн или заливка), а во втором, пропорциональный скейлинг, мастхев для иконок

Показалось, что всем всё равно на эти функции, а штука полезная же 🤌

Гулял во дворе и увидел такую табличку, решил очередной раз порассуждать насчёт группировки и контекстов

99% случаев решаются именно через воздух, чтобы не создавать лишний мусор и не обломаться с логикой (как в случае с разделителем на скрине)

Дело в том, что разделитель нужен только в 2 случаях:
1) Чтобы верхнеуровнево разделить группы элементов (как бы основательно)
2) Чтобы разделить, когда пространство в целом не позволяет (например мелкий виджет)

Самое страшное, что подобная табличка будет полезна лишь тогда, когда случится что-то критичное, и в этот момент человеку придется разбираться что имел ввиду дизайнер.

Снизу закинул нормальный вариант только с группировкой через отступы без херни

Дескуфизация в чистом виде

Я ж пересобираю основной lab.pics, смотрите как решили показывать хайлайт-проекты

По-моему, оч даже смотрибельно 🤌

Стала известна настоящая причина экономического кризиса:

После каждого редизайна в Фигме я чувствую себя жертвой газлайтинга

Пришлось минут 5 потупить чтобы найти constraints, жесть

Я теперь так сказать ноукод разработчик промпт инженер 😃

Наглым образом заставили сделать промо для лендосов, а я и сделал

Воскресный дашбординг 🍸