MockuptopВсе руководства

Рамка или чистый скриншот: решайте по месту

Универсального ответа нет, и тот, кто его отстаивает, обычно обобщает из одного места размещения. Рамка добавляет контекст и стоит площади. Что перевесит, целиком зависит от того, где и в каком размере увидят изображение.

Рамка выигрывает там, где нет контекста

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

Чистый скриншот выигрывает, когда мало места или контекст известен

В документации, в блоке функций посреди страницы, в заметках о релизе, в письме читатель и так знает, что это ваше приложение. Рамка там просто уменьшает интерфейс процентов на тридцать без прироста информации. То же с любым мелко показанным изображением: примерно ниже 400 пикселей ширины рамка съедает содержимое. Лучше кадрировать нужную часть интерфейса и позволить странице дать контекст.

Промежуточный вариант: обрезанные рамки

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

Частые вопросы

Скриншоты в рамке конвертируют лучше?

Обычно да, потому что карусель мелкая, а незнакомому посетителю нужен контекст. Тестируйте, но там рамка — разумное значение по умолчанию.

Нужны ли рамки скриншотам в документации?

Как правило нет. Контекст известен, а нужен максимум деталей интерфейса.

Можно ли смешивать с рамкой и без?

Держите каждый набор единообразным. Смешение внутри карусели выглядит как сборная солянка, а не как дизайн.

Сделайте это прямо в браузере. Положите скриншот на 3D-устройство, подвигайте камеру, выгрузите кадр или видео. Без установки и без аккаунта.

Открыть 3D-редактор Открыть фоторедактор
Язык: EN TR DE ES FR IT PT AR RU JA KO