2

Web Design for the iPad: Part 2

Posted by in Apple, Design, iPad, Tutorials

In the first part in this series of articles we talked about how the iPad has become a worldwide sensation in just a few months, bringing with it many new challenges for designers.

In this part we’ll begin the process of designing the homepage of our iPad optimised website, using the Nike.com website from the first part as our example and given that the holiday season is nearly upon us we’ll be creating a snowboard website.

PREPARATION

Download the following image from sxc.hu: http://www.sxc.hu/photo/1152733

Download the following free fonts and install them:
http://www.campivisivi.net/titillium/download.html
http://fontfabric.com/mod-font/
http://www.dotcolon.net/font/font.php?id=1

Head to Google Images and grab some images of snow boards and snow boots on white backgrounds. There should be quite a few to choose from.

STEP 1

Start by creating a 768×916 pixel document in Photoshop at 72dpi (this is to allow for the tab bar and address bar in Safari). Create a 768×44 pixel rectangle at the top of your document.

Apply the following layer styles:

This will be our header.

STEP 2

Next make sure you’ve installed the fonts mentioned in the preparation section. Choose Vegur Medium, 33px font size, -100 tracking. For the first word type blue and the second word type snow as follows:

Then apply the following layer styles to the ‘blue’ text layer:


Use the same settings for the snow text layer but choose a white drop shadow and a white to grey gradient.

Add 3 small circle shapes next to the text and use the same layer styles. You should now have something like the following:

This will be our snowboard website logo.

STEP 3

Take the image we downloaded from sxc.hu in the preparation section, place it just under the header like so:

Add an inner shadow to the image:

Duplicate the image and set the layer blend mode to overlay. This will make the image more vibrant. If you want it to be even more vibrant add a hue/saturation adjustment layer and increase the saturation +29.

STEP 4

Create a new text layer and select the MOD font and type ‘FEEL THE AIR’ in capitals on 3 seperate lines. Set the layer blend mode to overlay:

Add the following layer styles



Duplicate the layer and bring the opacity down to 50%

Create a new text layer and select TitilliumMaps29L, type in caps ‘brand new boards’ go to the next line and type ‘available now!’ change the line spacing to 27 and make the font size 29.

Add the following layer styles:


We now have a header and a promotional image just like the Nike.com site.

STEP 5

Now we’ll add the product gallery.

Duplicate the ‘brand new boards…’ type layer and replace it with ‘top products’ make the text size 25px, then on the next line type ‘tap to check out a product’. Reduce the text size of the second line to 15px and the line spacing to 13px

Start adding the boards and snow boots you found on google images. You may need to resize them and ensure they do not touch the top product heading.


We’re done designing the homepage of our website. Here’s the PSD to download

Next time we’ll be exporting the graphics and we’ll get the site running on an actual iPad!

Hope you enjoyed the article. If you have any questions or suggestions leave a comment below :)

Click here to go to Part 3

Further Reading:

iPad GUI PSD Design Template
6 Ways to Optimize Your Site for the iPad | Search Engine Journal
On the iPad and Web Design – Soma Design
Will the iPad change the way you design?