WEB дизайн и WEB разработка

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

Я работаю в SEO с 2005 года, и через меня прошли сотни проектов на всех стадиях — от нарисованного макета до готового сайта, который потом приходится продвигать. Расскажу с позиции человека, который потом с этим сайтом живёт: чем занимается дизайнер, чем разработчик, где проходит граница, что заказывать в вашей ситуации и сколько это стоит в 2026 году.

Почему путаница дорого обходится

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

Обратный сценарий не лучше: разработчик собирает сайт на готовом шаблоне без участия дизайнера, всё технически работает, но выглядит как сайт 2015 года и не отвечает задачам бизнеса. Формально претензий нет — заказывали «сделать сайт», сделали.

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

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

Работа дизайнера начинается не с картинки, а с задачи бизнеса. Хороший специалист сначала спрашивает, кто ваши клиенты, какое действие они должны совершить и что мешает им это сделать сейчас.

• Прототип. Схематичная раскладка блоков без цветов и картинок: что за чем идёт, какая информация в каком порядке подаётся. Это самый дешёвый этап для внесения правок и самый ценный.
• Визуальная концепция. Цвета, шрифты, стиль изображений, тон подачи. На этом этапе решается, будет ли сайт выглядеть как строгий подрядчик или как дружелюбный сервис.
• Макеты страниц. Главная, типовые внутренние, карточка товара или услуги, формы, страницы результата.
• Адаптив. Отдельные макеты для телефона и планшета. Это не «то же самое, только уже»: на мобильном меняется порядок блоков, размеры кнопок, способ навигации.
• Состояния элементов. Как выглядит кнопка при наведении и нажатии, как показывается ошибка в форме, что видит пользователь при загрузке, как выглядит пустой список.
• Дизайн-система. Набор повторяемых компонентов и правил, чтобы новые страницы можно было собирать без дизайнера.

Отдельно про то, что напрямую касается продвижения. Дизайн влияет на поведенческие факторы, а они в Яндексе — один из главных сигналов ранжирования. Непонятная навигация, спрятанный телефон, форма из десяти полей, экран-заставка вместо содержания — всё это выражается в возвратах в выдачу и, в конечном счёте, в позициях. Поэтому дизайнер, который рисует «красиво», но не думает про путь пользователя, обходится дороже, чем кажется.

Что делает веб-разработчик

Разработка делится на две части, и это тоже часто путают.

Фронтенд — всё, что происходит в браузере. Вёрстка макета в HTML и CSS, адаптивность под все размеры экранов, интерактивность на JavaScript, анимации, работа форм на стороне клиента, оптимизация скорости отрисовки. Именно фронтендер превращает картинку в живую страницу.

Бэкенд — всё, что происходит на сервере. База данных, обработка заявок, личные кабинеты, корзина и оплата, интеграции с CRM и складом, права доступа, безопасность. Плюс административная часть: как вы сами будете добавлять товары и править тексты.

Между ними есть большой пласт работ, которые формально не относятся ни к дизайну, ни к бизнес-логике, но определяют судьбу сайта в поиске:

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

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

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

Где проходит граница ответственности

Задача	Дизайнер	Разработчик	Кто отвечает за результат
Структура страниц и порядок блоков	Да	Нет	Дизайнер
Цвета, шрифты, стиль	Да	Нет	Дизайнер
Мобильная версия: как выглядит	Да	Нет	Дизайнер
Мобильная версия: как работает на реальных устройствах	Нет	Да	Разработчик
Скорость загрузки	Косвенно (вес графики, количество эффектов)	Да	Разработчик
Отправка и доставка заявок	Нет	Да	Разработчик
Удобство формы, число полей	Да	Нет	Дизайнер
Адреса страниц, коды ответа, микроразметка	Нет	Да	Разработчик
Возможность самому менять тексты	Нет	Да	Разработчик
Кроссбраузерность	Нет	Да	Разработчик
Соответствие сайта задачам бизнеса	Частично	Частично	Заказчик и менеджер проекта

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

Кто ещё участвует в создании сайта

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

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

Что заказывать: три реалистичных варианта

Вариант	Что получаете	Срок	Кому подходит	Ограничения
Конструктор сайтов	Готовый сайт из блоков, дизайн и разработка не нужны	1–7 дней	Проверка идеи, визитка, одностраничник под рекламу	Ограниченная гибкость, слабый контроль над техчастью, зависимость от платформы
Готовый шаблон на CMS плюс настройка	Работающий сайт с админкой, дизайн типовой	2–5 недель	Малый бизнес, каталог услуг, небольшой магазин	Похож на сотни других, часто перегружен ненужным кодом
Индивидуальный дизайн плюс разработка	Уникальное решение под задачи бизнеса	2–5 месяцев	Компании с конкурентной нишей, магазины, сервисы с логикой	Дорого, требует вовлечения заказчика и внятного техзадания

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

Сколько это стоит в 2026 году

