ARG design
Published in

ARG design

Отступы в Instagram Stories

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

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

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

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

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

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

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

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

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

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

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

бот, который проверяет* отступы на Stories в Instagram
запустить сервис бота https://t.me/visualgram_bot

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

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

--

--

Наша философия — превращать сложную информацию в простую.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store