To increase focus on more difficult, principal and conceptual things we are searching for a second UI/UX designer now.
The main responsibility is to draw cool app designs according to wireframe–mockups. So it’d be a Photoshop guy with experience and passion for design. All work will be related to iOS apps user interfaces.
We need a russian speaking guy to join our team remotely or in Kiev.
In return, we offer real challenges and knowledge sharing.
Since iPhone4 with retina display was released everyone faces to unretina process. So every design is prepared in double size and then need to be scaled to be shown on non-retina displays.
I tried a few ways of scaling @2x images to @1x, so I want to share them.
1. Unretiner
First one and the simplest one is to use 3d part software. I tried Unretiner from the Mac AppStore. It does the job fast and easy as one click, but unfortunately not perfectly. And colors are distored. BTW, it’s definitely defined in the app description – “Great for testing out non retina devices before the big painful export from Photoshop.”
This is almost true. Keep going.
2. Automator
Next obvious thought for Mac users is to try to automate the process by your-self. Open Automator and quickly create own Workflow (or download already made one):
Your workflow has to look like this one at the right. Just press to execute and get the result in a few seconds.
So it seems working. But try to zoom the result images and you will notice inaccuracies. There are very small and thin inaccuracies with 1–2px width or height. The right one at the right. The one at the left is from Automator.
3. Photoshop
Easy to guess Photoshop is the best way to have scaled images. Except the way to design for retina and non-retina separately. The last one is hardly worth that.
As it was said it’s a “the big painful export ..”. Honestly it’s not always so. 
I usually did conversion for each file separately by pressing Cmd-Alt-Shift-S and setting Percent to 50%. It’s just about seconds but Anton (the team designer) showed me better way.
I made a video to show how simplify the whole process with Photoshop’s version of Automator – it’s called Actions (from Window > Actions) and Batch (from File > Automate > Batch).
So you may create an Action for the right scaling and execute it over the folder to get all images 1/2x scaled. And rename all images at once with Automator easily after that.
I’d like to see Apple standard solution of the problem somewhen.
In the very customized applications like Debty where every pixel has to be customized the problems start with standard controls. Usually we don’t have access to necessary properties to change color or size and that’s right. Watch the video “Session 116 – Model-View-Controller for iPhone OS” from WWDC2010 where you could find The 10 best MVC Tips Ever – “#3 Don’t fight with framework”.
Anyway a lot of unruly developers want to go beyond the limits set by Apple. I am convinced that the game is worth candles, but before jumping into the open ocean please learn how to keep well on the water in swimmingpool – learn the most recent Apple Mobile HIG. I believe everybody focused pragmatically on WHY it’s so instead WHAT it looks like will do great applications sooner or later.
While Debty current update (v1.3) where we want to let users to select different currency we faced with boring standard Pickers. We have a UIDatePicker to set reminders and a common UIPickerView to show currency list. That’s how it looks without customization:
 |
 |
I know it looks OK, but how we can improve it? Not spending too much time it has to look more stylish according to the app’s common style. The trick is that we can draw a frame with any texture and put it up the Pickers. The central part of the frame is transparent so the frame covers only the area around the Picker’s animating area letting user to interact with a picker below. This way a picker can look as a designer wishes.
 |
 |
||
 |
 |
We debated within the team which option to choose. I like option #3-4 and #2, but don’t #1 because it is one more different texture on the screen. It’d be looked like a salad. But Kostia likes how option #1 looks. So, opinions diverged. Note it’s necessary to evaluate the workpiece on a real device. It is closest to the actual UI option – need to feel in the hand and try to tap then the brain will understand how it corresponds to what was intended. It’s a magic process.
A bit later it’s discovered that we can not change the transparent strip for choice of a UIDatePicker. So we want to have similar strips for both pickers. Option #3-4 has become less attractive. The option #2 was selected as the most fit into the current design.
By drawing the options and fitting sizes plus 3 lines of code we have a great customized control.
Update (31 Apr 2011): It’s just discovered that UIDatePicker changes width of animating area according to the user’s device region settings. Month titles in English and Russian cover different areas, so we can not customize so simply.
Update (06 May 2011): We decided not to include this customization to production since we can’t customize every such appearing panel. Don’t fight with framework.
PS. The header image symbolizes a long and difficult path to advanced knowledge.
We’ve released new product recently. It’s called Debty. It helps to manage debts of your friends. There is a banner at the right top. If you want a promocode please request it on the twitter.
The goal was to develop something easy to use with limited features. Developing it we’ve got some useful ideas I want to share.
Design
The very custom design was also required. After a few hours of research Jeans style was chosen. I hope you’ll like it.
Beside it’s really hard to develop and support custom designs, now I see it’s too custom. App design should be more simple and less like “cartoon”. Too much details, textures and volumes are pleasure to look first 3 times, but then they detract from the main thing – functional parts.
No matter how much your design is custom or unique or extravagant, you have to abide by the law of HIG (Human Interface Guidelines). It means your controls should be right sized and placed, e.g. buttons in the UINavigationBar, and you may still use the same navigation principals with UINavigationController or UITabBar. etc.
OK-message sucks
As less OK-messages you have, better your application is. Means you shouldn’t notify user “Your tweet is posted. Press ok to continue.” – use sound notification instead or “Profile is saved” – show some small animation in saved block instead.
So just take every OK-message from your app and ask “is it really required?” and “How could I notify user without OK-message?”. You’ll see how easily you invent some new approaches. Nobody says it’s easier, but worth that.
I think that’s a different between User Interface and Human Interface.
So please look this next short. There are some tiny animations which we are proud of.
The best UI is absence of UI. It’s so much natural to not require time for adaptation.
There are too much tools for designing next iPhone top application. Think i’ll make a special post for best of them.
Today I want to share my templates which are used in everyday work. First two are simple and linear. They have wide screens and I usually use them to paint look detail.
Next pair have more screens on a sheet, but they are smaller and composite of vertical and horizontal. Use them to draw more common things without details.
The last one is useful to draw most common ideas and show crossing form one view to another. It’s not necessary to draw original GUI elements, you can just specify title or small descriptions on that.
Download or print these design templates from Google docs.
This original iPhone Wireframe Photoshop Template was used to make composites. Thank, Neil.