--- title: "Design a base layout" slug: "design-a-base-layout" updated: 2022-11-16T16:09:51Z published: 2022-11-16T16:09:51Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Design a base layout ## Overview NOTE Before reading this article, make sure you are familiar with "[How to Use a Base Layout](https://support.tulip.co/docs/how-to-use-base-layout)". The Base Layout is the heart of your application formatting. Getting the formatting *right* on your base layout will streamline the development of each Step. ## How to Design an Effective 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. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Design%20an%20Effective%20Base%20Layout_506294079.png) 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 (or almost every) Step. Some reasonable examples are: buttons that 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 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. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Design%20an%20Effective%20Base%20Layout_506294287.png) 1. 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. 2. 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. 3. Consider extensibility of the Base Layout design. Lastly, consider 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 the need to reconfigure the existing ones in the future. --- Did you find what you were looking for? You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question! **Base Layout** The **Base Layout** is the base template that all other **S****teps** will be built on top of. Establishing common navigation buttons, and a consistent app background and style across all of your app steps can expedite the training and app-building processes. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511473104%201.png) **Step** A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process. Steps can be grouped into **Step Groups**to manage and organize your app Steps. **Widgets** **Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic. *Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.* **App Editor** The web interface used for building applications. Where you design a user interface, add logic, and connect your applications to **Tables**. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screen%20Shot%202022-09-13%20at%207.50.23%20AM.png) **Steps** A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process. Steps can be grouped into **Step Groups**to manage and organize your app Steps. **Transitions** **Transitions******are a type of logic in **triggers****.****Transitions** can move operators between steps/apps or start/stop the app. Only 1**Transition******can be added to a single **Trigger.** *ex:**Complete then change to X app, Next step, Previous step, Cancel app, etc.*