(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Design Process with Kuika (Screen Design)

Let's work on an example for the interface development process with drag and drop elements in Kuika.

In order for the screen you want to prepare to be responsive, it must be divisible in a meaningful way. Responsive, that is, adjustable screen designs are suitable for applications and screens with little detail. Users mostly have screen sizes between 5 inches and 21 inches. With this preliminary information, the screen detail must be kept within the minimum and mandatory requirements.

For complex applications, you can create multiple applications suitable for the user and device intersection. For example, in an after-sales service application, you can develop a web application for the manager or call center and a mobile application for field personnel.

You can make parametric and visual edits on the interface you have prepared with drag and drop elements. Let's examine this process with a few examples.

We can add a button and a text input element to the open screen and make the necessary adjustments.

Then we can add a button element here to make the list download. Click on the button element from the Elements panel and release the mouse when you hover over the column you want to add. We added the button to the inline column prepared for the title section above the list. Rows and columns are container elements. And it is the parent of this button hierarchically. Select the first level parent column to align the button to the right in the column it is in. You can use the alignment options in the layout section of the styling panel. Align the elements inside the column while it is selected.

Select the button element. Change the label and text from the Properties panel. Let's add a download icon in front of the article. Select the download icon by searching the icon field. You can edit the margins of the button from the styling panel. With the Text section, you can change the text, typeface or color of the button text. With Border, you can define the outline thickness and color, corner bevel, and line style.

Now let's create a search field with a text input element. Drag and drop the textInput element from the Elements list to the screen. Then change the placeholder text with the Properties panel. Add a search icon at the beginning to visually identify it as a search field. Then, we can activate the AllowClear feature so that the text input can be deleted when it is full.

You can edit the margins with the styling panel Layout, the text properties with Text, and the border with the outline view.

Finally, let's make an example of adding an action. Let's add the navigate action that will open the settings screen when you click on the settings icon at the top. Select the icon. Add navigate action with add action in the properties panel. Current page will open the page to be selected below when the selected icon is clicked by the user. Select the Settings screen from the Screen list. Select the screen to open. Create the action with create.

You can quickly design your application by preparing new screens with similar steps.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try