О канале

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

Об авторе

Филипп Лях @filipp_lyakh — дизайнер интерфейсов с 2010 года. Был продуктовым дизайнером в retailCRM, сейчас работаю в студии Scada. В последние годы я занимался дизайном интерфейсов интернет-банков, crm-систем, букмекерских порталов, финансовых сайтов, интернет-магазинов, гео-локационных сервисов, систем сбора телеметрии, инвест-приложений, крипто-бирж и еще множеством других вещей. Этот канал сделан с целью формализовать полученные за этот период знания и рассказать о них другим.

Для разминки начнем с простого

Полупрозрачные элементы

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

Что же делать?
Можно прорабатывать каждый случай отдельно, но на большом проекте это сожрет кучу времени, к тому же это несистемно. Удобнее в таких элементах применять прозрачность. Если тот же разделитель сделать не сплошным серым, а, например, черным с непрозрачностью 85%, то он автоматически на белом фоне будет выглядеть светлее, на сером чуть темнее и будет иметь оттенок фона на цветном фоне:

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

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

Важный момент. Аккуратно применяйте эту логику к шрифтам. Хак хорошо работает с векторными элементами и элементами верстки, но браузеры хуже рендерят полупрозрачные тексты — на неретиновых экранах на винде сглаживание полупрозрачного шрифта заметно хуже сплошного. Ниже скриншот из виндового хрома — в первом случае сплошной светло-серый, во втором аналогичный ему черный с прозрачностью. Как видно, эти два варианта заметно отличаются.
Оригинал картинки без артефактов: https://yadi.sk/i/7qEQv3g9ncqgrA

Способ организации разделителей в файле

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

В Скетче очень удобно завести группу стилей для разделителей, чтобы значения цвета были одинаковыми для всего интерфейса. При этом сам бордер мы задаем параметром Inner shadow — это удобно, т.к. прямоугольник с этим стилем является одновременно и бордером и отступом до него. То есть если нам нужен бордер на расстоянии 32px от элемента выше, то мы просто делаем прямоугольник с высотой 32px и применяем к нему стиль border / bottom.

Так вот, обычно я создаю группу для четырех бордеров — сверху, снизу, слева и справа. Структура этой группы показана на скриншоте ниже (black-10 обозначает, что это черный с непрозрачностью 10%)

В самом стиле есть только одна внутренняя тень с отступом в 1px в нужную сторону, нулевым размытием и полупрозрачным цветом, все остальные свойства слоя мы убиваем: