Wednesday, March 16, 2022

Create a specification for the developer

 The application consists of visual and logical templates - based on these templates, a UI kit is created. Visual templates determine what color and size the buttons should be, the number of text styles. Logical patterns - design patterns - show how interface elements are located on the screen and what happens when you click on a button


A UI kit is needed to:

simplify development - the developer programmed the button once and then simply copies it to different screens;

form a habit to the application interface - if the user presses the blue button twice, after which the same action occurs twice, then the “action-consequence” relationship is formed.


Application Development

Further, the designer submits layouts with a UI kit for development.

For example, to transfer layouts from a graphics editor, I use the Zeplin program, in which the developer can see the indents and sizes of elements on the layouts.

Prototyping and Testing


Before submitting an app layout to development, it needs to be tested. To do this, the designer collects interactive prototypes.


Development is the most expensive part of any product. Therefore, it is important to check possible shortcomings and correct errors with the help of a prototype.


The designer assembles the layouts into a conditional slideshow using a graphic editor or the software mentioned above. Switching from one to another layout occurs when you click on a specific area of ​​the layout. Usually these areas are transparent and are located on top of the drawn buttons - when pressed, it seems that the button is not drawn and static, but real.


The disadvantage of the prototype is that it is not a real application, but a series of pictures. And for different testing sessions, you need to create a new prototype.


The designer assembles a UI kit (user interface kit, user interface set) - files with elements in the same style that are often used in the application: colors, fonts, component states, and others.

Create a specification for the developer

 The application consists of visual and logical templates - based on these templates, a UI kit is created. Visual templates determine what c...