19 примеров плохого дизайна веб-сайтов и их ошибки

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

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

Мы намеренно не разбираем «худшие сайты по дизайну» из коллекций вроде Lings Cars — это шутка из 2007-го, она никого ничему не учит. Интереснее другое: вполне приличные на вид лендинги, у которых конверсия ниже на 30–60%, чем должна быть, и владелец не понимает почему.

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

Откуда берётся плохой дизайн

Источников ровно три, и они почти всегда комбинируются.

Первый — экономия на этапе ТЗ. Дизайнеру дают «сделайте красиво», без сценариев пользователя. Получается обложка журнала вместо рабочего инструмента.

Второй — копирование трендов без понимания. Гигантский герой-баннер на весь экран хорошо смотрится у Apple, у которого все и так знают, что продаётся. У регионального производителя дверей с таким баннером на первом экране нет ни товара, ни цены — только фотография.

Третий — постепенное наслоение. Сайт год работал нормально, потом маркетолог добавил поп-ап, потом ещё чат-виджет, потом ещё баннер про скидку, потом cookie-плашку. Через два года получился перегруженный сайт, где сам сайт уже не виден.

Цена ошибки в цифрах

Чтобы было предметно, два сценария из практики.

Сценарий 1. Лендинг по ремонту квартир. CTA «Оставить заявку» — белым шрифтом по светло-голубому фону. Контраст 2.1:1 (норма AA — 4.5:1). После замены на тёмно-синюю кнопку с белым текстом и контрастом 8.6:1 — рост заполнений формы на 38–42% за три недели при том же трафике. Условный «минус 40% конверсии» из-за нечитаемого CTA — это не пугалка, это типичная история.

Сценарий 2. Интернет-магазин аксессуаров. LCP — 6.5 секунды на 4G. Конкурент грузится за 1.2 секунды. При среднем трафике 30 000 визитов в месяц и конверсии 1.4% магазин получал ~420 заказов со средним чеком 2 800 ₽ — выручка ~1.18 млн ₽. После оптимизации (сжатие изображений, lazy load, удаление трёх неиспользуемых шрифтов) LCP упал до 2.1 секунды, конверсия выросла до 1.9%. Это +150 заказов в месяц, +420 000 ₽.

Расчёт потерь от +1 секунды загрузки. На том же магазине с выручкой 1.18 млн ₽/мес каждая дополнительная секунда грубо режет конверсию на 7%. То есть рост LCP с 2 до 3 секунд — это ~82 600 ₽ упущенной выручки в месяц, или почти миллион в год. На сайте с выручкой 10 млн — десять миллионов. И никакого «крестика», просто медленные картинки.

Типографика: где сайты теряют читателей

Половина претензий к плохому дизайну — на самом деле претензии к шрифтам.

1. Нечитаемый шрифт основного текста

Тонкий Light 14 px по белому, межстрочный 1.1, выравнивание по ширине с большими дырами между словами. Через два абзаца глаза устают, и пользователь начинает сканировать, а не читать. Норма: 16–18 px, межстрочный 1.4–1.6, выравнивание по левому краю.

2. Декоративный шрифт в теле статьи

Рукописный или ультра-узкий шрифт можно ставить в заголовок раз в сто лет. В теле — нельзя никогда. Скорость чтения падает на 25–30%, отказы растут.

3. Слишком длинная строка

Текст на всю ширину 1920 px монитора — это 140–160 знаков в строке. Глаз не успевает возвращаться, читатель теряет место. Норма — 50–75 знаков на строку.

4. Капс в основном тексте

«НАШИ ПРЕИМУЩЕСТВА» крупным капсом — бренд-стиль из 2010-го. Капс читается медленнее обычного текста на 13–20% и воспринимается как крик.

Цвет: где красивое ломает функцию

5. Низкий контраст

Серый #B0B0B0 по белому — выглядит «премиально» в Figma и проваливается на мониторе бухгалтера в офисе с люминесцентной лампой. Контраст ниже 4.5:1 не проходит проверку даже базовых браузерных инструментов.

6. Зелёный + красный без подписей

Тарифные таблицы, где «выгодно» — зелёным, «невыгодно» — красным. Около 8% мужчин не различают эти цвета. Вы только что выкинули каждого двенадцатого посетителя.

7. Слишком много акцентов

Когда красным выделено всё — не выделено ничего. На странице должно быть 1–2 акцентных элемента максимум. Остальное — нейтральная иерархия.

8. Тёмная тема, сделанная инверсией

#FFF просто заменили на #000, шрифт оставили тот же — получили резкий ореол вокруг букв и усталость глаз через 30 секунд. Тёмная тема — это отдельная палитра, а не Ctrl+I.

Навигация: где пользователь застревает

9. Меню из 14 пунктов в одну строку

«Главная / О нас / Услуги / Цены / Портфолио / Блог / Отзывы / Партнёры / Вакансии / Доставка / Оплата / Гарантия / Контакты / Корпоративным». Пользователь не выбирает — он сдаётся. Норма для верхнего меню — 5–7 пунктов, остальное в футер или в выпадающее.

10. Скрытое меню-«гамбургер» на десктопе

Бренды, которые прячут навигацию за иконку из трёх полосок на больших экранах, теряют 20–30% переходов вглубь сайта. На мобильном гамбургер уместен, на десктопе — нет.

11. Карусели с автопрокруткой

На второй слайд кликают 1–2% посетителей. На третий — десятые доли процента. Карусель из пяти баннеров — это четыре баннера, которые никто не увидит, плюс отвлечение от главной кнопки.

12. Хлебные крошки, которые лгут

В крошках написано «Каталог / Кухни / Прямые», но клик по «Каталог» ведёт на главную. Пользователь чувствует обман и закрывает вкладку.

Формы: где сливаются заявки

13. Форма из 11 полей

Имя, фамилия, отчество, телефон, e-mail, город, адрес, индекс, дата рождения, как о нас узнали, комментарий. Каждое лишнее поле в форме режет заполняемость на 5–10%. Для первого касания достаточно имени и телефона.

14. Маски, которые не пускают

Поле телефона жёстко требует «+7 (___) ___-__-__». Пользователь скопировал номер из мессенджера в формате «8 999 ...». Маска ругается красным, человек злится и уходит.

15. Капча на каждое действие

«Я не робот» с фотографиями светофоров перед оформлением заказа добавляет 8–12 секунд и снижает завершение оформления на 15–20%. Используйте невидимую капчу, а лучше rate-limit на бэкенде.

Мобильная версия: где десктоп просто сжали

16. Кликабельные элементы меньше 44 px

Apple и Google сошлись в одном: минимальная зона касания — 44×44 px. Меньше — пользователь промахивается, попадает по соседней ссылке, ругается. На каталоге товаров с миниатюрными кнопками «в корзину» отказы на мобильном доходят до 70%.

17. Текст, не помещающийся в экран

Горизонтальный скролл на мобильном — приговор. Возникает обычно из-за фиксированных ширин в пикселях вместо процентов или из-за широких таблиц без обёртки.

18. Поп-ап на 80% экрана сразу после открытия

«Подпишитесь на рассылку!» через секунду после захода. Пользователь ещё не понял, кто вы, а уже должен закрыть назойливое окно крошечным крестиком в углу. Google за такое снижает позиции в мобильном поиске с 2017 года.

Скорость: тихий убийца

19. Мегабайты картинок и шрифтов

Героическое фото 4500×3000 px весом 4.2 МБ на первом экране. Шесть начертаний одного шрифта, из которых реально используется два. Видео-фон, который никто не смотрит. На медленном 4G такая страница грузится 8–10 секунд, и две трети мобильных пользователей до неё просто не доходят.

Три ошибки, которые видны сразу

Если открыть сайт и за 5 секунд понять, что будут проблемы — почти всегда сработает один из трёх маркеров.

Ошибка 1. Не понятно, что продают. На первом экране — слоган и красивая фотография, без описания продукта. Последствие: пользователь уходит за 8–12 секунд. Цифры: отказы 65–80% против нормальных 30–45%.

Ошибка 2. Цены спрятаны. «Уточняйте по телефону» в 2026 году — это сигнал, что цена либо плавающая, либо завышенная. Последствие: люди уходят к конкурентам, у которых цена есть. Цифры: в опросах 60–70% покупателей называют отсутствие цены причиной номер один уйти со страницы.

