Creating Design Documents for an iPhone App

5 Mar 2010 - 2:24pm
11 weeks ago
25 replies
10214 reads
tdellaringa
2006

Another iPhone app question for you folks. Interally we got the go ahead to run with our app. To get this far I had used vector and photoshop assets found on the web to create concept screens, which worked quite well. Basically I made comps in Illustrator and imported them into InDesign with very little annotation at this point (again just concepts.)

At this point though, we need a design document, especially since this app may be outsourced. I'm busy scouring the iPhone Dev Center right now, but I wondered if anyone has experience creating docs for an app and might want to share what they did and what they used.

One thing I'd like to know is what visual assets are actually available as "stock" to developers vs. what we'd have to produce. There seem to be some toolkits out there already.

Comments

5 Mar 2010 - 2:45pm
John Popadiuk
2010

Hi Tom

More than happy to send what you need. All the app work I do for (Zidware) and (Nanoschool) start as a written design specification document. This needs to be fluent and detailed, as errors or emissions in programming always come back to this document.

Then we will do concept boards and a navigation / tech framework to show interactivity, input, ux tied to any backend technology. The programmers will usually use both documents. Best to start with placeholder graphics then move in the real art once all is working. If you a registered developer read the HIG document from Apple. 

We design (or art direct) and produce everything for the app + iPad work that is developed. Then the coders weave their magic. Certainly a team project, especially once testing and usability has to be factored in.

John Popadiuk - Chicago

6 Mar 2010 - 2:28am
Dimiter Simov
2006

John, I am interested in the topic too. Could you share with the list or privately at jimmy at netagesolutions com?

6 Mar 2010 - 7:45am
ivette Litt
2009

Hi John:

Do you mind sharing these documents with me as well?

I work for  ITD  Virginia Department of Transportation. an we are very interested in the design/development  process 

not only for Iphones but for Blackberry as well. Any advice you could share with me  will be highly appreciate

Thank you so much

Ivette Litt

7 Mar 2010 - 9:04pm
yg15
2008

Hi John,  If you are okay with it, I too would love to see your process. I'm transitioning into the UI field and would be so appreciative if you are okay with sharing what you've done.

Thank you!

rowsky9 at gmail dot com

26 Mar 2010 - 3:41pm
dotdesign
2009

