Concept of designing an app
The idea of app structure
An app is a well-organized set of screens.
When building an app in Starion, imagine that you are designing a storybook. Each screen in a mobile app is like a page in a storybook. It's where you see and interact with different information or functions. For example, one screen could be where you read the news, another where you check your messages, and another where you play games.
By flipping pages, you go to the page you want in the storybook. In the app, it's navigation. You use buttons, menus, or gestures to navigate through the app, just like you use your hands to flip through the pages of a book.
Therefore, when you develop a mobile app, you design the app pages and the navigation elements.
From tables to app pages
In the introduction to data, the data table plays an essential role in the app development. Next, explore how we turn your table into a mobile app.
Imagine you have a data table of products in your store, where each row represents a different item, and each column has specific information about that item, such as name, description, and price.
Rows to collection page
Imagine walking into a store and seeing all the products displayed at the entrance. That's exactly what a collection page does - it shows all the products in one place.
Similarly, in an app, a collection page shows a list of entries from a data table, with each row represented as an item in the collection. This way, users can easily view and access all the entries in one place.
A row to detail page
When you choose a product from the shelf, you would like to have access to more information about it. In an app, this would be equivalent to tapping on the item and viewing its detail page. The detail page is a page where you can inspect various aspects of the item in separate columns, each column dedicated to a specific property of the item.
Form page to add data
A form page in the app allows you to input data into a table. It's similar to adding a new product to your store.
In short, transforming a data table into an app is converting rows and columns of your spreadsheet into an intuitive page in an application. The app should have a collection page that displays all the items, a detail page that exhibits the specifics of one item, and a form page that allows you to add new items to your store. In essence, this process makes your data more accessible and interactive.
Actions and navigations
Creating an app involves more than just adding a page and then navigation to it on a menu bar. You can enhance user experience and engagement by integrating various actions such as buttons, gestures, and toggle switches. These actions allow users to intuitively interact with the app's content and perform tasks beyond simple page navigation, leading to a dynamic and immersive user experience. At Starion, we offer pre-defined actions and pre-built elements like buttons that can trigger the action and easily integrate into your apps. These actions cover common functionalities such as navigation, data handling, and more. Our goal is to speed up your development process and reduce the need for manual coding.
A quick guide to get started
Based on how a table can turn into a mobile app, let's go with the flow by learning to design the 3 pages: Collection page -> Detail page -> Form page.
For in-depth instructions, refer to our comprehensive articles below:
pageCollection pagepageDetail pagepageForm pageIn each of these articles, we will provide a comprehensive walkthrough of the design process for each page. This includes a deep dive into layout considerations and a detailed exploration of the key elements.
In addition
As you delve deeper into app design, consider incorporating additional features to enhance the user experience. Two critical elements to consider are the authentication page and product tour.
Authentication pages, including login and sign-up screens, play a pivotal role in user interaction. These pages are the initial touchpoints for users and must be intuitive and secure.
pageAuthentication pageThe product tour is a valuable tool to guide users onboarding through the app's key features and functionalities, especially before they sign up. These tours provide a glimpse into the app's value and capabilities.
pageProduct tourLast updated
