Moonpig
Clean design and ease-of-use combine to create a Top 10 iPhone experience
Let's Toddle!
Photo capture and customisation with Facebook sharing for iPhone
Dis.cuss.it Moderator
Enable website moderators to manage user generated content on the move
Coffee Barista
Rich content and interactivity optimised for both iPhone and iPad
Tingo
Word game with Push Notifications and Game Center integration.
Monarchy Explorer
Super-rich user interface and content relationships to increase discovery
Surname DB
Slick usability and fast performance to deliver a great iPhone reference tool
HTC
Design and development for HTC mobile, web and email channels
Mosaic Island
Delivering a new website to align with the aspirations of a fast-evolving company
Legal 365
Our focus on user experience ensures a simple feel to a complex system
A tip for designing for Retina displays
The high resolution “retina” display on recent iOS devices is a beautiful thing and makes well designed, lucious interfaces also appear like beautiful things. What’s more, from an interface designer’s perspective, Apple provide a simple method of optimising for retina displays – basically just requiring assets to be supplied at exactly twice the size of the original with a slightly altered filename. I’ve been designing for retina displays since they were first available on the iPhone 4, and there are already plenty of guidelines out there for how to do it, but when I recently learnt something new yet fundamental to planning a retina design I figured perhaps there’s still room for one more “Designing for retina displays” guideline.
The method
It’s unlikely there’s anything new here but just for clarity, firstly a little description of the method used to implement retina interfaces. Apple of course provide documentation to explain the requirements of designing and implementing retina graphics but it’s really very straightforward. An asset in iOS code should be referenced in it’s standard (e.g. non-retina) size, and when displayed on a retina device the asset will automatically be replaced with an available retina version, represented to the OS by an asset of the same name with “@2x” appended to the root of the filename. For instance, the image “myLogo.png” will automatically be replaced on retina devices with the version “myLogo@2x.png” if provided. Simple as that. Furthermore, the @2x version is optional, so some assets might need it and others might not. So an icon or logo might benefit from more detail in the retina version whereas a tiled background might either not be needed or could have a different tiled pattern.
The approach
Once the above method was declared, mobile UI designers mostly adopted one of two approaches – either design to standard sizes using vector artwork and scale up to produce retina assets or design to retina sizes and then scale down the retina assets to produce standard ones. Personally I prefer the latter approach because I find it preferable to work at the detail level required of retina, because scaled down bitmaps (when scaling to a nice scale such as 50%) usually look fine and because it seems mad to work at the standard resolution which will over time be phased out. Very occasionally you’ll find for detailed assets that the standard version lacks clarity because there was too much detail in the retina version before it was scalled down. This is a) easily avoided by using some handy tools (see next bit) and b) easily rectified if needed by recreating the asset from scratch.
The tools
- Fireworks
Despite it’s quirks, Fireworks‘ mix of bitmap and vector tools and the ability to break UI designs into pages, as well as a load of slicing/exporting/prototyping output tricks has for me continued to keep it ahead of Photoshop as my core UI design tool. - LiveView Screencaster/XScope
The free Liveview Screencaster is an indispensable aid to producing better interfaces for iOS. By enabling a designer to view designs in real-time on a device as they’re being produced will improve the designs from the outset. The commercial tool XScope offers the same feature along with some other very helpful measuring tools, though I usually prefer the simplicity of Liveview. - Prepo
Reducing retina assets to standard size is a simple drag-and-drop operation when assisted by a dedicated tool. Originally I used the excellent Unretina but it’s now open-source as not as easy to work with these days so my preferred tool is now the very capable and free Prepo.
A new trick
So, if you’re much of a mobile designer and have read this far then chances are you’ve not learnt much new. You’ll also be completely unimpressed to have read that producing standard non-retina images is a matter of dividing the retina version by 2. However, my recent revelation was that in some circumstances as a designer you need to consider whether the retina version is divisible by 4! Somehow I only recently hit this problem, but when I did it took a considable amount of reworking to reproduce the assets – enough that I’ve learnt to plan for it next time.
The issue comes with centred assets. Let’s say I have a big round button which I want in the horizontal centre of my interface. It’s 100px diameter with a 5px border, so that’ll be 110 pixels total diameter at retina size. On the 640px wide iPhone retina screen, this will therefore have an x co-ordinate of 265px e.g. (640/2) – (110/2) = 265. Now let’s consider the standard version which is 55px wide. In most circumstances, standard images can have odd pixel dimensions and you’ll not notice an issue. However, if we try to place our 55px image centrally on our 320px wide standard iPhone screen you can see what will happen e.g. (320/2) – (55/2) = 292.5. As a result, depending how the drawing of the image is coded, the image will either be off-centre as it’s placed at 292px or will be heavily anti-aliased as it attempts to be placed at 292.5px. Maybe an image explains it better…
So, how do we avoid this at the design stage? Just check that your retina asset is divisible by 4. For instance, had my original button been 112px in diameter, the standard one would have been 56px wide which sits perfectly centre-aligned and “on pixel” at an x co-ordinate of 132px.
Anyway, the upshot of all this is that I recently learnt something new about preparing retina assets, and figured others might like to learn it too. It’s not rocket science but just remember that sometimes you need to consider if a retina image is divisible by 4 as opposed to just by 2.
Nice article!
Great article! Really helpful when it comes to designing for retina displays. Your explanation and the diagram helped me a lot! There might be a little mistake before the picture: 55px image centrally on our 320px wide standard iPhone screen …. (320/2) – (55/2) = 292.5. I think that number should’ve been 132.5 px. There are 3 places when it should be fixed. I thought I might just let you know…