Макет

Определение: Макет — это визуальное представление будущей страницы или экрана, где уже показаны дизайн и оформление: шрифты, цвета, отступы, кнопки, изображения и то, как всё выглядит «как на готовом сайте» (но это ещё не код).

Зачем это нужно

• Понять, как будет выглядеть страница до вёрстки и разработки.
• Согласовать стиль: цвета, типографику, акценты, «настроение» бренда.
• Проверить читаемость и визуальную иерархию (что видно первым, что вторым).
• Убедиться, что элементы помещаются и выглядят аккуратно при реальном контенте.
• Снизить количество правок на этапе разработки: сначала правим картинку, потом код.
• Дать понятное ТЗ разработчику: что именно и как должно быть сверстано.

Пример

Пример кода:

Главная.psd/figma: Header (логотип+меню), Hero (H1+подзаголовок+кнопка), 3 преимущества, кейсы, форма, футер

Скриншот

Подпись к скриншоту: экран Figma с дизайн-макетом страницы: видны реальные цвета, шрифты, кнопки, изображения и сетка/направляющие

Частые ошибки

• Путать макет с wireframe: каркас — про структуру, макет — про внешний вид.
• Делать «красиво», но не думать про удобство и сценарий пользователя.
• Рисовать под короткие тексты-заглушки и ломать дизайн на реальном контенте.
• Не учитывать адаптивность: макет нужен хотя бы для ключевых разрешений (мобильный/десктоп).
• Не фиксировать состояния элементов: ховер кнопок, ошибки в формах, активные пункты меню.

Связанные термины

• Wireframe (каркас)
• Прототип
• UI-дизайн
• UX-дизайн
• Адаптивная верстка
• Дизайн-система

Наши услуги

• Создание корпоративных сайтов — проектируем структуру и рисуем макеты страниц под ваши задачи.
• Создание интернет-магазинов — делаем макеты каталога, карточки товара, корзины и оформления заказа.
• SEO-продвижение сайтов — подсказываем, как заложить в макет структуру под поиск и конверсию.