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

публикует поучительные картинки про дизайн и пытается не упомянуть свой армейский дневник @kefiijrw
Download Telegram
Все эти приемы слабые.

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

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

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

Это если взять Афишу Дейли и отключить у нее затемнения:
А это уже Медиазона, причем фоновая фотография уже была затемнена ради графики поверх:
Чтобы разобраться, как можно улучшить ситуацию, изучим под зумом место соприкосновения текста с фоном на оригинальной картинке и на версии с локальным затемнением ака дропшедоу ака тенюха:
Тень пытается уменьшить пестроту фона, закрасив его возле букв темной краской. Но тут две проблемы.

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

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

Окей, тогда кажется логичным изменить цвет тени на самый темный оттенок фоновой картинки в окрестностях текста. Тогда сохранится и палитра, и темные фрагменты фона не будут темнеть:
Гораздо, гораздо, гораздо лучше. Отзумимся:
Тут уже видны проблемы этого решения: оно локально. Мы подобрали цвет тени по фрагменту возле одного слова, но возле другого слова может быть уже совсем другая палитра, другая яркость фона и другой «самый темный оттенок в окрестности».

Даже если установить у тени режим наложения Darken, то всё равно красная тень у залезшего на правую зеленую часть картинки слова смотрится неуместно: