In this tutorial we will see the whole design process for an iPhone application, from creating the UI in Photoshop to exporting the assets. The application is called Learn Around and was created for the Apps Foundry Contest. For the purpose of this tutorial, I made the application more simple and only used two views that sum up most of the UI assets needed.
iPhone App Design Workflow with DevRocket
Learn Around, the Concept and Background
The application would help people to share small pieces of knowledge around them. If the user is in a place he knows something about, he can use geolocation to add a smart knowledge to this place, like a virtual pin on a map. A smart knowledge can consist of text, pictures and a sound recording. Other users will then be able, when they go next to this spot, to see this smart knowledge by getting notification on their phone.
The application was created during a 36 hour contest. It was a great experience since I was able to work directly with the developer in front of me. I could get early feedback, while designing the UI elements, about what can be implemented on iOS and what can’t, and ask him questions about how I can export files to help him. (You can see some screenshots of the project here)
Some iPhone Tips Before Getting Started
I usually set my Photoshop file to 72dpi, 320 x 480px and use a 1px border, so that they display nicely when doubled for retina display. I also work only in vector shapes so that the retina image will be sharp. Even though, I sometimes have to adjust the path for retina, so the best way is to test, test and retest the design to make sure it looks nice on all sizes.
You can also start at retina, but then it tends to get ugly when you scale it down, since a half pixel does not exist.
Creating the App UI, Step by Step
Creating the Tabbar
First things first, we use the DevRocket plugin to create our frame. By choosing the Portrait Canvas button it automatically creates the fake iPhone with tabbar and title bar. Note that this one is created in normal size, so I will use the Retina display button to switch sometimes to 640 x 960px. (You can download the iPhone retina start PSD if you don’t have the plugin)
Then we place some guides, to remember where the title and tabbar were and lock the group and background so that this won’t move.
We then need the base for our custom tabbar. We first create a rectangle with a 90° gradient that will use the base color #536174 and darken it a little bit. We duplicate this rectangle, give it a 0% fill and add a pattern overlay on the top of it. You can find some pretty nice patterns at Subtle Patterns.
We want the tabbar to stand out from other apps, so we will give it a special look, with the button in the middle being bigger. We create a big rectangle with a 3px border radius. Again, we will add a subtle gradient, starting from #4c5a6c that goes a little bit darker. We then duplicate this layer, put the fill to 0%, and add a stroke, the same pattern as before 37% opacity, with blend mode set to Luminosity, and a drop shadow.
Nice tip: if you don’t want to see the line around the rectangle, you can toggle it on/off with ctrl + shift + h.
We then add a 2px line at the bottom, the text of our tabs, and the icon. Each icon has a little gradient and a 4px distance drop shadow with the blend mode set to multiply, and the opacity to 11%.
We also want to make a difference between active icon and non active tabs. We create a smaller rounded rectangle inside the tab, with a darker color and fill set to 70% and an inner shadow, to give the impression of a pressed button.
Of course only one of them will get the active focus at the time.
Creating the Title Bar
The next step is to add the header or so called title bar. Here again we will use a vector shape to preserve flexibility when exporting to retina.
We create a rectangle the size of the top bar we marked before using rulers, with 2px rounded corners on the top. We apply it a gradient from # 364151 to # 445164, and a little drop shadow. Then the same trick used for the bottom bar : we duplicate the layer on the top of this one, remove the effects and add a pattern. Then we set the fill to 0% to only have the pattern and not the background color. We also add a patterned gray background to the app.
To finish the backbone of the app where we will put the map and the settings, we then add the logo and the title on the title bar, and group our layers.
Adding some Content
As we said in the share part, the user should be able to add some knowledge. We want him to be able to add a title, some text, a url, choose a category and be able to link a picture or some sound to the smart knowledge. Let’s build this.
We first hide the title bar since we will create a special title for this new view.
We then create all the fields we need : name, description of the knowledge, url and category. This is just to show where the fields will go and have a global idea of the place they will need, since the developer will create them programmatically.
Then we add the two buttons: add picture and add sound. We create a rounded border gray rectangle and add an 8px white stroke and a little drop shadow.
When the user adds a picture we want to give him feedback, so we will also create two active buttons, changing the gray to a #89c8d9 color.
And we still need a button for him to send the smart knowledge he created so we’ll create an orange button.
First we draw an orange rounded corner button with a gradient filter. We duplicate this, put the fill to 0% to add a pattern overlay, and the same 8px white border and drop shadow as the two other buttons.
Again, we need to duplicate this whole button to add an active share. We will simply keep all the filters and darken the orange gradient a little bit.
Now that we have all the visuals we need, we can start exporting the assets for developement.
Exporting the Assets for iPhone
The first thing to keep in mind is that you will always need assets in standard and retina size. The retina image has the same name as the standard one, but with a @2x suffix at the end. So if you name the image mypic.png, retina will be named firstname.lastname@example.org. All assets are exported as PNG24 images with transparency.
Exporting the Tabbar
For each tabbar item, we need normal and active states. At this stage, I asked the developer what was the most simple way for him to implement this, and he replied that he needed 3 images the same height with active state for each that will perfectly match.
The easiest and quickest way to do this is to export the tabbar in a new document. For this, we will use the UI snips button of DevRocket. With this button, you can create a new PSD out of all the selected layers.
We then enlarge the canvas, and duplicate the tabbar so that we have normal and active state.
We will create the 6 slices, name them, and save them for web. We will then move them to our assets folder called IMG. To make the work between developer and designer more efficient we used git to synchronize the IMG folder so that we had version control in case an image got lost or was accidently deleted (this happens an lot in a rush) and so that the dev got immediately all updates directly pushed in the project on the SDK. Dropbox is another solution, but with less version control.
We then change the size of the whole document to 200%, to match the retina display, and saved the files for web once again. Since we moved the first assets to IMG, we now only have the retina ones.
To add the @2x, we run a batch rename using Adobe Bridge. We open the images folder created by Photoshop when we exported, and choose our new retina files. Then we set the options to the following, and rename all files in one click:
Now we can also send those images to the IMG folder where we find 12 assets, 6 standard and 6 retina ones.
To export the title bar, we create only one slice around it. Then we can either resize to 200%, or use the retina display view button of DevRocket, save it, and add the @2x. Note that this button only works for PSDs that were created with the DevRocket plugin.
We switch back to Standard Display View, to export the last buttons.
We disable the background then and create slices around our buttons. We use the same technique as before to export in retina, using the Retina Display View button to export for retina and Bridge to change the names. We will do this twice, once for inactive, and once for active buttons.
The only thing left to export is the background. Since iOS is capable of repeating a pattern, we only export a square in standard and retina size, and let the iPhone deal with the filling. This way, we are independent of the screen size, whether the user has an iPhone 5 or not.
Another way to export assets perfectly cropped is to use the UI Snips button of DevRocket. This button enables us to export in a new PSD all selected layers, so you can for example select each button, export it, save it, and resave it twice the size for retina afterwards.
Launch Icon and App Store Image
To build our application, it needs a launch icon of 57px (114px for retina and iPhone 5) and an app store image of 1024 px. For both icons, we can use DevRocket.
Since Apple automatically adds the rounded corners and glossy effect we can simply provide a square icon. If you want to use your own rounded corners and shadows, the developer will have to disable the option. In this particular case, we’ll opt for the first one, square corners and let Apple do the magic.
We go to the Icon Design mode of DevRocket, and chose Normal under the Home Screen Icon section. We create our icon, and save it. We can do the same for retina, for App Store Icon normal and retina. It’s better to create each icon separately to have total control of the design and span to pixel each one, especially since we are using a pattern, there might be some adjustments for each size.
Even if DevRocket and Photoshop are great tools, never trust them when it comes to resizing, double check the design, and redraw what needs to be redrawn to have a nice interface in all sizes.
The launch image is the image that will be displayed to the user while the app loads. Apple advices as best practice to show the first screen of the app without content, but many apps use it as a sort of splash screen with a nice image.
Since the arrival of the iPhone5, the launch image is a tricky part. We now have three sizes: 640 x 1136 , 640 x 960 and 320 x 480. The naming convention gets trickier here. For standard iPhone (320×480) you should name it mylaunchimage.png, the retina (640 x 960 ) gets the email@example.com name and the iPhone5 gets a firstname.lastname@example.org name.
If you chose to follow the guidelines, the easiest way to create those images is to make a screenshot of the first screen for the three sizes using SDK simulator, and remove text and content.
In our case, we chose to create a custom image so we recreated the image for iPhone5 and modified it a little bit to take advantage of the extra pixels.
Putting it All Together
And this is what all the asset look like in a folder. Now we’ve got everything we need in hand to create an application, all we have to do is bring those to our nice and kind developer: commit push and pull on git !
In this article, I showed you a little bit of my personal workflow when I designed this particular iPhone application, which is my general workflow when designing applications for iOS (and Android too except they are 4 instead of 2 sizes). This might not be the perfect workflow, but it has worked pretty well for me so far. I used the DevRocket plugin, but it can be done without it, it’s just that this plugin has made my workflow a lot easier since I discovered it.
I’ll also add, creating an application in deep and direct collaboration with the developer is very advantageous for a designer. It’s so much easier to have the developer just in front of me, to be able to ask him questions.
I was able to show him (I say him because mine is a guy, no sexism here!) the design in the early stages, ask him what can be done, and more importantly, how I should slice and export the design to make his development easier. So for such projects, collaboration is the key, especially when you only have 36 hours to design and develop an app.
And of course I’d like now to hear from you guys, do you have little tips to share concerning app design and slicing?
Any tools you use that make your work easier ? Let’s share them in the comments section!
DevRocket is giving one of our readers a free download of the DevRocket Photoshop Plugin for iOS Developers. Minimum Software required: Photoshop CS5.
To enter, simply follow the below criteria in order to be eligible for the contest.
- Submit a comment to this post telling us about your need for this plugin.
- Follow @uiparade and @Onextrapixel on Twitter and include the tweeted link together in your comment.
- Like Onextrapixel on Facebook.
This giveaway ends on 16th December 2012. Please use a valid email address when filling out the comment form. Please comment only once.
The winner will be selected at random, contacted by email within 3 business days after the contest is over and announced in this article.
Good luck, everyone!
Here is The Lucky Winner
We are glad to announce the winner for DevRocket giveaway. He is: