2014/10/02: Updated for iPhone 6 and @3x.
I am not a designer. I have a strong opinion on user interfaces and their usability in particular, but Photoshop to me is probably what code is to you. So, let’s work together: you design, I slice and code.
However, in order for me to be able to slice your design, I like you to follow some simple guidelines. Not to limit your creativity in any way, but to make sure your awesome design will translate to a pixel perfect app:
- Use vectors, not bitmaps, so I can just do a new export when Apple introduces @4x. Yes, It’s Time to Dump Photoshop and Embrace Sketch.
- For bitmaps, use highest resolutions in effective pixels, so I can scale down. For iPhone 6 plus this means designing for 1242×2208 pixels.
- Design non-scrollable windows for the smallest device, e.g. iPhone 4 instead of the longer iPhone 5 or the huge iPhone 6.
- For UI elements use dimensions of a multitude of 3 pixels – or 6 if needs to be centered – so I can scale down from @3x to non-retina (mdpi).
- The UI needs to be able to adjust for different resolutions. For iPhone the width used to be fixed at 320dp, but that has changed with iPhone 6. Most phones do share a 9:16 ratio. Make clear to me what UI elements need to scale, wrap etc.
- Make sure backgrounds for windows, buttons and other elements of variable dimension can be stretched out. For this, follow a 9-patch grid where the 4 corner patches remain unstretched, the left and right are stretched in height, the bottom/top in width and the middle in both. This means you can be more creative in the 4 corners and need to keep the middle area in 1 color. Please add guides to show me the grid.
- Be consistent in your design. If texts or buttons share the same font, size, color, dimensions, background-image etc., this allows me to define – and change – their style in a shared file. And hey, most people like consistent UIs anyway :)
- Don’t forget to design how a button looks when it is tapped on or has focus (Android, BB) and stuff like loading/info/error messages, pull to refresh actions etc.
- For custom fonts, get me an OTF or TTF version and make sure you’re licensed to use it for the app.
- Avoid using text formatting, links and inline images in content. Those are HTML features and require slow and heavy WebView. Group media in one or more scrollers instead.
- Provide the design in Sketch format or in one PSD per (unique) screen. Be easy on deep-nested layer groups.
- Since PSDs don’t support animations, we probably have to talk this kind of stuff through. Just make sure you let me know what needs to be animated before I start coding :)
- For the icon and launch images, just provide me with images big enough to run through TiCons. This means a 1024×1024 icon and a 2208×2208 splash. Make sure all important stuff happends in the center 1000×1000 pixels of the splash.
And last but not least:
- Check back here every now and then for updated guidelines.