13.04.2018

Шаблон витрины App Store Mockup (V1.0) для тестирования иконки и скриншотов



Есть много онлайн-сервисов для проверки внешнего вида витрины приложения. Я ими не пользуюсь, так как они не интегрируются с основным инструментом работы (Photoshop, Sketch, Figma). Важно в процессе создания графики сразу видеть, что будет в итоге, а не загружать промежуточные результаты по 100500 раз. Сейчас я использую сделанные “на коленках” шаблоны в Photoshop. Они некрасивые, но свою функцию выполняют исправно.

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


Шаблон сделан в Figma. Это условно бесплатный инструмент (может полнофункционально работать в браузере) для создания интерфейсов и прототипов, аналог Sketch. В отличие от Photoshop, намного легче и быстрее. Работает на Windows и IOS, а Sketch только на IOS.

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

Компоненты


Шаблон построен с помощью компонентов (аналог смарт-объектов Photoshop). Позволяет на лету обновлять изменения иконки во всех местах, где она присутствует. Работает и со скриншотами.




Превью графики основных страниц App Store на iPad и iPhone


Умеет показывать превью страницы приложения, поиска и иконку на рабочем столе для iPad (Pro, Air) и iPhone (7, X). Можно по старинке скидывать картинку превью на утверждение в чат или добавить пользователя и точечно обсуждать оформление прямо в макете.

Комментирование в макете


Превью

Вывод графики в соответствии с техническими требованиями


Экспортирует графику для загрузки в App Store. Удобно, если создавать графику в Figma.





Плюшки


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

Как использовать


Открой ссылку, авторизируйся/зарегистрируйся, скопируй шаблон



Как работает Figma: экспорт,  компоненты, панель слоев

Будь в курсе
новых заметок


︎

What would you like me
to help you with?


︎

Hire me!