Structure of Apps and Slides
Understanding the basic structure of the app will help to create and arrange content easily. This page deep-dive into the structure of an app and slide deck needed t build it.
Basic Structure of Apps
The most common structure of an app consists of three parts. Title, Menu, and Content.
Title - The identity of the app
Menu - Navigate between different sections of the app
Content - Text, pictures, video, etc in each section
A rough layout will be as shown in Figure 1,
In both desktop and mobile versions, the menu will be hidden by default and a hamburger menu icon can be used to show and hide the menu.
Note that in the mobile version of the app, the type of navigation can be different depending upon the template. Some have a hamburger menu and some have a bottom navigation bar.
Title
The Title of an app consists of a top bar filled with primary color (what?) and the logo uploaded by the user. The title bar is the place where you can specify your primary brand color. So the primary color with the logo gives the app an identity.
Menu
In the native apps of a smartphone, everyone is familiar with the hamburger menu or a bottom navigation bar. That type of navigation is also possible in web applications. Poexis apps are designed to give the most native-app-like experience to the user. You will find an easy-to-use menu with gesture support.
Content
Content... is the content. Everything that you want to include in your app. Starting from titles and descriptions to videos and animated GIFs, your app can include a wide variety of content types. All you have to do is enter your content, make some links and paste some stickers. Poexis will take care of the rest.
Slides to App
What is explained above is the structure of a typical app that you can make with Poexis. Now you need to add everything you have to this structure. As you already know, you will be using Google Slides for that.
It is really simple. All you have to do is make a presentation. But there are a few things that you should ensure while doing it.
Layouts
Poexis need to know where it should look for elements to place in the app. This means, there should be some way to communicate that the user wants a particular element to be part of the Title, Menu, or Content. It is done with the help of layouts. (Need Help?)
Layouts define how different elements are arranged in a slide. Poexis uses a set of predefined layouts to indicate that the elements in a particular slide go to a particular part of the final app. In all Poexis templates, you will find a set of layouts supported by that particular template.
But there are a few layouts that are present in every template. The default layouts are,
Content Area
In simple terms, if a slide has the layout 'Menu', entries in that particular slide go to the Hamburger Menu of the final app. Read more about layouts here.
Mapping
The following figure, Figure 2, shows the mapping or the relationship between default layouts with the final app.
When you publish an app, Poexis look for the name of the layout to decide where to put the elements in that particular slide and also how to process the elements. (more on this later).
Layouts are available in the toolbar when only the slide is selected. You can also apply a layout by going to, Slide > Apply Layout > [Choose a Layout]. The following screenshot shows various layouts accessed from the toolbar.
Structure of Slides
The structure of the final app and how the final app is linked with the Google Slides presentation (AKA slide deck) are explained in the two previous sections. This section details the structure or arrangement and linking of slides inside a slide deck.
Poexis is very flexible in placing different slides inside a slide deck. As long as the slides are properly linked and stickers are pasted, any set of slides can be at any part of the presentation. But if you follow a logical sequence, navigating among the slides will be very easy.
Adding elements to include in the Title and Menu are very simple. You just select the 'Title Slide' layout for 'Title' and 'Menu' layout for 'Menu'. Then fill up the elements. You can add the app title and logo in the 'Title Slide' and required navigation menu entries in the 'Menu' slide.
When it comes to contents, the elements need to be grouped and placed in different sections. This means the 'Contents' will consist of different sections. These sections can have a menu entry through which that particular section can be accessed in the final app.
Figure 3 shows the division of 'Contents' into different sections.
Section Header
You might have noticed that the 'Contents' had mapping from two slide layouts, 'Section Header' and 'Content Area'. These are not the only layouts where you can add elements to 'Contents'. In each template, there will be specially configured layouts for achieving different specific arrangements of elements.
For explaining this section, let us assume that there are two layouts, namely ' Section Header' and 'Content Area'. As shown in the figure, every section can have its own 'Section Header'. Even though this is not a requirement, this will help to organize contents neatly inside the slide deck.
Organizing slides can be summarised as given below,
Every section can have a section header
Section Header is automatically linked to the next slide in the slide deck.
This slide can contain various elements and it can have different layouts. But the slide cannot have Title Slide, Menu, and Section Header layouts.
Add a menu entry for this section in the 'Menu' slide. This can be the same heading given in the Section Header slide.
Hyperlink the menu entry to the Section Header slide.
Done! Your section will appear in the menu and you can click on it to navigate to that particular section in the final app. Figure 4 shows this,
In Figure 3 you might have noticed a small home icon. That is the Home sticker. The section you place the home sticker will be the 'home' or the default screen of your app, the screen you will see first when you open the app. Note that the home sticker needs to be placed in one of the content layout slides, not in the Section Header slide. Read more about the Home sticker on this page,
A Typical Slide Deck
Let us combine everything we learned till now into a single slide deck. Figure 5 shows a sketch of such a slide deck,
As we know an app always have a Title Slide and a Menu slide, which are slide 1 and 2 respectively. Once again, the title slide need not be the first slide. It can be at any position. We are just following this to make the navigation easy.
Contents in this app have four sections. You can see that four links are starting from 'Menu' to various 'Section Header's. The First menu entry links to slide 3, second to slide 5, third to slide 9, and fourth to slide 12.
You can also see that we placed a Home sticker in Slide 4 to indicate that the section starting from Slide 3 should be the home screen. But what are those chain link icons?
Scroll Sticker
As explained earlier, all Section Headers are directly linked to the very next slide in the slide deck. Notice that there is more than one slide between two section headers. For example, after the section header on slide 5, the next section header is on slide 9. In this case, Poexis need to know that the adjacent slides need to be linked. For this, you can use a Scroll sticker. The Scroll sticker is represented as a chain link. The small chain link icon on slides 6, 7, and 8 indicates that those three slides need to be combined into a single page. Since slide 6 is linked to the section header on slide 5, all these slides, from 5 to 8 belong to a single section. Similarly slides 9, 10, and 11 belong to the same section.
You can find more details about Scroll Sticker on the following page.
Last updated
