Мокапы ноутбуков, которые делают веб-приложение убедительным

Мокап ноутбука — привычный способ сказать, что продукт работает в браузере. Он работает, потому что рамка даёт контекст, которого нет у голого скриншота: масштаб, поверхность, точку зрения. Риск в том, что экран ноутбука широкий и низкий, поэтому интерфейс внутри превращается в кашу при уменьшении, если не спланировать съёмку заранее.

Снимайте разумный вьюпорт, а не весь монитор

Перед съёмкой поставьте браузеру размер вроде 1440 × 900. Кадр с ультраширокого монитора, втиснутый в рамку ноутбука, рисует текст вдвое мельче и превращает вашу вёрстку в текстуру. Если на такой ширине на странице много пустого горизонтального пространства, увеличьте масштаб страницы, а не уменьшайте рамку: мокап должен показывать то, что видит реальный посетитель, и в читаемом размере.

Угол и крышка: немного — уже достаточно

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

Заземлите тенью и остановитесь

Мягкая контактная тень под основанием — то, что не даёт ноутбуку висеть в воздухе. Держите её малоконтрастной и близко к корпусу; большое размытое пятно под устройством — визуальная подпись шаблона 2013 года. На тёмном фоне тонкая световая кромка по верхнему ребру заземляет лучше тени. Одно решение по свету, применённое ко всему набору, лучше света, настроенного покадрово.