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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1111
7 комментариев

Классный пост! Всё по делу.

1
Ответить

Спасибо, Саш!

1
Ответить

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

Ответить

Беху знаю, а дрибббл что за тачка?

1
Ответить

Нормально!

Ответить

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

А для большей реалистичности даёшь растаявшую шоколадку на клавиатуре? )))

Ответить

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

Ответить