The first aspect to address when embarking on the interface design of an app is defining the size of the workspace. For instance, Android recommends designing with a document prepared for a standard base, so that when preparing files for the developer, we can scale for higher or lower densities (resolutions). On the opposite end, iOS suggests designing at retina screen resolution, at the highest possible density.
Building upon this, we will start working on the app interface based on wireframes (as discussed in previous notes, where we explained how to design a wireframe). To initiate the preparation of each screen, it’s important to consider which software is most convenient for design. While there are various alternatives, the most advisable ones are Adobe XD, Sketch, or Photoshop. These tools offer several important features that save us time when preparing files, such as libraries or UI kits for Android or iOS, content export, preview generation, among others.
As we progress with our design, we must – and this is more than a recommendation, it’s a must – conduct tests regarding the visualization of our app on a real smartphone. Incorporating this practice regularly into the design process will ensure that the size of elements and typography is correct and that the contrasts are sufficient.
File Preparation
Upon completing the design and when preparing files for the developer, several points must be considered. This not only saves development time but also prevents confusion. Some important points include:
- File names (the most crucial aspect): When working with many different images or other elements, it’s essential to name them clearly, so that the person continuing the work can easily track them. We also recommend organizing them into folders according to densities. This way, the developer will have better control over these files.
- Images: When working for an app from Android or iOS – or both – images must be exported correctly. For example, iOS recommends working with images at @1x and @2x (@2x is for retina screens). Therefore, considering this, we should create two folders, one for 1x and the other for 2x. Within these, we export images according to their density or resolution.
- Backgrounds, icons, and buttons: Special attention must be paid to our design. For example, if a background is a solid color or a gradient, we need to evaluate whether it is convenient to export it as an image or not. In the case of icons, the same principles apply as explained for images. Often, it’s advisable to export them as images, unless we have used icon fonts like Apple Symbols or others.
Finally, it’s important to mention the relationship with the development team. Maintaining excellent, constant, and fluid communication is fundamental. Doubts about the size of graphics or fonts, margins, or any other element may arise, either because we overlooked them in the design process or they are not clearly understood by the developer.
To address these doubts, it’s best to prepare a series of visual documents that allow or assist the developer in understanding the actual scope of development. Additionally, conduct remote or in-person meetings to progress smoothly without hiccups.
You can rely on us to design and develop your Mobile Application! Our proposals will help you grow your business and enhance your brand.