Спланируйте страницу как wireframe с десктопным и мобильным видом, или поместите скриншот в рамку браузера, ноутбука или телефона. Экспорт в PNG или печать в PDF, бесплатно, в браузере.
Два инструмента в одном. Режим wireframe планирует страницу: выберите разделы, расставьте их по порядку и сравните десктопный и мобильный макет. Режим рамки устройства представляет готовый дизайн: загрузите скриншот и поместите его в окно браузера или рамку телефона для предложения клиенту или поста в соцсетях. Оба экспортируют PNG и оба работают в вашем браузере. Ваш скриншот никогда не загружается на сервер.
Режим wireframe: отметьте разделы, нужные вашей странице, переставляйте их вверх и вниз и переключайтесь между десктопом и мобильным. На мобильном колонки складываются так, как это делает большинство адаптивных сайтов.
Экспортируйте wireframe как PNG или распечатайте его и выберите «Сохранить как PDF».
Режим рамки устройства: загрузите скриншот PNG, JPG или WebP (до 15 МБ и 8000 пикселей по стороне). Выберите окно браузера или рамку телефона, цвет фона и, по желанию, надпись в адресной строке.
Изображение рисуется на canvas в вашем браузере и экспортируется как PNG с удвоенным разрешением экрана.
Когда структура готова, отправьте план разделов в конструктор We.Inc как стартовый бриф.
Начинайте с главного блока: скажите, что вы делаете и для кого, в одной строке.
Разместите доказательства (отзывы, логотипы, примеры) рядом с первой кнопкой, где люди решают, доверять ли вам.
Сначала проверьте мобильный wireframe. Большинство посетителей сайта малого бизнеса заходят с телефона.
Для рамок устройств делайте скриншот на той ширине, которую ожидает рамка: около 1440 пикселей для браузера и 390 для телефона.
Подписывайте макеты как макеты, когда делитесь ими, чтобы никто не принял план за живой сайт.
Частые вопросы
В чём разница между wireframe и макетом?
Wireframe — это серый план того, что где находится. Макет показывает готовый вид, часто внутри рамки устройства. Этот инструмент делает и то, и другое в отдельных режимах и подписывает каждый экспорт.
Мой скриншот загружается на сервер?
Нет. Скриншот читается и рисуется в вашем браузере. Ничего не отправляется в We.Inc или кому-либо ещё.
Можно снять скриншот живого сайта прямо здесь?
Нет. Съёмка другого сайта требует сервера с запущенным браузером, которого у этого бесплатного инструмента нет. Сделайте скриншот сами (инструменты разработчика в браузере умеют снимать всю страницу) и загрузите его.
Можно экспортировать PDF?
Да. Используйте Печать и выберите «Сохранить как PDF» в качестве принтера. Экспорт PNG даёт файл изображения.
Генератор макетов сайта бесплатный?
Да. Нет регистрации, водяных знаков или ограничений.
Планируйте на мобильном, показывайте на десктопе
Макеты, которые выглядят сбалансированными на широком экране, часто превращаются в длинную прокрутку на телефоне: три колонки функций становятся тремя блоками друг под другом, а таблица тарифов отодвигает форму контактов далеко вниз. Переключение wireframe на мобильный показывает это заранее, пока перемещение раздела — всё ещё один клик.
Рамки устройств нужны для другого конца работы: показать клиенту или аудитории в соцсетях, как выглядит готовая страница. Обычно достаточно простого скриншота в аккуратной рамке.