Азбука заказчика: чем верстка отличается от дизайна

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

Почему важно различать дизайн и верстку

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

Для заказчика это особенно важно в трех ситуациях:

• вы заказываете сайт у студии или фрилансера;
• вы принимаете работу по этапам;
• вы хотите понять, что можно сделать на конструкторе, а что требует ручной разработки.

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

Что такое дизайн сайта

Дизайн — это не просто «рисунок красивых кнопок». Это проектирование внешнего вида и логики интерфейса. Дизайнер решает, где будут расположены блоки, как пользователь увидит главное сообщение, как выделить кнопку, как показать цену, форму заявки или меню. Часто заказчики думают, что дизайнер просто «разукрашивает» страницу, но на деле он продумывает путь пользователя: куда тот посмотрит в первую секунду, как поведет взгляд, где кликнет. Это напрямую влияет на конверсию.

Что обычно входит в дизайн

• структура страниц (какие блоки и в каком порядке);
• расположение блоков (сетка, отступы, группировка);
• цветовая палитра (основные, акцентные, фоновые цвета);
• шрифты и их сочетания (размеры, начертания, читаемость);
• кнопки, иконки, отступы (микро-дизайн);
• адаптация под мобильные устройства на уровне макета (как блоки перестраиваются на узком экране);
• сценарии поведения элементов: что видно сразу, что появляется по наведению, что происходит при клике (hover-эффекты, выпадающие меню, модальные окна).

Что делает дизайнер на практике

Дизайнер собирает макет — обычно в Figma или похожем сервисе. Это визуальная схема будущего сайта. По ней заказчик видит:

• как будет выглядеть главная страница;
• какие блоки будут на странице услуги;
• как оформятся карточки товаров;
• где находится форма обратной связи;
• как сайт будет выглядеть на телефоне.

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

Что такое верстка сайта

Верстка — это превращение дизайна в код. Верстальщик берет макет и собирает его на HTML и CSS, а иногда добавляет JavaScript для интерактивности. На практике верстка — это не просто «перерисовка» макета в коде. Нужно учитывать, как элементы поведут себя при изменении размера экрана, как быстро загрузится страница, будут ли корректно работать формы и кнопки.

Если объяснить совсем просто:

• дизайн отвечает за то, как должно выглядеть;
• верстка отвечает за то, как это будет работать в браузере.

Что делает верстальщик

• создает структуру страницы (HTML-разметку — заголовки, абзацы, списки, контейнеры);
• размещает блоки в нужном порядке (используя CSS Flexbox или Grid);
• настраивает шрифты, цвета, отступы (в точности по макету);
• делает адаптацию под разные экраны (медиа-запросы, резиновые сетки);
• проверяет, чтобы сайт открывался в браузере без ошибок (кроссбраузерность);
• обеспечивает базовую интерактивность: меню, слайдеры, раскрывающиеся блоки, формы (часто с помощью JavaScript).

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

Что получает заказчик после верстки

На выходе появляется уже не картинка, а рабочая веб-страница. Ее можно открыть по ссылке, протестировать на телефоне, подключить к CMS, CRM, аналитике и другим сервисам. Это уже готовый «каркас» сайта, который можно наполнять контентом.

Главное отличие дизайна от верстки

Ниже — короткая таблица, которая помогает быстро уловить разницу.

Как выглядит процесс создания сайта по этапам

Чтобы не путаться, полезно смотреть на процесс целиком.

1. Сбор требований

На этом этапе определяют:

• цель сайта;
• кто его аудитория;
• какие страницы нужны;
• какие действия должен совершать пользователь;
• какие материалы уже есть: текст, фото, логотип, цены.

Часто заказчики пропускают этот этап, а потом оказывается, что контента нет, и верстальщику приходится заполнять страницы рыбой. Я всегда рекомендую собрать все материалы до старта работ.

2. Проектирование и дизайн

Затем создают структуру и внешний вид:

• рисуют прототип (часто просто черно-белую схему расположения блоков);
• утверждают расположение блоков;
• выбирают цвета, шрифты, стиль;
• делают макет для десктопа и мобильной версии.

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

3. Верстка

После утверждения макета его переносят в код:

• пишут HTML-разметку;
• оформляют стили в CSS;
• добавляют адаптивность;
• подключают анимации и поведение элементов.

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

4. Подключение функционала

Если сайт должен принимать заявки, фильтровать товары, показывать попапы или отправлять данные в CRM, это уже следующий уровень работы. Здесь может понадобиться CMS, серверная часть или дополнительные скрипты. Часто заказчики думают, что это тоже часть верстки, но на самом деле это уже программирование.

5. Тестирование и запуск

Проверяют:

• корректность отображения в браузерах;
• удобство на телефонах;
• скорость загрузки;
• работу форм и кнопок;
• наличие ошибок в адаптиве.

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

Простой пример: одностраничный сайт для услуг

Представим, что вам нужен сайт для мастера по ремонту.

Что делает дизайнер

• продумывает структуру страницы;
• решает, где разместить заголовок, преимущества, цены и форму заявки;
• выбирает визуальный стиль;
• показывает, как будет выглядеть страница на смартфоне.

Что делает верстальщик

• собирает шапку сайта;
• выводит блок с услугами;
• настраивает форму заявки;
• делает страницу удобной на мобильном;
• проверяет, чтобы кнопки нажимались, а блоки не «плыли».

