The Designer’s Contribution To Mobile App Development

  • By Sergey Grybniak
  • 21-08-2019
  • Mobile Apps
mobile app development
* Role Of The Designer In Mobile App Development
Everyone knows that design plays a very important role in mobile app development. Each designer has their own approach, methods, and tools. The pace of further development depends on the programs utilized by the designer, and how the finished material is presented.
 
It is no secret that project teams often change. Today, one person can be working on the project, and tomorrow - someone else. Proper mobile application design goes beyond well-drawn images. The design provides a high-quality template that illustrates how the application should work.
 
In this article, I will give you an insider’s view of the interactions between a designer and a developer, and describe my own mobile app development experience, including my expectations and the project’s pitfalls. I hope this article will inspire novice designers to rethink their approach, and help developers from android app development agency cope with some challenging situations.
 
* How the designer can make life easier for a developer
Each designer, regardless of their profile and niche, has many tools at their disposal for creating the required elements. But it is not enough to simply draw an image of the mobile app screen. App creation is unique from website development, with stricter rules that must be followed. Specific guidelines have been created for both Android and iOS applications (check out useful links 1,2 at the end of the article), and they must be respected.
 
These recommendations were compiled for a reason. If an illustrator or a web designer joins a mobile app development team without understanding the nuances, they are likely to run into some obstacles. Even if it seems they did everything right, further development may reveal some flaws.
 
Today's developers, just like designers, need to have a firm grasp of multiple tools, professional guidelines, and specifications. It’s not that developers don’t want to delve into the intricacies of design -- they simply have no time for it. Before the designer submits their work, the project manager and the client have already demanded results from the developer. The designer can be of great help to the developer by selecting the correct tools, not only for the initial drawing, but also for further work with the development team.
 
After working with many different teams for several years, it became clear to me that well-thought-out design can speed up the development process and make teamwork more pleasant. Before beginning the design process, I now check all my projects for compliance with certain standards and rules.
 
* The designer is part of the team
The designer is not just involved in the project’s early phases. They should be considered part of the team right up to the delivery of the application to an app store. The designer should be in constant communication with colleagues, helping to solve design-specific issues and responding quickly to the developer’s requests. The designer remains a vital part of the team until the first delivery of MVP.
 
As practice shows, designers do not always provide high-quality layouts, and as a result, some flaws may emerge in the course of further development. Some examples are blank screens, improper element states, incorrectly divided blocks, and lack of certain resources. Also, the client may decide to add something during the development process, and the designer should be available to step in to finish their work. Keeping the designer in the loop throughout the course of development can eliminate problems stemming from quick UI/UX corrections.
 
* The developer should be able to open the project without wondering which platform was used
Today's developers do not have time to study graphic editors, and the last thing they want from a designer is a layout drawn in Photoshop or Illustrator and submitted as a *.psd or *.ai file. Those types of files are large and require installation of Adobe to access them. The developer simply wants to select certain elements and see what they will look like, without delving into a huge file.
 
There are many specialized graphics editors to choose from for drawing mobile applications, like Sketch, Figma, and others. The designer’s choice of editor depends on how a clickable prototype and “live screens” for the frontend will be presented.
 
With Figma, “live screens”, a clickable prototype, user history, transitions of screens, font families, colors, and other resources can be downloaded from a single place. Design changes can be seen instantly. Figma, like many other services, has its drawbacks, but overall it is a pretty good choice because it does not require the installation of special software. A link to the project is provided -- all you need is an Internet connection.
 
Sketch is also a good option. Designers utilizing this editor can also integrate prototyping tools such as Zeplin or InVision if the development team is already working with them. They are quite easy to use and do not require special preparation.
 
* The designer must understand the guidelines of various platforms and their differences
Designers often draw projects without understanding platform guidelines, and end up mixing styles or  creating non-standard elements. They are only thinking about how the finished design will appear on a screen, and not concerned with functionality. There are quite a few examples on Dribbble and Behance.
 
