Design an iOS interface

As a designer and user of interfaces, I’ve always liked apps that look great. The better the balance between functionality and aesthetics, the better the experience for the user. Over the following steps we’re going to look at skeuomorphic design: we’re going to make elements of a radio app appear more lifelike using different methods in Photoshop, to help the user better identify each function of the app.

The main functions of the radio app that we’re going to look at here are the ‘browser’, which enables users to browse through different radio stations; and the ‘player’. I’ve modelled my design here on a physical radio – particularly in the colours I’ve used, the shapes and some of the details like the buttons and wooden border. Once you’ve mastered the various techniques for making your apps more lifelike, you can experiment with different methods to get the aesthetic you want.
 

Discover the best iPhone apps for designers at our sister site, Creative Bloq.

01 First, look for inspiration. Create a moodboard to play around with ideas – print it out and keep looking at it, absorbing all the details to inspire you for the project.
 

02 Next, start developing your main ideas by sketching them out. Try to focus on the function of the app. Don’t draw in too many details at this stage – they’ll distract you from the practical side of it. Your main objective is to make the application easy to use.
 

Advertisement

03 In Photoshop, set the canvas at 640x960px (iPhone 4/4S) or 640x1136px (iPhone 5) and, using guides, divide the screen into four areas for the top header, the content, the player at the bottom and the background. Using the Rectangle tool, rough out your interface. Create a button in the top header section using four rounded rectangles on four different layers, stacked on top of each other.
 

04 On your bottom button layer go to Layer>Layer Style>Inner Shadow. Set the blend mode to Linear Burn, opacity to 75% and chose a grey colour, then select Bevel & Emboss and set the style to Emboss. For the layer above, add an Outer Glow at 40%, with a Linear Burn blend mode set to grey, with 5% spread and 16px size. Add a grey drop shadow at 10%, choose Linear Burn, set the distance to 10px and size to 2px.
 

05 Choose the Rectangle Marquee tool, setting the feather to 10px. Select the very top layer and add a Clipping Mask (use the arrow in the Layers panel). Then go to Blending Options (using the arrow in the Layers panel again) and check the ‘Layer Mask Hides Effects’ box in the Advanced Blending section.