Разработка дизайна сайта под заявки

Коротко для тех, кому нужен ответ сразу. Разработка дизайна сайта входит в стоимость разработки и не считается отдельной услугой: лендинг от 50 000 ₽ и 7 дней, корпоративный сайт на 10 страниц от 80 000 ₽ и 10 рабочих дней, интернет-магазин в среднем 150 000 ₽ и 20 рабочих дней. Работаю в двух вариантах: по референсам, которые вы принесли, или уникальная концепция с нуля. Отдельные доработки макетов после сдачи считаю по часам, 5000 ₽ за час. Предоплата 50%, права на сайт после сдачи у вас.

Сроки и цены: дизайн внутри разработки

Дизайн не выносится в отдельный счёт. Вы платите за сайт, внутри которого есть прототип, концепция, макеты для десктопа и телефона. Поэтому цена и срок ниже это цена и срок всего проекта, а не «дизайн отдельно, вёрстка отдельно».

Коэффициенты по платформам тоже считаются от тарифа: 1С-Битрикс плюс 20%, WordPress плюс 15% к Тильде. Подробный разбор, из чего складывается сумма, лежит на странице стоимость разработки сайта.

Дизайн это не картинка, а инструмент конверсии

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

Дизайн отвечает за четыре вещи, и все четыре видны в цифрах:

Понимание за три секунды. Человек с рекламы должен на первом экране увидеть, что он попал туда, куда хотел. Если не увидел, он уходит, и вы платите за клик без заявки.

Путь до формы. Между «интересно» и «оставил телефон» стоят 3-7 блоков. Дизайн решает, ведут они вперёд или разбегаются в стороны.

Доверие. Кривые отступы, три разных шрифта и картинки из стоков читаются как «делали на коленке». Это не вкусовщина, это влияет на решение оставить номер.

Читаемость на телефоне. Больше половины трафика с рекламы приходит с мобильных, и там всё решает размер шрифта и высота кнопки, а не изящество сетки.

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

Два варианта работы: по референсам или уникальный дизайн

Оба варианта рабочие, оба делаю. Выбор зависит от того, есть ли у вас представление о визуале и сколько времени вы готовы тратить на согласования.

Вариант 1. По вашим референсам

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

Когда это лучший выбор:

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

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

Вариант 2. Уникальная концепция с нуля

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

Когда это лучший выбор:

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

Уникальная концепция дороже по времени согласования: обычно один-два круга правок на этапе концепции, до того как рисуются все экраны. Зато потом переделывать почти нечего.

Прототип идёт до дизайна, а не после

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

Прототип это чёрно-белая схема страницы: какие блоки, в каком порядке, что в каждом написано, где стоят формы и кнопки. Без цветов и без картинок. Именно на прототипе решаются самые дорогие вопросы.

Что решает прототип

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

Почему это экономит деньги

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

Если вы пишете задание подрядчику сами, структура прототипа это как раз то, что стоит зафиксировать в документе. Как это оформить, разобрано в материале ТЗ на разработку сайта.

Первый экран: где на макете живёт заявка

На первый экран приходит весь платный трафик. Если он не объясняет предложение, остальные девять экранов никто не увидит.

Что обязательно есть на первом экране в моих макетах:

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

Чего на первом экране быть не должно

Слайдера на пять слайдов. Человек читает первый и уходит, остальные четыре не видит никто.

Полноэкранного видео вместо оффера. Оно тормозит загрузку и не отвечает на вопрос «а сколько стоит».

Меню на 12 пунктов у лендинга. Каждый пункт это выход из воронки.

Текста поверх фотографии без подложки. На телефоне такой заголовок просто не читается.

Адаптив под телефоны проектируется отдельно

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

Что я проверяю на мобильных макетах:

• размер основного текста: 17-18 пунктов, не мельче;
• высота кнопок: палец должен попадать без прицеливания;
• формы: минимум полей, правильная клавиатура на телефон и почту;
• таблицы: либо горизонтальная прокрутка, либо переверстка в карточки;
• ничего не уезжает за край экрана, горизонтальной прокрутки у страницы нет;
• вес картинок: тяжёлый первый экран убивает конверсию на мобильном интернете.

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

Типографика и контраст: скучная часть, которая решает

Большинство «некрасивых» сайтов некрасивы не из-за цвета, а из-за текста. Мелкий кегль, серый по светло-серому, три гарнитуры на странице, разные отступы между одинаковыми блоками.

Правила, которые я держу в макетах

Одна-две гарнитуры. Одна на заголовки, одна в тексте. Третья только на подписи, если реально нужна.

Одна шкала кеглей. Заголовки и текст берутся из фиксированного набора размеров, а не подбираются на глаз в каждом блоке.

Контраст текста к фону достаточный для чтения на солнце. Светло-серый текст на белом это модно на дизайн-скриншотах и нечитаемо в жизни.

