Скриншоты для App Store и Google Play. Идеи и советы по созданию скриншотов для ASO

В создании скриншотов для приложения есть свои особенности. Это не отрисовка рекламных баннеров, а скорее конструктор из элементов, разрешенных гайдлайнами App Store и Google Play. Рассказываем, как мы в Appbooster подходим к оформлению скриншотов и какими пользуемся приёмами.

Дизайн скриншотов можно разделить на четыре составляющие:

• Мокапы
• Текст
• Фон
• Дополнительные решения для ASO

Дальше поделимся идеями оформления каждого из этих элементов. Но сначала — коротко о технических моментах.

Содержание

• Требования к размерам скриншотов для App Store и Google Play
• Дизайн мокапов для скриншотов
• Оформление текста на скриншотах для приложения
• Фон скриншота
• Дополнительные решения для ASO
• Бесплатный конструктор для создания скриншотов от Appbooster

Требования к размерам скриншотов для App Store и Google Play

Для App Store можно добавлять от 3 до 10 скриншотов. Форматы — JPEG, JPG и PNG. Для iPhone достаточно загрузить скриншоты для 6.9-дюймовых экранов, для iPad — 13-дюймовых. Apple автоматически подгонит изображения для остальных поколений устройств.

Требования к размерам скриншотов меняются, поэтому перед их созданием стоит заглянуть в спецификацию. Мы в Appbooster обычно делаем скриншоты для iPhone в размере 1290 x 2796 px, для iPad — 2048 x 2732 px.

Для Google Play можно добавлять до 8 скриншотов. Поддерживаются форматы JPEG и PNG 24 без альфа-канала. Для смартфонов мы готовим скриншоты в размере 1440 x 2560 px, для планшетов 2048 x 2732 px.

Подробнее о рекомендациях по созданию скриншотов читайте в справке Google.

Дизайн мокапов для скриншотов

Мокап – это макет, который дизайнеры используют для демонстрации своей работы. Это может быть экран ноутбука, визитка, монитор или мобильный телефон. Он нужен для того, чтобы заранее представить, как будет выглядеть какой-либо интерфейс на экране, например, мобильного устройства. Благодаря мокапу можно получить не просто плоскую картинку, вырванную из контекста, а реалистичное изображение.

Еще несколько лет назад мокапы реальных устройств только начинали использовать и это было крутым дизайнерским решением. Но уже сегодня на главной странице Dribbble 80% дизайнов мобильных приложений демонстрируются без мокапов. На смену тяжеловесным решениям пришла простота и легкость.

Вот четыре варианта, как показать интерфейс мобильного устройства в ASO.

Идея #1: скриншоты с объёмными реалистичными устройствами

Идея #2: Flat скриншоты – плоские устройства

Идея #3: скриншоты с обводкой линией

Это решение подойдет для разграничения фона и функционала приложения без перегруза лишними визуальными эффектами.

Идея #4: скриншоты без устройства

Оформление текста на скриншотах для приложения

Заметный и контрастный текст поможет рассказать о главных преимуществах приложения. Обычно его размещают сверху или снизу от изображения и добавляют дополнительные акценты.

Мы подобрали пять популярных решений по оформлению текста скриншотов.

Идея #1: выделить часть фразы цветом

Идея #2: выделить часть текста иным кеглем

Идея #3: подчеркнуть часть фразы

Идея #4: выделить часть текста плашкой

Идея #5: добавить ёмкий текст в одно слово

Помните, что текст на скриншотах для Google Play должен быть крупнее, чем для App Store, потому что сами скриншоты на странице Android-приложений меньше.

Оставить заявку на ASO в Appbooster

Фон скриншота

Главное требование к фону: он должен гармонировать с цветами и стилем приложения. Остальные рекомендации будут зависеть от дизайна интерфейса. Если он сложный и содержит множество мелких деталей, то лучше не перегружать фон: это может отвлечь пользователей от того, что вы на самом деле хотите сказать.

Если интерфейс прост и понятен, можно добавить больше ярких деталей для привлечения внимания. При этом каждый элемент должен нести в себе смысл, который поможет показать, какую проблему решает это приложение.

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

И еще одно визуальное решение для фона: перетекающие элементы связывают скриншоты в единую композицию.

Дополнительные решения для ASO

Скрин-обложка. Это отличный способ быстро и просто продемонстрировать основную суть приложения и вызвать нужные эмоции.

Скриншоты с персонажами и логотипами. Если приложение игровое или у вашего бренда есть известные персонажи, постарайтесь их добавить на скриншоты. Это поможет эмоционально привлечь пользователей и добавит узнаваемости.

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

Плашки с контентом. Если в вашем приложении много контента или он играет такую же важную роль, как и сами функции, то для его демонстрации попробуйте использовать такой прием.

Фотофон — ещё один вариант оформления скриншотов.

Изометрия – привлекательное решение, однако важно, чтобы оно не повлияло на видимость интерфейса приложения.

Приступая к созданию дизайна ASO, помните, что шаблонные решения используют многие. Пользователи завалены контентом, поэтому необходимо выделиться среди конкурентов. Главное при создании графики — это индивидуальный подход. Выдвигайте самые неожиданные гипотезы, тестируйте их и узнавайте, что нравится вашей целевой аудитории. Иногда лучшими оказываются варианты, в которые не верил никто!

Бесплатный конструктор для создания скриншотов от Appbooster

ASO-специалисты нашего агентства разработали простой инструмент для создания стильных скриншотов — ASO-конструктор на базе Figma.

Теперь не нужно изучать гайдлайны и искать размеры: в конструкторе есть все необходимые шаблоны. А кроме того, в нём собраны удачные цветовые сочетания и мокапы устройств под Google Play и App Store.

Чтобы помочь разобраться в конструкторе, мы сделали видеоинструкцию: