Примеры плохого дизайна сайтов: 6 ошибок и как их исправить

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

Автор хотел «красиво» и поставил заголовки одним шрифтом, подзаголовки другим, текст третьим, плюс акцентный курсив. Глазу не за что зацепиться, страница выглядит как листовка из 90-х.

Исправление: максимум два шрифта — пара заголовочного и текстового. Иерархия (система «что главное, что второстепенное») строится размером и весом (толщиной букв), а не разными гарнитурами (гарнитура — название шрифта: Roboto, Arial и т.д.).

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

Исправление: палитра (набор из нескольких подобранных цветов) подбирается до начала макета: два-три цвета. Правило 60/30/10: 60% — нейтральный фон, 30% — вторичный цвет, 10% — акцент (яркий цвет, который выделяет главное) для кнопок и ссылок.

Блоки прижаты друг к другу, текст липнет к краям и к соседям. Автор «экономит место», но читатель задыхается.

Исправление: воздух — часть дизайна. Базовый отступ между блоками — 60–100 пикселей (пиксель — точка на экране) на десктопе (компьютерной версии), между элементами блока — 16–32. Чем больше воздуха, тем дороже выглядит макет.

Абзац на 15 строк без подзаголовков, списков и акцентов. Такой текст не читают: глаз скользит мимо.

Исправление: дробить текст на куски по три-четыре строки, добавлять подзаголовок каждые два-три абзаца, важное выносить в списки. Люди сканируют (пробегают глазами), а не читают.

На десктопе всё хорошо, на телефоне заголовок уезжает за экран, кнопка падает под текст. Автор сделал одну версию.

Исправление: адаптив (сайт нормально выглядит на любых экранах, включая телефон) — не опция, а часть макета. С мобильных приходит 60–70% трафика (посетителей). Проверка макета на ширине 360–414 пикселей (ширина экрана телефона) — с самого начала, а не в конце.

Серая кнопка на сером фоне, маленькая, без hover (эффекта при наведении курсора: кнопка меняет цвет, когда на неё наводишь). Автор понимает, куда нажимать, пользователь — нет.

Исправление: кнопка — самый контрастный элемент блока. Акцентный цвет из палитры, размер не меньше 44 пикселей по высоте (чтобы удобно было попасть пальцем с телефона), понятный глагол на ней: «записаться», «рассчитать», «купить».

Три привычки:

1. Смотреть примеры плохого дизайна специально и спрашивать «почему плохо».
2. Сравнивать свой макет с референсом (примером хорошего сайта, который тебе нравится): положить рядом и посмотреть на разницу в отступах и шрифтах.
3. Отдыхать от макета сутки и смотреть свежим взглядом — ошибки вылезают сами.

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

Полный курс: Веб дизайн с нуля всего за 390 ₽