Сайт без дизайна

Сайт без дизайна у моего клиента собрал за месяц на 40% больше заявок, чем его же предыдущая версия за 190 тысяч рублей с видеофоном, параллаксом и анимацией счётчиков — на том же трафике, с теми же текстами и той же ценой услуги. Разница была ровно в двух вещах: страница открывалась за 1,4 секунды вместо 6,8, и с телефона на первом экране было видно, что продают, сколько это стоит и куда нажать. Никакого волшебства, никаких новых ключей, никаких закупленных ссылок.

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

Что владелец называет дизайном и что на самом деле влияет на заявки

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

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

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

Почему «просто и понятно» перестало быть компромиссом

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

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

Чем бизнес платит за красоту: вес страницы

Красота почти всегда конвертируется в килобайты. Это не абстракция — это конкретные цифры, которые видно в панели разработчика браузера на вкладке «Сеть».

Элемент оформления	Типичный вес	Что даёт бизнесу
Видеофон на первом экране	3–15 МБ	Почти ничего: на мобильном часто не проигрывается, а трафик съедает
Слайдер с 5 баннерами	800 КБ – 2,5 МБ + скрипт 40–90 КБ	Видят обычно только первый слайд, остальные — балласт
Три подключённых шрифта по 4 начертания	350–700 КБ	Косметика; читаемость даёт системный шрифт бесплатно
Библиотека анимации при прокрутке	25–60 КБ + пересчёт при скролле	Задерживает показ текста, на слабых телефонах дёргается
Фотогалерея-карусель в услугах	1,5–6 МБ	Полезна только там, где важен внешний вид товара
Иконки шрифтом целиком	80–200 КБ ради 12 значков	Заменяется SVG на 6 КБ без потерь
Конструктор-страничный билдер	+250–900 КБ CSS и JS на каждую страницу	Удобство редактирования, оплаченное скоростью посетителя
Онлайн-чат и виджет обратного звонка	150–500 КБ, сторонние домены	Иногда окупается, но тянет вниз каждый показ страницы
Крупные PNG вместо WebP	в 3–5 раз тяжелее нужного	Разницы на глаз нет, разница в секундах есть

Сложите строки — и получится типичный «красивый» сайт на 8–12 МБ, который на офисном оптоволокне открывается мгновенно, а в мобильной сети на окраине города грузится пять-семь секунд. Владелец смотрит на свой сайт с рабочего компьютера и искренне не понимает, о чём речь.

Конструкторы и темы: где утекает скорость

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

Тему разбирал отдельно: «Почему сайт потерял позиции в Google».

Дальше подключаются плагины: слайдер, форма, галерея, аналитика, всплывающие окна, «похожие материалы». Каждый тащит свой набор стилей и скриптов. В итоге на странице с одной формой и тремя абзацами текста браузер грузит 40–70 отдельных файлов. Даже если каждый маленький, накладные расходы на соединения съедают секунды.

Практический вывод: если сайт собран на конструкторе, первый шаг к скорости — не «переписать всё на чистом коде», а выключить неиспользуемые модули, убрать дублирующие плагины и оставить один способ делать каждую вещь. Обычно это даёт 30–50% веса без единой правки внешнего вида.

Поиск не оценивает красоту, но чувствует её последствия

Помогу с продвижением: SEO-продвижение для бизнеса — вывожу сайты в топ Яндекса белыми методами.

Алгоритм не умеет любоваться. У него нет параметра «изящный градиент» или «современная типографика». Зато у него есть измеримые сигналы, на которые оформление влияет напрямую.

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

Получается цепочка: тяжёлое оформление — медленная загрузка — часть людей не дождалась — оставшиеся не поняли, что тут продают — вернулись в поиск. Алгоритм видит только последнее звено, но реагирует именно на него. Красота при этом ни в чём формально не виновата, а результат один: страница проседает.

Из чего состоит рабочий минималистичный сайт

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

