How many interface designs do you really need to draw for the iPhone 4, 5, 6, and 6+?

The output of the iPhone 6 and 6+ smartphones introduced some disorientation among designers and programmers, because earlier you could just draw one layout for iPhone 5 and proportionally reduce it by 2 times when marking up for previous devices. But now the situation has changed a bit: pioneer programmers complain that the layout, beautifully drawn and laid out for iPhone 6, looks completely unattractive, unreadable and unprofitable on the iPhone 5, because it was simply proportionally reduced as before. IOS HIG does not contain specific advice about this, so the question for designers is now particularly acute how many interface designs actually need to be drawn to cover the entire current line of iPhone devices? Let's get it right.


Not many people take it into account, but in addition to pixels, iOS also uses universal units - points (pt, point) and the layout should be attached to them. Previously, programmers solved this problem for designers: they took the .psd layout sent by the designer for iPhone 5, divided all pixel values ​​by 2 and described them in the code with the same points (in the best case, if they were not tied strictly to pixels). But now this artisanal method is not very suitable for designers, because you will have to draw graphics in the maximum resolution, which means that each screen will be 1500-2000 px in size, which will require a huge amount of computer resources, especially if the designer keeps all the screens in one source . Therefore, now more than ever it is important to follow the Android path in terms of a single unit of measurement, namely, to use the very pt.

In fact, the work of the designer can be reduced to the following: we draw screens in the ratio 1 px = 1 pt (point), i.e. 1 pixel = 1 point We take a canvas of 320x568 px in size (which corresponds to the proportion of iPhone 5 640x1136 px) and draw a design, carefully monitoring compatibility with iPhone 4 (in our version, its height is 480 px). But what about the graphics? It should be large, much larger than the base 320x 568 px! Exactly! And here Adobe Illustrator comes to our aid. Illustrator is a vector graphics editor, which means that any graphics drawn in it can be adapted to any size without loss of quality. You can do this: we draw the layout in the above resolution in Adobe Illustrator and, if necessary, export it to Photoshop .psd at a density higher than the base 72, namely 216. All vector layers will be converted to raster (you can’t get anywhere), but this will be enough to export the graphics to all the necessary screen densities. But how can the customer show the design steps? After all, 320x568 px is too low a resolution to evaluate the quality of the layout! And here again Adobe Illustrator comes to the rescue: we export the layout for the customer to ... pdf. Often, such a file weighs tens of times less than conventional raster layouts and is fully compatible with Apple devices. All screens or just what you want will fall into one file and at the first request of the client you can easily and quickly demonstrate the current stage of work to him. But how can the customer show the design steps? After all, 320x568 px is too low a resolution to evaluate the quality of the layout! And here again Adobe Illustrator comes to the rescue: we export the layout for the customer to ... pdf. Often, such a file weighs tens of times less than conventional raster layouts and is fully compatible with Apple devices. All screens or just what you want will fall into one file and at the first request of the client you can easily and quickly demonstrate the current stage of work to him. But how can the customer show the design steps? After all, 320x568 px is too low a resolution to evaluate the quality of the layout! And here again Adobe Illustrator comes to the rescue: we export the layout for the customer to ... pdf. Often, such a file weighs tens of times less than conventional raster layouts and is fully compatible with Apple devices. All screens or just what you want will fall into one file and at the first request of the client you can easily and quickly demonstrate the current stage of work to him.

Total: it is more rational to draw a single application design mockup immediately in Adobe Illustrator to the lowest iPhone screen density and lay out the sizes in pt for programmers. You can draw a design in Photoshop, but this option is less adaptive, even taking into account smart objects. In any case, no matter what graphic editor you prefer, it is enough to take care of the possibility of tripling the graphics for iPhone 6 Plus (@ 3x) and layout layouts in pt.

And for those who have not tried it yet, but are interested in working with designs in Adobe Illustrator, I strongly advise you to go to these pages on the Habré: "UI-Ai: We draw an interface in Adobe Illustrator" and "Integration of design of mobile applications. Part 2: iOS, Windows Phone . "

Also popular now: