Мокап в шапке лендинга

Шапка — место, где большинство решает, читать ли дальше. У мокапа там одна задача: доказать, что продукт существует, и показать, что это за продукт, в первую секунду, до того как прочитано хоть слово. Всё остальное — экспорт и размещение — вытекает из этого срока.

Кадрируйте внутрь устройства, а не уменьшайте его

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

Сначала статика, видео — если оно оправдывает вес

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

Согласуйте свет мокапа со страницей

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