1. Шапка: название или логотип текстом, телефон кликабельной ссылкой, кнопка «Заказать». Не приклеенная на пол-экрана панель, а обычная строка.
2. Заголовок с сутью: что делаем, для кого, в каком городе. Без метафор и лозунгов.
3. Цена или вилка цен прямо на первом экране: «от 25 000 ₽», «15 000–40 000 ₽ в зависимости от объёма». Отсутствие цены — главная причина ухода.
4. Одна кнопка действия с понятным текстом: «Рассчитать стоимость», а не «Подробнее».
5. Короткий блок доверия: три-четыре факта с цифрами — срок работы, количество проектов, гарантия, лицензия.
6. Что входит в услугу — списком или таблицей.
7. Как проходит работа — три-пять шагов.
8. Форма из двух полей: имя и телефон. Каждое лишнее поле стоит процентов конверсии.
9. Контакты: адрес, телефон, почта, реквизиты, карта картинкой-ссылкой, а не тяжёлым встроенным виджетом.

Всё. Такая страница весит 200–400 КБ вместе с одной фотографией и открывается быстрее, чем посетитель успевает отвлечься.

Чек-лист минимального рабочего сайта

Блок	Обязателен	Как проверить, что сделан правильно
Телефон в шапке	Да	Ссылка tel:, видна на мобильном без прокрутки
Заголовок с услугой и городом	Да	Посторонний человек с одного взгляда назовёт, что продают
Цена или вилка	Да	Число видно до первой прокрутки
Главная кнопка	Да	Одна на экран, текст описывает результат нажатия
Блок доверия	Да	Факты с цифрами, а не «мы команда профессионалов»
Форма 2 поля	Да	Отправляется с телефона, письмо доходит, показывается спасибо
Контакты и реквизиты	Да	Отдельная страница плюс подвал
Адаптивность	Да	Ширина 360 px — нет горизонтальной прокрутки
Метатеги и favicon	Да	Title уникален, во вкладке видна иконка
Слайдер	Нет	Замените статичным первым экраном
Видеофон	Нет	Замените фотографией или заливкой
Анимация появления	Нет	Текст должен быть виден сразу
Всплывающее окно через 5 секунд	Нет	Раздражает и мешает читать

Типографика как замена дизайну

Когда убираешь украшения, остаётся текст — и он должен быть безупречно читаемым. Хорошая типографика делает страницу приятной без единой картинки, и стоит она ноль рублей.

• Размер основного текста: 17–19 пикселей на десктопе, не меньше 16 на мобильном. Мелкий шрифт — самая частая ошибка «стильных» сайтов.
• Длина строки: 60–80 знаков. На широком мониторе текст во всю ширину читать физически тяжело, глаз теряет строку.
• Межстрочный интервал: 1,5–1,7. Плотный текст выглядит как стена и отпугивает.
• Контраст: тёмно-серый по белому лучше чистого чёрного, но светло-серый по белому — почти нечитаем. Ориентир — контраст не ниже 4,5:1.
• Абзацы по 2–4 предложения, между ними воздух.
• Подзаголовки каждые 300–500 знаков: человек читает сайт по диагонали и цепляется именно за них.
• Списки вместо перечислений через запятую.
• Выделение жирным — точечно, одна-две фразы на экран, иначе выделение перестаёт работать.

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

Что нельзя выбрасывать даже на самом простом сайте

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

Смежный материал по теме — «Вывел сайт тонировки на первое место за один день | Новый эксперимент».

1. Адаптивность. Сайт обязан нормально выглядеть на экране шириной 360 пикселей. Это не опция.
2. Доступность контактов. Телефон, почта, мессенджер — в шапке и подвале, кликабельные.
3. Понятная навигация. Пять-семь пунктов меню, названия человеческими словами: «Цены», а не «Тарифная политика».
4. Метатеги. Уникальные title и description на каждой странице, заголовок H1 один и по теме.
5. Favicon. Мелочь, но без неё вкладка выглядит брошенной, и в закладках сайт не находится.
6. Коммерческие блоки: цены, условия доставки или выезда, гарантии, реквизиты, договор-оферта. Поиск оценивает коммерческую полноту, и её нечем заменить.
7. Работающая форма. Проверенная лично, с телефона, с реальной отправкой.
8. HTTPS и корректные редиректы. Без них ничего остального обсуждать смысла нет.

