Prepare the Next Gen App

Define titles, categories, and kiosk architecture

This part details how to organize content on Cloud Connect, also how to prepare your application architecture.

Tip

Example of organizing content on Cloud Connect

The first step consists of defining the content you want to add in Cloud Connect. You need to define Titles, Issues and Categories and to know the architecture of your store.

Phase 1: Manage the content by Titles, Issue, Categories in Cloud Connect. Then you can pass to Phase 2.

Phase 2: Manage the banners in the Next Gen App: The banners will display the content by Issues/Titles/Categories that you have created during Phase 2.

Define banners height

This part describes how to define the height of the banners, which you can set then in Cloud Connect when building your store model.

To define and represent the banners height we’ll take a reference resolution.

For banners height it is recommended to take an iPAD non retina (1,024 PX vertically) as model. For example, if one can factor a 250 it will take 25% of the screen on a vertical iPad. The following example is based on this configuration.

Example 2.1. 

If all your banners are 300 PX height, you can show three banners on the screen height (3*300 = 900 PX), and the forth will be cut (4*300 = 1200). The user will have to scroll down to see the rest of the categories.

Example of architecture

This step is recommended to create your application architecture. You can list the elements that would appear in NextGen indicating their heights, types, actions and settings.

Tip

We recommend you to make one architecture for small and medium screen.

Prepare visual elements

Set the kiosk banners size in pixels

Once you defined the store architecture , you can create the images for the banners, using the height you set for the banners. The store can process various image formats in order to display a quality image for different devices: tablets and smartphones.

Note

You can find examples of banners in the StarterPack, Banner elements folder.

The following table contains all possible situations. The green column is the reference for the height.

Example 2.2. 

The cells in blue are given as example.

If you have a 250 PX banner height for tablet: 2,732*667 PX and 2,560*500 PX.

If you have a 200 PX banner for smartphone: 2,560*1,444 PX.

Tip

In certain cases, the smartphone banner can be used on a tablet too.

Important

In certain cases, the smartphone banner can be used on a tablet too.

Example 2.3. 

For example you can add an image of 1536 x (h * 2) to optimize the vertical display of your iPad or an image of 1280 x (h * 2) for 7″ android tablet.

Offscreen zones

The banners appearance, height and width, adapts proportionally to the size of the device.

Certain parts of the images can be cropped according to the device that is used. They are called offscreen zones.

Offscreen zones will appear on 4.7″ and 5.5″ phones, but not on 3.5″ and 4″ phones.

Offscreen zones are indicated in the visual renderings of the previous examples. They are given as example, but must not appear in the final image in the application.

Create a header for titles and library

The library gathers all your acquired content: free or purchased. You can read the content offline if you haven’t archived it.

The banner corresponds to the image shown in the user’s library. The banner appears once the user has bought two different titles.

Note

You can use the same images for this banner as for the store elements, or you can have different images. Set the banner height above 200.

Image banner for Category screen

This banner corresponds to the head of the shown category. The banner is optional and only visual. If not used, the kiosk will show only the contents.

Note

This type will appear in the content search.

Tip

You can use more than one images to optimize the display according to the device used.

Parallaxe effects

It is possible to add a parallaxe effect on all image banners. A parallaxe effect is a movement of two or more elements, at different speeds, which will generate a sense of depth. Currently, two effect types are available.

Important

On Android devices the text editing for parallaxe effect is limited: you can not justify the text, add colors to it or create ordered lists.

Parallaxe effect with overlay image

This effect, obtained with two elements, creates an “animation” when the user scrolls the kiosk. Both images must have this size: banner height*1,6 minimum. The higher the multiplier, the effect is more visible.

Example 2.4. 

On a tablet of 250 height, the image must have 500 PX*1,6 = 800 PX height.

Parallaxe effect with HTML text

This effect, obtained with an image and HTML text, to create an “animation” when the user scrolls the kiosk.

Set a background image, with a height of your choice, and indicate in Cloud Connect the text you want to make appear in the kiosk. This text can be written directly in HTML or on an HTML editor from Cloud Connect.

Download the helping start pack for the Next Gen App

The following link contains the graphic elements and the necessary information to create an application: Starter Pack Next Gen.

This pack includes:

  • Different resolution banners for the devices:
    • the visuals for iOs application (icons, launch screens, etc),
    • the visuals for Android application (icons, launch screens, etc).
  • iOS and Android information sheets.
  • Choice of features in the application.

Important

Prepare the information about the application and send all these elements to Aquafadas. The project starts after the reception of the complete files.

Leave a Reply