Отступы в Instagram Stories

Шпаргалка с отступами внизу статьи!

Замечали в сторис элементы интерфейса, которые накладываются поверх изображения или видео? Речь идёт об аватарке с именем пользователя, крестике закрытия, меню в виде трёх точек, окне для отправки сообщений и кнопке отправки. За счёт тонких линий и белого цвета они не бросаются в глаза, но при этом могут перекрывать существенные части изображения и мешать восприятию.

На первый взгляд это сложно воспринимать как проблему — какие сложности с тем, чтобы сделать отступы, тем более в рекдакторе сторис Инстаграм сам даёт подсказки не ставить плашки с хэштегами, геоотметки и другое близко к краям. Но на практике даже у крупных брендов встерчаются примеры, когда сверху логотип или текст перекрывается аватаркой, когда под кнопкой CTA прячется крошечный нечитабельный текст, и другие проблемы.

С 2020 г. исследую и собираю примеры рекламы доставки продуктов питания в сторис Инстаграм, и мне постоянно попадаются варианты с ошибками (смотреть в верхнюю и нижнюю часть креативов).

Предпосылки для таких ошибок в сторис:

• Подготовка и загрузка с десктопа. Некоторые креативы готовятся в графическом редакторе на десктопе, где дизайнер оторван от мобильной среды сторис и может забыть про отступы. Готовые креативы могут быть загружены через рекламный кабинет на десктопе без достаточного внимания к превью.
• При проверке уже залитой сторис под рукой оказывается только один девайс, не позволяющий сделать выводы о корректности креатива (даже на iPhone разных моделей нижний блок с отправкой сообщения выглядит по-разному: на iPhone 8 он накладывается на сторис, а на iPhone X и следующих под сторис появляется дополнительная чёрная подложка с этим блоком).
• Распространённая вёрстка по левому краю и желание уместить побольше информации так и подталкивают поместить лого или заголовок в верхний левый угол, как раз в то место, где Инстаграм накладывает аватарку с именем пользователя. Вёрстка по левому краю вполне подходит для сторис, но нужно быть внимательнее с отступами.

Чтобы избежать ошибок, предлагаю простое решение — использовать шаблон с подсказками по отступам.

Изучаем сторис на разных устройствах

Прежде чем переходить к шаблону с отступами, хочу обратить внимание, насколько по-разному выглядят сторис на разных устройствах. Внутри команды провели замеры сторис с фрагментом картины Питера Брейгеля (на ней много деталей) на 15+ устройствах, в итоге собрали 11 разных примеров здесь.

Само изображение всегда выглядит одинаково (не обрезается), но элементы интерфейса и их расположение, размер шрифтов, количество чёрного, скругления углов фонового изображения меняются. В нижней части креатива нужно оставлять свободное место, так как на некоторых устройствах там располагается окно для отправки сообщения.

Шаблон с учётом отступов для сторис Инстаграм

В качестве решения предлагаю шпаргалку с отступами. В первую очередь, по размерам отступов ориентировалась на подсказки Инстаграм в конструкторе сторис на телефоне.

Эти подсказки по отступам хорошо работают для просмотра сторис на большинстве современных смартфонов. Чтобы охватить ещё более широкий круг устройств (в т.ч. модели Honor, Xiaomi, Meizu, Irbis), рекомендую сверху и снизу брать отступы побольше —в шаблоне уже учтено.

В шпаргалке ⬇ бордовым обозначены границы, за которые не должны выходить значимые элементы (лого, текст, лица людей и т.д.)

Также разместила стандартные размеры шрифтов для текстов, хэштегов и гео из конструктора Инстаграм. Следует ориентироваться на их размер, чтобы надписи на сторис оставались заметным и читабельными.

Формат изображения под сторис 9:16, рекомендую использовать изображения высокого качества в размере 1170х2080 пикселей.

Если вы готовите сторис в Инстаграм или подручных программах, ориентируйтесь на шпаргалку .png ниже.

Если вы готовите сторис в Photoshop, скачивайте макет .psd здесь.

Шаблон Figma здесь.

Не забывайте про отступы и следите за обновлениями внутри Инстаграм :)

запустить сервис бота https://t.me/visualgram_bot

P.S. Запустили бота, который проверяет* отступы на Stories в Instagram: t.me/visualgram_bot

Теперь ваши тексты или стикеры уж точно не залезут за края 👌