Если дизайн — это чертеж, то верстка — это уже строительные работы по этому чертежу. На практике часто бывает, что дизайнер подготовил макет, но не учел, как форма будет отправлять данные. Тогда верстальщику приходится додумывать логику, а это уже не его задача.

Почему хороший дизайн не спасет плохую верстку

Даже сильный макет может быть испорчен на этапе реализации. Я не раз видел, как отличный макет превращался в неработающий сайт из-за кривой верстки. Частые проблемы:

• на телефоне текст наезжает на кнопки;
• изображения растягиваются;
• блоки съезжают при изменении ширины экрана;
• сайт долго грузится;
• анимации тормозят;
• форма заявки работает нестабильно.

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

Как заказчику проверить дизайн и верстку

Ниже — практический чек-лист, который я часто даю своим клиентам, чтобы они могли самостоятельно оценить промежуточные результаты.

Проверка дизайна

• Понятно ли, что предлагается на первом экране?
• Видна ли главная кнопка действия?
• Не перегружен ли макет лишними деталями?
• Легко ли читать текст?
• Смотрится ли сайт одинаково убедительно на мобильном и на компьютере?
• Понятно ли, где человек должен кликнуть дальше?

Проверка верстки

• Открывается ли сайт без ошибок в браузере?
• Корректно ли он выглядит на телефоне, планшете и ноутбуке?
• Не уезжают ли элементы при изменении ширины окна?
• Работают ли кнопки, меню и формы?
• Не слишком ли долго загружается страница?
• Совпадает ли итог с утвержденным макетом?

Типовые ошибки заказчиков

Ошибка 1. Путать макет с готовым сайтом

Макет можно утвердить, но это еще не конечный результат. Если не понять это заранее, можно ожидать готовности раньше срока. Был случай, когда заказчик после утверждения макета через день спросил: «А когда сайт уже будет в интернете?» Пришлось объяснять, что впереди верстка и настройка.

Ошибка 2. Не уточнять, что входит в дизайн

Иногда под «дизайном» подразумевают только главную страницу, а внутренние страницы или мобильная версия считаются отдельной работой. Это лучше проговаривать сразу. Я всегда фиксирую в договоре, сколько страниц и какие разрешения включены.

Ошибка 3. Требовать «сделать как на картинке» без адаптации

Копия макета в коде не всегда возможна пиксель-в-пиксель. Особенно если сайт должен хорошо работать на разных экранах. Иногда нужно менять размеры, переносы и поведение блоков. Верстка — это не полиграфия, здесь экраны разные.

Ошибка 4. Игнорировать мобильную версию

Для многих сайтов именно мобильный трафик основной. Если не проверить адаптив, проект может выглядеть красиво на компьютере и плохо на телефоне. Я всегда настаиваю на тестировании на реальных устройствах, а не только в эмуляторе браузера.

Ошибка 5. Смешивать задачи дизайнера и верстальщика

Дизайнер не должен исправлять HTML-ошибки, а верстальщик — додумывать визуальную концепцию с нуля. Чем точнее разделены роли, тем быстрее идет проект.

Когда достаточно дизайна, а когда нужна верстка

Чем дизайн и верстка отличаются в работе с конструктором

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

• дизайн — это подбор структуры и внешнего вида;
• верстка — это сборка страницы из элементов конструктора.

Просто вместо ручного HTML/CSS вы работаете через визуальный интерфейс. Это удобно для простых проектов, но не отменяет понимания основ. Я часто вижу, как на конструкторе делают красивые страницы, но из-за непонимания адаптивности они разваливаются на мобильных.

Пошагово: как правильно обсуждать сайт с подрядчиком

1. Определите цель сайта: заявки, продажи, презентация, запись, информирование.
2. Составьте список страниц и блоков.
3. Уточните, нужен ли только дизайн или еще и верстка.
4. Спросите, входит ли мобильная версия.
5. Попросите показать, в каком виде будет результат каждого этапа.
6. Согласуйте, кто отвечает за тексты, фото и наполнение.
7. Перед стартом зафиксируйте, что считается готовой работой.

Такой подход экономит время, деньги и нервы. Я всегда рекомендую заказчикам составить бриф — это помогает избежать недопонимания.

Короткий вывод

Дизайн сайта отвечает за то, как он должен выглядеть и как пользователь будет с ним взаимодействовать, а верстка — за то, как этот дизайн превращается в работающую страницу. Если дизайн — это проект, то верстка — его техническая реализация. Для заказчика понимание этой разницы помогает правильно ставить задачу, не путать этапы и объективно оценивать результат. А главное — не ждать, что после утверждения макета сайт заработает сам собой.

FAQ

Что важнее: дизайн или верстка?

Оба этапа важны. Без дизайна сайт может быть неудобным и непонятным, без верстки макет останется картинкой и не станет рабочим сайтом. Это как спрашивать, что важнее — HTML или CSS. Одно без другого не работает.

Можно ли сразу верстать без дизайна?

Иногда можно работать по простому прототипу или шаблону, но для сложных проектов дизайн лучше подготовить заранее. Это снижает количество переделок. Я часто так делаю для типовых лендингов: беру готовый шаблон и адаптирую под контент.

Кто обычно делает верстку?

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

Нужен ли дизайн, если сайт делается на конструкторе?

Да, но в упрощенном виде. Даже на конструкторе нужно продумать структуру, визуальный стиль и пользовательский путь. Иначе получится каша из блоков.

Можно ли оценить верстку без знания кода?

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