How can a designer prepare an Android app transfer to a developer?

  • Tutorial
When cutting graphics for applications, a lot of difficulties often arise: from resolving devices and problems with Google’s grids and recommendations to directly transferring the application to the developer. For 2 years I worked on the design of more than 10 applications, learned how to find solutions to a variety of problems and make sure that in the end the application looks the same as in the design.
This will be discussed under the cut.




Permissions




xxxhdpi - maximum resolution

Specification


When creating a specification, you need to make sure that the interface elements are on the grid. The mesh size for XXH is 24 px, for the remaining resolutions 12 px. (see the table above)

image

We cannot edit all the menu items, we can only set the color (the data for the menu is in the material design )
Each element must be entered into the grid. Google recommends a set of pins in the SP (12, 14, 16, 20 and 34). SP is the universal font size that is calculated:
x (pt) * 3 = n (sp)

image

What is it for


In Material Design, the dimensions are in sp and dp, because in Android the resolutions, as well as the height and width of the screen, differ from one manufacturer to another, while sp and dpi are universal. But we still draw in the maximum resolution, because the application will drag on differently, depending on the device.



Cutting


The “cut” folder is created (later it is transferred to the developer), in which, in turn, folders are created for the necessary permissions, for example, XXH, XH, H. After creation, the item is placed in a folder with the appropriate permission and name.



The size of the slicing elements must be a multiple of 3 and written in dp. That is, if the size of the icon is 240 px, then we record the size of 80 dp.



Annotations


In annotations we sign offsets, sizes of graphic elements, font sizes.

By the way, there is a convenient program for specctr pro annotations .

image

These numbers are the coordinates of the element along the X and Y axes. They are needed for the developer to enter the coordinates of the element and the element to fall into place. I understand that there are a lot of sizes and lines and you can get confused. I suggest introducing logic: sign the sizes of graphic elements in one color or style.
Standard elements (bar, alert, separators) do not need to be signed, the maximum should be highlighted, but it is always better to check with the developer.

An example of font annotation, color, and separator size:



Graphic elements (buttons)


You should always consider that buttons have three states. Do not forget to draw them, otherwise the developer will have to do it for you.



In Android, a graphic element has the property to stretch in all directions, if it consists of one color:

image

This is how the button looks like in a cut:
image

Cut, check layouts, graphic elements, make annotations and pass them to developers.

And don't forget to do the review!

If you have any questions / suggestions / comments, write in the comments.

PS: There are very few materials on this subject, if you have them, please share;)

Also popular now: