Mocking up applications for the iPhone

10 Jul 2010 - 3:35am
3 years ago
12 replies
1368 reads
rachel.i.simpson
2010

Hi everyone,

I'm a student currently learning about Interaction Design, on Exchange from Canada in Germany. A group that I am working with is developing an iPhone application aimed at helping cancer patients organize a wide variety of tasks and self-care needs that come with the disease. I have worked on projects with the iPhone before, as an intern and developer. I don't have any experience though mocking up the application on the iPhone, without going through the process of actually building it.

Ideally, we would love to have an interactive mock-up of the application on the iPhone for our final presentation. We're fairly sure that this is infeasible though, as we don't think that actually building it would be the best use of our time. Flash doesn't seem like an option, unless perhaps we create a video using flash, and then have an actor "interact" with the application?

I have been reading this list for a while, and it seems like there are a lot of incredible people connected to it, with amazing experiences to share. Any suggestions that you may have to offer would be greatly appreciated.

Thanks and cheers!
Rachel

Comments

10 Jul 2010 - 7:19am
DaveBreeze
2010

Something I do that works really well is take the series of PSDs or Sketches that were created to illustrate the concept flow and convert them into JPGs (sized appropriately for the iPod - or device we'll be developing for). Then pull them into simple HTML pages with image maps buttons and view/click through them within a fake frame or on the actual device.

In a similar fashion to this http://www.testiphone.com/  (but pulling up your series of HTML pages/images)

Once you pull them up you can click around within your image maps buttons to advance through the sequence of your static slides to display the concept flow.

Hope that helps!

Dave

10 Jul 2010 - 5:05pm
mshulbert
2010

Ideo built a program for showing content on your computer directly on an iPhone (it looks like they added iPad, too).

It's called Liveview.

Find it here: http://labs.ideo.com/2010/05/10/liveview-an-iphone-app-for-on-screen-prototyping/

I haven't used it but it looks pretty neat for prototyping.

On Jul 10, 2010, at 2:09 PM, DaveBreeze wrote:

> Something I do that works really well is take the series of PSDs or > Sketches that were created to illustrate the concept flow and convert > them into JPGs (sized appropriately for the iPod - or device we'll > be developing for). Then pull them into simple HTML pages with image > maps buttons and view/click through them within a fake frame or on the > actual device. > > In a similar fashion to this http://www.testiphone.com/ [1] (but pulling up your series of HTML pages/images) > > Once you pull them up you can click around within your image > maps buttons to advance through the sequence of your static slides to > display the concept flow. > > Hope that helps! > > Dave > >

10 Jul 2010 - 10:05am
jacque_ernst
2010

Hi Rachel
I´m graduating in Design and I am also developing a project for an app IPAD. My app will be for people who make long trips and use IPAD to watch videos. Here in Brazil we have many traffic jams on freeways. The gadgets will be an alternative to occupy this idle time. Accepted reviews!
I will do my mock-up in Flash, but if anyone has another suggestion, I also enjoy.   Thanks   Jacqueline Ernst
__________________________
designsignificante.blogspot.com
twitter.com/jake_ernst
2010/7/10 rachel.i.simpson <rachel.i.simpson@gmail.com>

Hi everyone,

I'm a student currently learning about Interaction Design, on Exchange from Canada in Germany. A group that I am working with is developing an iPhone application aimed at helping cancer patients organize a wide variety of tasks and self-care needs that come with the disease. I have worked on projects with the iPhone before, as an intern and developer. I don't have any experience though mocking up the application on the iPhone, without going through the process of actually building it.

Ideally, we would love to have an interactive mock-up of the application on the iPhone for our final presentation. We're fairly sure that this is infeasible though, as we don't think that actually building it would be the best use of our time. Flash doesn't seem like an option, unless perhaps we create a video using flash, and then have an actor "interact" with the application?

I have been reading this list for a while, and it seems like there are a lot of incredible people connected to it, with amazing experiences to share. Any suggestions that you may have to offer would be greatly appreciated.

Thanks and cheers!
Rachel

(((
10 Jul 2010 - 11:41am
ranimanoharan
2010

I'm currently working on an iPhone app too. I mock up the screens in OmniGraffle (there are some nice stencils for the common controls, and it's fairly easy to draw custom ones), and then port the images into Axure to mockup the interactions. It's a little tedious, but probably faster than using Flash.

11 Jul 2010 - 3:05am
rachel.i.simpson
2010

Hi everyone,

I'll have a look at OmniGiraffe- I've seen it mentioned a few times in other dicussions:) Thomas- I'm reading over that tutorial you sent at the moment. This one looks especially feasible for our group given our areas of expertise. Brian- your idea could also work, very cool. And Dave, that's a great suggestion! I'm checking out the TestiPhone- which I think will be perfect for demo-ing the app when we're not in the room.

Thanks to everyone for all of the help! I'm really happy to be connected to such an amazing group of people through this list!
Cheers,
Rachel

On Sat, Jul 10, 2010 at 6:51 PM, ranimanoharan <ranimanoharan@gmail.com> wrote:

I'm currently working on an iPhone app too. I mock up the screens in OmniGraffle (there are some nice stencils for the common controls, and it's fairly easy to draw custom ones), and then port the images into Axure to mockup the interactions. It's a little tedious, but probably faster than using Flash.

11 Jul 2010 - 12:05pm
GIO MONTOYA
2006

Good afternoon.
I would like to be involved more in the iPHONE  apps. So if you have a website for tutorials, documentation and develop I would be so thankful. I am interactive, graphic and industrial designer.
Thanks in advance

Gio Montoya

Please consider the environment before printing this e-mail.
Let's protect our mother-earth is dying and we are the only
one who can do something. Protect its flora and fauna"




--- On Sun, 7/11/10, rachel.i.simpson <rachel.i.simpson@gmail.com> wrote:


From: rachel.i.simpson <rachel.i.simpson@gmail.com>
Subject: Re: [IxDA] Mocking up applications for the iPhone
To: giomontoya@yahoo.com
Date: Sunday, July 11, 2010, 4:11 AM

Hi everyone,

I'll have a look at OmniGiraffe- I've seen it mentioned a few times in other dicussions:) Thomas- I'm reading over that tutorial you sent at the moment. This one looks especially feasible for our group given our areas of expertise. Brian- your idea could also work, very cool. And Dave, that's a great suggestion! I'm checking out the TestiPhone- which I think will be perfect for demo-ing the app when we're not in the room.

Thanks to everyone for all of the help! I'm really happy to be connected to such an amazing group of people through this list!
Cheers,
Rachel

On Sat, Jul 10, 2010 at 6:51 PM, ranimanoharan <ranimanoharan@gmail.com [1]> wrote:

> I'm currently working on an iPhone app too. I mock up the screens in OmniGraffle (there are some nice stencils for the common controls, and it's fairly easy to draw custom ones), and then port the images into Axure to mockup the interactions. It's a little tedious, but probably faster than using Flash.
>
11 Jul 2010 - 2:05pm
George Abraham
2007

