Before reading this article, make sure you are familiar with "How to Use a Base Layout".

When designing an App, one of the first things you should do is decide what your Base Layout is going to look like. 

A “base layout” is a design that is applied to every step in the App.  Any widgets added to the Base Layout are present by default in all subsequent steps.

You can access the Base Layout in the bottom left of the App Editor.

Note: If Triggers are added to the Base Layout, the Trigger will be applicable on all the steps in the App.  However, they cannot be accessed from any step other than the Base Layout.

Since the Base Layout is the template for the rest of the steps in your App, it makes sense to lay out base layout widgets on the periphery of the step. 

The steps below outline the creation of a sample Base Layout and give you an idea about how to design your own.

1. Decide which widgets you will need on every step (or almost every step).

Some reasonable examples are buttons to go to the next or previous step, a company logo and a timer to track how long an operator spends on each step.

2. Decide where these base layout widgets should be placed. 

A good starting point is to create one a header and/or footer for your App. Below, you can see a visual layout for a header and a footer constructed by using a rectangles, buttons, text and an uploaded image.

3. Leave plenty of room for new content on every step

Widgets on the Base Layout should ideally be arranged to allow for maximum visual area in the center of the step. 

4. Note which widgets you want or need to unlock from the Base Layout

When you design a Base Layout, it is important to note which widgets you will need to unlock in specific steps. Try to keep those widgets visually separated from other aspects of the Base Layout in order to create less drastic transitions.

5. Consider extensibility of the Base Layout design

The last thing to consider when designing a Base Layout is the extensibility of the design. In the example App above, the “Menu” Button could take up the majority of the width of the footer. However, this would leave you with a lot of redesigning work if you decide to add another widget. By leaving space for additional widgets, you reduce reshuffling in the future.


Did you find what you were looking for?

You can also head to community.tulip.co to post your question or see if others have faced a similar question!

Did this answer your question?