Link is broken :(  - Discussion Guidelines .......... http://www.ixda.org/guidelines

On Mon, Mar 8, 2010 at 7:49 AM, yvonne <contact@ixda.org> wrote:

Hi John,  If you are okay with it, I too would love to see your process. I'm transitioning into the UI field and would be so appreciative if you are okay with sharing what you've done.

Thank you!

rowsky9 at gmail dot com

(((
26 Mar 2010 - 3:40pm
tdellaringa
2006

That would be awesome John, really appreciate it. You can contact me direct at pixelmech@gmail.com and either email them over or let me know how to get them. Thank you so much!

On Fri, Mar 5, 2010 at 1:50 PM, John Popadiuk <contact@ixda.org> wrote:

Hi Tom

More than happy to send what you need. All the app work I do for (Zidware) and (Nanoschool) start as a written design specification document. This needs to be fluent and detailed, as errors or emissions in programming always come back to this document.

Then we will do concept boards and a navigation / tech framework to show interactivity, input, ux tied to any backend technology. The programmers will usually use both documents. Best to start with placeholder graphics then move in the real art once all is working. If you a registered developer read the HIG document from Apple. 

We design (or art direct) and produce everything for the app + iPad work that is developed. Then the coders weave their magic. Certainly a team project, especially once testing and usability has to be factored in.

John Popadiuk - Chicago

(
1 Apr 2010 - 12:12pm
stevejtansley
2010

John, your feedback seems to be very popular.  I'd like to understand more as well.  I have 2 developers and another designer where I work.  Together we want to flesh out an iPhone app but avoid all the pitfalls that may come from lack of planning.  The concept boards/ tech framework to show interactivity, input and ux tied to any backend technology, is that done by hand or do you recommend using vizio or omni graffle to begin the planview?  I really like what you said about using mock art as a placeholder until the app is working.  My personal email is steve@bulbstorm.com.  If you have time I'd love your input.  Thanks, Steve

2 Jun 2011 - 8:11am
ogoode
2011

Hello John, would you mind sharing your documents with me as well.  I have been tasked with developing a mobile concierge and mobile agenda app for iOS.  Any help you can provide is appreciated.  My organization is relatively new to mobile application development.

1 Oct 2013 - 11:04pm
Hans
2013

Hi Jon.

Would you mind sharing these documentations with me as well.

My email is:  halanis at me dot com

Thank you in advance

5 Mar 2010 - 2:57pm
tdellaringa
2006

Ugh I'm not sure where to reply so I'll mimic it here - you can shoot me it via email if you like or just let me know where to go. I can be reached at pixelmech at gee mail dot com.

Much appreciated John - thank you!

5 Mar 2010 - 3:33pm
Suzanne Ginsburg
2009

Tom, you should review Apple's Human Interface Guidelines to see what icons are built-into the iPhone OS. 

http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/SystemProvided/SystemProvided.html#//apple_ref/doc/uid/TP40006556-CH15-SW2

And here's a site with custom icons designed for the iPhone:

http://glyphish.com/

Suzanne

blog: http://www.iphoneuxreviews.com/


5 Mar 2010 - 3:42pm
tdellaringa
2006

Oh thanks Suzanne, I totally forgot about that page. And thanks for the icon link, those are great!

 

Tom

7 Mar 2010 - 4:10am
Gilbert Corrales
2008

Hi John, please do share those with me as well, I am researcher student at KIST and I'm facing documentation stage right now as well and inspiration will come handy.

cheers.

G.

7 Mar 2010 - 7:33am
Pietro Desiato
2008

Hi Tom,
I don't know if this is what you're looking for but I've found it useful:
http://konigi.com/tools/omnigraffle-ux-template

It's an Omnigraffle template for personas and iPhone UI Sketches. 

hope it helps. btw great topic!

7 Mar 2010 - 10:13pm
Eric D.
2009

John - I'd like to join the long list that would be extremely interested to see your approach to design documentations / specs for developing apps. I'm just getting into this as well and, if you're willing to share, would love to see an effective way to communicate the process between teams.

Please email me: ericprout (at) gmail dot com . Thanks!

Suzanne - Thanks for the great links! Love the icon resource.

12 Mar 2010 - 9:49am
Eric D.
2009

Just curious... has anyone heard from John since the offer to share documents?

12 Mar 2010 - 10:23am
tdellaringa
2006

No, I haven't heard a thing. Not sure if he's just busy or having trouble with the site.

13 Mar 2010 - 11:42am
LisaRenery
2009

(OK, a little confused why all that I typed disappeared why I hit save, apologies... hoping my whole post will make it this time!)

This conversation about iPhone design/documentation/prototyping is so timely! I have been scouring the fairly limited field of prototyping applications for conducting user testing on the iPhone (and blackberry) - actually on the devices themselves (as opposed to web-based simlatioms. since the handheld/tapping experience is inextricable from the overall use of both platforms, we are really hoping to test "natively" but without having to build a fully functioning prototype for testing. Here's some of what I uncovered. I have found a lot of this info through google searches ("iphone simulator", "iphone prototyping", "iphone wireframes" and by crowdsourcing twitter feeds using #iPhone. UTube has been a good source of product demos too. Good Luck :-)

Screencasting: Liveview (http://www.zambetti.com/projects/liveview/) is a free iphone app (from the app store) that you also need to load onto your Mac, along with an html version of your prototype. While it doesn't have its own prototyping tools,  it is useful because it simulates (emulates?) what's on the Mac screen onto the iPhone itself by "tethering" the Mac and the iPhone together over wi-fi. Taps on the iphone screen register as clicks on the Mac, and it's a way to test out a design on the device itself, without having to develop it in Cocoa or whatever the real language is. Pros: you can get a better sense of  the actual visibility and tactile experience for the user. Cons: only works on Mac  - which is bad for us, because we record test sessions using Morae, which only runs on the PC. Oh, and your prototype can't use Flash of course, bec your iPhone and Mac don't run it!

Designing/Prototyping/Screencasting: Another app I've experimented with is Protoshare (www.protoshare.com) which is beta testing a pretty neat iPhone (and i think another handheld platform) wireframing format. It has lots of widgets for iPhone wireframe building - you just drag and drop, and then apply behaviors to make it appear functional. Definitely watch the demo. I believe the widgets and functions are documented as you go, which is a real plus! You then save your "design" onto the protoshare server - which gives you a URL that you can click through on the handheld device itself. You can also point over to a url where your prototype might already live, and screencast that way. Pros: Documentation, ready-made widgets, works on the PC (only) so you could test and record using a tool like Morae. As its name reveals, Lastly, protoshare is for sharing prototypes *securely* with outside and internal audiences.  That can be a really difficult thing sometimes, and I'll report back if it does the trick. Cons: My prototype is already built out very richly and uses Flash, which I can't see on the iPhone, as I said before. Also cost -- Protoshare costs $29 a month - you get the first month for free - but you can "cancel at any time" (famous last words?). It really seems worth it if you are starting from the ground up.

Documentation/Wireframing: MobiOne by Genuitech (www.genuitech.com/mobile) is a "free" app (as long as you plug it in a couple of tweets here and there), and calls itself an "emulator for the iPhone and Palm Pre" (of all things!). I haven't quite figured this one out, but it also seems to require a download (PC only) and has extensive libraries of widgets and such that you can play with in a similar way to Prototshare. I believe that documentation is created while you prototype, like the previous tool. I really haven't played with it enough to delineate pro's and con's, but will post when I do!

Other random tools: http://www.mobigeni.com/2010/02/10/iphone-mockup-wireframe-and-prototyping-tools-for-iphone-developers/  wtih an "iPhone UI Stencil Kit".  I also recently found this neat resource: Gesturecons http://gesturecons.com/ 52 High resolution vector icons to aid in the design of multi-touch interfaces.

-- hope this didn't stray too far off topic. Love the group and list -- and bravo for the new enhancements!

lisa renery handalian, @lisahand (on twitter) or lrenery@gmail.com

17 Mar 2010 - 1:33pm
John Popadiuk
2010

Hi.

Will do on the development task list and design docs. Is there a place to share on IXDA.....or is attaching the best for all. A bit of work has been featured on Coroflot, to get an idea...and some iPad stuff.

http://www.coroflot.com/johnpopadiuk

John Popadiuk

(224) 532-0639

26 Mar 2010 - 5:40pm
tdellaringa
2006

That stuff looks beautiful John. I don't know where you can upload stuff on the site (and I've been having a problem with the site, it resets my password every time I try and sign in). Maybe you could put it in something like dropbox.com (free)

Tom

On Wed, Mar 17, 2010 at 2:30 PM, John Popadiuk <contact@ixda.org> wrote:

Hi.

Will do on the development task list and design docs. Is there a place to share on IXDA.....or is attaching the best for all. A bit of work has been featured on Coroflot, to get an idea...and some iPad stuff.

http://www.coroflot.com/johnpopadiuk

John Popadiuk

(224) 532-0639

24 Mar 2010 - 4:20am
EzehM
2010

Hi John:

Do you mind sharing these documents with me as well?

Thanks

chikere at gmail dot com

26 Mar 2010 - 5:50pm
Kelly Bell
2008

Me too, please? Thank you!!!

Kelly Bell 917.446.1555

On Mar 24, 2010, at 6:01, EzehM wrote:

> Hi John: > > Do you mind sharing these documents with me as well? > > Thanks > > chikere at gmail dot com > >

24 Mar 2010 - 7:54am
Maurice
2009

My 2 cents:
iPhone GUI - PSD Design Template. About 9MB:
http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

I too would like to see the document as well...

Thanks

26 Mar 2010 - 5:50pm
Barbara Ballard
2005

The Design For Mobile wiki contains a growing list of mobile UI templates, stencils, and so forth. Ours, also linked here, has some documentation elements for gestures.

http://patterns.littlespringsdesign.com/index.php/Drawing_Tools_%26_Templates


And if you ask me one-on-one, I am allowed to give you (mobile web) deliverables for The Weather Channel's latest mobile site.

~~~~~
Barbara Ballard
Skype: barbara_ballard
Twitter, Delicious: barbaraballard

email: barbara@littlespringsdesign.com
1.785.838.3003



1 Apr 2010 - 1:56pm
Maurice
2009

Here are some Design Stencils to throw into the mix, or for your toolbox:
http://zakiwarfel.com/archives/iphone-stencils/

 

Syndicate content Get the feed