Мобильная версия — основной сценарий, а не дополнительный

По моим проектам в услуговых нишах с телефонов приходит 65–85% посетителей, в некоторых тематиках — до 90%. Значит, десктопная версия давно перестала быть главной, и оценивать сайт нужно с телефона в руках, стоя, при плохом сигнале.

Что ломается на мобильном чаще всего:

• Первый экран занят огромной картинкой, текст ушёл вниз, ничего не понятно.
• Приклеенная шапка и всплывающий чат вместе съедают треть экрана.
• Кнопки меньше 44 пикселей — палец не попадает.
• Поля формы вызывают масштабирование, потому что шрифт меньше 16 пикселей.
• Телефон написан текстом и не нажимается.
• Таблица не помещается и рвёт вёрстку в горизонтальную прокрутку всей страницы.
• Всплывающее окно закрывается крестиком в два пикселя.

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

Когда простота вредит

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

Ситуация	Простой сайт	Что нужно добавить
Срочная услуга: эвакуатор, вскрытие замка, сантехник	Идеально	Ничего, только телефон крупно
B2B-услуги, поставки, оборудование	Хорошо работает	Таблицы характеристик, документы, реквизиты
Ремонт квартир, строительство домов	Недостаточно	Качественные фото объектов, до/после, сметы
Дизайн интерьера, свадебные услуги, фотограф	Плохо	Портфолио — сам продукт, экономить на нём нельзя
Премиальные товары, чек от 300 тысяч	Рискованно	Аккуратная графика, детальные фото, ощущение уровня
Медицина, юристы, финансы	Работает	Дипломы, лицензии, фото специалистов, отзывы с именами
Интернет-магазин одежды и мебели	Плохо	Крупные фото, зум, варианты цвета
Отстройка от сильных конкурентов в дорогой нише	Спорно	Оформление уровня рынка плюс скорость

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

Как проверить, мешает ли оформление получать заявки

Если нужна помощь по теме — курсы SEO-оптимизации.

Догадки здесь не нужны, всё измеряется. Порядок проверки такой.

1. Скорость. Прогоните главную и одну внутреннюю страницу через PageSpeed Insights, смотрите отдельно мобильную вкладку. Ориентиры: показ основного содержимого до 2,5 секунды, сдвиг вёрстки ниже 0,1, вес страницы до 1,5 МБ.
2. Что именно грузится. Откройте вкладку «Сеть» в браузере, отсортируйте по размеру и посмотрите на верхние десять файлов. Обычно там сразу видно и видеофон, и лишние шрифты.
3. Записи сессий и тепловая карта. Вебвизор в Метрике показывает, где люди останавливаются, где мечутся курсором, на каком блоке закрывают вкладку. Двадцать просмотренных записей объясняют больше, чем любой отчёт.
4. Карта скроллинга. Если 70% посетителей не доходят до формы — форму нужно поднимать, а не украшать.
5. Клики по некликабельному. Тепловая карта кликов часто показывает, что люди жмут на картинку или заголовок, считая их кнопкой. Это прямое указание, куда поставить настоящую кнопку.
6. Форма с телефона. Отправьте заявку сами, со своего мобильного, из мобильного интернета. Половина «проблем с трафиком» оказывается неработающей формой.
7. Тест пяти секунд. Покажите первый экран человеку, не связанному с бизнесом, на пять секунд и закройте. Спросите: что продают, сколько стоит, что нужно сделать. Не ответил на два из трёх — проблема в проектировании, а не в трафике.
8. Сравнение с конкурентами. Откройте пять сайтов из топа по вашему запросу с телефона и честно оцените, чей открылся первым и чей понятнее.

