Tutorial – How to design an iPhone application site

Final Result

Take a look at the design we´ll be creating today, it´s a very clean and minimal iPhone application site. We have released the final .PSD file for everyone to download for free!

Before We Get Started

What we need to do before we begin is to download the 960 Grid PSD and the iPhone GUI PSD 3.0. If you haven´t seen the ‘iPhone GUI PSD 3.0′ kit before, take a quick look at the image below.

Step 1 – Getting Started

Open up the ’960 Grid System’ in Photoshop and change the canvas size to 1200×1500 pixels. Change the background color to #232323 and add some noise. Go to Filter >> Noise >> Add Noise (use the following settings):

Step 2 – Add the iPhone

Now open up the ‘iPhone GUI PSD 3.0′ and transfer the ‘Vertical iPhone’ over to our document. Get rid of the images under the folder “Sample Screens” and add your own little background.

As you saw in the Final Result I´ve created one myself and named our tutorial application “aura”. Make sure you place the iPhone something like I have done below. (194px down and 130px from the edge)

Insert a nice logo and add the menu. Since this is only an application design we don´t really need an extensive menu, so we will just do a simple one. Place the logo, align it with the left side of the iPhone and put the menu level with the top of the logo and align it to the right like I show in the images below.

Step 3 – Adding Content

Now we will add some content to give the site the look and feel of an iPhone application site. I´ve added some text and some thumbnails to make the design more informative and creative. Use the settings for leading and letterspacing as the image below shows.

Step 4 – Creating the Buttons

To create the buttons we use the “Rounded Rectangle Tool” and create a nice big button to fit our text in. I´ve made my buttons in the sizes 222px wide and 74px high. To give it the nice gradient I´ve added to mine some really simple settings to use. For the gradient I have used a blue color to match the application screen background. Use these colors for the gradient: #1461a9 to #86bef2.

After applying the gradient and other settings you can add a nice shine effect by adding a white half circle with these settings: “Soft light >> 15% opacity” and erase the parts that should be there.

Here is my finished result. The green button uses the same settings as the blue. All you need to do is to use these colors for the gradient instead: #7fb727 to #afdc74

Step 5 – Adding more content

We need to fill the design with some more content, as for this moment it looks quite empty and boring. We need to give it more life and more information about the app itself. I´ve created two lists, one that shows the features and one that shows the requirements needed for the app to work.

Step 6 – Adding a footer

All we have left is to create the footer and give the footer some information. For the footer I´ve created a 390px high background and added a big-border-like-line to give it more depth. For the gradient on the border I´ve used the colors #313231 to #505150 which are a very subtle combination of darker colors. Now all you need to do is to fill it with some nice content

Source Download