Desktop Mockup
Разместите скриншоты вашего сайта или прототипа на экране 3D-ноутбука. Посетители прокручивают страницу внутри экрана и переключаются между скриншотами стрелками на клавиатуре или через навигационный док.
Создать Desktop MockupЧто такое Desktop Mockup?
Проект «Desktop Mockup» показывает ваши скриншоты на 3D-ноутбуке с уже открытой крышкой. Одно изображение — один экран. Высокие изображения не сжимаются, чтобы поместиться: посетитель прокручивает их внутри дисплея так же, как прокручивал бы настоящую страницу. Пять скриншотов дают пять экранов, которые посетитель проходит по одному.
- Один высокий скриншот на экран, прокручиваемый внутри дисплея ноутбука
- Колесо мыши, трекпад или перетаскивание по устройству прокручивают текущий экран
- Стрелки на клавиатуре и навигационный док переключают экраны
- Перетащите фон, чтобы повернуть ноутбук, и включите кнопки зума в доке, чтобы прочитать мелкий текст
- Hotspots можно поставить в любой точке скриншота, и оба mockup-проекта рисуют их на дисплее
- Счётчик экранов, который показывает и название экрана, плюс привычный док со ссылками
- Работает на телефонах и планшетах, где перетаскивание заменяет колесо мыши
Лучшие сценарии использования
Лендинги
Покажите лендинг целиком — так, как он прокручивается в жизни, не отправляя никого на живой адрес
Туры по продукту
Одна функция на экран, в том порядке, в котором вы хотите их показать
Ревью прототипов
Отправьте клиенту экспорт mockup-проектов и дайте пролистать весь сценарий
Презентации клиентам
Покажите сайт, который вы сделали, внутри коммерческого предложения или кейса
Портфолио веб-дизайна
Соберите сайты, которые вы спроектировали, по одному экрану на каждый
Скриншоты приложений
Покажите, как выглядит веб-приложение, не требуя регистрации
Создание Desktop Mockup
Шаг 1: Загрузите скриншоты
В редакторе проекта откройте вкладку Контент и добавьте по одному изображению на экран:
- Любой формат изображения, который открывает браузер, включая JPG, PNG и WebP. PDF тоже подойдёт: каждая страница становится отдельным экраном
- Одно изображение — один экран, поэтому снимок страницы целиком загружается как есть, без обрезки
- Загружайте несколько файлов сразу или импортируйте один по URL
- У PDF есть предел — 200 страниц и 50 МБ на файл, а ссылки внутри него становятся hotspots на том экране, где они были
- Скриншоты автоматически оптимизируются для быстрой загрузки
Снимайте на десктопной ширине, около 1440px, и оставляйте изображение таким же высоким, как страница. Ширина подгоняется под дисплей, а высота — это то, что прокручивает посетитель.
Шаг 2: Расставьте и назовите экраны
Порядок во вкладке Контент — это порядок, в котором их проходят посетители:
- Перетащите экран, чтобы переместить его
- Дайте каждому экрану название — оно показывается в счётчике, так что счётчик придётся оставить включённым, иначе названия не видно
- Удалите экран, который больше не нужен, или очистите сразу все из меню «Контент»
- Добавляйте новые экраны в любое время
Шаг 3: Настройте экран и прокрутку
Во вкладке Настройки задайте, как выглядит дисплей и как он двигается:
- Цвет устройства: тонирует корпус ноутбука, а белый — это модель ровно такой, какой её собрали
- Фон экрана: цвет за вашим скриншотом
- Яркость, контраст и насыщенность экрана: все три начинаются с 1 — это изображение ровно таким, каким вы его загрузили
- Счётчик экранов: показывать или скрыть позицию и название
- Скорость и плавность прокрутки: насколько далеко уходит контент за одно движение колеса и как быстро он останавливается
Шаг 4: Добавьте hotspots
Разместите кликабельные точки на скриншоте, чтобы открыть ссылку, перейти к другому экрану или показать заметку. Hotspot привязан к изображению целиком, а не к видимой части, поэтому он остаётся на том участке страницы, которому принадлежит, пока посетитель прокручивает. Оба mockup-проекта рисуют их на дисплее, и они остаются нажимаемыми на телефоне.
Настройки Desktop Mockup
У дисплея и прокрутки свои разделы во вкладке Настройки. Фон, док со ссылками, зум и вращение используют те же панели, что и остальные типы проектов.
Цвет устройства
Тонирует корпус ноутбука. Начинается с чистого белого — это модель ровно такой, какой её собрали, — а любой другой цвет тонирует это покрытие, а не перекрашивает его.
Фон экрана
Цвет, которым закрашивается область за скриншотом. Он же заполняет пространство сверху и снизу, если изображение короче дисплея, — поэтому берите оттенок, близкий к фону вашей страницы.
Яркость экрана
Насколько дисплей выглядит включённым, от 0,2 до 1,6. Начинается с 1 — это ровно те пиксели, которые вы загрузили: ниже экран гаснет, выше выбеливается, как телефон на максимальной яркости.
Контраст экрана
Применяется к скриншоту при отрисовке, от 0,5 до 2, начиная с 1 — изображение без изменений. Поднимите чуть выше, когда плоский дизайн теряет границы на маленьком дисплее.
Насыщенность экрана
То же самое для цвета, от 0 до 2, начиная с 1. На нуле скриншот становится чёрно-белым — быстрый способ показать wireframe, не экспортируя его.
Счётчик экранов
Небольшая плашка, где сначала идёт название экрана, а за ним позиция — например, Цены · 2 / 5, — или просто 2 / 5, если названия нет. Названия экранов показываются именно здесь, поэтому выключение скрывает и их — именно это нужно для одного скриншота.
Скорость прокрутки
Насколько далеко уходит контент за одно движение колеса. Уменьшите её для очень длинной страницы, чтобы посетитель мог остановиться там, где хочет.
Плавность прокрутки
Как быстро контент догоняет колесо. Низкие значения тормозят мягко, высокие реагируют мгновенно.
Фон сцены
Задник за ноутбуком: сплошной цвет, градиент, узор или ваше изображение.
Как перемещаются посетители
Здесь два независимых движения: контент двигается внутри экрана, а экраны сменяются по одному. Одно не запускает другое.
Прокрутка внутри экрана
Колесо, трекпад или перетаскивание, начатое на ноутбуке, двигают текущий скриншот вверх и вниз. Стрелки вверх и вниз, а также Page Up и Page Down делают то же самое.
Смена экрана
Стрелки влево и вправо переключают экраны, Home и End ведут к первому и последнему, в доке те же кнопки. Прокрутка до низа экрана не переводит на следующий, и каждый экран открывается сверху.
Поворот ноутбука
Перетаскивание, начатое на фоне, поворачивает устройство до 75 градусов влево и вправо и до 40 градусов вверх и вниз, а после отпускания оно возвращается фронтально. Перетаскивание, начатое на ноутбуке, прокручивает, а не поворачивает.
Зум
Кнопки зума приближают камеру — так посетитель читает мелкий текст на скриншоте. По умолчанию они выключены, пока вы не включите их на вкладке «Меню». Колесо мыши всегда прокручивает скриншот и никогда не приближает.
Чего он не делает
Часть этого сделана намеренно, часть ещё не построена. В любом случае лучше знать заранее, до записи демо:
- На этой странице только ноутбук. Для телефона создайте Mobile Mockup. Планшета пока нет.
- Крышка уже открыта — анимации открытия нет.
- Прокрутка до низа экрана не переводит на следующий. Смена экрана — всегда осознанное действие.
- На дисплее один экран за раз. Остальные вокруг не видны.
- Раздел «Экран» подкрашивает корпус ноутбука, но сама отделка запечена в модель.
Как сделать хороший Desktop Mockup
- Экспортируйте один снимок страницы целиком на экран, а не склеивайте куски
- Держите все скриншоты одной ширины, чтобы контент не менял размер между экранами
- Подберите фон экрана под фон вашей страницы, чтобы короткий скриншот не лежал на белой полосе
- Называйте экраны по тому, что на них, а не «Экран 1» и «Экран 2»
- Ставьте hotspots там, где посетитель нажал бы на настоящем сайте
- Снижайте скорость прокрутки для очень длинных страниц
- Проверьте на телефоне: ноутбук становится меньше, и мелкий текст может стать нечитаемым