Как обновлять дизайн без потери позиций

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

Если нужны детали, смотрите «Перевожу сайт с WordPress на сервер с PHP 7.4».

Шаг	Что сделать	Чем грозит пропуск
1. Выгрузка до старта	Сохранить список всех URL, title, description, H1 и тексты страниц	Восстанавливать будет не из чего
2. Адреса	Оставить прежние URL; при изменении — постраничные 301	Потеря позиций и накопленного веса ссылок
3. Тексты	Перенести объём и заголовки, не «подрезать под макет»	Страница перестаёт отвечать запросу
4. Метатеги	Скопировать вручную, проверить уникальность	Пустые или шаблонные title по всему сайту
5. Коммерческие блоки	Сохранить цены, гарантии, реквизиты, доставку	Падение по коммерческим запросам
6. Картинки	Перенести alt, сохранить имена файлов	Обнуление трафика с картинок
7. Технические файлы	Проверить robots.txt, карту сайта, канонические адреса	Закрытый от индексации сайт после запуска
8. Скорость	Замерить до и после, не пускать версию тяжелее прежней	Медленный красивый сайт вместо быстрого рабочего
9. Счётчики и цели	Перенести Метрику и Аналитику, перенастроить цели на новые формы	Слепая зона: неясно, стало лучше или хуже
10. После запуска	Неделю следить за индексацией, ошибками 404 и позициями	Проблему заметят через месяц, когда трафик уже упал

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

Что делать прямо сейчас, если бюджета на редизайн нет

Хорошая новость: большинство улучшений не требует переделки сайта. Порядок действий, который я обычно даю клиенту на первую неделю:

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

Обычно этого хватает, чтобы вес страницы упал в два-три раза, а конверсия выросла на десятки процентов — без единой строчки нового дизайна.

Частые вопросы

Значит, дизайнер вообще не нужен?
Нужен, но с другой задачей. Не «нарисуй красиво», а «спроектируй так, чтобы за пять секунд было понятно, что продают, и чтобы страница весила меньше мегабайта». Хороший дизайнер как раз умеет убирать, а не только добавлять.

Понизит ли поиск сайт за некрасивый дизайн?
Напрямую — нет, эстетика не измеряется алгоритмом. Косвенно — да, если оформление приводит к медленной загрузке, проблемам на мобильном и возвратам людей в выдачу. Сигналы поведения и скорости учитываются, и они говорят о качестве интерфейса громче любой графики.

Стоит ли делать сайт на конструкторе, если нужен быстрый старт?
Для проверки ниши — вполне, лишь бы страница открывалась быстро и на ней была цена и кнопка. Проблемы начинаются, когда на конструкторе пытаются вырастить сайт на 200 страниц: там накапливается технический мусор, а управлять адресами и метатегами становится тяжело.

Как понять, что пора менять дизайн?
Три признака: сайт не открывается нормально на телефоне, посторонний человек не понимает за пять секунд, что вы продаёте, и конкуренты в выдаче выглядят заметно современнее при той же цене. Если ни одного признака нет, деньги лучше вложить в контент и рекламу.

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

Разбираю продвижение по шагам — в своём курсе:

8:14

Коротко

1. Заявку приносят структура, читаемость и понятность действия, а не градиенты и анимация.
2. Каждое украшение имеет вес: видеофон, слайдер, лишние шрифты и конструктор легко превращают страницу в 8–12 МБ.
3. Поиск не оценивает красоту, но фиксирует её последствия — скорость, мобильную пригодность, отказы и возвраты в выдачу.
4. Минимальный рабочий сайт: суть услуги, цена, кнопка, телефон в шапке, доверие, форма из двух полей, контакты.
5. Простота уместна не везде: там, где решение принимают глазами — портфолио, интерьеры, дорогие товары — на визуал экономить нельзя, но и там оформление обязано быть быстрым.

Проверить, мешает ли оформление вашему сайту получать заявки, можно на SEO-консультации.