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