On 7/11/10 4:19 AM, rachel.i.simpson wrote: > Hi everyone, > > I'll have a look at OmniGiraffe- I've seen it mentioned a few times in > other dicussions:) Thomas- I'm reading over that tutorial you sent at > the moment. This one looks especially feasible for our group given our > areas of expertise. Brian- your idea could also work, very cool. And > Dave, that's a great suggestion! I'm checking out the TestiPhone- > which I think will be perfect for demo-ing the app when we're not in > the room. > > Thanks to everyone for all of the help! I'm really happy to be > connected to such an amazing group of people through this list! > Cheers, > Rachel > > On Sat, Jul 10, 2010 at 6:51 PM, ranimanoharan > wrote: > >> I'm currently working on an iPhone app too. I mock up the screens in >> OmniGraffle (there are some nice stencils for the common controls, >> and it's fairly easy to draw custom ones), and then port the images >> into Axure to mockup the interactions. It's a little tedious, but >> probably faster than using Flash. >> >

10 Jul 2010 - 1:46pm
Brian Mclaughlin
2008

This may not work for you, and it can be time consuming, but we make HTML - interactive - iphone mockups. We start with iphone UI templates to get the outer shell and then use html and css to pass in different 'screens'. These 'screens' are single images that represent everything within the presented screen. With the html and css we code in taget areas that become the triggers to move through the app. No Flash required....but html/css skill required.

10 Jul 2010 - 2:05pm
Thomas Schluchter
2009

Rachel,

You have a couple of options, of which Flash might actually not be the best one. I would recommend looking at jQTouch, a jQuery-powered Javascript/HTML framework that lets you throw together a high-fidelity prototype in any editor you use for web development. It comes with pre-made graphic assets for the iPhone's native UI elements, so you basically just script the app's behavior.

If you prefer a more graphical approach, look at this tutorial for Fireworks CS4 that comes with jQuery and PHP scripts for deploying a clickable prototype to an iPhone: http://www.adobe.com/devnet/fireworks/articles/prototype_iphone_app.html

Good luck! Thomas

Sent from my iPad

On Jul 10, 2010, at 2:17 AM, "rachel.i.simpson" wrote:

> Hi everyone, > > I'm a student currently learning about Interaction Design, on Exchange from Canada in Germany. A group that I am working with is developing an iPhone application aimed at helping cancer patients organize a wide variety of tasks and self-care needs that come with the disease. I have worked on projects with the iPhone before, as an intern and developer. I don't have any experience though mocking up the application on the iPhone, without going through the process of actually building it. > > Ideally, we would love to have an interactive mock-up of the application on the iPhone for our final presentation. We're fairly sure that this is infeasible though, as we don't think that actually building it would be the best use of our time. Flash doesn't seem like an option, unless perhaps we create a video using flash, and then have an actor "interact" with the application? > > I have been reading this list for a while, and it seems like there are a lot of incredible people connected to it, with amazing experiences to share. Any suggestions that you may have to offer would be greatly appreciated. > > Thanks and cheers! > Rachel > >

12 Jul 2010 - 9:09am
.pauric
2006

Rachel, traditionally designers make a call at this stage in a program to put our efforts in to (a) a polished and well rehearsed presentation of a lo-fi prototype, relying on the designer to weave the story of her design intent.  Or (b) and interactive mockup which might loose a little in terms of presentability but gains resource effort as it is re-used during evaluation with end-users.

However, we're seeing more people on this list chose a third option of the 'experience prototype'.  Something that communicates the motivations, drivers and emotions behind a design, and if done correctly, can be far more compelling to stakeholders.  One fine example can be found at 17m20s of this video http://vimeo.com/9797872 .  Note that in the first experience prototype there is no mention of the UI, it's all about the idea. Given the sensitive and emotive domain of your app I would argue that a 'big picture' presentation would be far more effective.

 

 

And fwiw, here's a link to the Omnigraffle stencils: http://graffletopia.com/stencils/tags/iphone but it sounds like you have already completed your ideation stage and are ready to add interactivity to a chosen solution.  jQuery or some of the other higher level mediums would be more suitable.

regards /pauric

 

14 Jul 2010 - 3:05am
rachel.i.simpson
2010

Hello Pauric,

Thanks so much for the advice, and the link. (I especially love the Messenger dog video, very charming.) We have had some dicussion of the idea of a video storyboard- something along the lines of what you're suggesting. I think you make an excellent point, particularly given the nature of the project. I have a meeting with the group today, so we'll be able to discuss the idea. And yes- we're through the ideation stage and are just putting some finishing touches on our screens. Thanks for the stencils though. I'm sure they'll come in handy in the future.

  I also noticed your mention of the "Follow the Money" project- a very cool idea. I'm just developing my skills in Processing, so I'm very interested to follow along.   Hope it goes well! Cheers,
Rachel

On Mon, Jul 12, 2010 at 5:03 PM, pauric <radiorental@gmail.com> wrote:

Rachel, traditionally designers make a call at this stage in a program to put our efforts in to (a) a polished and well rehearsed presentation of a lo-fi prototype, relying on the designer to weave the story of her design intent.  Or (b) and interactive mockup which might loose a little in terms of presentability but gains resource effort as it is re-used during evaluation with end-users.

However, we're seeing more people on this list chose a third option of the 'experience prototype'.  Something that communicates the motivations, drivers and emotions behind a design, and if done correctly, can be far more compelling to stakeholders.  One fine example can be found at 17m20s of this video http://vimeo.com/9797872 [1] .  Note that in the first experience prototype there is no mention of the UI, it's all about the idea. Given the sensitive and emotive domain of your app I would argue that a 'big picture' presentation would be far more effective.

 

 

And fwiw, here's a link to the Omnigraffle stencils: http://graffletopia.com/stencils/tags/iphone [2] but it sounds like you have already completed your ideation stage and are ready to add interactivity to a chosen solution.  jQuery or some of the other higher level mediums would be more suitable.

regards /pauric

 

(((Please leave
22 Feb 2011 - 7:47pm
sgnewson
2011

The best tools I have found for prototyping simple interactions are:

1) Adobe Fireworks. This allows you to link various images together in html. Like others have suggested, but without having to write any html or css.

2) Keynotopia. This is a collection of templates for iphone, windows phone, websites, etc built in Keynote. They can be used to make interactive prototypes within keynote that can be tested on a computer or mobile device. http://keynotopia.com/ 

Syndicate content Get the feed