<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>All Forces&#187; iphone development</title>
	<atom:link href="http://allforces.com/tag/iphone-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://allforces.com</link>
	<description>Design, Music &#038; Mac Geekery</description>
	<lastBuildDate>Mon, 17 May 2010 12:20:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>The Design of Nota</title>
		<link>http://allforces.com/2009/10/19/the-design-of-nota/</link>
		<comments>http://allforces.com/2009/10/19/the-design-of-nota/#comments</comments>
		<pubDate>Mon, 19 Oct 2009 20:29:27 +0000</pubDate>
		<dc:creator>Melvin Rivera</dc:creator>
				<category><![CDATA[iPhone-iPad]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[iphone development]]></category>
		<category><![CDATA[nota]]></category>

		<guid isPermaLink="false">http://allforces.com/?p=1081</guid>
		<description><![CDATA[Every final product has a design journey. Here is the design journey of Nota my first iPhone app. A visual guide from concept to finish product.]]></description>
			<content:encoded><![CDATA[<p>Every final product has a design journey. Here is the design journey of <a href="http://notaapp.com">Nota</a>.</p>
<p><strong>Why Nota?</strong><br />
The idea for making Nota, my first app, came from the fact that I have two kids(7 and 10) who are both taking piano lessons. We had these music flash cards to help them in the learn to read music process but of course we somehow lost them. When the kids inherited our old iPhones(deactivated) after we upgraded to 3GS I figured a music flash cards app for them would be perfect! I looked into it and realized the choices at the time were not that great. I could design a better one I thought. I knew this was a niche market app and would not be my Tweetie but, it was a simple idea, perfect for a side project getting done at nights and weekends. Little did I know it would evolve from flash cards to include a piano and a reference library and that I would find myself unemployed and dedicated to this new iPhone development venture more seriously. The design process took only two rounds and one final revision was made during development.</p>
<p><strong>Initial Design Concepts: </strong><br />
In the initial round of concepts, I explored the design treatments shown bellow but I settled on using the bamboo and dark glass as the official look and feel for the app. This design had the best positive feedback from the people I showed it to. In this early prototype, the Learn section was utilizing the iPhone&#8217;s scrolling interface to navigate the selections. This was later changed to a multi level table view which allows for better navigation when dealing with large amounts of content.</p>
<p><a rel="attachment wp-att-1089" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-learn/"><img class="size-thumbnail" title="Nota Blue Stripes Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-learn-200x300.jpg" alt="Nota Blue Stripes Concept" width="200" height="300" /></a><a rel="attachment wp-att-1105" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-parchment/"><img class="size-thumbnail" style="border: 0px initial initial;" title="Nota Parchment Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-parchment-200x300.jpg" alt="Nota Parchment Concept" width="200" height="300" /></a><a rel="attachment wp-att-1103" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-eve/"><img class="size-thumbnail" title="Nota Eve Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-eve-200x300.jpg" alt="Nota Eve Concept" width="200" height="300" /></a><a rel="attachment wp-att-1115" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-gray/"><img class="alignnone size-thumbnail wp-image-1115" title="Nota Gray Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-gray-200x300.jpg" alt="Nota Gray Concept" width="200" height="300" /></a><img class="size-thumbnail" title="Nota Bamboo Staff Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-staff-200x300.jpg" alt="Nota Bamboo Staff Concept" width="200" height="300" /><a rel="attachment wp-att-1091" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-piano/"><img class="size-thumbnail" title="Nota Bamboo Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-piano-200x300.jpg" alt="Nota Bamboo Concept" width="200" height="300" /></a></p>
<p><strong>Revised Concepts:</strong><br />
Once I settled on the bamboo concept, the next step was to apply that look and feel to all the sections of the app. Bellow are the designs for the Splash page, the Quiz page, the Staff page which never made it to the final app, the Piano page, the Learn page and a second level page for it. I also refined some of the elements in the interface like the arrows in the Piano section.</p>
<p><a rel="attachment wp-att-1122" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-2-splash/"><img class="alignnone size-thumbnail wp-image-1122" title="Nota Round 2 Splash Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-2-splash-200x300.jpg" alt="Nota Round 2 Splash Concept" width="200" height="300" /></a><a rel="attachment wp-att-1121" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-2-quiz/"><img class="alignnone size-thumbnail wp-image-1121" title="Nota Round 2 Quiz Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-2-quiz-200x300.jpg" alt="Nota Round 2 Quiz Concept" width="200" height="300" /></a><a rel="attachment wp-att-1123" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-2-staff/"><img class="alignnone size-thumbnail wp-image-1123" title="Nota Round 2 Staff Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-2-staff-200x300.jpg" alt="Nota Round 2 Staff Concept" width="200" height="300" /></a></p>
<p><a rel="attachment wp-att-1120" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-2-piano/"><img class="alignnone size-thumbnail wp-image-1120" title="Nota Round 2 Piano Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-2-piano-200x300.jpg" alt="Nota Round 2 Piano Concept" width="200" height="300" /></a><a rel="attachment wp-att-1119" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-2-learn/"><img class="alignnone size-thumbnail wp-image-1119" title="Nota Round 2 Reference Table Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-2-learn-200x300.jpg" alt="Nota Round 2 Reference Table Concept" width="200" height="300" /></a><a rel="attachment wp-att-1118" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-2-learn-detail/"><img class="alignnone size-thumbnail wp-image-1118" title="Nota Round 2 Reference Detail Concept" src="http://allforces.com/wp-content/uploads/2009/10/nota-2-learn-detail-200x300.jpg" alt="Nota Round 2 Reference Detail Concept" width="200" height="300" /></a></p>
<p><strong>Final Design:</strong><br />
As development progressed, the design was tweaked and refined even more. The Quiz gained some playing feedback like number of correct or wrong answers, a start screen, a pause button, a high score etc. Looking back, I should have designed this before starting development to avoid pausing, rethinking and redesigning during development stage. The Learn section was renamed Reference and brightened up a bit since in the previous version it looked too dark and did not seem to belong with the other screens. Also, the icon for this section was changed to a book with a music symbol on the cover to make it look more like a library resource and less like music playing in iTunes.</p>
<p><a rel="attachment wp-att-1140" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-final-quiz-start/"><img class="alignnone size-thumbnail wp-image-1140" title="Nota Final Design: Quiz Start" src="http://allforces.com/wp-content/uploads/2009/10/nota-final-quiz-start-200x300.jpg" alt="Nota Final Design: Quiz Start" width="200" height="300" /></a><a rel="attachment wp-att-1137" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-final-quiz/"><img class="alignnone size-thumbnail wp-image-1137" title="Nota Final Design: Quiz" src="http://allforces.com/wp-content/uploads/2009/10/nota-final-quiz-200x300.jpg" alt="Nota Final Design: Quiz" width="200" height="300" /></a><a rel="attachment wp-att-1141" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-final-quiz-highlight/"><img class="alignnone size-thumbnail wp-image-1141" title="Nota Final Design: Quiz Highlight" src="http://allforces.com/wp-content/uploads/2009/10/nota-final-quiz-highlight-200x300.jpg" alt="Nota Final Design: Quiz Highlight" width="200" height="300" /></a><img class="alignnone size-thumbnail wp-image-1135" title="Nota Final Design: Piano" src="http://allforces.com/wp-content/uploads/2009/10/nota-final-piano-200x300.jpg" alt="Nota Final Design: Piano" width="200" height="300" /><a rel="attachment wp-att-1139" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-final-reference/"><img class="alignnone size-thumbnail wp-image-1139" title="Nota Final Design: Reference" src="http://allforces.com/wp-content/uploads/2009/10/nota-final-reference-200x300.jpg" alt="Nota Final Design: Reference" width="200" height="300" /></a><a rel="attachment wp-att-1138" href="http://allforces.com/2009/10/19/the-design-of-nota/nota-final-reference-detail/"><img class="alignnone size-thumbnail wp-image-1138" title="Nota Final Design: Reference Detail" src="http://allforces.com/wp-content/uploads/2009/10/nota-final-reference-detail-200x300.jpg" alt="Nota Final Design: Reference Detail" width="200" height="300" /></a></p>
<p><strong>Logo:</strong><br />
For the logo, I wanted to include the bamboo as well as a reference to music, weather that was piano keys or a musical symbol. I started with the piano but realized there were tons of icons like this already in the App Store. I then added the note above the but this made the design too complex so I removed the piano completely  leaving just the symbol with a bamboo border. I was really happy with the end result.</p>
<p><a rel="attachment wp-att-1127" href="http://allforces.com/2009/10/19/the-design-of-nota/logo-1/"><img class="alignnone size-thumbnail wp-image-1127" title="Nota Logo Concept 1" src="http://allforces.com/wp-content/uploads/2009/10/logo-1-200x200.png" alt="Nota Logo Concept 1" width="200" height="200" /></a><a rel="attachment wp-att-1128" href="http://allforces.com/2009/10/19/the-design-of-nota/logo-2/"><img class="alignnone size-thumbnail wp-image-1128" title="Nota Logo Concept 2" src="http://allforces.com/wp-content/uploads/2009/10/logo-2-200x200.png" alt="Nota Logo Concept 2" width="200" height="200" /></a><a rel="attachment wp-att-1129" href="http://allforces.com/2009/10/19/the-design-of-nota/logo-3/"><img class="alignnone size-thumbnail wp-image-1129" title="Nota Final Logo" src="http://allforces.com/wp-content/uploads/2009/10/logo-3-200x200.png" alt="Nota Final Logo" width="200" height="200" /></a></p>
<p>Find out more about Nota at <a href="http://notaapp.com">notaapp.com</a></p>
<img src="http://allforces.com/?ak_action=api_record_view&id=1081&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://allforces.com/2009/10/19/the-design-of-nota/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Learning iPhone App Development</title>
		<link>http://allforces.com/2009/03/02/learning-iphone-app-dev/</link>
		<comments>http://allforces.com/2009/03/02/learning-iphone-app-dev/#comments</comments>
		<pubDate>Mon, 02 Mar 2009 15:07:25 +0000</pubDate>
		<dc:creator>Melvin Rivera</dc:creator>
				<category><![CDATA[iPhone-iPad]]></category>
		<category><![CDATA[cocoa]]></category>
		<category><![CDATA[iphone development]]></category>
		<category><![CDATA[obective-c]]></category>

		<guid isPermaLink="false">http://allforces.com/?p=619</guid>
		<description><![CDATA[I&#8217;m entering a learning season by diving into iPhone application development. I first got the iPhone book which recommended the Objective-C book which recommended the C book. It will be interesting going from programming scripting languages like PHP and Actionscript to Objective-C but I am looking forward to the challenge.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.amazon.com/exec/obidos/ASIN/1430216263/allforces-20" title="buy from amazon"><img class="alignnone size-full wp-image-620" title="Beginning iPhone Development" src="http://allforces.com/wp-content/uploads/2009/03/beginning-iphone-development.jpeg" alt="Beginning iPhone Development" width="84" height="110" /></a> <a href="http://www.amazon.com/exec/obidos/ASIN/1430218150/allforces-20" title="buy from amazon"><img class="alignnone size-full wp-image-622" title="Learn Obective-C  on the Mac" src="http://allforces.com/wp-content/uploads/2009/03/learn-obective-c.jpeg" alt="Learn Obective-C" width="84" height="110" /></a> <a href="http://www.amazon.com/exec/obidos/ASIN/1430218096/allforces-20" title="buy from amazon"><img class="alignnone size-full wp-image-621" title="Learn C on the Mac" src="http://allforces.com/wp-content/uploads/2009/03/learn-c.jpeg" alt="Learn C on the Mac" width="84" height="110" /></a></p>
<p>I&#8217;m entering a learning season by diving into iPhone application development. I first got the iPhone book which recommended the Objective-C book which recommended the C book. It will be interesting going from programming scripting languages like PHP and Actionscript to Objective-C but I am looking forward to the challenge. </p>
<img src="http://allforces.com/?ak_action=api_record_view&id=619&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://allforces.com/2009/03/02/learning-iphone-app-dev/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>
