Что такое веб-разработка?
Веб-разработка это весь путь создания сайта или веб-приложения: проектирование структуры, дизайн интерфейса, перевод дизайна в код, программирование логики, тестирование и запуск на сервере. Результат работает в браузере на любых устройствах и не требует установки, в этом отличие от мобильных и настольных приложений. Под веб-разработкой заказчики обычно имеют в виду 2 вещи: создание сайта с нуля и доработку существующего. В обоих случаях задача одна: страница быстро открывается, понятно выглядит и делает то, ради чего её сделали, то есть приносит заявки и продажи или экономит время сотрудников.
Какие специалисты участвуют в разработке сайта?
Над сайтом работают 6 ролей, и в небольшой команде один человек часто совмещает две-три из них:
| Специалист | Что делает | Инструменты |
|---|---|---|
| Аналитик или менеджер проекта | Собирает задачи, структуру и техническое задание, ведёт сроки | Бриф, карта сайта, таблица поисковых запросов |
| Дизайнер | Рисует макет интерфейса: сетку, шрифты, цвета, состояния кнопок и форм | Figma |
| Верстальщик или фронтенд-разработчик | Переводит макет в код страниц, делает адаптив и интерактив | HTML, CSS, JavaScript, React, Vue, Astro |
| Бэкенд-разработчик | Пишет серверную логику, базу данных, интеграции и админку | Языки PHP и Python, Node.js, базы MySQL и PostgreSQL |
| Тестировщик | Проверяет страницы на устройствах и в браузерах, ищет ошибки в формах и сценариях | Реальные смартфоны, инструменты разработчика в браузере, Lighthouse |
| SEO-специалист | Закладывает структуру под поисковые запросы, мета-теги и микроразметку | Вордстат, Яндекс Вебмастер, Schema.org |
Фулстек-разработчик (fullstack) совмещает фронтенд и бэкенд. Для лендинга или сайта-визитки так работать удобно, а в крупном магазине или сервисе роли лучше разделить, иначе один человек становится узким местом проекта.
Что такое фронтенд-разработка сайта?
Фронтенд-разработка (frontend) охватывает всё, что работает в браузере пользователя, и в основе любого фронтенда 3 технологии: разметка страниц на языке HTML, оформление на CSS и поведение на JavaScript. Фронтенд-разработчик отвечает за то, как сайт выглядит на экране смартфона шириной 360 пикселей и на большом мониторе, как быстро появляется первый экран, что происходит при нажатии кнопки и как форма сообщает об ошибке. Фреймворк фронтенд-разработчики выбирают под задачи проекта: для сложных интерфейсов React или Vue, для быстрых контентных сайтов Astro. На Astro мы сделали магазин инженерной сантехники Rilis. Хороший фронтенд почти незаметен: страница просто быстро открывается и ведёт себя предсказуемо.
Что такое вёрстка сайта?
Вёрстка это перевод дизайн-макета в код страницы. Дизайнер рисует, как должен выглядеть экран, а верстальщик описывает тот же экран на языке HTML (из каких блоков состоит страница: заголовки, текст, изображения, кнопки) и на языке стилей CSS (где блоки стоят, каким шрифтом и цветом оформлены). Качественная вёрстка адаптивная: одна и та же страница перестраивается под смартфон, планшет и компьютер. Кроме того, она семантическая и валидная: заголовки размечены как заголовки, у картинок есть описания, код проходит проверку валидатором W3C. От качества кода напрямую зависят скорость загрузки, удобство на телефоне и то, как сайт понимают поисковые системы.
Что входит в разработку интерфейсов сайтов?
Интерфейс проектируют в 5 слоях, от логики к картинке, и каждый следующий слой опирается на предыдущий:
- Структура и сценарии
Какие страницы нужны, за сколько шагов человек доходит до цели и что видит первым.
- Прототип
Схема экранов без оформления: где блоки, кнопки и формы. На прототипе решения меняются дешевле всего.
- Дизайн
Шрифты, цвета, фото, видео и сетка для каждого типа страницы и для мобильной версии, подробнее в статье про веб-дизайн.
- Состояния
Как выглядят загрузка, пустой результат поиска, ошибка формы и успешная отправка. Без них интерфейс ломается на первом нестандартном случае.
- Доступность
Контраст, подписи полей, работа с клавиатуры и понятные сообщения об ошибках.
Что такое бэкенд и зачем он сайту?
Бэкенд (backend) это серверная часть, которую пользователь не видит: база данных, логика расчётов, личные кабинеты, приём заявок и обмен данными с CRM, 1С и платёжными системами. Когда покупатель нажимает «Оформить заказ», фронтенд отправляет данные на сервер, а бэкенд проверяет их, сохраняет заказ и отправляет уведомление менеджеру. Бэкенд-разработчики чаще всего пишут на PHP (на нём работают WordPress и 1С-Битрикс), Python, JavaScript на платформе Node.js, Java и Go, и эти языки закрывают почти любые задачи сайта. Типовой бэкенд уже встроен в готовые системы управления сайтом, подробнее в статье что такое CMS.
Что такое динамический сайт и чем он отличается от статического?
Статический сайт состоит из готовых HTML-файлов: сервер отдаёт их всем посетителям одинаковыми, а чтобы поменять текст, нужно поменять файл. Динамический сайт собирает страницу в момент запроса из шаблона и данных в базе: каталог с фильтрами, цены и остатки, личный кабинет, поиск, корзина. Разработка динамических сайтов требует бэкенда, базы данных и системы управления, зато контент меняется через админку без программиста. Современные проекты часто смешивают подходы: страницы, которые редко меняются, собираются заранее и открываются мгновенно, а живые данные вроде цены или статуса заказа подгружаются отдельно.
Как создаётся интерактивный сайт?
Интерактивный сайт отвечает на действия человека без перезагрузки страницы: калькулятор пересчитывает цену при смене параметров, фильтр каталога сразу показывает подходящие товары, форма подсвечивает ошибку до отправки, карта показывает ближайший пункт выдачи, видео запускается по клику. Интерактив пишут на JavaScript во фронтенде и подкрепляют бэкендом, если нужны данные с сервера. Главная ловушка при разработке интерактива: тяжёлые скрипты и анимации делают сайт медленным на телефоне. Поэтому отклик на действие проверяем по метрике INP из Core Web Vitals, хорошим считается ответ до 200 мс. Анимация оправдана, когда что-то объясняет: показывает, куда добавился товар, или подтверждает отправку формы.
Этапы разработки: от брифа до запуска
Создание сайта у нас проходит 7 этапов, каждый подробно разобран в статье этапы разработки сайта:
- 01Бриф и анализ ниши
Цели, аудитория, конкуренты и поисковые запросы, под которые строится сайт.
- 02Структура и прототип
Список страниц и схема каждого экрана.
- 03Дизайн
Макет главной и типовых страниц, мобильная версия.
- 04Вёрстка и адаптив
Перевод дизайна в HTML, CSS и JavaScript, подключение CMS или серверной части.
- 05Тексты и SEO-разметка
Контент под поисковые запросы, мета-теги, микроразметка Schema.org.
- 06Тестирование
Скорость, формы, адаптив на реальных устройствах и в 5 браузерах.
- 07Запуск и передача
Домен, хостинг, HTTPS, резервные копии и все доступы в одном документе.
Что значит программное создание сайта?
Программное создание сайта означает, что сайт написан кодом, а не собран мышкой в конструкторе: разработчик пишет вёрстку, логику и серверную часть с нуля или строит их на основе CMS и фреймворков. Код вместо конструктора даёт 3 преимущества: платформа не ограничивает функции и дизайн, код и данные принадлежат владельцу, сайт можно перенести к другому хостингу или подрядчику. Обратная сторона: разработка дороже и дольше сборки на конструкторе, поэтому для простой задачи или быстрой проверки идеи конструктор бывает разумнее. Плюсы и минусы конструкторов разобраны в статье сайт на Тильде.
Сколько стоит веб-разработка?
Цена зависит от типа проекта, у нас стартовые цены и сроки такие:
| Проект | Цена | Срок |
|---|---|---|
| Лендинг | от 95 000 ₽ | от 2 недель |
| Корпоративный сайт | от 250 000 ₽ | от 4 недель |
| Интернет-магазин | от 400 000 ₽ | от 8 недель |
| Telegram-бот или веб-сервис | от 150 000 ₽ | от 4 недель |
| Редизайн и переезд | от 90 000 ₽ | от 3 недель |
| Техническая поддержка | от 30 000 ₽ в месяц | постоянно |
Этапы оплаты обсуждаем до старта, а смету, состав работ и сроки фиксируем в договоре после брифа. Ориентир для своего проекта можно получить в калькуляторе стоимости, а из чего складывается цена, подробно разобрано на странице сколько стоит сайт.
Стандарты качества: как проверить готовый сайт
Перед приёмкой проверьте сайт по 6 стандартам, большинство пунктов можно проверить самому бесплатными инструментами:
- Скорость по Core Web Vitals: LCP до 2,5 с, INP до 200 мс, CLS до 0,1 (отчёт PageSpeed Insights).
- Валидная разметка: страница проходит валидатор W3C без критичных ошибок.
- Адаптив: на смартфоне нет горизонтальной прокрутки, текст читается без увеличения, кнопки удобно нажимать пальцем.
- Доступность: контраст шрифта и фона, подписи к полям форм, описания у изображений, работа с клавиатуры.
- Формы по 152-ФЗ от 27.07.2006: ссылка на политику обработки персональных данных и согласие перед отправкой.
- Микроразметка Schema.org для организации, товаров и блока вопросов, если они есть на сайте.
Как выбрать разработчика и проверить отзывы?
Разработчика надёжнее проверять по 4 признакам, а не только по отзывам. Откройте живые проекты из портфолио и пройдите их с телефона: скорость, формы, мобильная версия. Попросите контакты 2-3 заказчиков и спросите, укладывались ли в сроки и как решались проблемы после запуска. Уточните, кому достанутся код, домен и доступы. Убедитесь, что смета и состав работ записаны в договоре. Наши работы собраны в портфолио, контакты заказчиков с похожими проектами даём по запросу, а остальные признаки хорошей студии собраны в статье как выбрать веб-студию.
Что важно знать заказчику
Заказчику не нужно разбираться в коде, но полезно понимать 3 вещи. Фронтенд отвечает за то, что видит клиент, бэкенд за то, что происходит с его заявкой, а дизайн и код страниц решают, удобно ли пользоваться сайтом с телефона. Динамика и интерактив нужны там, где экономят время клиента, а не ради эффекта. И главное: код, домен и доступы должны остаться у вас, тогда новые разделы и функции можно создавать с любым подрядчиком.
Частые вопросы
Чем веб-разработка отличается от веб-дизайна?
Веб-дизайн отвечает на вопрос, как сайт выглядит и как человек по нему перемещается: дизайнер рисует интерфейс. Веб-разработка шире: в неё входят и дизайн, и перевод макета в код, и программирование логики, и тестирование, и запуск. Дизайнер может не писать код, а разработчики не обязаны рисовать, но в хорошем проекте они работают в паре и проверяют дизайн на реализуемость до начала программирования, чтобы потом не переделывать.
Можно ли сделать сайт без программиста?
Да, на конструкторе можно собрать простой сайт без знания кода: шаблон, тексты, фото и форма заявки. Ограничения появляются, когда нужны своя логика, интеграции с CRM или 1С, нестандартный дизайн или полный контроль над скоростью и SEO. Перенос с конструктора к другому хостингу обычно ограничен или требует переделки. Мы сайты на конструкторах не делаем: пишем код, а домен и доступы оформляем на заказчика.
Какой язык программирования нужен для сайта?
Для любой веб-страницы нужны HTML и CSS, а для интерактивности JavaScript: его понимают все браузеры. На сервере выбор языков шире: PHP (на нём работают WordPress и 1С-Битрикс), Python, JavaScript на Node.js, Java, Go. Заказчику язык важен в одном смысле: под него должно быть легко найти разработчика на поддержку. Поэтому типовой сайт разумно создавать на распространённой CMS, а для сервиса популярный стек вроде Python или Node.js.
Сколько времени занимает разработка сайта?
У нас лендинг делается от 2 недель, корпоративный сайт от 4 недель, интернет-магазин от 8 недель, веб-сервис или Telegram-бот от 4 недель. Срок растёт с числом страниц, интеграций и согласований: по калькулятору 16-50 страниц добавляют 3 недели, каталог с обменом с 1С ещё 2 недели. Быстрее всего проект идёт, когда тексты, фото и доступы готовы к началу работ.
