The first thing to do when starting to design the interface of an mobile app is the definition of the size of the workspace. For example, Android recommends designing with a document prepared for a standard base, such that when preparing files for the developers, we can scaled for higher or lower densities (resolutions). On the opposite side is iOS, which recommends designing in resolution for retina screens, that is in the highest possible density.
Taking these resolutions into account, we’ll start working on the interface of the app based on wireframes. To start preparing each of the screens, we must consider which software is most convenient to design. Although there are several alternatives, the most advisable are Adobe XD, Sketch or Photoshop. These tools have several important functions that save us work when preparing files such as being a library or UI kits for Android or iOS, content export, preview generation, among others.
App Mobile Design
As we move forward with our design, we must test how our app is displayed on a real smartphone. And this, rather than a recommendation, is an MUST! (=P) But seriously, incorporating this practice regularly in the design process will allow us to ensure that the size of the elements and the typography are correct and that the contrasts are sufficient.
At the end of the design and when preparing the files for the development team, we must have to take into account several points. This will not only save development time, but also confusion. Some important points are:
- Filenames: When we work with many different images or other elements, it’s important to name them clearly, so that the person who continues the work can easily track it. We also recommend ordering them in folders according to densities. This way the developer will have more control over these files.
- Images: When we work for the app under Android or iOS, or both, the images must be exported correctly. For example, iOS recommends working with images at @ 1x and @ 2x (@ 2x is retina displays). So, taking this into account, we must create two folders, one will be 1x and the other 2x. Within these we will export the images according to their density or resolution.
- Backgrounds, Icons y Buttons: We must pay special attention to our design. For example: if a background is a full color or a gradient. We must evaluate whether it’s convenient to export it as an image or not. In the case of icons, the same thing happens as we explain in images. Many times it¿s convenient to export as an image, except that we have used icon fonts of the Apple Symbols type or others.
- Last but not less, the relationship with the development team: It’s essential to maintain excellent communication, in a constant and fluid manner. Doubts will surely arise about the size of the graphics or fonts, margins or some other element, either because in the design process we were overlooked or not clearly understood by the developers.
In order to clear those doubts, it is best to prepare a series of visual documents that allow or help the developer to understand the real scope of development. And also generate meetings, remotely or face-to-face, to move forward smoothly.
Count on us to design and develop your Mobile Application! Without a doubt we are going to grow your business, get in touch with us!