Presenting iPhone mockups using Dropbox

I’ve been working on PopSurvey—An awesome survey creation app powered by simplicity—for over an year now. The best part is the survey player (patent pending) where each slide carries just 1 question. We are also making the PopSurvey player compatible for iOS and other mobile platforms using media queries.

After designing the mockups for PopSurvey player, I was thinking of presenting them to my team in some better way and the best way would be to present them on iPhone itself. To achieve that I saved the files in dropbox folder, named them (see screenshot #2) so each mockup appears after one another as they’d in real survey on sliding i.e. First survey intro, then questions and at last thanks slide. It worked great for testing and presenting and team liked it. Do you guys like it too? or you use some other better way?

Following are the screenshots of mockups taken in the iPhone dropbox app.

8 Comments

Add your comment


  • # Darren
    says on November 25

    If you load these same images via the web you can take advantage of a full screen browser without the wasted space of the lower action bar from image viewer.


  • # R.Bhavesh
    says on November 26

    I love this idea.

    Yep, the regular screen is always available but this one gives a better feel of how it actually works and feels at the same time.

    Kudos


  • # webdevcloud
    says on December 11

    Ah, I was missing something there. Thanks for the post. Stumbled on it quite accidentally and I think this is exactly what I needed for the next batch of mockups.


  • # Tom Carney
    says on December 17

    Thanks for sharing this. However, App in Seconds is faster and more fun to use for showing mock-ups http://www.appinseconds.com. Check it out.


  • # Yancy
    says on December 20

    We’ve done this using Apple’s Photos app by creating an album in iPhoto. Super easy and pretty bullet proof.

    I’d love to see a combination of an html5 web presentation tool and a static site generator to create super easy mockups for desktop web applications/sites. Maybe a combination of Caleb Troughton’s [deck.js][1] and Ben Schwarz’s [bonsai][2].

    [1]: https://github.com/imakewebthings/deck.js
    [2]: https://github.com/benschwarz/bonsai


  • # Shubham
    says on January 12

    You might like http://www.zambetti.com/projects/liveview/


  • # Sanjay Raval
    says on March 07

    Here is my way to create quick clickable demo using just screenshots and dreamweaver.

    1) Make clickable html demo using screenshots. you can use dreamweaver or any html editor and hotspots the images.
    2) Put this clickable demo on your domain, or on any free domain if available. I am not sure if there is any such site where we can upload our contents and can use, let me know if you come across any such site.

    3) Then send the url to the concerned people, they can run the demo in their browser.

    Thats all. I dont think, this would be much time taking process. Making clickable pages with dreamweaver using screenshots is quick, believe I have done it very often.

    Regards,
    Sanjay Raval


  • # Lessons Learnt Designing Mobile (Apps & Web)
    says on May 20

    [...] handy way to present and test mockups is to save each screen as an individual image to a Dropbox folder then browse through them [...]

Post a comment

warningOops! You forgot Name, Email, Comment.

Personal Details and Authentication