Designer's contribution to mobile app development

Designer and his role in the development of mobile applications

We all know that design plays a very important role in the design and development of mobile applications. Each designer has his own approach, methods and tools for working on applications. The pace of further development depends on what platforms the designer will work on and how he will present the finished material to the project team.

It is no secret that project teams change frequently. Today, one is working on the project, and tomorrow is a completely different person. Therefore, the design of a mobile application is not just well-drawn pictures, but also high-quality transmitted material showing other people how the application should work.

In this article I want to talk about the interaction of the developer with the designer, based on my own experience in developing a mobile application, about my expectations from the project and the brutal reality. I hope this article will make many new designers think about their work, as well as help developers cope with some difficult situations.
')

How can a designer make life easier for a developer?

So, the designer, regardless of his profile and focus, there are many tools with which he can draw what is required of him. Only just drawing screens of a mobile application is not enough. This is neither a website nor a web application. This category of digital products has more stringent rules that you must obey. Separate guidelines have been created for IOS and Android platforms (see the "Useful Links" section).

All this was invented for a reason. If an illustrator or just a web designer suddenly decides to become part of a mobile team, it is safe to say that he will hand over the project relatively poorly. Even if it seems to him that he did everything cool, further development may lead to the opposite conclusion.

Currently, the situation is such that developers, like designers, have a lot of specific tools and guides. Not only do they not want to delve into design tools - they just have no time. The designer has just passed his work, and the project manager and client are already demanding the results from the developer. What can a designer help in this case? How can he save developer time? Everything is quite simple - you need to choose the right tools not only for drawing the project, but also for subsequent work with the development team.

After several years of work in many teams unlike each other, I realized how design affects the speed of development and comfortable work in the team. Therefore, now, before taking the design into development, I check it for compliance with certain standards and rules.

The designer is part of the team

These are not just pathos words. The designer should be part of the team before submitting the application to the store, constantly communicate with colleagues, clarify issues and respond quickly to developer requests. The minimum term of his stay in the team is until the first delivery of the MVP.
As practice shows, designers do not always give their layouts in a high-quality manner, and with further development, some shortcomings pop up, for example, not drawn empty screens or some state of elements, incorrectly cut blocks of elements, lack of some resources. It also happens that the client wants to add something.

The designer has to finish his work, and it is good if he will be in the team at this time so that changes can be made quickly. Or he must be in touch so that the project and the team do not have problems with the operational change of UI / UX.

The developer should not understand in what programs the project was drawn. Files should open easily

As mentioned above, the developer now has to study so much that there is simply no time to understand graphic editors. Therefore, the designer should not draw elements in Photoshop / Illustrator and donate the layout in * .psd / * .ai files. Such files weigh quite a lot and require the installation of the Adobe package. Even if this does not play a special role, there is simply no time to study these editors.

The developer wants to just select the elements and see how to typeset them, and not understand the structure of the layers of one huge file. Now there are many graphic editors for rendering mobile applications: Sketch, Figma and others. In general, there is plenty to choose from. How the designer will present a clickable prototype and “live screens” for the frontend will depend on the chosen editor.

If the designer chose Figma, then the “live” screens, clickable prototype, user story, screen transitions, font families and colorization, resources can be downloaded independently - everything is in one place. Design changes are immediately visible. Like many services, Figma has its drawbacks. But this is a pretty good choice, if only because this editor does not require the installation of special software. You just need to click on the link to the project. The main thing is to have the Internet.

Sketch is also a good choice. A designer can use prototyping tools such as Zeplin or InVision for this editor if the development team is already working with them. These programs do not require in-depth study of tools.

The designer must know the guidelines for different platforms and their differences

Quite often, designers draw projects without understanding the guidelines, mix styles or create non-standard elements, thinking about the beauty of the screen. There are quite a few such examples on Dribbble and Behance. Clients, unaware of these nuances, approve of the layouts. When it comes to development, things stop. The designer does not want to redo the wrong job. The customer requires just such a screen or effect, which he approved, but it cannot be done.



Therefore, it is very important that the designer understands what and how to draw.

Resources

This is the most painful issue when interacting with a designer. Typically, designers do not chop resources. For the most part, they believe that: they are not required to do this; it is long and monotonous, and if the developer needs it, he will cut everything himself or you can reset * .svg; they don’t know what exactly needs to be cut and in what sizes.

Nevertheless, if you look from the side of the developer, solving this issue greatly reduces the time. It is enough for him to look at the name of the resource on the prototype and find the same in the resources folder - and that’s it, he continues to typeset. And if you imagine that the developer needs to cut the resources himself? It should completely highlight the desired item on the screen, find the export, specify the size and path.

It just seems like it's a quick job. But there are many elements, and a lot of time is wasted. Again, layouts do not always give up in perfect condition. The designer does not always take everything into account. Also, the prototyping tool may not work correctly when exported.

Trying to select elements for slicing, developers sometimes select only part of an element or cling to a background (which should be transparent). Therefore, it is good when the designer not only cuts resources, but also uses the correct sizes.

TK with a description of the operation of the screens

It’s good when the application consists of a small number of screens and at a glance it’s clear how it works. If the application has a large number of screens and the prototype does not give a complete picture of its operation or the application has grown after making changes at the request of the customer, a technical description of all screens, each element on this screen and its status can save the situation.

As stated above, project team members often change. Nobody wants to mess with newbies. Perhaps colleagues will make a brief review, drop links to all the resources issued by the designer - and that’s all. The developer is expected to start working with a full understanding of how the application functions. Most often, there is no TK explaining this, because the designer did not know that it was required, or did not want to do it. And what comes out? Work stops. A new member of the team does not understand what and how it works, works at half strength, while wasting team time.

What if there is none of the above, but need to work?

It so happened that all of the above requirements became mandatory in one of my projects.

The project was associated with the rental of real estate and was developed for two platforms: IOS and Android. The development process began like any other. Later it turned out that the designer was not fully versed in mobile applications. What guides he did not know. The design was attended by transparent elements, fonts were used only for one platform. Coloring could be described as using “50 shades of gray.”

I was given a * .psd file. It seems to be nothing wrong. Such files are handed over by many designers. But I had to install the Adobe package to take a look at the layout. The file was very “heavy” and opened for about 10 minutes. Not all screens were drawn separately on the workspace. They were one on top of the other as layers, and to see one screen, you had to turn off all the others. Since I did not have significant experience with the package, I thought of Avocode as a tool for processing design material. Of course, this program is not perfect, but it literally saved me.

The clickable prototype was transferred to me in InVision. Note, just a clickable prototype without live screens.

Findings:

What I expected to get from the designer:

• clickable prototype and live screens (InVision, Zeplin or Figma)
• revised TK with a description of the operation of the screens
• map screens with transitions
• user story
• chopped resources in sizes @ 1, @ 2, @ 3
• fonts

From all of the above, I received only a clickable prototype and a * psd file.

The project is completed and uploaded to the store. But in order to achieve this result, my team went through seven circles of Hell or, as they say, faced with certain difficulties.



Many will disagree and say that the materials provided are sufficient. But we are talking about professionalism and how the situation looks from the side of developers. After all, a mobile app designer is not just an artist. This is a member of a team working on a complex project. He should do his work well, because for him this is not the end of work on the project, but for the team it is only the beginning.

Thank you all for your attention and successful projects!

Useful links:

IOS guidelines
Android guidelines
Problems of development the legacy mobile project
Figma
Sketch