This tutorial series will demonstrate all the steps necessary for redesigning an iPhone application with Photoshop. You will learn many of the unique considerations and design patterns used when creating stand-out app interfaces. This tutorial is presented in two parts in collaboration with Mobiletuts+, where you will be able to find an increasing amount of mobile design related tutorials in the future. Read the second part of this series and download the interface PSD on Mobiletuts+.

The Spendometer Application

Welcome to the first part of our tutorial series on redesigning the Spendometer iPhone application! The application is a great little app that allows you to stick to a budget. As pulled from the Apple website, this is what the Spendometer does:

If you’re trying to stick to a budget, it’s a good idea to keep a record of everything you spend, but it’s hard work writing everything down in a notebook. The Moneybasics Spendometer is an application that makes day-to-day budgeting simple and practical. The Spendometer enables you to set yourself a budget, log your spending, and view your spending reports to see where, and how much, of your money has been spent so far in a given week or month, all whilst on the go. It also has a feature that helps you to keep track of your spending on a night out.

Every time you buy something, simply enter it into the Spendometer on your phone, and it will keep a record for you. You can set your own spending limits, and choose how your spending will be reported – weekly or monthly.

The Moneybasics Spendometer will provide you with the essential tool to ensure that you stay on top of your finances.

It really is a lovely little application that does fulfill its purpose well, but let’s all be honest, it could do with a little TLC from a design perspective. Below you can see the applications icon, and several screenshots of the application. The screenshots were taken using an iPhone 4 – as you can see, some areas are pixelated, meaning they have yet to update their application with high resolution graphics.

Icon Design

Launch Screen

Spendometer Screen

Reports Screen

Report Screen

Settings Screen

Set Budgets Screen

Some reading material before we start…

It is advisable to know a little about designing for the iPhone before we move along with this tutorial. Ideally, you should read the iPhone Human Interface Guidelines from Apple’s official developer site.

The Tutorial

As with all major designs, the first thing you should do is get a rough idea of what you want your design to look like. The best way to do this of course is by sketching. For big applications, many UI designers will draw pages and pages worth of ideas, annotations and brainstorms – as we already have a structure for the application we’re redesigning, we can move along with it pretty quickly.

Below are a few sketches I put together – these are very rough, and just general wireframe ideas I have in my head of what I want the design to resemble. Colors and styles can wait until we get to that stage later on!

(editor：admin)