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

2021-09-06T15:50:00.047Z

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

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

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

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

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

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

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

Спасибо прекрасной Кире за её красивые пальчики.

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

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

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

Но стоит помнить про контекст и баланс

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

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

И получается, что для того, чтобы сделать лучше, нужно на каждом этапе сделать меньше

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

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

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

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

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

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

@tugolukovskiy

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

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

Но стоит помнить про контекст и баланс

И получается, что для того, чтобы сделать лучше, нужно на каждом этапе сделать меньше