Макет проверяют на большом экране, а смотрят с ладони. Разбираем, как подобрать размер шрифта и контраст, чтобы слайд работал в мобильной выдаче.
Подавляющая часть покупателей смотрит карточки с телефона. В выдаче изображение показывается размером с иконку, в карточке — на ширину экрана, и лишь в зуме приближается к тому, что видел дизайнер.
Значит проверять макет нужно в двух размерах: превью и экран телефона. Всё, что не читается в первом, для выдачи не существует.
Из этого следует и правило вёрстки: макет собирают, глядя на уменьшенную копию, а не только на полноэкранный вид.
Универсальной цифры в пикселях нет — она зависит от размера макета. Работает пропорция: главная фраза занимает по высоте примерно десятую часть слайда.
Практический тест проще формулы: уменьшите макет до ширины пары сантиметров и попробуйте прочитать. Если не выходит — увеличивайте, пока не выйдет.
Ещё один ориентир — расстояние: слайд читают с вытянутой руки, а не с двадцати сантиметров, как макет в редакторе.
Тонкий светлый шрифт на светлом фото исчезает первым. Помогают плашка под текстом, затемнение части кадра или размещение надписи на однородном участке фона.
Проверять контраст стоит при выключенной подсветке на максимуме: покупатель часто смотрит карточки на улице, а не в идеальных условиях.
Тонкие шрифты с засечками теряются первыми — для слайдов надёжнее плотные рубленые начертания.
Крупный кегль ограничивает объём — и это хорошо. На слайд помещается одна фраза и короткое пояснение, а всё лишнее уезжает в описание.
Если текст не влезает, правильный ход — сократить формулировку, а не уменьшить шрифт.
Края слайда могут обрезаться при кадрировании под разные витрины. Текст лучше держать внутри условной рамки, отступив от краёв.
Особенно это касается нижней части: там площадки иногда накладывают собственные элементы интерфейса.
Стоит помнить и о тёмной теме приложения: белая плашка выглядит в ней иначе, чем на светлом фоне браузера.
Соберите слайды в один экран, уменьшите до размера превью и посмотрите с расстояния вытянутой руки — так вы увидите то же, что покупатель.
И откройте выдачу конкурентов рядом: если ваш слайд теряется на их фоне, дело почти всегда в кегле и контрасте, а не в идее.
Полезно собрать эталонный слайд линейки и сверять с ним остальные: так кегль и контраст не «плывут» от карточки к карточке.
Мы используем файлы cookie, Яндекс Метрику и чат поддержки Jivo, чтобы сайт работал корректно и мы понимали, какие страницы полезны. Нажмите «Только необходимые» — и аналитика с чатом на вашем устройстве отключатся. Подробнее — в политике использования cookie и политике обработки персональных данных.