How to follow ios guidelines when designing in points? How to be sure about sizes of UI elements?

Question

Good day to everyone,

Need help from very experienced UX designers, who can provide detailed answer here.

I have a few questions regarding the design process of an iPhone mobile app (daily task manager app to be exact). It should be an iPhone app supporting iOS version 9.

1. General question: If we should provide mobile app design (in Sketch) for iPhone devices (Iphone 5S (320x568) render at 2x,6 (375x667) render at 2x,6+ (414x736) render at 3x), which have different dimensions and resolutions, what is the size (from the beginning) we have to start to work with when following good practice? Should I provide high fidelity mockup for any specific devices first, and only scale it down or up to other 1x sizes after? P.S.: When we want to handover files to the developer we will have to export in all @1x, @2x and @3x sizes. I know that Sketch will export my 1x design to 2x and 3x. But again the question is the same - should I design for 1x sizes for all devices separately - 1x size for 5S, 1x size for 6 and 1x size for 6+ first?

2. I am working in Sketch 3. And I've been started with 375*667 points for @1x for iPhone 6 first. When I have to design for iPhones, I usually start with art-board of iPhone 6 at 1x (375x667 px). I found this more convenient than any other art-boards. When I am working in points, should I still abide by IOS Guidelines/Standards? I know that the general rule is 44pt for buttons and 12pt for small text, 17pt for body text and 20pt+ for titles. Why when I am working in points does the 44pt size seems to be a similar size for buttons as for segmented controls? It takes more space apparently. How can I comply with UI element sizes in such case? How are you following GUI standards when designing in points?

Answer 1

Excellent that you are working with Sketch!

1.0) No, you should not design for each device separately. You could certainly make higher fidelity mockups this way but, trust me, it will be a pain to make any changes. And there probably will be many changes.

There are a few different schools of thought here, but the consensus is pretty much that you should design in the lowest resolution first and foremost (in your case: 320x568, for iPhone 5 @1x). If you started at 750x1334 (which is iPhone 6 @2x), for example, and created a element of dimensions 55x55, when you tried to downsample to @1x you would end up with decimal points (27.5x27.5), so it would have to be rounded to 28x28. Depending on the artwork, this could mess up your image.

1.1) The exception here is when you're working with bitmap images. As you probably know, stretching a bitmap image is much more problematic than shrinking it, so you should work at 4x (100%) and downsample to 3x (75%), 2x (50%), 1x (25%).

Working with 4x ensures your bitmaps will be ready for Android xxxhdpi (which is 4x) and also minimizes pixel rounding, since 3x -> 2x would require 66.666666666666% of the image size.

2.0) I recommend designing for the smallest device that will be used. In your case, iPhone5 (320x568). Maybe you want one of the screens to fit comfortably in the device without scrolling. If you design starting with iPhone 6, on the iPhone 5 some content might be off-screen.

Another thing is that, even though the iPhone 5 and 6 both render @2x, and both have the same height for the tabbar and navbar, they will have different widths. So a tabbar that seems comfy on the 6 might be crowded on the 5. And a title that fits on the 6 might be truncated on the 5.

2.1) About points: first of all, all point recommendations are for @1x. So a button on the iPhone 5 or 6 will actually be 88px high. Points is just a convenient way to communicate with your developers, so instead of saying something is 100 pixels wide you say it's 100 points wide, and they know it's supposed to have 200 pixels on @2x, and so on.

2.2) Visually, segmented controls have only 29 points of height. I am not sure about the technical functionality, but notice that on Apple apps the segmented controls (29 points high) are placed on 44 points high areas. So even though it looks smaller, the tappable area might actually be larger.

This serves as a hit for your design elements, too. Maybe you want a small, 24x24 star to use as a clickable favorite icon. You could (and sometimes should) make a 44x44 image with a 24x24 star in the middle.

The exception to this is in case your developers are well-instructed about minimum tappable areas. Then you can make a 24x24 icon and instruct them that it should appear on a 44x44 tappable area.

2.3) In some cases, though, you might want to—or need to—break the HIG (iOS Human Interface Guidelines). Maybe you want the small 24x24 icon and don't have space for the 44x44 area around it. It happens. But it's very important to test with users and make sure these deviations are not compromising the usability of your product.