With the UI Design view, you can design the screens of mobile or web applications.
To create the application you want to design the interface for, go to Apps and click Create Web App if you want to develop a web application or Create Mobile Compatible if you want to develop a mobile application. Then give a name and click the CREATE button. The created application opens with the UI Design view. In this view, you can add new elements to the screen with the Elements panel on the left and edit the properties of these elements with the Properties panel on the right.
The open screen is displayed in the centre area of the UI Design view. You can create new screens with the Screens panel, click New Folder, name the folder and click the CREATE button. You can edit the screens in the folder you created.
If you are preparing responsive screen design, you can use free and predefined options for screen width. You can continue your UI design in the web, tablet and phone view of your choice.
Kuika has elements in different categories such as Container, Data, Display and Text Input. You can add the relevant element from the Elements panel by dragging and dropping it to the screen.
With the Item Tree you can display the hierarchy of the screen and its elements. You can also use the Bread Crumb line at the bottom edge to help with this. In this area you can view the parent and child relationships of the selected element. You can also view other elements and select the relevant element with a single click.
The Support Offline Screen switch, available in the Kuika UI Design module and only in mobile applications, is used to support the application to work in offline mode. When the switch is activated, users can access certain parts or features of the app even without an internet connection. Thus, the user experience is not interrupted even when the connection is lost or weak. Support Offline often allows data to be temporarily stored on the device when data synchronization is required, and synchronized with the server when a connection is restored.
When you select an element, the Properties panel on the right is also used to edit the parameters of the element. The contents of the Properties panel change according to the properties of the selected element. Make sure that the screen is selected so that you can view the properties of the currently open screen. You can select the screen and set its properties by clicking on its bottom edge or outer area. You can also make visual arrangements of the selected element with the Styling panel. Through the Styling panel, you can edit spacing, typography, and borders.