Design & Component Management
Learn how to design beautiful mobile app layouts using Goloris's visual drag-and-drop builder. Master component management and create professional interfaces without writing a single line of code.
Visual + component-driven = faster iteration, no code required.
1. The Builder Interface Overview
The Goloris Builder is divided into three main areas that work together to help you design your app visually.
Steps
- 1Left Panel: Design Tools - Browse and select components from different categories
- 2Center Canvas: Live Preview - See your app as users will see it, with real-time updates
- 3Right Panel: Properties - Configure component settings, styles, and actions
Screenshot of the Builder Interface showing phone preview and side panels
2. Adding Components from the Design Tools Panel
Adding components to your app is as simple as dragging and dropping. The builder provides visual feedback and alignment guides to help you position elements perfectly.
Steps
- 1Open the Design Tools panel on the left side of the Builder
- 2Browse component categories (Basic, Data, Media, Form, Business)
- 3Drag a component onto the canvas where you want it to appear
- 4Use grid lines and snapping for precise alignment
- 5Reorder or delete components directly on the canvas
GIF or image showing drag-and-drop of a banner and list component
3. Understanding Component Categories
Goloris organizes components into logical categories to help you find what you need quickly. Each category serves a specific purpose in app design.
Basic
Essential building blocks for any app interface. Use these to create structure and basic interactions.
- Text
- Heading
- Button
- Image
- Map
Data
Display dynamic content from your data sources. Connect these components to tables for real-time updates.
- List
- Cover Area
- Dynamic Card
Media
Rich media components for showcasing images, videos, and visual content in your app.
- Image Gallery
- Video
Form
Collect user input and data through interactive form elements. Perfect for contact forms, surveys, and more.
- Input fields
- Dropdowns
- Toggles
Business
Specialized components for business features like loyalty programs, appointments, and e-commerce.
- Loyalty Rewards
- Appointment Scheduler
- Product List
Icons or simple illustrations representing each category
4. Customizing Components via the Properties Panel
Every component in Goloris can be customized through the Properties Panel. This panel has three main tabs that control different aspects of your components.
Steps
- 1General Tab: Set labels, visibility, default data, and data source bindings (@Field)
- 2Style Tab: Adjust colors, typography, spacing, alignment, borders, and shadows
- 3Actions Tab: Configure what happens on click/tap (navigate, open URL, share, send data)
Screenshot of Properties Panel showing General, Style, and Actions tabs
5. Component Best Practices
Follow these design principles to create professional, user-friendly mobile apps that look great and perform well.
Design Tips
- Keep spacing consistent between sections for visual harmony
- Use headings and banners to create clear visual hierarchy
- Limit your color palette to maintain brand consistency
- Combine components with data sources for dynamic content (e.g., product list connected to Products table)
- Test on multiple screen sizes using Preview Mode before publishing
Before/After layout comparison showing clean design vs cluttered layout
Ready to Design Your App?
Start designing your mobile app today. Explore the Builder, experiment with components, and create beautiful interfaces in minutes.
Open Builder