Ошибка 3. Кнопка «Купить» сливается с фоном. Серая на сером, или прозрачная с тонкой обводкой. Последствие: CTR кнопки падает в 2–3 раза. Цифры: по нашим замерам, замена на контрастную кнопку даёт +20–45% к кликам без других изменений.

Что ставить взамен

Никакого секрета здесь нет, и попытки выдать «11 законов идеального дизайна» — обычно маркетинговый шум. Работает простое.

На первом экране — что вы продаёте, кому, и кнопка действия. Не «слоган про мечты», а понятная фраза. Шрифт основного текста — 16–18 px, контраст не ниже 4.5:1, ширина строки 50–75 знаков. Меню — до семи пунктов. Форма — два-три поля. Картинки — сжатые, в WebP или AVIF, lazy load. LCP — до 2.5 секунд.

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

Авторская позиция

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

Если выбираете между «вылизать типографику» и «убрать поп-ап и ускорить загрузку» — всегда сначала второе. Эстетика прибавляет 5–10% к восприятию. Скорость и понятность CTA — десятки процентов к деньгам.

И отдельно про плохой дизайн упаковки — это слегка другая история, чем веб, но логика одна: если за две секунды непонятно, что внутри и зачем, упаковка не работает. Хоть на полке, хоть на главной странице.

FAQ

Какой минимальный размер шрифта считается читаемым на сайте?

Для основного текста — минимум 16 px на десктопе и 15–16 px на мобильном. Меньше 14 px заставляет щуриться, и пользователь уходит ещё до сути.

Какой контраст текста и фона нужен для нормальной читаемости?

По WCAG AA — 4.5:1 для обычного текста и 3:1 для крупного. Светло-серый по белому почти всегда не проходит.

Сколько секунд должна грузиться страница?

Хорошая планка — до 2.5 секунд для основного контента (LCP). После 3 секунд каждый дополнительный шаг загрузки режет конверсию на 5–10%.

Что хуже — перегруженный сайт или слишком пустой?

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

Можно ли использовать тёмную тему как основную?

Можно, если контраст и размер шрифта подобраны под тёмный фон. Чисто чёрный фон #000 + светло-серый текст — почти всегда плохая идея, глаза устают за 30–40 секунд.

Как разбирать плохой дизайн сайта по шагам

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

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

Шаг 1. Проверить первый экран

Первый экран должен отвечать на три вопроса: где я, что здесь предлагают, что делать дальше. Если пользователь за 5 секунд не может сформулировать ответ, дизайн уже проигрывает. И не важно, сколько в нем модных градиентов, анимаций и 3D-элементов.

Типичная ошибка: крупный слоган без предмета. “Будущее начинается здесь” звучит красиво, но не объясняет, что продает сайт: курсы, мебель, сервис аналитики или доставку еды. Сильный первый экран проще: “CRM для автосервисов”, “Доставка здоровых обедов в офис”, “Онлайн-школа английского для IT-специалистов”.

Шаг 2. Оценить визуальную иерархию

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

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

Шаг 3. Проверить текст на кнопках

Кнопка “Подробнее” почти всегда слабее, чем конкретное действие. “Рассчитать стоимость”, “Выбрать тариф”, “Получить подборку”, “Записаться на консультацию” дают человеку понятный следующий шаг. Это не мелочь. В тестах замена общего CTA на конкретный часто дает прирост кликов на 10-30%.

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

Где плохой дизайн бьет по деньгам

Дизайн кажется субъективным, пока не посчитать потери. Допустим, сайт получает 20 000 визитов в месяц. Конверсия в заявку — 1,2%. Это 240 заявок. Если после упрощения первого экрана, формы и CTA конверсия растет до 1,8%, заявок становится 360. Разница — 120 заявок в месяц.

Если в продажу закрывается 15% заявок, это 18 дополнительных клиентов. При марже 2 000 ₽ на клиента — 36 000 ₽ в месяц. И это без увеличения рекламного бюджета. Поэтому плохой дизайн — не эстетическая проблема. Это тихая утечка денег.

Медленная загрузка

Если страница грузится 5-7 секунд, часть пользователей уйдет до того, как увидит дизайн. Особенно на мобильном трафике. Для коммерческого сайта хорошая планка — основной контент до 2,5 секунды. Все, что дольше 3 секунд, уже риск.

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

Форма заявки

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

