РАЗДЕЛ 01Разработка интерфейса веб сайта: что входит в работу
Я смотрю на сайты со стороны рекламы. Человек кликнул по объявлению, за клик уже заплачено, и дальше всё решает интерфейс: найдёт ли он ответ за несколько секунд и дойдёт ли до кнопки. Поэтому для меня интерфейс это не картинка, а маршрут.
В заказах путают три вещи: дизайн, интерфейс и разработку. Разведу их сразу, чтобы было понятно, за что платите.
UX: структура и сценарии
UX-часть отвечает на вопрос «что человек делает на сайте». Сюда входит разработка структуры и визуального представления сайта на уровне схемы: какие страницы есть, какие блоки на них идут и в каком порядке, где форма, что происходит после отправки.
Результат UX-этапа выглядит скучно: карта страниц и серые прототипы без цвета. Зато именно на нём решается, сколько шагов отделяет клик от заявки.
UI: как это выглядит
UI-часть это разработка дизайна сайта, web дизайн в привычном смысле: сетка, шрифты, цвета, кнопки, иконки, состояния элементов. Хороший UI делает так, что кнопку видно сразу, текст читается на телефоне, а форма не выглядит как налоговая декларация.
Что обычно не входит
Программирование, наполнение текстами, фотосъёмка и логотип идут отдельными строками сметы. Если подрядчик пишет «разработка сайта под ключ», уточните, кто пишет тексты и кто делает фото: без этого макет собирают на заглушках, а потом сайт выглядит пусто.
РАЗДЕЛ 02Этапы разработки пользовательского интерфейса сайта
Разработка пользовательского интерфейса сайта идёт по одной схеме почти у всех нормальных подрядчиков. Отличаются названия этапов и глубина, но последовательность одна.
Листайте вбок
| Этап | Что получаете на выходе | Что проверяете вы |
|---|---|---|
| Цели и сценарии | Список задач сайта и путей пользователя | Совпадает ли с тем, как вы продаёте |
| Структура | Карта страниц и разделов | Нет ли лишних страниц и тупиков |
| Прототип | Серые схемы экранов с блоками | Порядок блоков, где форма, где цена |
| Дизайн-макет | Цветные экраны для компьютера | Читается ли оффер, видна ли кнопка |
| Адаптив | Экраны для телефона и планшета | Как выглядит первый экран на телефоне |
| UI-кит | Набор кнопок, полей, шрифтов, цветов | Есть ли состояния: ошибка, отправка, успех |
| Передача в вёрстку | Макет с размерами и комментариями | Что программисту не придётся додумывать |
Цели и сценарии
Начинать надо с того, кто приходит на сайт и откуда. Человек из поисковой рекламы ищет конкретную услугу и сравнивает цены. Человек из соцсетей пришёл по интересу и пока не готов покупать. Один и тот же интерфейс плохо обслуживает обоих.
На этом этапе я прошу у заказчика три вещи: откуда будет трафик, что считается заявкой и какие вопросы клиенты задают менеджеру чаще всего. Ответы на частые вопросы потом становятся блоками страницы.
Прототип
Прототип рисуют без цвета специально. Пока нет красивых картинок, легко спорить о сути: нужна ли цена на первом экране, где отзывы, сколько полей в форме. Править прототип дёшево, править готовый макет дороже, а сверстанный сайт ещё дороже.
Адаптив
Большая часть кликов с рекламы приходит с телефонов, поэтому мобильный макет я смотрю первым. Частая ошибка: десктоп нарисован аккуратно, а мобильная версия получается «схлопыванием», где кнопка уезжает на третий экран.
РАЗДЕЛ 03Структура под тип сайта: лендинг, услуги, бронирование
Интерфейс зависит от того, что человек делает на сайте. Ниже типовые сценарии, с которыми я чаще всего сталкиваюсь в рекламе.
Сайт услуг и лендинг под рекламу
Один экран отвечает на один вопрос: что вы делаете, сколько стоит, почему вам можно верить, как оставить заявку. Если на первом экране нет ответа на «сколько стоит», часть людей уходит сравнивать к конкурентам.
Разработка сайта для бронирования услуг
Сайты с бронированием (база отдыха, салон, кофейня с залом под мероприятия) живут календарём и слотами. Интерфейс должен показать свободные даты раньше, чем человек заполнит пять полей. Если сначала просить телефон, а потом показывать, что дат нет, человек уходит раздражённым.
Сервис бронирования обычно подключают готовый, а интерфейс вокруг него рисуют так, чтобы виджет не выглядел чужеродным куском.
Сайт образовательной организации
У школ, колледжей и детских садов часть структуры задаёт закон. По тексту приказа Рособрнадзора от 04.08.2023 № 1493 (сверял на legalacts.ru 11.10.2026) организация создаёт на сайте раздел «Сведения об образовательной организации», доступ к нему идёт с главной страницы и из основного меню, а страницы раздела открываются без регистрации. Дизайнер не придумывает эту структуру, а встраивает её в навигацию. Это не юридическая консультация: состав подразделов смотрите в действующей редакции приказа.
РАЗДЕЛ 04На чём собирать: Тильда, Битрикс или Laravel
Платформа влияет на то, какой интерфейс можно сделать за разумные деньги. Дизайнеру полезно знать её заранее, иначе он нарисует то, что программист будет собирать неделями.
Листайте вбок
| Платформа | Что это | Когда подходит | Ограничения интерфейса |
|---|---|---|---|
| Тильда | Конструктор с готовыми блоками и Zero Block | Лендинги, сайты услуг, небольшие каталоги | Сложная логика и личные кабинеты делаются обходными путями |
| 1С-Битрикс | CMS с модулями магазина и интеграцией с 1С | Магазины, корпоративные сайты, каталоги | Шаблон нужно верстать отдельно, правки дороже |
| Laravel | PHP-фреймворк для написания своего приложения | Нестандартная логика, кабинеты, сервисы, бронирование со своими правилами | Всё пишется с нуля, дольше и дороже |
Разработка сайта на Laravel
Laravel это открытый PHP-фреймворк, а не конструктор. На нём пишут сайт как приложение: свою админку, свою логику заказов, свои роли пользователей. Для интерфейса это значит полную свободу и полную ответственность: каждый экран, включая ошибки и пустые состояния, кто-то должен нарисовать и сверстать.
Я бы шёл в Laravel, когда у бизнеса нестандартный процесс, который не ложится на готовые модули. Для сайта услуг под рекламу это обычно лишние деньги.
Разработка сайта на Битриксе
Битрикс выбирают, когда нужен магазин с выгрузкой из 1С или корпоративный сайт с несколькими редакторами. Подрядчиков на Битриксе много в любом городе, и запросы вида «разработка сайта на битриксе» плюс название города обычно дают десятки студий. Подробнее про платформу и этапы есть в разборе разработки сайта на Битриксе.
РАЗДЕЛ 05Логотип, айдентика и интерфейс: в каком порядке
Запрос «создание сайта, разработка логотипа» часто приходит одним пакетом. Порядок здесь важен: интерфейс опирается на фирменные цвета и шрифты, поэтому логотип и базовый фирменный стиль должны быть готовы до UI-этапа.
Если логотипа нет, а сайт нужен срочно, рабочий вариант такой: сначала прототип и структура, параллельно логотип, потом UI на готовом стиле. Обратный путь (сайт нарисован, логотип придумали после) почти всегда заканчивается перекраской макета.
Что передать дизайнеру интерфейса
Логотип в векторе, цвета с кодами, шрифты с лицензией, примеры фото, которые будут на сайте. Если фирменного стиля нет, дизайнер интерфейса сделает минимальный набор сам, но это отдельная работа и отдельная строка в смете.
РАЗДЕЛ 06Формы, чат и бот: где человек оставляет заявку
Интерфейс заканчивается не кнопкой, а тем, что происходит после неё. Люди пишут разными способами: кто-то звонит, кто-то заполняет форму, кто-то пишет в чат. Чем больше удобных способов, тем меньше потерь.
Пример из моей работы
В кейсе производства «Смарт стекло» (данные на 27.06.2025) за четыре месяца пришло 596 обращений. Из них 262 пришли в онлайн-чат ЖивоСайт, 239 были звонками через Манго и только 95 пришли через формы. Сайт был на Битриксе. Если бы интерфейс оставлял только форму, большая часть этих людей не написала бы вообще.
Разработка чат-бота для сайта образовательной организации
Школы и курсы получают одни и те же вопросы: расписание, стоимость, документы, возраст. Бот на сайте закрывает эти вопросы без менеджера и передаёт живого человека, когда вопрос сложный. В интерфейсе бот должен не перекрывать кнопку записи и не открываться сам через секунду после входа: это раздражает и мешает читать. Какие конструкторы ботов есть и чем они отличаются, разбираю в статье про конструкторы чат-ботов.
РАЗДЕЛ 07Цены и тарифы: из чего складывается стоимость интерфейса
Называть «среднюю цену интерфейса» бессмысленно: лендинг из восьми блоков и личный кабинет с двадцатью экранами отличаются в десятки раз. Честнее смотреть на факторы, из которых складывается смета.
Листайте вбок
| Фактор | Как влияет на цену |
|---|---|
| Число уникальных экранов | Главный множитель: каждый экран рисуется и согласуется |
| Адаптив | Мобильные макеты добавляют работу почти на каждый экран |
| Глубина UX | Интервью, сценарии, прототипы добавляют этапы до дизайна |
| UI-кит и состояния | Ошибки, загрузка, пустые списки, успешная отправка |
| Платформа | На Тильде часть решений берут из блоков, на Laravel всё с нуля |
| Число правок | Обычно 2-3 круга входят, остальные оплачиваются отдельно |
Пример расчёта, цифры условные
Допустим, лендинг под рекламу: 1 страница, 9 блоков, мобильная версия, 2 круга правок. Это один уникальный экран в двух версиях. Сайт услуг на 6 шаблонов страниц с каталогом и формой расчёта это уже 6 экранов в двух версиях плюс UI-кит. Объём работы отличается примерно в шесть-восемь раз, и цена вслед за ним.
Сколько стоит сайт целиком, вместе с вёрсткой и программированием, я разбирал в материале про стоимость разработки сайта.
Разработка сайта и продвижение по доступным ценам
Когда заказчик просит «сайт и продвижение подешевле», я предлагаю начинать с меньшего: одна посадочная под одну услугу и реклама на неё. У меня правки заголовков и блоков посадочной входят в тариф ведения Яндекс Директа «Базовый» (от 15 000 ₽ в месяц без рекламного бюджета). Новые лендинги и квизы входят в «Полный» (от 25 000 ₽ в месяц). SEO-продвижение считаю отдельно, от 30 000 ₽ в месяц, индивидуально под проект.
РАЗДЕЛ 08Как проверить интерфейс до запуска рекламы
Приёмка интерфейса не должна сводиться к «нравится или нет». Ниже проверки, которые я делаю перед тем, как вести на сайт платный трафик.
Тест первого экрана
Откройте сайт на телефоне, посмотрите пять секунд и закройте. Потом ответьте: что здесь продают, сколько стоит, куда нажать. Если хотя бы на один вопрос ответа нет, первый экран надо переделывать. Лучше дать посмотреть человеку, который сайт не видел.
Чек-лист перед запуском
- Кнопка заявки видна на первом экране телефона без прокрутки.
- Форма просит минимум полей: имя и телефон, остальное менеджер спросит сам.
- После отправки человек видит понятное сообщение, а не пустую страницу.
- Текст читается: контраст основного текста к фону не ниже 4.5:1 по рекомендации WCAG для обычного шрифта.
- Телефон кликабелен, мессенджеры открываются в приложении.
- Сайт грузится быстро на мобильном интернете, а не только на офисном Wi-Fi.
- В Метрике настроены цели на отправку формы, клик по телефону и мессенджерам.
Что смотреть после запуска
Через неделю рекламы откройте Вебвизор и карту скроллинга: где люди останавливаются, где уходят, до какого блока доходят. Если большинство уходит до блока с ценой, цену надо поднимать выше. Это дешевле, чем менять кампании.
РАЗДЕЛ 09Как заказать интерфейс и принять работу
Хороший результат начинается с задания. Если в ТЗ написано «современный стильный дизайн», вы получите то, что дизайнер считает стильным, а не то, что продаёт.
Портфолио: как читать
Смотрите не картинки на Behance, а живые сайты. Запросы вроде «портфолио разработка сайта базы отдыха» или «разработка сайта кофейни» плюс город часто выдают студии с примерами в вашей нише. Откройте эти сайты на телефоне, попробуйте оставить заявку, посмотрите, работают ли формы. Красивый скриншот в портфолио ничего не говорит о том, как сайт продаёт.
Что прописать в договоре
Число экранов и версий, число кругов правок, формат передачи макета, кто владеет исходниками, срок каждого этапа. Отдельной строкой: кто отвечает за вёрстку по макету, если дизайнер и программист разные люди.
Где интерфейс заканчивается и начинается реклама
Интерфейс сайта и рекламные материалы это разные задачи. Баннеры, карточки товаров и объявления делаются под площадку, а не под сайт. Как упаковать товар для рекламы, я разбирал отдельно в статье про рекламу товаров, здесь не повторяю.
РАЗДЕЛ 10FAQ
Отвечает Никита МорозовЧем UX отличается от UI простыми словами?
UX это схема: какие страницы есть, какие блоки и в каком порядке, как человек доходит до заявки. UI это внешний вид этих экранов: цвета, шрифты, кнопки, иконки. Сначала делают UX, потом UI.
Сколько стоит разработка интерфейса веб сайта?
Цена зависит от числа уникальных экранов, адаптива, глубины UX и платформы. Лендинг и сайт с личным кабинетом отличаются в разы, поэтому смету просите по экранам, а не «за сайт».
Нужен ли прототип, если сайт на Тильде?
Нужен, хотя бы простой. Он экономит деньги: порядок блоков и форму дешевле поправить на серой схеме, чем в готовом дизайне или в собранной странице.
Когда выбирать Laravel вместо конструктора?
Когда у бизнеса своя логика, которую не закрывают готовые модули: личные кабинеты, нестандартное бронирование, расчёты. Для сайта услуг под рекламу конструктора или CMS обычно хватает.
Логотип нужно делать до сайта или после?
До UI-этапа. Интерфейс опирается на фирменные цвета и шрифты. Если логотипа нет, можно делать структуру и прототип параллельно, но цветной макет лучше рисовать уже на готовом стиле.
Нужен ли чат-бот на сайте?
Если клиенты задают одни и те же вопросы, бот снимает часть нагрузки с менеджера. Главное, чтобы он не перекрывал кнопку заявки и передавал сложные вопросы человеку.
Как понять, что интерфейс плохой, если сайт уже работает?
Посмотрите в Метрике конверсию в заявку по мобильным и десктопу отдельно, карту скроллинга и Вебвизор. Если с телефона заявок в разы меньше при таком же трафике, проблема почти наверняка в мобильном интерфейсе.
РАЗДЕЛ 11С чего начать
- Запишите, откуда на сайт придут люди и что считается заявкой.
- Соберите 10 самых частых вопросов клиентов: это будущие блоки страницы.
- Попросите подрядчика начать с прототипа и мобильной версии, а не с красивого первого экрана.
- До запуска рекламы пройдите тест первого экрана и чек-лист выше.
Пришлите ссылку на сайт, разберу интерфейс посадочной глазами человека с рекламы.