4 ms·

Ask HN: I am designing a iOS app. Is there a cheat sheet for sizing?

9 points by allsystemsgo 14y ago

Also, for retina display, don't I basically need to make the designs twice to accomodate for both retina and non retina displays? Thanks for all your help. I'm new to mobile design.

michaelpinto 14y ago
You want to think in terms of aspect ratio first, and pixels second. Currently (and this may change) the iPad has the same aspect ratio that's shared between an iPad, an iPad with Retina and an iPad mini. On the other hand the iPhone 5 and say the iPhone 4s have different aspect ratios since the iPhone5 is taller. Also don't forget that your design has to be responsive so that it can go from horizontal to vertical. And then keep in mind that if at some later point you want to port to Android that there really aren't any fixed aspect ratios since there are so many devices. My advice is that you should sketch and then use an app like Keynote to see what your interface looks like on the device. You can be shocked sometimes just how different things feel when you go from a personal computer to a mobile device.
program247365 14y ago
Check out the articles here: http://bjango.com/articles/ http://bjango.com/articles/ Great resource for what you're looking for. Including downloadable Photoshop actions to make it all easier.
- allsystemsgo 14y ago
  Thanks. That'll help a lot. I'm tempted to leave the designing up to a professional.
eduardordm 14y ago
No, you need 'textures' for both displays, but not geometry. The geometry has not changed in retina displays :D (This question was answered dozens of time @ stackoverflow, you should check there) This is why I'm converting an open source app I built to just render everything (using CG, not CALayer) instead of using images. Yeah, images are faster. But I hate to repeat myself and exporting images from photoshop is more time consuming than it seems. (Edit): Images are usually faster, but that's not entirely true if you use only CG calls on a drawRect. From a memory standpoint, keep in mind that a PNG file will occupy the 'framebuffer' + the original image + all the crap that comes with UIImage. By drawing it yourself, you will burn a little cpu time but than only the result buffer will allocated.
- nglevin 14y ago
  I don't really know what graphics you're drawing in your app, but this approach will kill the performance of anything that relies on the GPU. Since you're only using Core Graphics, this is acceptable. Core Graphics only has a CPU implementation on iOS. Core Animation has a CPU implementation that only gets activated under certain conditions; otherwise, it renders through the GPU by default. If you're planning on using CA... - outside of -drawRect:, - with no shadows or masks (transparent gradients, for instance,) - without text (CATextLayer, UILabels, Core Text, UIFont,) - with -shouldRasterize: assigned to NO (the default,) - without overriding -drawInContext: (which draws a CALayer's content to a CGContext,) - with any OpenGL code at all, ...you're going to quickly end up in the land of seconds per frame instead of frames per second.
  - eduardordm 14y ago
    "Core Graphics only has a CPU implementation on iOS." No. :D
    - nglevin 14y ago
      Would you care to elaborate, rather than be glib? QuartzGL runs all Core Graphics on the GPU[1]. It's only available on OS X. If you can show me evidence that some API on iOS runs Core Graphics on the GPU, I'd be happy to know. I do a fair amount of work running Core Animation, CG and OpenGL at the same time, so it would be a big help. [1] - http://www.cocoawithlove.com/2011/03/mac-quartzgl-2d-drawing-on-graphics.html http://www.cocoawithlove.com/2011/03/mac-quartzgl-2d-drawing...
      - eduardordm 14y ago
        This really isn't the place, but: You are confusing the composition and the actual rendering. When you use CG you are composing in the cpu but the actual result is always rendered by the gpu, there is no such thing as rendering by cpu in ios devices. When using opengl the composition and rendering will happen in the gpu. But this is not really important for static objects like buttons, they are built once, unless use force changes, it wont touch the cpu (written on a phone, sorry about typos) For instance, this is 100% gpu: http://developer.apple.com/library/ios/ipad/#documentation/GraphicsImaging/Reference/CGAffineTransform/Reference/reference.html%23//apple_ref/doc/c_ref/CGAffineTransform http://developer.apple.com/library/ios/ipad/#documentation/G...

9 points by allsystemsgo 14y ago

Also, for retina display, don't I basically need to make the designs twice to accomodate for both retina and non retina displays? Thanks for all your help. I'm new to mobile design.

michaelpinto 14y ago

You want to think in terms of aspect ratio first, and pixels second. Currently (and this may change) the iPad has the same aspect ratio that's shared between an iPad, an iPad with Retina and an iPad mini. On the other hand the iPhone 5 and say the iPhone 4s have different aspect ratios since the iPhone5 is taller. Also don't forget that your design has to be responsive so that it can go from horizontal to vertical. And then keep in mind that if at some later point you want to port to Android that there really aren't any fixed aspect ratios since there are so many devices. My advice is that you should sketch and then use an app like Keynote to see what your interface looks like on the device. You can be shocked sometimes just how different things feel when you go from a personal computer to a mobile device.

program247365 14y ago

Check out the articles here: http://bjango.com/articles/ http://bjango.com/articles/ Great resource for what you're looking for. Including downloadable Photoshop actions to make it all easier.

allsystemsgo 14y ago
Thanks. That'll help a lot. I'm tempted to leave the designing up to a professional.

eduardordm 14y ago

No, you need 'textures' for both displays, but not geometry. The geometry has not changed in retina displays :D (This question was answered dozens of time @ stackoverflow, you should check there) This is why I'm converting an open source app I built to just render everything (using CG, not CALayer) instead of using images. Yeah, images are faster. But I hate to repeat myself and exporting images from photoshop is more time consuming than it seems. (Edit): Images are usually faster, but that's not entirely true if you use only CG calls on a drawRect. From a memory standpoint, keep in mind that a PNG file will occupy the 'framebuffer' + the original image + all the crap that comes with UIImage. By drawing it yourself, you will burn a little cpu time but than only the result buffer will allocated.

nglevin 14y ago
I don't really know what graphics you're drawing in your app, but this approach will kill the performance of anything that relies on the GPU. Since you're only using Core Graphics, this is acceptable. Core Graphics only has a CPU implementation on iOS. Core Animation has a CPU implementation that only gets activated under certain conditions; otherwise, it renders through the GPU by default. If you're planning on using CA... - outside of -drawRect:, - with no shadows or masks (transparent gradients, for instance,) - without text (CATextLayer, UILabels, Core Text, UIFont,) - with -shouldRasterize: assigned to NO (the default,) - without overriding -drawInContext: (which draws a CALayer's content to a CGContext,) - with any OpenGL code at all, ...you're going to quickly end up in the land of seconds per frame instead of frames per second.
- eduardordm 14y ago
  "Core Graphics only has a CPU implementation on iOS." No. :D
  - nglevin 14y ago
    Would you care to elaborate, rather than be glib? QuartzGL runs all Core Graphics on the GPU[1]. It's only available on OS X. If you can show me evidence that some API on iOS runs Core Graphics on the GPU, I'd be happy to know. I do a fair amount of work running Core Animation, CG and OpenGL at the same time, so it would be a big help. [1] - http://www.cocoawithlove.com/2011/03/mac-quartzgl-2d-drawing-on-graphics.html http://www.cocoawithlove.com/2011/03/mac-quartzgl-2d-drawing...
    - eduardordm 14y ago
      This really isn't the place, but: You are confusing the composition and the actual rendering. When you use CG you are composing in the cpu but the actual result is always rendered by the gpu, there is no such thing as rendering by cpu in ios devices. When using opengl the composition and rendering will happen in the gpu. But this is not really important for static objects like buttons, they are built once, unless use force changes, it wont touch the cpu (written on a phone, sorry about typos) For instance, this is 100% gpu: http://developer.apple.com/library/ios/ipad/#documentation/GraphicsImaging/Reference/CGAffineTransform/Reference/reference.html%23//apple_ref/doc/c_ref/CGAffineTransform http://developer.apple.com/library/ios/ipad/#documentation/G...