logo.svg

My design setup for iOS apps

My goal is to document my workflow for iOS apps. Part 1 is to have a better understanding of where we should start when building iOS apps.

I am starting to build an app that will work on iPhone 6 and 6 Plus. As these have new sizes I reevaluated my design workflow. I quickly came to the conclusion that not much has changed for me. The major difference is the dimension of my mock's width and height. I am no longer using the 5S as that measurement, but rather the 6.

Screen sizes

To wrap my head around the new sizes I wrote out all the math first. This also helped with trying to figure out the screens all related to each other.

5, 5S, 5C

@1x (320x568) - Reduce to this size for the base
@2x (640x1136) - Default
@3x (960x1704) - Not applicable

6

@1x (375x667) - Reduce to this size for the base
@2x (750x1334) - Default
@3x (1125x2001) - Not applicable

6 Plus

@1x (414X736) - Reduce to this size for the base
@2x (818x1472) - Irrelevant
@3x (1242x2208) - Default

posts/my-design-setup-for-ios-apps/size.png
All Screens at @1x.
posts/my-design-setup-for-ios-apps/screens.png
Screenshots at @1x on top of each other.

Artbaord Size

I use Sketch for most of the designs. It is an amazing vector based tool that works great for designing mobile mocks for both iOS and Android.

The artboard size should be @1x with a width of 375px. The height is a bit irrelevant, but to keep it simple, I use a height of 667px. This is basically the 6 at @1x. The reason our designers work in @1x is because of how we prepare assets for our developers. The main reason is that assets hold their value when scaling up.

Exporting

Becasue we are using Sketch exporting at @2x and @3x is simple a couple clicks away.

Q&A

Q: Can’t I start at @2x and scale up to @3x?
A: Mathematically it is possible, but in the pixel perfect design world it is not. For example let’s say you are working with the iPhone 6 that is @2x, so 750x1334 * 1.5 = 1125x2001. Yes, you did come up with the answer for @3x and the math does makes sense. The reason why this doesn’t work is because there is not such thing as half pixel. This will cause your assets to be blurry.

Q: Can't I scale up from @2x to @3x by scaling down first?
A: For example let’s say you are working with an iPhone 6, so it’s @2x at 750x1334. You are going to have to cut that in half so it’s @1x, 750x1334 / 2 = 375x667. Then take that number and times it by three so it’s @3x, 375x667 * 3 = 1125x2001. You can clearly see that is not the best way to go. It will also lead to blurry assets.

Q: Should I be worried by the downsampling (1.15) on iPhone 6 Plus or is there anything I should do?
A: Short answer is no. The phone will take care of that part. Just worry about designing at @1x and scale up to @3x. On that same note, don’t worry about the iPhone 6 Display Zoom Upsampling (1.171875) or the iPhone 6 Plus Display Zoom Downsampling (0.96).

Resources



comments powered by Disqus