Crash Course 101
10 modules
5 weeks

How It Works

Click to copy

This section provides an in-depth look into how the Web Designer in AppMaster functions. Learn about the powerful tools that empower you to design and customize your web applications easily.


The no-code AppMaster web apps builder enables you to develop applications encompassing not only interface design but also business logic and integration with third-party services. With AppMaster Web Designer, you can easily create fast, scalable, and user-friendly applications using just one tool.

Interface

To develop your web application with AppMaster, the initial step is to design the interface. The development process involves three levels of work:

  • Layouts: designing templates for all types of screens in your application.
  • Pages: creating pages using the previously designed layouts.
  • UI Elements: building individual user interface elements.

Layout

Build and using layouts in AppMaster Web Designer

Layouts provide a framework for organizing the components of a web application, enabling the creation of a consistent page structure. A layout can include common components, logic, and styles that apply to associated web application pages, eliminating the need for repetitive elements across different pages.

For instance, if a web application requires a navigation panel on every page, you can add a navigation panel component to the layout. Any changes made to the layout will automatically apply to the associated pages. If specific pages need a different structure, you can create additional layouts, such as for Login and Registration pages.

Benefits of using layouts include reduced interface creation time, streamlined project support, and simplified changes to the working application. Additionally, layouts facilitate A/B testing by assigning different layouts to pages based on conditions. Navigation via layouts avoids full-page reloads, only refreshing dynamic content, which improves application performance and conserves memory.

Pages

Build and usage pages in AppMaster Wed Designer

The next layer of your application's interface is pages. They are created based on previously created layouts, have their own settings, and are extended by adding necessary UI components depending on the page's context.

For example, if you build a website, you can associate a layout containing a header and a footer with all web app pages and then fill them with content without building a footer and header on each page.

UI Elements

Using UI elements with drag-and-drop in AppMaster Web Designer

UI Elements are the basic constituent parts of your web application. They represent elements of your content, such as text, buttons, images, tables, and others.

With the "drag-and-drop" interface, elements can be easily moved onto the workspace, and you can immediately see how the future web application will look. You can build more complex components from atomic elements by nesting them in each other. All application parts are assembled from UI elements, including Layouts and Pages.

So, AppMaster Web App Designer presents as WYSIWYG ("What You See Is What You Get") editor for building web applications.

Customization

AppMaster Web Designer web app Theme Builder

Also, for faster web app development, you can customize the application's appearance using the Theme builder, which lets you set up common element styles, like primary and additional colors, sizes, typography, etc.

In application settings, you can set up an application view in a browser and in search results: application name, description, favicon.

Business Logic

Once the application interface is created, you can begin constructing its business logic, which includes:

  • Creating a Local Database (SOON!).
  • Creating Global Variables.
  • Configuring component actions and application triggers.
  • Building Generic Business Processes.
  • Executing business processes on a schedule (SOON!).
  • Setting up localization for different languages (SOON!).

Third-Party Services

You can integrate third-party services from our modules library to enhance your web application's functionality. There, you can find modules of social network authorization (Google, Apple, Linked In, Facebook), calendars, various map modules, payment services, and much more. The complete list of available integrations can be found in the Modules section in AppMaster Web App Designer (SOON!).

Was this article helpful?
Still looking for an answer?
Join the Community