Для первого контакта обычно хватает имени, телефона или мессенджера и одного свободного поля. Остальное можно уточнить после заявки. Если просите 8 полей сразу, у пользователя появляется ощущение собеседования.

Чек-лист плохого дизайна

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

Не всегда нужен большой редизайн за 300 000 ₽. Иногда достаточно 10-15 точечных правок: переписать первый экран, убрать лишние блоки, ускорить изображения, сделать одну главную кнопку, сократить форму, добавить цены или диапазон, показать примеры работ.

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

Быстрый план на 7 дней

  1. День 1. Запишите главную цель страницы и один целевой CTA.
  2. День 2. Упростите первый экран: конкретный заголовок, польза, кнопка.
  3. День 3. Проверьте мобильную версию и размер текста.
  4. День 4. Сожмите изображения и уберите тяжелые декоративные элементы.
  5. День 5. Сократите форму заявки до минимума.
  6. День 6. Добавьте доказательства: отзыв, цифру, пример, гарантию.
  7. День 7. Сравните клики, заявки и поведение с прошлой неделей.

Когда плохой дизайн лучше не чинить, а переделывать

Точечные правки не спасут сайт, если у него сломана сама структура: непонятные разделы, устаревшая CMS, хаотичный каталог, нет мобильной логики, невозможно нормально добавить контент. В таком случае косметика будет похожа на покраску стены с трещинами.

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

Дополнительные вопросы

Плохой дизайн всегда выглядит некрасиво?

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

Что проверить первым: визуал или аналитику?

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

Можно ли оценить дизайн без A/B-теста?

Можно, но осторожно. Проверьте понятность первого экрана, мобильную версию, скорость, форму и CTA. Это базовая диагностика. A/B-тест нужен, когда есть трафик и несколько вариантов решения.

Какая ошибка самая дорогая?

Скрытый или слабый CTA. Если пользователь не понимает следующий шаг, все остальные элементы работают вполсилы. Вторая по цене ошибка — медленная мобильная версия.

Как объяснить заказчику, что дизайн плохой

Самая сложная часть работы с плохим дизайном — не найти ошибку, а доказать ее без вкусовщины. Фраза “мне не нравится” почти бесполезна. Заказчик может ответить “а мне нравится”, и разговор зайдет в тупик. Говорите через задачу, сценарий и цифры.

Вместо “шапка перегружена” лучше сказать: “На первом экране 6 конкурирующих акцентов, главный CTA визуально четвертый по силе. Пользователь не понимает, куда нажать после заголовка”. Это уже не вкус, а наблюдение. Его можно проверить.

Формула аргумента

Хороший аргумент выглядит так: элемент → проблема → последствия → решение. Например: “Форма заявки просит 7 полей до первого контакта. Это повышает тревогу и снижает отправки. Сократим до имени и телефона, остальное уточнит менеджер”.

Если есть аналитика, добавьте цифры. “До формы доходит 1 200 человек в месяц, отправляют 36. Конверсия формы 3%. Даже рост до 5% даст 24 дополнительные заявки”. После этого разговор о дизайне становится разговором о деньгах.

Мини-аудит сайта за 30 минут

Если нет времени на большой UX-аудит, сделайте короткую проверку. Она не заменит исследование, но быстро покажет грубые провалы.

  1. Откройте сайт на телефоне через мобильный интернет.
  2. Засеките, за сколько секунд появился основной контент.
  3. За 5 секунд сформулируйте, что сайт предлагает.
  4. Найдите главный CTA без скролла.
  5. Проверьте, читается ли текст без приближения.
  6. Попробуйте отправить форму как обычный пользователь.
  7. Откройте страницу товара или услуги и найдите цену, сроки, гарантии.

Если на 3-4 шагах возникают вопросы, дизайн уже требует правок. Не обязательно переделывать весь сайт. Но точки трения надо убрать до того, как лить трафик.

Почему плохой дизайн часто появляется в хороших командах

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

Нужен владелец сценария. Человек, который спрашивает: “Что здесь главное? Что можно убрать? Какой следующий шаг?” Без такого фильтра даже сильная команда собирает слабый интерфейс.

Хороший дизайн — это часто умение сказать “нет”. Нет второму поп-апу. Нет лишнему пункту меню. Нет абзацу про историю компании на первом экране. Нет декоративному видео, которое грузится 8 секунд и ничего не продает.