Tutorials / 3 min read

Designing your app

blog image

By Graham / April 25, 2022

It's time to look at your app design. This is the last screen we got to - the Lion Agency has created the Lion App and loaded the Campaign pre-built content. We are currently in the Content area, highlighted in blue on the nav bar.

Highlight the My app option on the far right and it takes you into the app design world. 

There are lot's of things to get familiar with in this section. They are going to simplify as we improve the UI - so apologies for having so many buttons at the moment.

Let's take a tour

There are three panels in the interface:

1. On the left is the content tree. This enables you to target folders to link your widgets to.

2. In the middle is the preview of the app screen you are building.

3. On the right is the widget panel - the components you use to build your app screen from.

Click Edit on the top black bar to unlock the widget panel. It should then look like this:

The demo theme will have used many of the widgets available. I suggest you delete these by highlighting the widget in the middle pannel and clicking the trash can. Repeat until you have a blank app screen inviting you to "Drag and Drop your widgets here".

We will do a full widget explanation later. To get the basics I suggest you drag and drop two of the basic widgets onto the screen. 

Top story widget is one most people will be familiar with from any website or app design. The hero story. 

When you drag it onto the screen it will show you the top piece of content in the root of the content. But if you expand out the content tree in the left-hand panel it will show you all the content.

There are three folders in this example: Campaign, Justice and Child and they each have a link beside them. Select the top story widget in the centre column to make it active and then click the link for each folder in turn. You will see the image in the top story widget change as you connect it to the different folders. The active folder link is dark, the inactive ones are grey.

Success - you have now understood the fundamental building block of Reptile - a widget linked to a dynamic folder. 

 

As your widget is live the right hand column will have changed into the view of the detailed properties of that widget. Here you can adjust colours, fonts, padding and other design tools. We will deal with these in detail at a later stage, but they should be familiar to all designers.

To go back to your overview of the widget list just close the properties view with the X on the right hand side.

A good second widget to add is the 'article collection two items' - this displays images side-by-side. It will show you all the articles in the root of the folder but you can also open the content tree view and link it to one of the other folders. 

In this case it is linked to the justice folder which only has two stories. The default view in this widget is 6 stories so the rest show as blanks. This does not matter as the app will only show content which is present. But you can easily tidy this up in the preview by reducing the number of visible items to 2. 

Before we move onto the next stage in the process there are two important steps:

1. Save your work. Use the blue Save button in the black bar. 

2. Publish your app template. Templates you have worked on and saved are not made live until you publish them. This let's you work on future changes in private and only push them to the world when you are ready. If you forget to publish at this stage you will get an app with blank templates. 

 



Next up: Finalise your app

Latest Stories

blog image

Tutorial

Welcome to Reptile

Thanks for coming onboard to test Reptile. This Tutorial site is where you will find all you need to know.

date

April 25, 2022

read time

4 mins

Author

Graham

blog image

Tutorial

Setting up your app project

Setting up your app project

date

April 25, 2022

read time

3 mins

Author

Graham

;