Оставить заявку
Сайт использует cookie-файлы, чтобы сделать ваше пребывание на нем максимально удобным. Оставаясь на сайте, вы даёте свое согласие на использование cookie-файлов
OK
Главная
/
Блог
/
Текст-невидимка

Текст-невидимка: почему ваши макеты не читают и как это исправить за 10 минут

Вы потратили часы на подбор шрифтов, выравнивание и композицию. Но клиент говорит: «Что-то не цепляет». С вероятностью 90% проблема не в картинках, а в «Слепом тексте». Так мы называем контент, который дизайнер видит, а пользователь — нет.

Почему ваш текст не читают

Глаз сканирует макет за 2-3 секунды. Если за это время он не зацепился за смысл — баннер пролистнули, письмо удалили, лендинг закрыли. Есть три главных убийцы читабельности:
  • Дизайнерская слепота. Вы влюблены в тонкий шрифт 12 кегля, а ваша аудитория носит очки.
  • Контраст-предатель. Светло-серый текст на белом фоне выглядит стильно на макбуке дизайнера и исчезает на мониторе бухгалтера.
  • Полотно текста. Абзацы без воздуха. Страница выглядит как пользовательское соглашение, которое никто не читает.
Факт: По данным исследований, пользователи читают только 20-28% текста на странице. Ваша задача — сделать так, чтобы эти проценты попали в самое важное.

Лайфхак: «Правило пожилой мамы»

В студии мы используем простой тест: покажите макет человеку, который не разбирается в дизайне (в идеале — маме), и попросите прочитать текст с расстояния вытянутой руки. Если щурится — шрифт меньше 16px, а контраст хромает.

Приём 1: Контраст не по линейке, а по глазам

Инструмент «Пипетка» в Figma покажет красивые HEX-коды. Но ваш глаз — лучший детектор. Сделайте скриншот макета, переведите его в чёрно-белый режим (в телефоне: настройки → универсальный доступ → оттенки серого). Если текст исчез — он слишком бледный.

Приём 2: Воздух важнее шрифта

Межстрочный интервал (line-height) должен быть минимум 1.5 для основного текста. Абзацы — не длиннее 3-4 строк. Если текст напоминает кирпич — разбейте его подзаголовками. Человек сначала читает заголовки и только потом решает, читать ли остальное.

Приём 3: Правило 5 слов

В одной строке десктопного текста должно помещаться не больше 9-12 слов. В мобильной версии — 5-7. Всё, что шире, заставляет глаза совершать утомительный марафон слева направо. Пользователь устаёт и уходит.
Совет: Используйте типографическую иерархию: Заголовок → Подзаголовок → Основной текст → Подпись. Минимум 4 уровня. Если все буквы одного размера — это не макет, а простыня.

Результат

Дизайн — это не украшение, а управление вниманием. Начните с текста, а не с картинок. Пройдите «Правило пожилой мамы» на своём последнем макете. Увидели проблему? Мы знаем, как превратить «слепой текст» в продающий интерфейс.
Нужна профессиональная помощь в этом вопросе?
Позвоните нам или оставьте заявку через форму, чтобы обсудить вашу задачу