О канале
Большинство каналов про дизайн заточены на инспирейшн и пестрят одними и теми же ссылками на выстрелившие креативные проекты. При этом очень мало информации о том как делать красивые интерфейсы на практике каждый день и организовывать свою рабочую среду. Этот канал расскажет о практической части работы дизайнера — как выбрать лейаут, как организовать систему символов или компонентов, как определиться с отступами, в общем повседневные дизайн-хаки.
Об авторе
Филипп Лях @filipp_lyakh — дизайнер интерфейсов с 2010 года. Был продуктовым дизайнером в retailCRM, сейчас работаю в студии Scada. В последние годы я занимался дизайном интерфейсов интернет-банков, crm-систем, букмекерских порталов, финансовых сайтов, интернет-магазинов, гео-локационных сервисов, систем сбора телеметрии, инвест-приложений, крипто-бирж и еще множеством других вещей. Этот канал сделан с целью формализовать полученные за этот период знания и рассказать о них другим.
Большинство каналов про дизайн заточены на инспирейшн и пестрят одними и теми же ссылками на выстрелившие креативные проекты. При этом очень мало информации о том как делать красивые интерфейсы на практике каждый день и организовывать свою рабочую среду. Этот канал расскажет о практической части работы дизайнера — как выбрать лейаут, как организовать систему символов или компонентов, как определиться с отступами, в общем повседневные дизайн-хаки.
Об авторе
Филипп Лях @filipp_lyakh — дизайнер интерфейсов с 2010 года. Был продуктовым дизайнером в retailCRM, сейчас работаю в студии Scada. В последние годы я занимался дизайном интерфейсов интернет-банков, crm-систем, букмекерских порталов, финансовых сайтов, интернет-магазинов, гео-локационных сервисов, систем сбора телеметрии, инвест-приложений, крипто-бирж и еще множеством других вещей. Этот канал сделан с целью формализовать полученные за этот период знания и рассказать о них другим.
Полупрозрачные элементы
Бывает заходишь на какой-то сайт, и видишь что там применяются светло-серые разделители и различные заливки областей — белый, серый, возможно цветной. И разделители хорошо выглядят на белом, а на сером почти не видны, или явно выглядят инородно на цветном фоне. Пример, быстро состряпанный на коленке (см. разделители на желтом фоне):
Бывает заходишь на какой-то сайт, и видишь что там применяются светло-серые разделители и различные заливки областей — белый, серый, возможно цветной. И разделители хорошо выглядят на белом, а на сером почти не видны, или явно выглядят инородно на цветном фоне. Пример, быстро состряпанный на коленке (см. разделители на желтом фоне):
Что же делать?
Можно прорабатывать каждый случай отдельно, но на большом проекте это сожрет кучу времени, к тому же это несистемно. Удобнее в таких элементах применять прозрачность. Если тот же разделитель сделать не сплошным серым, а, например, черным с непрозрачностью 85%, то он автоматически на белом фоне будет выглядеть светлее, на сером чуть темнее и будет иметь оттенок фона на цветном фоне:
Можно прорабатывать каждый случай отдельно, но на большом проекте это сожрет кучу времени, к тому же это несистемно. Удобнее в таких элементах применять прозрачность. Если тот же разделитель сделать не сплошным серым, а, например, черным с непрозрачностью 85%, то он автоматически на белом фоне будет выглядеть светлее, на сером чуть темнее и будет иметь оттенок фона на цветном фоне:
Это может показаться несущественным для сайта на несколько страниц, но когда у тебя проект на 200 экранов, начинаешь ценить возможность не следить за каждым отдельным случаем применения элемента.
Используйте этот способ также в случае иконок, подложек и любых других элементов, которые могут быть на неравномерном фоне.
Используйте этот способ также в случае иконок, подложек и любых других элементов, которые могут быть на неравномерном фоне.
Важный момент. Аккуратно применяйте эту логику к шрифтам. Хак хорошо работает с векторными элементами и элементами верстки, но браузеры хуже рендерят полупрозрачные тексты — на неретиновых экранах на винде сглаживание полупрозрачного шрифта заметно хуже сплошного. Ниже скриншот из виндового хрома — в первом случае сплошной светло-серый, во втором аналогичный ему черный с прозрачностью. Как видно, эти два варианта заметно отличаются.
Оригинал картинки без артефактов: https://yadi.sk/i/7qEQv3g9ncqgrA
Оригинал картинки без артефактов: https://yadi.sk/i/7qEQv3g9ncqgrA
Yandex.Disk
[email protected]
View and download from Yandex.Disk
Способ организации разделителей в файле
В прошлом посте я рассказал, что лучше применять полупрозрачные разделители. В этом я напишу, как я их организую в Скетче и в Фигме.
В Скетче очень удобно завести группу стилей для разделителей, чтобы значения цвета были одинаковыми для всего интерфейса. При этом сам бордер мы задаем параметром Inner shadow — это удобно, т.к. прямоугольник с этим стилем является одновременно и бордером и отступом до него. То есть если нам нужен бордер на расстоянии 32px от элемента выше, то мы просто делаем прямоугольник с высотой 32px и применяем к нему стиль border / bottom.
Так вот, обычно я создаю группу для четырех бордеров — сверху, снизу, слева и справа. Структура этой группы показана на скриншоте ниже (black-10 обозначает, что это черный с непрозрачностью 10%)
В прошлом посте я рассказал, что лучше применять полупрозрачные разделители. В этом я напишу, как я их организую в Скетче и в Фигме.
В Скетче очень удобно завести группу стилей для разделителей, чтобы значения цвета были одинаковыми для всего интерфейса. При этом сам бордер мы задаем параметром Inner shadow — это удобно, т.к. прямоугольник с этим стилем является одновременно и бордером и отступом до него. То есть если нам нужен бордер на расстоянии 32px от элемента выше, то мы просто делаем прямоугольник с высотой 32px и применяем к нему стиль border / bottom.
Так вот, обычно я создаю группу для четырех бордеров — сверху, снизу, слева и справа. Структура этой группы показана на скриншоте ниже (black-10 обозначает, что это черный с непрозрачностью 10%)