Sharing the Code

Programming stuff that might be useful to others

Wireframes and iOS Click-Through Prototypes

I think wireframes are an important step at the start of a mobile app or website project. They can also be useful for working out a fixed quote for a project. Once yourself and the client have agreed on the wireframes you’re pretty clear what the project scope is. This is how I create wireframes.

I tend to sketch wireframes. I find with drag and drop tools like Axure RP you are limited to the widgets they provide. With sketching you are only limited by your imagination. So I use Sketchbook Pro on TabletPC and iPad. At home I use a TabletPC as it’s far better for sketching than an iPad.

When I need something more portable I use an iPad. I use a Boxwave stylus with a fingerless glove from Top Shop – to stop my palm creating strokes. There are better styli out now that are pressure sensitive.

First I create templates in Fireworks and export them as 32-bit PNGs. Notice I have Sketchbook Pro’s toolbar visible so I can position the template correctly. This is on a separate layer and is turned off when I export to a PNG.

I then open the exported PNG and remove the white from the inside of the template using the magic wand tool in Fireworks. This is so that the template, which will be above your sketch, will mask any strokes that go beyond the edge.

Adding transparent PNGs to iPad’s photos can be a bit awkward – just adding it through iTunes syncing will result in non-transparent PNGs. You can email the PNG to yourself and open it on the iPad and then save it to the photos. Alternatively what I do is have Apache web server running locally and setup a virtual host that has the IP address of my laptop as the server name. This virtual host points to the template images I created. I set Options Indexes so that it lists the images when you go to the ‘website’.

/etc/apache2/extra/httpd-vhosts.conf:
[sourcecode language=”xml”]

ServerName 192.168.1.16
DocumentRoot /path/to/my/template_images
Options Indexes

[/sourcecode]

So on Safari on the iPad I enter the IP address of my laptop which shows a list of images.

I then tap on an image name which shows an image. And then tap on the image and select “Save Image”.

In Sketchbook Pro, I create 4 layers. You can’t name layers on the iPad version but you can on the desktop version.

  1. Annotation
  2. Template
  3. Sketch
  4. Fill

On the template layer I add the template image I’ve just transferred to photos by tapping on the Flower/Plus icon at the bottom of the layers pop-up, then select Photo Library > Saved Photos > and then select the template image.

I select the sketch layer and then save the sketch. I select the layer before saving so when it’s reopened it will default to that layer. When I want to create a new wireframe I select the sketch I’ve just made and press the Two Pluses button to create a copy of the template sketch and then edit the copy.

I do my sketching on the sketch layer. If I want to add a fill colour I select a thicker brush and change to the fill layer. This allows you to fill in colour without having to be too exact with going up to the edge of the outline.

The same process can be used for Sketchbook Pro for Windows or OSX (without the hassle of transferring transparent PNGs on iPad). The desktop version allows you to lock layers, so I lock the template layer.

When I’ve created my wireframes I export them to iTunes by tapping the Flower/Arrow button and then iTunes > Layered (PSD).

In iTunes I goto Apps, then select Sketchbook Pro and save the generated PSD files to somewhere on my laptop.

These PSDs will be rotated incorrectly so I have created a Photoshop action that rotates them and adds a white background layer.

Click-through Prototype

It would be useful to show the wireframes on an actual device and be able to tap from screen to screen. For this I’ve created a Photoshop action that hides the annotation and template layers, crops to just the sketch, resizes it to 320 x 480 and exports it as a PNG. In Dreamweaver I’ve created a template that has everything setup like referencing CSS and Javascript files and all I have to do is import the sketch image and add hotspots.

Below is the source code of my template:
[sourcecode language=”html”]







Untitled Document








[/sourcecode]

Notice I set the viewport meta tag which causes the page to zoom correctly. The apple-mobile-web-app-capable meta tag allows you to add the website to the homescreen so it can be run in fullscreen mode. You can also specify the icon image with link rel="apple-touch-icon". For more things you can do with Safari see the Safari Web Content Guide.

On the imported sketch image I create hotspots so I can link parts of the image i.e. buttons to other screens.

In my Javascript file I use a little trick to get rid of the address bar. If you are creating native app wireframes you should get your users to add the first webpage to the homescreen so it will be fullscreen. Without the second piece of Javascript links in the “homescreen” website will open in Safari.

[sourcecode language=”javascript”]
// this code requires you to also reference JQuery
$(document).ready(function(){
// to get rid of the address bar
window.scrollTo(0,1);

// to stop links opening in Safari when you have saved the website to the homescreen
$(“area”).click(function (event) {
event.preventDefault();
window.location = $(this).attr(“href”);
});
});
[/sourcecode]

Then all you need to do is upload it to a web server and send the address to the client. For native app prototypes you could pop-up a little message to tell the user to add the website to the homescreen and then run the website from the homescreen so it shows fullscreen.

[sourcecode language=”javascript”]
$(document).ready(function(){
$(‘#addToHomeScreenHint’).click(function(){
$(this).hide();
});

if (window.navigator.standalone!==undefined && !window.navigator.standalone){
$(‘#addToHomeScreenHint’).show();
}
});
[/sourcecode]

Comments are closed