Макет в веб-дизайне выглядит как реалистичный прототип будущего сайта. 3 Он создан в графической программе, например Photoshop, и включает все блоки текста и изображений, кнопки, фоновые рисунки. 3 Единственное отличие в том, что в макете нет функционального наполнения: например, страница с товарами заполнена шаблонами описаний. 3

Некоторые этапы создания макета сайта:

1. Схематичный набросок. 1 Простейший вариант из блоков и линий, которые указывают на расположение элементов сайта и их размер. 1
2. Вайрфрейминг. 1 Дизайнер осуществляет визуализацию и определяет схему компонентов. 1 План составляется для всех экранов, указывает, где будут находиться логотип, формы обратной связи, карусели и другие объекты, прорисовывается сетка, выделяются зоны под контент. 1
3. Мокап. 1 Это 3D-модель, необходимая для демонстрации дизайна до воплощения в жизнь. 1 Например, с её помощью можно показать, как будущий сайт выглядит на разных устройствах. 1
4. Прототип. 1 Финишная версия макета с выстроенной логикой взаимодействия, зафиксированным расположением элементов. 1

Готовый макет включает шапку с логотипом и меню, основной блок с контентом, боковую панель и футер, в котором находятся контакты, социальные кнопки, полезные ссылки и т. д.. 4