INTRODUCTION TO INTERFACE DESIGN

The application interface design process

In application development, the main screen types are Listing, Form and Display. Initially, the structure is built with the Row element. The design uses custom Inputs for user validations. By creating the first screen, you set the display and style settings, from which you can quickly develop other screens. It is important to be careful with data-linked screen layouts.

There are basically 3 types of screens regardless of the scope of applications, usage areas and user types. These are; Listing screen where saved data is shown, form for new record entry and display/display screen used for detail display of a saved content.

These screens are a reference in almost every sense for other screens to be made. For example, when we consider a user list screen, it will be enough to select only the data source and data to be displayed from a very similar, even the same screen. Similar operations are valid for form and display screens.

We start screen design with the Row element. This most basic container element allows new elements to be added to the interface and occupies space horizontally from end to end within its parent structure. The parent element of a Row can be a screen or a Column element within another Row element.

Alignment and Padding properties can also be done for the Column element, affecting both the parent Row and the elements within it. For the most part, elements can be sized with both padding and width and height.Properties and Styling properties vary based on the selected element. While there are some common areas, it mostly depends on the properties needed for the element in use.

Before you start designing the interface, make a sketch of what kind of screen you want to design, even if it's just a pencil and paper. Thus, the first screen idea that comes to your mind while trying new styling options in screen design will not fly away.

Use the Row element nested as needed, you can use the Horizontal Stack element to add side-by-side or vertically ordered elements. An important point to mention is that the panel element can dynamically get the background color or image from the data.

Another important point is the Input elements you will add especially on form screens. For example, email element must be added in the field to receive e-mail address. In other similar elements, the entries made by the end user are checked and warns the user to enter correct information with validation errors. In the email element, (.) and (@) characters are checked in the text entered as standard. And the user is prevented from unintentionally entering incorrect information. To give another example from the same element, if we consider that it is used in a mobile application, regardless of the end user's device or keyboard language selection, the English language keyboard is displayed during email element input.

Listing, Form and Display screens are frequently used in almost every application. It is important to start with one of these screens that is comprehensive. This will allow you to set the size of the screen or elements such as Table, fonts, etc. more precisely. By duplicating screens of the same type, you can quickly prepare other screens. You can group screens according to the main menus they are connected to.

When you create an application, you can edit all the styles that come by default, but you cannot delete them. These styles will help you to edit both the elements that have been added to the screens and the elements that will be added.You should be careful when making edits on screens with data connections.

Even if you delete a Numeric Input element and then insert a new Numeric Input in the same column, it will cause errors in your application because the element IDs do not match. For comprehensive edits, make your edits by duplicating from the relevant screen.

In application development, the main screen types are Listing, Form and Display. Initially, the structure is built with the Row element. The design uses custom Inputs for user validations. By creating the first screen, you set the display and style settings, from which you can quickly develop other screens. It is important to be careful with data-linked screen layouts.

There are basically 3 types of screens regardless of the scope of applications, usage areas and user types. These are; Listing screen where saved data is shown, form for new record entry and display/display screen used for detail display of a saved content.

These screens are a reference in almost every sense for other screens to be made. For example, when we consider a user list screen, it will be enough to select only the data source and data to be displayed from a very similar, even the same screen. Similar operations are valid for form and display screens.

We start screen design with the Row element. This most basic container element allows new elements to be added to the interface and occupies space horizontally from end to end within its parent structure. The parent element of a Row can be a screen or a Column element within another Row element.

Alignment and Padding properties can also be done for the Column element, affecting both the parent Row and the elements within it. For the most part, elements can be sized with both padding and width and height.Properties and Styling properties vary based on the selected element. While there are some common areas, it mostly depends on the properties needed for the element in use.

Before you start designing the interface, make a sketch of what kind of screen you want to design, even if it's just a pencil and paper. Thus, the first screen idea that comes to your mind while trying new styling options in screen design will not fly away.

Use the Row element nested as needed, you can use the Horizontal Stack element to add side-by-side or vertically ordered elements. An important point to mention is that the panel element can dynamically get the background color or image from the data.

Another important point is the Input elements you will add especially on form screens. For example, email element must be added in the field to receive e-mail address. In other similar elements, the entries made by the end user are checked and warns the user to enter correct information with validation errors. In the email element, (.) and (@) characters are checked in the text entered as standard. And the user is prevented from unintentionally entering incorrect information. To give another example from the same element, if we consider that it is used in a mobile application, regardless of the end user's device or keyboard language selection, the English language keyboard is displayed during email element input.

Listing, Form and Display screens are frequently used in almost every application. It is important to start with one of these screens that is comprehensive. This will allow you to set the size of the screen or elements such as Table, fonts, etc. more precisely. By duplicating screens of the same type, you can quickly prepare other screens. You can group screens according to the main menus they are connected to.

When you create an application, you can edit all the styles that come by default, but you cannot delete them. These styles will help you to edit both the elements that have been added to the screens and the elements that will be added.You should be careful when making edits on screens with data connections.

Even if you delete a Numeric Input element and then insert a new Numeric Input in the same column, it will cause errors in your application because the element IDs do not match. For comprehensive edits, make your edits by duplicating from the relevant screen.

Files

Auxiliary resources

Glossary