Абзац не длиннее четырёх строк. Простыни не читают ни на десктопе, ни на телефоне.

Единые отступы. Между секциями один шаг, внутри секции другой, и они не меняются от блока к блоку.

Это не эстетика ради эстетики. Читаемый текст человек дочитывает до формы, нечитаемый закрывает.

Как дизайн влияет на цену заявки

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

Возьмём условные 100 000 ₽ бюджета и цену клика 40 ₽. Это 2500 переходов. При конверсии 2% вы получаете 50 заявок по 2000 ₽. При конверсии 4% на том же бюджете это 100 заявок по 1000 ₽. Разница между 2% и 4% это порядок блоков, первый экран, форма и читаемость, то есть ровно то, чем занимается дизайн.

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

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

Чем плох шаблон из маркета

Готовый шаблон стоит дешевле, и соблазн понятен. Но у покупного шаблона есть системные проблемы, которые всплывают не сразу.

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

В нём нет вашего оффера. На первом экране красивая фотография и общая фраза. Конкретику приходится дописывать, и вёрстка ломается.

Он уже стоит у сотен других. В узкой нише вы встретите свой сайт у конкурента, иногда в той же выдаче.

Мобильная версия сделана схлопыванием. Это видно по мелким шрифтам и кнопкам в половину пальца.

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

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

Редизайн существующего сайта

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

Когда хватает редизайна

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

Когда дешевле собрать заново

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

Разбор текущего сайта я делаю до расчёта и без оплаты: смотрю первый экран, путь до заявки, адаптив и читаемость, дальше говорю, что дешевле, редизайн или новая сборка. Перенос со старой платформы на Тильду при необходимости считается по часам, 5000 ₽ за час.

Что входит в работу по дизайну

1. Бриф и интервью: задача, аудитория, возражения, канал трафика.
2. Разбор референсов или сбор визуальной концепции с нуля.
3. Структура страницы: какие блоки, в каком порядке, зачем каждый.
4. Прототип в чёрно-белом виде с текстом по блокам.
5. Концепция первого экрана на согласование.
6. Макеты всех экранов для десктопа.
7. Отдельные мобильные макеты, а не сжатый десктоп.
8. Единые элементы: кнопки, формы, заголовки, отступы, состояния.
9. Подготовка текстов и SEO-подготовка страницы.
10. Сборка, адаптив, подключение Метрики и целей на формы.

Пункты 1-8 это дизайн, пункты 9-10 идут в том же проекте. Отдельной цены за дизайн нет: он считается как часть тарифа по типу сайта.

Обычная студия и я

Этапы и сроки

Итого лендинг укладывается в 7 дней, корпоративный сайт на 10 страниц в 10 рабочих дней, магазин в 20 рабочих дней. Старт после созвона, предоплаты 50%, подписания договора и заполненного брифа.

Кейсы с цифрами

Клининговая компания

Посадочная с расчётом стоимости уборки плюс трафик. Форма расчёта стоит на первом экране: человек сразу видит цену за свой метраж и не уходит искать прайс. Результат: 300+ заявок по 700 ₽.

Производство стекла, B2B

Сайт плюс контекстная реклама плюс органика. Длинный цикл сделки, поэтому на страницах разложены технические параметры и доказательства, а не общие обещания. Результат: 596 клиентов по 1 242 ₽, средний чек сделки 230 000 ₽.

Автомобильная тематика

Связка посадочной и рекламы дала 200+ заявок. Страница делалась под конкретные кампании, а не как универсальный сайт «обо всём».

Telegram-проекты

Три проекта, где трафик из Директа шёл не сразу в канал, а на лендинг на Тильде. Отдельная страница с объяснением и понятным экраном заметно снижала цену подписчика.

Ещё разборы проектов лежат в кейсах: кейс по Яндекс Директу и SEO-кейсы.

Кто делает

Меня зовут Никита Морозов. Делаю сайты с 2017 года, в портфолио более 200 проектов. Специалист по интернет-маркетингу, SEO и Яндекс Директу, поэтому дизайн считаю не по вкусу, а по цене заявки. Работаю удалённо, город и страна клиента на сроки и стоимость не влияют.

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

Отзывы можно посмотреть в Яндекс Картах, текущий рейтинг 4,9.

Условия работы

• Предоплата 50%, окончательный расчёт после сдачи.
• Договор, электронный документооборот, работаю как ИП.
• Гарантии прописаны в договоре, а не на словах.
• Права на сайт и домен после сдачи у вас.
• Первый месяц поддержки после сдачи включён, дальше по часам, 5000 ₽ за час.
• Платформа любая: Тильда основная, Битрикс и WordPress делаем, магазины берём.
• Что нужно на старте: созвон, предоплата, договор, заполненный бриф.

Домен, тариф платформы и хостинг это ваши регулярные расходы, они идут напрямую поставщику и в мою смету не входят.

FAQ

С чего начать

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