08 - Prototyping II
Draft 0.3 - UI Design
08 - Prototyping II ↑This week I continued to improve on my draft versions of Performa, and for version 3.0 I wanted to take a different approach. Last week I had looked at Things Blog, which had some photos of their design process behind the making of the UI of the Things iPhone Application. I decided to take a similar approach and took a spin into the city centre and after spending over £25, I came back with an A2 pad, pen, pencil, colouring pencils, rubber, sharpener, ruler and plastic stencil sheet.
I really enjoyed this approach as got me thinking how my application would work from as soon as the application has been accessed. So far I have made some quick sketches for versions 1.0 and 2.0, and I hadn’t thought the whole approach out in my head yet. With version 3.0, by taking a new approach I was able to draw out the step by step, and what features are available to the user. As I was designing the process, I had to think of the user, as I want to provide the best user experience as possible. At the moment I would be confident enough to say that this draft would be very nearly the final draft, as I can only forsee some minor changes that I think will happen during the final prototyping process.
Here are some photos:
Site Template
08 - Prototyping II ↑
This weeks lecture Chris and Nick put across a very interesting point in creating a site template to help speed up the progress of turning out projects. Another useful point I took on board was to include some code in some of the files such as conditional comments in the index.php, or have your favourite JavaScript library saved inside your ‘js’ folder.
PHP Includes
08 - Prototyping II ↑
On Thursday's lecture Chris asked for the class to raise their hands if they are using PHP Includes for developing their websites, and as I looked around the class I could only see a handful of hands raised. My hand was raised as I have used PHP includes during my placement and found to be very time consuming, and easy to maintain, especially useful for large sites. Chris urged the class to adopt this approach, and I was curious if the IMDSERVER would support PHP includes, so I tried and it worked!!!. So a few hours at the weekend converting my Design Blog into PHP includes.
With my blog now all in php, this allowed me to benefit from the capabilites of the programming lanaguage, by using a simple variable to store the title of the week, and re-use it into the link to take the user back to the top page.
Here is a sample of the code I used:
$title = "08 - Week's Title ↑"
echo($title)
Project Management & Invoicing
08 - Prototyping II ↑
When Chris and Nick used Thursday's lecture to show us some Project Management and Invoicing applications, as I have done some freelance jobs already as a web designer these tools would have been a great help especially when to come to tracking my time, and following up invoices. These tools give a freelance designer/developer a sense of professionalism that will rub off on the customer. I was very interested to hear what we as designers and developers should be charging our clients, and the a base markup of 25% was a good starting point. There were a lot of factors that I would never have considered to bill clients for until Chris explain the whole invoicing process. In particular one application that Chris showed us was Billings, which I have now got a copy of on my mac and all my invoicing and time tracking of my projects will be used through this application.
Another application that Chris and Nick mentioned in his lecture was Harvest. This a similar application to Billings, however, Harvest is a hosted service with an integrated iPhone App that would be very handy for the iPhone users out there. Two other hosted applications that Chris and Nick recommended were Basecamp and Highrise both applications built by 37 Signals, but their integration of the two apps looks very impressive and I may consider using them in the future.
Subversion
Another important area that Thursday's lecture covered was Subversion. Subversion is something that I have heard of when I was on my placement but I never had the opportunity to use it, so it was good to get it covered in one of our lectures. One of the main things that would have put me off subversion was the design, but when Chris showed us Versions, firstly I love the design of the site, and I have downloaded the trial version of the application and hope to get using it as it could be a great tool when creating my major project as a respository of different versions would be helpful as I can go back to a earlier version if something goes wrong. To describe what is Subversion? I found this:
Subversion is a free/open-source version control system. That is, Subversion manages files and directories, and the changes made to them, over time. This allows you to recover older versions of your data, or examine the history of how your data changed. In this regard, many people think of a version control system as a sort of “time machine”.
Source - http://svnbook.red-bean.com
Coda 1.6
08 - Prototyping II ↑
I have seen a lot of posts lately about this one window web development application from Panic. I am a Dreamweaver user, so thought I would give Coda a try, and with the latest release 1.6 and after a few days of using Coda, I knew that I wasn't going back to Dreamweaver. I love its integration with Transmit (ftp program), and how you can use clips to organise pieces of code and re-use it easily. There are lot of other great benefits with this program that I have yet to try such as its integration with subversion, but I am expecting to be continually impressed.
Dreamhost - Registration
08 - Prototyping II ↑
I have already setup a Dreamhost account last year, and I was able to setup a personal portfolio site, www.dannyturley.com. Now I wanted to set up my major project url, and I originally thought that I would use www.performa.com, however this url was unavailable so I tried the following url's:
- www.performa.com/.net/.info (all url's were unavailable)
- www.performa-lite.com
- www.performalite.com
- www.performasports.com
- www.performanceanalysis.com
- www.sportsanalysed.com
In the end I decided to go with www.performasports.com, as I felt was the most relevant name for my application as the url includes the name of the application and the industry that my application is targeted at - sports.
HTML 5 offline storage
08 - Prototyping II ↑
As I was watching through the rest of the videos that I downloaded from the iPhone DevCenter, the video showed that there was support on the mobile safari 2.0 for HTML 5 for client-side storage. This idea is very similar to Google Gears, which I have used before and love the idea of using the application offline. This would mean that my application would not have to rely on the internet connection to use Performa, and as a lot the users of Performa will be out and on the move, this would be a key factor in providing a better user experience for the user. Surfin' Safari shows an example of this working (only works in Safari), and I am hoping to investigate this area more so as I still at the moment don't understand the coding behind it. Although I am aware that if the user has bookmarked my application onto their home screen that these offline capabilities will work.
3D Typography - Vectortuts
08 - Prototyping II ↑
An area this year that I originally thought I would be using this semester to practice and develop my Illustrator skills, although I have used Illustrator quite a lot over my placement but when I came across the tutorial on Vectortuts on 3D typography I really wanted to use this opportunity to create my first 3D text effect as this 3D style is a very effective and attractive style and their are some great examples of 3D effects out there that I found on www.noupe.com.
You can click on the image above to see my example of using 3D text effect using Illustrator CS3, and I found some useful new tricks in this tutorial especially using the magic wand tool and changing the tolerance value to get different selections, quite impressive.
FOWA is coming to Dublin
08 - Prototyping II ↑
Future of Web Apps (FOWA) hosted by Carsonified is coming to Dublin on the 6th March 2009. I am proud to say that I have booked my ticket and I'll be there in Dublin. However, I did not get the student price as they were sold out but I was able to get the discounted price at around £97. Although this is a lot of money for a student but I feel that the FOWA is very appropriate for me this year as this is part of the web I am really interested in. With only a trip to Dublin only around a hour and half drive for me, this was too good of an opportunity to pass up. On a design note, I think the design of FOWA for Dublin website is class.
Plans for Next Week
- Next week I start looking at more iPhone Frameworks such as Big Five WebApp and WebTouch.
- I want to create my first "Hello World" iPhone App on my own iPhone.