A client may approve a layout based on its appearance, without understanding these nuances. But when it comes to development, the process hits a roadblock. The designer does not want to redo their  work, and the client expects the finished product to look exactly like the screen or effect they approved. Therefore, it is very important for a designer to understand what and how they can draw to create a usable prototype.
 
* Resources
Resources are the most sensitive issue when it comes to interacting with a designer. Most designers do not cut resources since they are not obliged to do so. It is long and tedious work, and if a developer needs it to be done, they will cut everything themselves or use a provided *.svg; they do not instinctively know what needs to be cut and what sizes to use.
 
From the developer’s perspective, resolving this issue can greatly reduce work time. The developer should simply be able to look at a resource name on a prototype and find the same name in a resource folder, so they can continue working on the layout.
 
For a developer to cut resources on their own, they need to select an entire element on a screen, find the export feature, and specify dimensions and the place of export. Since there are many elements, this process can be extremely time-consuming.
 
Again, layouts are not always submitted in ideal condition. A designer can miss some details, and the prototyping tool may work incorrectly while exporting. Also, while selecting an element for cutting, a developer may select only a part of the element or background, when a transparent background is needed. When resources are cut and the right sizes are used by the designer, the entire project flows more smoothly and development speeds up.
 
* Terms of reference with screens descriptions
When an application consists of a small number of screens and it is quite clear how it works, the development process is fairly straightforward. But when an application has a large number of screens and the prototype does not give a complete picture of its operation, things become complicated. Also, the client may decide to make changes along the way. In such cases, a detailed technical description of every screen, each element on a screen, and their overall state can prove very helpful.
 
As mentioned above, project team members change frequently, and a project in the works is no place for a novice. The new designer may be given a quick review and links to all the resources provided by the predecessor, and that’s it. A developer is expected to start working with a full understanding of how the application functions. This is often not the case because the designer did not understand the details or did not want to share them. As a result, the development process slows down, the new team member does not understand how the app functions, and time is wasted bringing them up to speed.
 
What if all requirements are not fulfilled and you still have work to do?
In one of my projects, all of the above-mentioned requirements were not fulfilled. I was developing a specialized app for real estate rental on two platforms: iOS and Android.
 
Everything started as usual, but it later turned out that the designer did know about the guidelines and did not fully understand how mobile applications function. The design contained transparent elements, and fonts for only one platform were used. The color scheme could be summed up as “50 shades of gray.”
 
I was given a *.psd file. This in itself was nothing bad, many designers do so. But I had to install Adobe to look at the layout. The file was very “heavy” and took 10 minutes to open. The screens were not drawn separately, they were placed one above the other as layers. To view one screen, I had to turn off all the others. Since I did not have much experience with the package, I thought about using Avocode as a tool for working with the design material. This program is not perfect, but it literally saved me.
 
A clickable prototype, albeit without live screens, was given to me in InVision.
 
Conclusion:
What I expected to get from the designer:
1) A clickable prototype with live screens (InVision, Zeplin, or Figma);
2) Revised terms of reference with each screen’s description;
3) A screen map with transitions;
4) A user story;
5) Divided resources in sizes @1, @2, @3;
6) Fonts.
 
Of the above, I received only a clickable prototype and a PSD file.
 
The project was eventually completed and submitted to an app store, but not before the team went through seven circles of hell to overcome unnecessary difficulties.
 
Some may argue that the materials provided by the designer were enough. But we are talking about professionalism and how everything looks from the developers' perspective. After all, a mobile app designer is not just an artist. They are a vital member of a team, working on a complex project. They should do their job well because for them, the initial design is not the end of the road, and for the team, design is only the beginning of a responsible long-term journey.
 
Useful links
4. Figma
5. Sketch

Share It

Author

Sergey Grybniak

Sergey Grybniak is CEO at the software development and digital marketing company Clever-Solution.com and a founder of the blockchain company Opporty.com. His business ventures are geared to developing software and attracting users to the finished products. Sergey's hobbies include traveling, public speaking, and creating helpful and engaging content.

Recent Blogs