App Design
Last updated
Last updated
Welcome to the Design Page, where you can bring your app vision to life with intuitive drag-and-drop functionality and powerful design tools. This page consists of three main sections, each playing a crucial role in the app design process.
Located on the left side of the screen, the Sections & Articles panel displays all the sections and articles within your app. This is the same menu bar that you find in the Article Edit Page. Sections can contain multiple articles or serve as standalone pages. By clicking on any article or section, you can quickly navigate back to the Edit Article dashboard for further customisation.
Be sure to save any changes before navigating to other articles.
In the middle of the screen, your app is displayed, providing a real-time preview of your design. Here, you can drag and drop design widgets, such as buttons, text, carousels, ads, and more, to create the layout and functionality of your app.
On the right side of the screen, the Widget Collection panel houses all your design widgets and their styling options. You can toggle between choosing widgets to add to your app and editing the styles of the selected widget. Depending on the widget type, a specific style section will open, allowing you to customize colors, fonts, padding, margins, and other properties.
When designing your app:
Drag and Drop Widgets: Drag and drop widgets onto your app display in the middle.
Edit Widget Styles: Click on any widget on the app screen to open the style section on the right. Here, you can edit the widget's styling properties, such as colors, fonts, margins, and more.
Connect Widgets: Widgets like collections, carousels, and top items can be connected to the sections or articles you've created in the Article Dashboard. Click on the widget on the app screen and select the desired article or section by clicking on the connection icon located next to the section or article name, you can control what content appears on your app.
Ensure you save your designs frequently to avoid losing any progress.
As discussed in the Section & Article documentation, utilizing the drag-and-drop functionality to rearrange sections and articles offers significant advantages. On the App Build page, this capability becomes invaluable as it allows you to precisely organize your articles. By arranging articles in the desired order on the dashboard, connecting them in the App Build section ensures that they display in the intended sequence on the app interface. This seamless coordination enhances user navigation and optimises the overall user experience.
Follow UX Best Practices: Keep user experience best practices in mind while designing your app. Refer to our documentation under "Plan your app" for valuable insights and resources.
Create a Style Document: Consider creating a separate style document using applications like or to maintain consistency in fonts, colours, and other design elements across your app.
