It's all about looks

mockup I was trying to figure out what text size to use on the Windows Phone to make it readable. After using the 24” monitor where I get a “big ass” phone, also know as a … pad :),  I realized that it’s not going to work.

So I started out a little quest to find some data around the phone and what dimensions you could expect. However, there are no single specification around from Microsoft, so the actual size of the screen may vary. Searching around web brought very little technical specifications, but you know a few facts: It’s going to be 480x800 pixels, and 16:9 form factor on the screen. So I did a couple of educated guesses and assumed a 3.8” screen. Interesting enough, this told me that it actually is going to have a whopping 240dpi resolution, that's close to a an old laser printer, and in full color – amazing.

miniSo on to the mockup, as soon as I got the dimensions right I started to print out a few pages, checking fonts and sizes (and got a surprise by how small the texts and icons got in the actual size). I used the skin from the emulator as base. Next, I wanted to get a feeling of it in the hand as well, so I started adding some depth. A few minutes later I found myself creating a cut-out paper prototype you see to the right here.

If you like you can cut out some slits  and do a left/right and a top/bottom sliding version. That way you can even use it to user test panoramic and pivot applications as well as that big sliding home screen.

So here it is the Windows Phone 7 series paper prototype, enjoy.

// Håkan Reis


WindowsPhone7series_panorama_thmbI was trying to make a mockup in Balsamiq for a windows phone 7 series application and thought i needed a few items to get things right. So I started creating the parts needed. The basic phone, with a see through-screen so it's easy to create panoramas to lay behind. The keyboard variants (there are quite a few, default, text, email, web, search and a couple of dialer keyboards) and then a few of the buttons and checkboxes that’s needed. Most buttons are easiest mimicked by using the geometric shape in Balsamiq.

It’s quite heavy with all the details in the keyboards so pick and choose only the controls you need.

So there you are, just download and start using it.

You can also find it at the Mockups To Go site.