One of the most common problems in design of applications and its further transition to developing stage is the requirement of app adaptation to different resolutions. It takes certain part of the time devoted to design, and although in big companies the team can include the special person assigned to accomplish this type of staff, in most cases this task rests on the designer’s shoulders.
As Tubik Studio UX/UI designer Konst says, it is impossible to consider yourself to be a UX specialist until your own work process is as efficient as possible. This particular thought makes him constantly explore and study new ways and tricks of optimizing his work and increasing its quality. While many companies and individual designers are moving to work with more modern and specialized software for UI/UX design such as Sketch, there still are a lot of those who work with Adobe Photoshop. Moreover, as we have already mentioned before in our previous post, the more tools you can use, the more flexible you are in solving tasks as different tools and soft are efficient for different problems.
One of the ways of optimization for his own design process, which Konst found for himself, enables the designer to reduce the time needed for adaptation significantly. Certainly, it is not a silver bullet, but it can be useful for those who have to adapt their designs to many resolutions.
In substance, this method applies drawing in 1x in points with further pixel auto-scaling according to the set density of dpi/ppi.
Besides general benefits, there are also the following positive points if the method:
1) It makes possible to use the points indices directly both for margins and types (that is by no means unimportant)
2) It isn’t necessary to scale the design manually in the process of adaptation to a new resolution.
3) It isn’t necessary to scale types and fonts visually.
So, let’s get started investigating the process itself.
First of all, the most important thing is to customize the file of your project correctly. The vital aspect at this stage is the size of the operating zone of the project and the resolution pixel/inch.
The definition of point is more or less clear for everybody who has worked on design for iOS. However, meaning of resolution should be discussed in more details.
Both in web design and design of mobile applications the resolution of 72 dpi is the equivalent of 1x resolution. It became custom on the basis that this is a standard resolution for creation of a new file and in this resolution 1 pixel equals 1 point. Explaining the method, the designer didn’t stop on the position of standard resolution in details providing the link to the detailed Guide on DPI.
In the given case, suppose the project we are creating is the one for Iphone 6 with screen resolution of 750*1334 pixels, 2x Retina screen, in other words 375*667 points. While the resolution in pixels can differ, a point is the constant measure and its actual presentation directly depends on the resolution parameter. In our case, we set 144 dpi that is equal to 2x modificator in design of application for iOS. So, now our 1 point is not 1 pixel but 4 pixels. It happens because the point contains more pixels with increasing resolution and now it takes the space of 2x2 pixels.
Then we can start drawing. It’s important to consider here the following nuances:
- Set the Rules of the document in Points (Right click — -> points);
- Avoid divisional measures of the objects in points;
- Avoid divisional measures of the objects placement;
- Avoid multiplying the measures from the guideline by any modificator; they should be used directly, i.e. navigation bar is drawn with the height of 44 points, not 88 as we would do in pixels;
- Instead of pixel grid, it’s better to use the grid of 1 point. It makes drawing more convenient.
When the project for Iphone 6 is accomplished, it’s time to adapt it for Iphone 6+ or convert the project according to the given settings.
It is known that design for Iphone 6+ needs to be accomplished in 3x, which equals to resolution of 216 pixels per inch. Before, you would have to adjust all the design manually to Iphone 6+ requirements, while with this method it is not required.
To make the explanation more applicable, the current instruction will be devoted to re-sizing mock-ups from 5s directly into 6+.
1. First of all, we want to check that our mock-up uses correct settings. The size for canvas is set in Points. Resolution 144.
The correctness of the settings can be checked in the mock-up itself, if you set on the rulers first points and then pixels, checking the size of the same elements with marque tool. If everything is done right, then the pixel measure should be twice as big as the point measure.
2. Now we start adaptation from 5s into 6+. First, we want to increase the size of the canvas so that it corresponded to the parameters of the new device. To do it, open «Image/Canvas Size…». In the current case we need to enlarge the canvas from 320x568 tо 414x736. Pay attention to the anchor point as the size will get enlarged relatively to this point. Here the designer chooses the top left corner as to it he has already anchored the elements to its edge and such up-sizing will allow additional work on positioning these elements.
3. This is how the project will look like after up-sizing. Left — before, right — after. As you can see, the canvas actually got bigger.
4. Having checked the pixels/points, it’s possible to see that there are some minor mismatches. 414 points is the right measure but the width of the mock-ups resolution for 6+ is 1242, not 828. The point is that we have set the resolution of 144, i.e. 2x.
5. To correct above mentioned, we move to «Image/Image Size…». There we are able to see the sizes of our canvas in points and its current resolution in pixels. First we choose «Fit To: Custom». This parameter allows using further settings correctly.
As the size of the canvas in points is correct, we have to adjust its pixel measure. For this aim, we change the resolution from 144 to 216 that is going to correspond to the resolution 3x. After inputting the measure of 216, the number of pixels should change at «2208 x 1242″ which we need.
6. After this we press OK. Now by example of any element with the fixed measure in points we can check if the resolution in pixels changed properly.
It’s done now! You need only to move the elements of the design and fix them to actual edges, but in general, main objects are already on their places. Therefore, you needn’t worry about the sizes of the icons and buttons if you followed the guidelines.
Optimization is the great step to efficiency of the workflow as it can save time and make it free for more creative tasks. Here in Tubik Studio we always share our ideas how to optimize the process saving time and effort but not losing in quality as it is strategically important in work on design tasks.
Originally written for tubikstudio.com
Welcome to see other works by Konst on Dribbble
Welcome to see other works by Tubik Studio on Dribbble and Behance
