Создание макета сайта: что получает заказчик

Создание макета сайта — этап, на котором будущий сайт рисуют до программирования: какие в нём страницы и блоки, что написано в заголовках, где кнопки и формы, как всё выглядит на компьютере и телефоне. Заказчик видит сайт целиком и правит его, пока правка стоит дешевле всего — на картинке, а не в коде.

Речь о макете сайта, а не о макете для печати: полиграфию статья не разбирает.

Статья — для тех, кто готовится заказать сайт и будет согласовывать макет с исполнителем. Разберём, из чего он состоит, чем отличается от прототипа, дизайна и вёрстки, как его делают и что проверить перед утверждением. Примеры — из нашей работы над сайтами в Diple.

Что такое макет сайта

Макет сайта — изображение будущего сайта, по которому его потом собирают в коде. В нём видно каждую страницу: порядок блоков, заголовки и тексты, кнопки, формы, картинки, цвета и шрифты. Сайт в макете ещё не работает: экраны можно пролистать и показать коллегам, но заявку через них не отправить.

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

На странице нашей услуги эти части так и названы: «Этап 1 · Прототип» и «Этап 2 · Дизайн». Прототип идёт раньше дизайна: сначала решаем, что сказать посетителю, потом — как это показать. Но работа над сайтом начинается не с них: до прототипа у нас идут исследование, структура и тексты.

Зачем нужен макет сайта заказчику

Макет нужен, чтобы решения о сайте принимались до того, как за них заплачено вёрсткой. Ближайшая аналогия — чертёж дома: перенести окно на бумаге проще, чем в готовой стене.

Что макет даёт заказчику:

• Видно, что получится. Вместо описания в брифе — экраны будущего сайта. Их можно сравнить с сайтами конкурентов и понять, чем ваш будет отличаться.
• Правки дешёвые. Поменять заголовок, порядок блоков или форму на макете — одна правка дизайнера. После вёрстки та же правка проходит дизайн, код и проверку заново.
• Есть что обсудить внутри компании. Макет показывают руководителю и отделу продаж, распечатывают к совещанию. Все видят одно и то же, а не своё представление о сайте. Маркетологу проще защитить выбор подрядчика перед руководителем: разговор идёт о конкретных экранах, а не об обещаниях.
• Есть что принять. Утверждённый макет — договорённость с исполнителем: верстают то, что вы утвердили. Спор «мы так не договаривались» решает картинка, а не память.

Без этого шага разработка дизайна для сайта идёт сразу в коде. Тогда заказчик впервые видит результат, когда каждая правка уже означает переделку вёрстки.

Макет, прототип, дизайн и вёрстка: в чём разница

Исполнители называют эти слова вперемешку, поэтому сначала договоримся о значениях. Таблица показывает, что за каждым словом стоит и что вы получаете на руки.

Создание дизайна сайта начинается, когда прототип утверждён. Дизайнер уже не решает, что написать на экране, — он решает, как это показать.

Вёрстка сайта по макету — последний шаг: верстальщик переносит утверждённое изображение в код. Наши сайты делаются на статике — страницах, написанных кодом: HTML, JavaScript, при необходимости React. Макет у нас передаётся в вёрстку кодом, а не в конструктор.

Из чего состоит макет сайта

Макет складывается из страниц, а каждая страница — из блоков. Список страниц задаёт структура сайта: её собирают раньше, и в макет попадает каждая страница из неё.

Что входит в готовый макет:

• Страницы — главная, разделы, каталог, карточка товара или услуги, контакты; на каждый тип — свой экран.
• Блоки в порядке показа — первый экран, аргументы, примеры работ, форма заявки.
• Заголовки и тексты — настоящие, а не заглушки «текст будет позже»: у нас тексты пишут до прототипа.
• Кнопки, формы, меню и подвал — с подписями и полями, которые увидит посетитель.
• Цвета, шрифты и изображения — во второй, цветной части.
• Версия для телефона — отдельные экраны, а не только вид на компьютере.
• Состояния элементов — как выглядит кнопка при наведении, форма с ошибкой, пустой результат поиска.
• Набор элементов для верстальщика — кнопки, поля и карточки одного вида, собранные на одном листе.

Если какой-то части нет, её решат при вёрстке — уже без вас и дороже.

Этапы создания макета сайта

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

• Исследование. Прототип у нас начинается не с шаблона, а с исследования из трёх частей: интервью с отделом продаж, анализ конкурентов, разбор поисковых запросов. Так в прототипе появляются заголовки, по которым ищет закупщик.
• Прототип сайта. Схема каждой страницы с настоящими заголовками. Пример — прототип для оптовой компании по полимерным трубам. Вместо заголовка «Каталог продукции» там стоит «Производим все виды полимерных труб диаметром от 16 до 1600 мм». Закупщик выбирает трубу по виду и диаметру, и такой заголовок сразу говорит, есть ли нужный размер. На выходе — прототип, где каждый экран обоснован данными, а не вкусом.
• Дизайн. После утверждения прототипа дизайнер переводит схему в цвет и рисует версии для компьютера и телефона.
• Согласование. Заказчик смотрит сначала схему, потом цветную версию, собирает правки и утверждает. Что проверять, разобрано в следующем разделе.
• Передача в вёрстку. Утверждённый макет уходит верстальщику, и с этого момента меняют только детали.

Как согласовать макет сайта: что проверить

Согласуют по частям: сначала прототип — что и в каком порядке говорит сайт, потом цветную версию — как это выглядит. Так спор о цвете кнопки не мешает решить, нужна ли кнопка вообще.

Превью сайта заказчик получает у нас ссылкой: его открывают в браузере и показывают коллегам без пересылки файлов.

Правки идут кругами: заказчик присылает замечания, исполнитель вносит их и показывает макет снова. Чем полнее первый список, тем меньше кругов и тем быстрее макет уходит в вёрстку.

Что проверить перед утверждением макета:

• Нарисована каждая страница из структуры, ни одна не осталась «по аналогии».
• Заголовки написаны словами покупателя, а не «О компании» и «Наши преимущества».
• Тексты настоящие, без заглушек.
• Есть версия для телефона, и на ней видно кнопку заявки.
• Формы показаны целиком: какие поля и что человек увидит после отправки.
• Правки от всех, кто согласует, собраны в один список и переданы исполнителю одним человеком.
• Понятно, что в макет не вошло и будет отдельной задачей.

Когда список пройден, макет можно утверждать. Если хотите пройти эти шаги со своим проектом, начните со страницы разработка сайтов: там описан наш порядок работ и можно обсудить ваш сайт.

Разработка дизайна сайта под задачу бизнеса

Красивый сайт и сайт, который приносит заявки, — разные задачи. Работа под задачу бизнеса начинается с вопроса, что посетитель должен сделать на странице, и только потом доходит до цветов и шрифтов.

Индивидуальный дизайн сайта в этом смысле — не «ни на кого не похожий», а сделанный под ваших покупателей и ваш способ продавать. Создание дизайна для сайта по шаблону начинается с картинки, под задачу — с вопроса, что нужно покупателю.

Под заявку мы рисуем по четырём правилам:

• Один экран — одно действие. На экране не спорят три кнопки: посетитель видит, что сделать дальше.
• Понятное предложение. Из первого экрана ясно, что продают и кому.
• Аргументы по порядку. Доводы идут в той последовательности, в которой у покупателя возникают вопросы.
• Минимум шагов до заявки. Форма и кнопка не спрятаны за лишними экранами.

Результат видно по одной цифре — это конверсия сайта, доля посетителей, которые сделали нужное действие, например оставили заявку. Все четыре правила видны уже на макете, поэтому проверять их стоит до вёрстки.

Правила не помогают, если на экране не те слова. Заголовок «Каталог продукции» из примера с полимерными трубами в разделе об этапах не ответит закупщику и в аккуратном оформлении.

Вопросы и ответы

Чем макет отличается от прототипа?

Макет шире прототипа: прототип — его первая, чёрно-белая часть, а макет включает ещё и дизайн. Когда исполнитель говорит «покажем макет», уточните, что вы увидите — схему или готовую картинку: от этого зависит, какие правки уместны на встрече.

Чем занимается веб-дизайнер на этапе макета?

Веб-дизайнер на этапе макета решает, как сайт выглядит, а не что на нём написано: содержание экранов он берёт из утверждённого прототипа. Пока сайт верстают, дизайнер отвечает на вопросы верстальщика, чтобы веб дизайн сайта в коде совпал с картинкой.

Где в Казахстане можно разработать сайт?

Разработать сайт в Казахстане можно в Diple: как мы делаем сайты по этапам, описано на странице разработка сайтов.

Заключение

Макет сайта — способ увидеть будущий сайт и поправить его, пока правка ничего не ломает. Сначала прототип отвечает, что говорит каждая страница, потом цветная версия показывает, как это выглядит. Утверждать стоит по списку проверки, а не по общему впечатлению «нравится».

Обсудить свой сайт можно на странице разработка сайтов.