Работа	Фрилансер	Небольшая студия	Крупное агентство
Дизайн одностраничника	15 000–50 000 рублей	50 000–120 000 рублей	от 150 000 рублей
Дизайн многостраничного сайта (главная плюс 4–6 типовых)	40 000–120 000 рублей	120 000–350 000 рублей	от 400 000 рублей
Вёрстка одного макета с адаптивом	8 000–25 000 рублей	20 000–50 000 рублей	от 50 000 рублей
Разработка сайта на CMS под ключ	60 000–200 000 рублей	200 000–700 000 рублей	от 800 000 рублей
Интернет-магазин с интеграциями	150 000–500 000 рублей	500 000–2 000 000 рублей	от 2 000 000 рублей
Час работы специалиста	1 500–3 500 рублей	3 000–6 000 рублей	5 000–12 000 рублей
Поддержка и доработки в месяц	10 000–30 000 рублей	30 000–100 000 рублей	от 100 000 рублей

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

Ещё один момент, о котором заказчики забывают на этапе сметы: сайт — это не разовая трата. К стоимости создания нужно сразу прибавить домен (от 200 до 3 000 рублей в год в зависимости от зоны), хостинг (от 3 000 до 30 000 рублей в год для обычного сайта, дороже для нагруженного магазина), продление лицензий CMS и платных модулей, а также поддержку. Без поддержки сайт через год-полтора превращается в источник проблем: устаревшие компоненты становятся дырами в безопасности, а починка взломанного проекта стоит дороже, чем годовое обслуживание.

Частые ошибки заказчика и когда всё это не нужно

Ошибки, которые встречаются чаще всего:

1. Заказ дизайна без текстов. Макет под «рыбу» разваливается, когда приходит настоящее содержание.
2. Оценка макета по личному вкусу. «Мне не нравится синий» — не аргумент, если ваши клиенты нажимают на синюю кнопку чаще.
3. Подключение SEO после запуска. Структура разделов задаётся спросом, и переделывать её на готовом сайте дороже, чем спроектировать сразу.
4. Отсутствие письменного техзадания. Устные договорённости приводят к спорам о том, что входило в цену.
5. Отказ от адаптива ради экономии. Больше половины визитов идёт с телефонов, а оценивается сайт поисковиками именно по мобильной версии.
6. Нет доступа к исходникам и хостингу. Домен, хостинг, репозиторий, макеты должны быть оформлены на вас. Иначе смена подрядчика превращается в потерю сайта.
7. Приёмка «на глаз» на своём ноутбуке. На телефоне сайт может выглядеть совершенно иначе.

И честный ответ на вопрос, когда дизайн и разработка вам вообще не нужны:

• Если задача — проверить спрос на новую услугу. Хватит страницы на конструкторе и рекламы на 30 000 рублей.
• Если весь ваш поток клиентов идёт с маркетплейсов или через агрегаторы, а сайт нужен «чтобы был».
• Если у вас работающий сайт, который приносит заявки, а редизайн хочется ради обновления. Сначала посчитайте, что вы теряете сейчас, — часто выгоднее точечно доработать формы, скорость и мобильную версию.
• Если бюджета хватает только на разработку, но не остаётся ничего на трафик. Сайт без источника посетителей не приносит ничего.

Как принимать работу

Чеклист приёмки дизайна:

• Есть макеты для десктопа и телефона, а не только для широкого экрана.
• Показаны состояния элементов: наведение, нажатие, ошибка формы, успешная отправка.
• Использованы шрифты со свободной лицензией или лицензия куплена.
• Тексты в макетах реальные, а не заполнитель.
• Основное действие видно на первом экране без прокрутки, телефон доступен в шапке.
• Исходники переданы в редактируемом формате.

Чеклист приёмки разработки:

• Сайт открыт и проверен на реальном телефоне, а не в режиме эмуляции.
• Формы отправляются, письма доходят, заявки видны в CRM.
• Скорость измерена инструментом проверки и укладывается в разумные значения.
• Заголовки, описания и адреса страниц редактируются из админки.
• Настроен HTTPS, работает 301-редирект на выбранное зеркало.
• Есть robots.txt, sitemap.xml, корректная страница 404.
• Установлены счётчики, настроены цели на отправку форм.
• Переданы доступы: хостинг, домен, админка, репозиторий, база.
• Есть резервная копия и понятно, кто её делает дальше.

Если нужен сайт, готовый к продвижению с первого дня, я делаю их в рамках создания сайтов. Существующий сайт можно привести в порядок доработкой.

Коротко

• Дизайнер отвечает за то, как сайт выглядит и как по нему движется человек. Разработчик — за то, как это работает в браузере и на сервере.
• Прототип, макеты, адаптив, состояния элементов и дизайн-система — зона дизайна. Вёрстка, скорость, формы, база, интеграции, техническая основа индексирования — зона разработки.
• Ни тот ни другой по умолчанию не отвечает за заявки. За результат отвечает постановщик задачи.
• Тексты нужны до макетов, SEO-структура — до дизайна. Иначе переделка.
• Конструктор — для проверки идеи, шаблон — для малого бизнеса, индивидуальная разработка — когда вы уже знаете, что работает.
• Цены 2026 года: дизайн многостраничника от 40 000 у фрилансера до 400 000 в агентстве, разработка под ключ — от 60 000 до нескольких миллионов.
• Домен, хостинг, макеты и репозиторий должны быть оформлены на вас. Это единственная страховка при смене подрядчика.

Если нужно продвижение сайтов от Анатолия Кузнецова — помогу вывести сайт в топ Яндекса и удержать позиции.