Understanding App UI Design
An application is a collection of pages, with each page being composed of various UI elements or Widgets. These UI elements enable user interaction with the app and can get data from backend Services via Variable binding. Navigation and interaction rules can be setup across pages. Thus, the UI design becomes an integral part of any app development.
WaveMaker Pages are built using the drag-n-drop approach, by placing widgets in the corresponding responsive layout grids.
The design of UI involves the following subtasks:
- Choosing a proper Page Layout for composition of Widgets or UI Elements;
- Using various Widgets for:
- data rendering,
- user interaction and event handling, and
- page navigation to control the workflow
- Prefabs to customize and extend the widget capabilities
- Styling using Themes and Templates
What is Responsive Design
A page is divided automatically into different areas, with the content of all areas except the main area, repeated across all pages of the app. This helps achieve UI consistency throughout the app, easily.
Responsive Design: WaveMaker supports responsive design, i.e. the apps are rendered automatically based upon the device they are viewed on.
This is achieved using the 12-column grid layout defined by bootstrap. More on Grid Layout.
Re-usability and Consistency
Various types of Pages help achieve this consistency and reusability.
Partial pages are reusable portions of a page, for repeatedly occurring UI elements with same data binding (e.g.: profile info, business card etc.). Partial page is built just like any other page, using any UI element and data binding. Partial page can also be built from templates and are always included within a page. The header, footer, topnav, leftnav and rightnav, when added to page through the layouts, are partial pages generated by WaveMaker automatically. They can be edited like any other page and customised as per your app needs.
Popover, also known as pop-up, can be built as a portion of a page, reusable and contains UI elements with data binding (e.g.: drill down details, pop-up menus etc.). These can be built like a partial page, but have pop-up based interaction.
Page Layout: Based on the Page construction system WaveMaker provides different options for Page Layouts, which can be picked based on the interaction required for the app. Depending upon the app platform the layout will differ.
Page Layout can be set at the time of Page Creation or can be changed from the Workspace Toolbar
Themes are style elements which work at the widget or UI component level. More on Themes.
By default, Material Theme is set for Page and can be changed from the Workspace Toolbar.
Templates are editable pages with content pre-defined for the ease of UI development. More on templates.
Templates are selected at the time of Page Creation and cannot be changed later.
Drag-n-drop UI development
Pages are designed as a composition of Widgets or UI Elements. Widgets are the building block for any application. Widgets enable users to interact with the App and can get their data (binding) from backend Services.
They can be dropped into the Grids or Containers, making UI well-aligned and ready for consumption.
2. Design UI