Для дизайнеров, которые хотят, чтобы их макеты сайтов не просто нравились, а приносили трафик
Представь: ты сдаёшь макет. Заказчик доволен. Красиво, удобно, современно.
Проходит месяц — и тебе прилетает сообщение от менеджера:
«Почему трафика нет? Почему сайт не в поиске?»
А ты думаешь: "Это же не моя зона ответственности..." Но поисковикам всё равно, кто делал. Они смотрят на результат.
Если на сайте:
- кнопка спрятана ниже части, которая видна на экране пользователя до скролла
- текст нечитабелен
- структура рвёт логическую иерархию, то даже идеальный копирайт и крутая семантика не спасут
Сегодня дизайнер отвечает не только за красоту. Он влияет на поведенческие сигналы, глубину просмотра, отказ и даже индексируемость. И если хочешь, чтобы твои макеты не только нравились глазу, но и работали в поиске — вот чек-лист, без которого лучше не сдавать ни один проект.
1. Контраст текста и фона
Что проверять: Текст должен быть читаемым. Слишком светло-серый на белом фоне — плохая идея. Используй инструменты проверки контраста, такие как WebAIM Contrast Checker или Accessible Colors.
Почему это важно: Если текст плохо читается, пользователь уходит — и поисковик это видит. Это влияет на показатель отказов, глубину просмотра и другие поведенческие метрики.
2. Размер и тип шрифта
Что проверять:
- Размер основного текста — минимум 16px. Лучше — 18px.
- Межстрочный интервал — 1.4–1.6.
- Не больше двух гарнитур на сайт.
- Логичная иерархия H1 → H2 → H3.
Почему это важно: Плохо читаемый текст = пользователь не читает = SEO не работает. Яндекс и Google оценивают «удобство восприятия». А неудобный текст — это сигнал «плохо».
3. Визуальные элементы не мешают индексации
Что проверять:
- Меню, кнопки и ссылки — визуально различимы и доступны при первом просмотре страницы (без прокрутки и кликов).
- Весь ключевой контент виден сразу, без дополнительного действия со стороны пользователя.
- У всех изображений (особенно иконок и декоративных элементов) есть альтернатива в виде понятного текста — подписи, заголовки, визуальные маркеры.
Почему это важно: Если навигация непонятна, важный контент скрыт, а кнопки — это просто красивые кружочки без смысла, пользователь уходит. А вместе с ним — трафик.
4. Кнопки и ссылки: удобно и заметно
Что проверять:
- CTA не теряется на фоне
- Цвет кнопки контрастирует с основным фоном
- Кликабельная зона — не меньше 44x44px (по стандартам Google)
- В тексте кнопок нет «узнайте больше» без уточнений
Почему это важно: Пользователь не кликнул — не перешёл дальше. Поведенческие метрики — просели. SEO — тоже.
5. Адаптивность и поведение на мобильных
Что проверять:
- Элементы не накладываются друг на друга
- Кнопки не слишком мелкие
- Нет горизонтального скролла
- Шрифт читабелен без масштабирования
Почему это важно: Мобильный индекс у Google — основной. Если сайт неудобен на смартфоне, его просто не покажут.
6. Глубина скроллинга и расстановка блоков
Что проверять:
- Важная информация и CTA — в первых экранах
- На сайте нет лишних больших блоков без смысла — только один первый экран с ясным посылом, без повторяющихся пустых секций
- Страница ведёт пользователя, а не сбивает с толку
Почему это важно: Пользователь не дошёл до кнопки = не конвертировался. Для SEO это сигнал: контент неценный → позиции вниз.
7. Навигация и структура
Что проверять:
- Главное меню на всех страницах
- Ясная архитектура: каталог → категория → товар
- Хлебные крошки — присутствуют
Почему это важно: Хорошая навигация = больше внутренних переходов. Это улучшает поведенческие факторы и внутреннюю перелинковку — оба важны для SEO.
8. Сниппеты: есть ли что тянуть?
Что проверять:
- Заголовки страниц соответствуют смыслу и включают ключевые слова
- Тексты можно структурировать в описания/выдержки
Почему это важно: Поисковик берёт сниппеты из контента. Если их нечем «подпитать» — CTR будет низким, даже если сайт на видной позиции.
9. Проверка на практике
Что делать:
- Протестировать макет через WebPageTest и Lighthouse
- Прогнать через тепловую карту Яндекс.Метрики (если сайт уже выложен)
- Собрать обратную связь от SEO и UX-специалистов
Почему это важно: SEO не живёт сам по себе. Без тестов — только догадки.
Вопрос к тебе, дизайнер:
Ты проверяешь макеты только на эстетику — или думаешь о метриках? Напиши в комментарии, какие правки от SEO тебя бесят больше всего — и как ты с ними работаешь.
Ещё больше кейсов, истории из жизни компании, а также полезные лайфхаки по продвижению в Telegram-канале. Подписывайтесь!