Полупрозрачность для эффективного UI-дизайна
Дизайнеры из Злых Марсиан делятся подходом, который позволяет упростить разработку дизайна для проектов. Правда, заголовок в оригинальной статье супер-жёлтый: «Вау, opacity! Полное руководство по этому герою эффективного UI-дизайна». Почитал статью, а полного руководства и конкретных рецептов так и не нашёл. Но тем не менее интересные мысли в статье есть.
1. Для начала, имея базовый цвет и играясь с его прозрачностью, можно сразу задать hover, focus и прочие состояния элементов.
2. Мелкие линии, бордеры и прочие разделители лучше делать полупрозрачными. Сам часто сталкивался с тем, что при наложении на тёмную тему внезапно разделитель либо пропадает, либо слишком яркий, либо некрасивый. И прозрачность действительно помогала сделать хорошо.
3. Если создавать элементы на странице разными вариациями прозрачности белого и чёрного, то поверх какого-то базового цвета можно легко выстроить вполне себе безграничный для темизации интерфейс.
4. С доступностью и контрастностью тоже всё хорошо, если следить за тем, что на что накладывается. В статье есть примеры с расчётом WCAG/APCA.
5. Если полупрозрачные элементы в интерфейсе начинают накладываться друг на друга, то могут случаться казусы. За ними нужно следить, верстать уже будет немножко сложнее, надо присматриваться к каждому пикселю наложения.
В статье в конце есть верное замечание, что такое подход хорош в первую очередь тогда, когда нужно быстро что-то запустить. Один раз придумал математику наложения полупрозрачных поверхностей — и побежали за деньгами от инвесторов быстрыми дизайнами. Но всё-таки богатые и приятные интерфейсы гораздо сложнее, там нужно уметь совмещать много разных цветов, иногда в самых неожиданных комбинациях, а тут прозрачность может сыграть с вами злую шутку (зелёная и красная кнопка внезапно смешаются — и ой, шоколадное мороженое).
https://evilmartians.com/chronicles/woah-opacity-a-full-guide-to-this-badass-hero-of-efficient-ui-design
Дизайнеры из Злых Марсиан делятся подходом, который позволяет упростить разработку дизайна для проектов. Правда, заголовок в оригинальной статье супер-жёлтый: «Вау, opacity! Полное руководство по этому герою эффективного UI-дизайна». Почитал статью, а полного руководства и конкретных рецептов так и не нашёл. Но тем не менее интересные мысли в статье есть.
1. Для начала, имея базовый цвет и играясь с его прозрачностью, можно сразу задать hover, focus и прочие состояния элементов.
2. Мелкие линии, бордеры и прочие разделители лучше делать полупрозрачными. Сам часто сталкивался с тем, что при наложении на тёмную тему внезапно разделитель либо пропадает, либо слишком яркий, либо некрасивый. И прозрачность действительно помогала сделать хорошо.
3. Если создавать элементы на странице разными вариациями прозрачности белого и чёрного, то поверх какого-то базового цвета можно легко выстроить вполне себе безграничный для темизации интерфейс.
4. С доступностью и контрастностью тоже всё хорошо, если следить за тем, что на что накладывается. В статье есть примеры с расчётом WCAG/APCA.
5. Если полупрозрачные элементы в интерфейсе начинают накладываться друг на друга, то могут случаться казусы. За ними нужно следить, верстать уже будет немножко сложнее, надо присматриваться к каждому пикселю наложения.
В статье в конце есть верное замечание, что такое подход хорош в первую очередь тогда, когда нужно быстро что-то запустить. Один раз придумал математику наложения полупрозрачных поверхностей — и побежали за деньгами от инвесторов быстрыми дизайнами. Но всё-таки богатые и приятные интерфейсы гораздо сложнее, там нужно уметь совмещать много разных цветов, иногда в самых неожиданных комбинациях, а тут прозрачность может сыграть с вами злую шутку (зелёная и красная кнопка внезапно смешаются — и ой, шоколадное мороженое).
https://evilmartians.com/chronicles/woah-opacity-a-full-guide-to-this-badass-hero-of-efficient-ui-design