Хорошие мокапы

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

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

Убрав фон, разместив интерфейс и дорисовав немного бликов, я получаю такую картинку:

И вроде бы уже нормально, можно публиковать, но что-то не дает покоя.

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

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

Получилось как-то так (не фонтан, но для моей задачи подходит):

И спустя 5 минут картинка становится такой:

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

В моём случае блики и заляпанность сделали картинку почти что реальной фотографией (будь у меня больше навыков и усидчивости, я бы довел бы дело до полной идентичности с фото, но решил остановиться на этом этапе).

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

А в ситуации с лендингами эппл, например, они бросятся в глаза. К тому же, сложно предположить, что для презентации ноутбука возьмут устройство, которое активно использовалось инженерами компании. Но они не забывают про блики на экране (особенно от клавиатуры).

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

Можно заметить, что только на одной остались блики (и те немного дорисованные), на остальных же они просто жестоко вырезаны.

Но если бы фотка изначально была правильной, например, такой:

То понадобилось бы 4 минуты (специально засек), чтобы сделать так (простите за качество, я не миллионер покупать каждую фотку):

А вот так это выглядит, когда ребята, делающие мокапы, вырезают блики:

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

В конце тут принято размещать телеграм канал, но у меня его нет.

#дизайн