Подозреваю, что не существует дизайнера, который не пытался спасти макет приемчиком «положу на фончик клевую фотку». Но коварство тут в том, что когда дело дойдет до подбора реальных материалов (с очищенным копирайтом и прочими требования от скучных людей, которые, кажется, зовут себя то ли «юристами», то ли «менеджерами»), такой же классной фотографии, вытягивающей макет в топ, может просто не оказаться. Ну то есть, размещая во весь фон страницы фоточку из подборки «National Geographic's Best Pictures of 2017», стоит помнить, что через месяц придется давать задание фотографу наснимать чего-то похожго, и результат будет отличаться. Вся надежда на Unsplash.

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

Ну то есть сколько проживет в шикарном состоянии эта страница после запуска проекта без Бильда От Боженьки?

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

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

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

Снова Афиша Дейли. После всех этих капч материал справа внизу — просто фото и просто текст — блаженство для глаз.

Самое забавное, что фотографией на фоне обычно пытаются усилить впечатление от текста, акцентировать внимание на блоке. Но неудачно подобранная фотография превращается в шум, который топит надпись, а надпись без фотофона, наоборот, оказывается самой заметной благодаря чистоте контраста. Как на примере из thequestion.ru.

(The Question, конечно, просто клад для иллюстирования этой проблемы).

(У меня про них еще был скриншот про расчет длины строки и переносы в словах, но раз упомянул, то выкину картинку сейчас).

Интересно к задаче подошли в Яндекс.Дзене: из каждой фотографии алгоритмически создается подложка под текст с фейдами, размытиями и подбором фонового цвета. Хотя верхние строчки всё равно шумят.

Фейсбук по этому поводу придумал фоновые градиенты, заготовленные иллюстрированные фончики и прочие безопасные способы громко крикнуть в ленту, но онлайн-СМИ пока стесняются, а решения Яндекса не вытягивают технически.

Зеленый прямоугольник — уведомление на плашке. Синий прямоугольник — кнопка. Не перепутать.

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

Навигация в ТЦ «Ривьера». Дизайнер улетел в долину абстракций, метафор и кодирования (буквами, цветом, животными), стела превратилась в ребус. Я даже не уверен, перед цифрами стоит минус или тире для связи цифры с иконкой, чтобы теорию близости не поломать.

Классика: дизайн без учета всех вариантов возможного наполнения. «Константинопольский» всё поломал.

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

По этой же причине noscript веб-страниц стоит размечать по принципу «От частного к общему» — сначала название конкретной страницы, и только потом — название раздела или сайта (хотя обычно они не нужны). Но это вроде все знают.

У дропбокса отступы корявые, из-за чего кажется, что переключалка включает какой-то режим Learn More, а не Dropbox sync. Еще у Learn More почему-то двойное подчеркивание.

Верхняя полоса на сайте last.fm автоматически считывается как поле поиска. Но на деле это шкала времени встроенного в шапку плеера, который без запущенной песни превращается в обычную горионтальную линию (как назло спущенную на условную линию набора), а поиск находится чуть ниже.

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

Чтобы вызвать доверие у посетителей, на сайте сервиса найма нянек-бебиситтеров решили зайти с козырей — поставить во весь первый экран видео с опрятными девочками (те самые бебиситтеры), рассказывающими о сервисе.

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