1. Introducing Mocking Pad – An iPad Wireframing App

    June 24, 2010 by accidentalfish

    I bought an iPad on UK launch mostly out of curiosity but also admittedly due to my love of shiny new hardware. The only real usage scenario I had in mind for it was lying on my sofa lazily browsing the net – something that it does awesomely well. Its rapidly become my go to device for any form of consumption, where previously I would have picked up my laptop now I tend to reach for my iPad.

    But it turns out its also quite handy for quickly creating rough content, particularly in a social context and, being a fan of wireframing and storyboarding, something I quickly found myself wanting to do was doodle UI designs and thus ProtoPad, as I’m calling it for now, was born.

    The idea behind Mocking Pad is to let you quickly throw together sketch like UI wireframes and share them with people in a variety of ways. You could do this with apps like SketchBook Pro by Autodesk or Adobe Ideas for iPad but for the freehand drawing impaired like me or for those looking for something still “rough” but with more structure than a freehand sketch then Mocking Pad is aimed at you. You can get a feel for Mocking Pad’s style from the “work in progress” screenshot below:

    tn_pp_1.png

    And while the sketch app’s are great fun to use they don’t really lend themselves to sharing and UI design is all about sharing and communicating: both within your product team and with your clients. Mocking Pad makes that easy and builds it right into its workflow.

    I’ve already mentioned the social aspect of the iPad – its a great “pass around” device so thats one way of sharing. But maybe you want to present your ideas to a group of people? Maybe even over the web? By using Mocking Pad’s Live Publishing feature your iPad becomes a web server at the touch of a button and anyone with a web browser can connect and view your designs, no plugins required. You can see below live publishing in progress both on the iPad and in a web browser:

    tn_pp_2.png

    tn_pp_4.png

    Another bonus to publishing in HTML is that you get all your UI components output as seperate PNG image files so if you want to do further composite work in a tool like PhotoShop you can. But maybe you want to take your design and start adding colour and building on it in a vector tool like Adobe Illustrator? You can share your sketches in SVG format for editing in applications like Adobe Illustrator or the free Inkscape. You can see below the same UI design being edited in Illustrator:

    tn_pp_3.png

    Working with remote clients and colleagues? Mocking Pad will also let you publish your designs to DropBox – both the HTML format, the SVG format and the native Mocking Pad file so that you can edit and view your designs on multiple devices.

    I’m still fine tuning some of the workflows and sweating over the “feel” of the editor: in particular the tolerance of snapping to the dynamic guidelines but the app is largely complete and should be published on the App Store shortly.

    I’d love to have some beta testers and pre release feedback so if you have an iPad, are interested in wireframing UIs, and would like a free copy of the app then get in touch.


  2. Photo Drive on iOS4

    June 23, 2010 by accidentalfish

    I’ve tested this on iOS4 and as best as I can tell it works with no problems.

    If you hit an issue then let me know.

    I haven’t yet had the opportunity to try it on iPhone 4 but will do so soon.