Following on from the ‘Nextr‘ Presentation Case Study, I have decided to put into practice some of the methods discussed for the prototype Breeze weather app.

Along the way I’m going to document the process (so expect this post to expand over the next few weeks), the pros and the cons, starting with the easiest:

Contextualising (Part 1) – Simple iPhone 4 surround

Let’s start by taking stock of what I have at my disposal at this stage:

• mockups of the interface with various configurations in bitmap format, low res (72dpi)
• the wheel with examples of summer & winter in vector format
• logo in vector format

The actual interface at this stage is only available in low resolution but I can still show a few different screen configurations  (I will only show one or two because you will get the idea pretty quickly).

Now I need to contextualise the interface designs to the device on which they were designed to run: the iPhone 4.

To do this I need an iPhone 4 surround. The higher resolution the better. I did a quick Google image search and I found this:

These were in a file that was fairly large, so if I need close ups or need to upscale the resolution of my interface designs (which I will), I can.

The temptation here is to place my interface design in the middle of one of these surrounds and scale it up to fit. But of course, we all know that is a Photoshop (bitmap) no-no. It will just end up looking blurry and ruin the professional production values we’re after.

To do a high resolution version I’m going to have to ‘vectorize’ the interface and right now, I just want a simple presentation with what I’ve currently got at my disposal.

The correct way to approach this then is to shrink the surround to fit my interface mock-up. This is the result:

As I think you’ll agree, this is smarter way to present my concept and interface designs than simply having the interface on its own. It removes all doubt that this is an iPhone 4/mobile product and is a very simple and quick method of contextualising my screen mockups.

There is still a lot more I can do to improve the presentation. I will build up the portfolio of presentations until I have enough to properly create a campaign-ready profile.

Contextualising (Part 2.1) – Considering the iPhone 5

Before moving on to the second phase of presenting my interface designs I feel I ought to consider how my project would look on an iPhone 5. The reason I haven’t considered it from the start is because when visualising the concept for the interface design mockups, I was unsure how far I was going to take this experiment so I designed for the ‘lowest common denominator‘, something I am used to from creating web sites. There you had to consider at what resolution to design your site based on common screen resolutions. Thankfully, things are much more flexible now thanks to the uprising of the ‘responsive design philosophy‘ brought about the saturation of mobile devices accessing the internet.

Put simply; if my design worked (fitted) within the confines of the iPhone 4’s screen resolution of 960 x 640 then it will definitely fit on the iPhone 5’s screen with its 1136 x 640 screen resolution. Both have 326ppi retina displays.

The only decision to really make is how to handle the extra 176 pixels. I could approach this two ways:

I could add more information. That however, would mean if I ever created this, a separate app would need to be created for iPhone 4 and 5. That would be costly for a small experimental app such as Breeze.

Instead of complicating matters, I could just allow more space for each of the elements in my existing design. This would mean just a single application could run on both devices, just with more padding around some of interface elements, which actually, would be a good thing because I still feel it is a little too cramped vertically.

Therefore, before I start work on the vector based version of the interface, I am going to approach the task with my decision in mind and try and create floating elements. Obviously, the space between the circular windows has to be fixed because of the wheel underneath so I’m thinking for now, extra padding on each side (top and bottom) of the 2 white interface division line.

Contextualising (Part 2.2) – A more Professional Output

Whilst producing Part 1 of this task I realised that although the iPhone 4 surrounds were large in size and clear, they are still bitmap based and this could cause issues further along my quest of presenting this project to the utmost quality. I therefore set about looking for a vector version of the surround because after all, it’s quite a simple shape and, thanks to its minimal design, would translate very well to vectors.

I didn’t have to look very far until I found what I was looking for:

How brilliant. The utmost quality surround of the iPhone 5. A huge thanks to Pixelden for supplying these. Pixelden is a fantastic resource for any aspiring designer and the majority of their stuff is free. There are some Premium resources on there but there’s certainly enough to get you started.

So now, let’s see how the updated interface (with some quick padding bodging added) looks on these bad boys:

Ok so I admit I had to upscale the original screen mockup. This is because the file provided uses a clever smart object in Photoshop that basically allows you full customization over what you want to display in the screen area. Whilst this is excellent for production it does mean that you can not scale down the surround. This is how you should do it anyway.

Despite the scaled up interface design this is an improvement over the first attempt. I like how the screen glare sits over the interface. Again, you don’t have to worry about that because it’s all taken care of in the Photoshop file. If you don’t like, you can remove it or make it more subtle by adjusting the layer’s opacity.

Conclusion

I’m quite pleased with how things are progressing with regard to presenting the mockups. However, I’ve reached a point where it’s pointless going any further down this road until I have the final, vector version of the interface design completed.

Therefore I will continue this process in a future post (soon). Before then, I think a quick look at vector vs. bitmap is called for.