Куда на лендинге можно класть акцент
Ниже — как держать одну точку притяжения, когда герой, чипы и карточки уже стоят на экране.
Как проверить акцент на лендинге
Закон 60–30–10 здесь работает почти буквально. Около 60% кадра — белая или очень светлая поверхность, 30% — мягкий вторичный тон в превью и чипах, 10% — акцент на CTA. Правило одной доминанты (von Restorff) усиливает кнопку: отличающийся цвет запоминается лучше, чем три одинаково ярких пятна.
Контраст текста на кнопке проверяйте по WCAG AA: для 14 px нужно отношение не ниже 4.5:1. Закон Фиттса подсказывает сделать основную кнопку крупнее вторичной и поставить её ближе к зоне чтения. Вторичную («Смотреть») лучше оставить нейтральной заливкой — так Хик не заставляет выбирать между двумя равными действиями.
Карточки ниже hero проверяют simultaneous contrast Йозефа Альберса: один и тот же акцент на светлой и цветной подложке выглядит по-разному. Если бейдж на карточке теряется, усильте не весь блок, а только метку и цену. Гештальт близости собирает заголовок, тег и цену в одну карточку — не размазывайте акценты между соседями.
- Найдите единственное действие. Кнопка «Начать» забирает первый цвет. Вторая кнопка остаётся нейтральной.
- Не заливайте hero. Если акцент ушёл в фон первого экрана, кнопке некуда сесть.
- Сверьте бейдж на карточке. Один и тот же HEX на белом и на цветной подложке выглядит по-разному. Красьте метку, не всю карточку.
Часто задаваемые вопросы
Сколько акцентов у лендинга?
Один основной: кнопка, бейдж и короткая строка заголовка. Фон героя и вторичная кнопка остаются тихими.
Какой контраст нужен тексту на кнопке?
Для подписи около 14 px держите отношение не ниже 4.5:1. Крупный заголовок героя может быть мягче, но кнопку это не спасает.