--- title: "App design best practices" slug: "app-design-best-practices" updated: 2024-07-09T18:57:18Z published: 2024-07-09T18:57:18Z --- > ## 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. # App design best practices x Before diving into design best practices, learn how [user research](/r230/docs/driving-business-value-with-user-research) is the foundation for successful app design, enabling you to build the most effective apps for your operations and ensuring maximum value from your time investment. This article refers to two Tulip Library apps: [App Design Templates](https://tulip.co/library/apps/design-template/) and [App Design Best Practices](https://tulip.co/library/apps/app-design-best-practices/). Good design is contextual, meaning decisions are made by considering the specific needs of your industry, operators, and process and will change depending on the purpose and function of each app and step. Best practices for [Life Sciences](/r230/docs/best-practices-for-gxp-app-building) apps will differ from best practices in general manufacturing design. However, all industries will want to standardize app layouts and color schemes and create cloneable components wherever possible. App templates and style guides reduce the amount of decisions app builders need to make at any given moment, while a component library reduces rework and enables faster app building. To get started, check out our design templates in [Tulip Library](https://tulip.co/library/apps/design-template/) and use the following best practices to help you customize these templates to build intuitive and navigable apps. ![Tulip Library Design Template Page 2.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Tulip%20Library%20Design%20Template%20Page%202.png) ## Standardize App Templates Consistency in app layout throughout your organization goes beyond aesthetic appeal. By crafting recognizable layouts and purposefully selecting colors to convey meaning, you can significantly reduce the need for end-user training. You can use the following [Tulip Library templates](https://tulip.co/library/apps/design-template/) to get started. ![Template - Colors.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Colors.png) *Standardized color schemes ensure apps are intuitive and operators can quickly and easily navigate screens.* ![Template - Typography.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Typography.png) *Font sizes should be consistent and human readable. Tailor your font size to the resolution of your Interface (display device).* ![Template - Buttons.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Buttons.png) *Primary action buttons should be the boldest color on the screen and should not blend in with the background. You don't want operators to waste time looking for what they need.* ![Template - Button Icons.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Button%20Icons.png) *Adding icons to buttons provides visual context to the action the button performs.* ## Create a Component Library Building components or templates that app builders can effortlessly copy and paste drastically speeds up development. Consider building a library of the following commonly used app components: - App base layouts (e.g. tablet vs. mobile) - Step layouts (e.g. container and panel alignments) - Top and bottom navigation bars - Menu bars - Routing or terminal screens - Dashboards - Forms (e.g. event or defect forms) - Checklists - Measurement captures - Common side-by-side information (e.g. an interactive table often appears next to embedded table records) --- ![Template - Table and Table Records.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Table%20and%20Table%20Records.png) *Example of a 2 panel screen that allows users to view data in a table and edit fields using a form* ![Template - Side by Side.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Side%20by%20Side.png) *Example of a 2 panel screen in which the primary information is entered in the leftmost panel* ![Template - Modals.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Modals.png) *Example of a modal step that draws users' full attention to the task at hand* ![Template - Dashboard.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Dashboard.png) *Example of a dashboard setup to display analyses* ## Follow Design Best Practices Discover expert app design insights in the Tulip Library's [App Design Best Practices](https://tulip.co/library/apps/app-design-best-practices/) guide. Dive into color, text, and widget tips to enhance your app's appeal and user experience. ### Color ![Color 1.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%201%283%29.jpg) ![Color 2.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%202.jpg) ![Color 3.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%203.jpg) ![Color 4.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%204.jpg) ### Text ![Text 1.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%201.jpg) ![Text 2.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%202.jpg) ![Text 3.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%203.jpg) ![Text 4.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%204.jpg) ![Text 5.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%205.jpg) ![Text 6.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%206.jpg) ### Widget ![Widget 1.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%201.jpg) ![Widget 2.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%202.jpg) ![Widget 3.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%203.jpg) ![Widget 4.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%204.jpg) ![Widget 5.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%205.jpg) ![Widget 6.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%206.jpg) **Interface (Display Device)** Users interact with Tulip applications through physical devices like touchscreens, PC monitors, mobile devices, and LCD screens. We refer to these as **interfac****es.**Interfaces must be assigned to a **station** in order to run applications.