[Noisebridge-discuss] [dorkbotsf-blabber] Recommendations for mobile app mockup?

Anders Nelson anders.k.nelson at gmail.com
Wed Jul 24 21:13:32 UTC 2013


Hi everyone, I promised to contribute after I had something to share so
here we go!

For the mobile app mockup I worked with SF Dev Labs (sfdevlabs.com) and my
designer/coder was Jehan Tremback, a Noisebridge member. I contacted
several other design houses beforehand but they returned neither my emails
nor my calls which I found pretty lame. I would definitely recommend SF Dev
Labs.

The UI items don't seem to all work in a desktop browser but they should on
a mobile device. You can see the results here:

http://www.erogear.com/downloads/mockups/joggly-gh-pages/
http://www.erogear.com/downloads/mockups/cyclomatic-gh-pages/
http://www.erogear.com/downloads/mockups/sparklemotion-gh-pages/

Here are some details about what was built:

- I needed three separate mobile app mockups. One for running, one for
cycling and one for dancing/fashion.
--The running app needed choices for data to be externalized and look like
a typical athletic tracker. The wearable display was mounted to the upper
back of the runner.
--The cycling app needed to demonstrate the GPS-guided turn signaling
possible with the wearable display system (a messenger-bag mounted panel).
--The dancing/fashion app needed to show a list of graphic choices and one
item that would show a dynamic preview. Touching the "pulsar" item animates
a GIF to make it seem like the selection is now playing on the wearable
display (a belt).

We used a web-based platform (CSS and Javascript) so development time was
minimized and it would work well on both Android and iOS. iOS was easier
because there are metatags or something to force Safari to hide the address
bar easily, making the web app look like a native app. Android was more
difficult, and we had to use the Dolphin browser with Dolphin Jetpack
(their HTML5 support package) to get the same functionality. Metatags would
not hide the zoom controls when using a simple webview.

To make the GIFs from the Quicktime animations I made using Apple Motion
for use in the Sparklemotion mockup I used gifninja.com. Really awesome and
fast.

The intent is to take these mockups and re-create them as real, native
mobile apps so Kickstarter backers can use their products out of the box if
other app developers haven't taken the reigns already. All the mocked-up
functionality will indeed be functional.

I'll follow up with deets on the videography stuff once that's all done.

=]

--
Anders Nelson

+1 (517) 775-6129

www.erogear.com


On Sat, Jul 6, 2013 at 8:44 AM, Romy Ilano <romy at snowyla.com> wrote:

> There's an open source tool called TAP that you can use with adobe
> fireworks
>
> http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks
>
>
> ---
>
> Romy Ilano
> romy at snowyla.com
>
> On Jul 5, 2013, at 14:31, James Young <pronoiac at gmail.com> wrote:
>
> I've heard good things about the Briefs prototyping and mockup tool.
>
> http://giveabrief.com/
>
> -James
>
> Sent from my iPhone
>
> On Jul 5, 2013, at 12:10 PM, Anders Nelson <anders.k.nelson at gmail.com>
> wrote:
>
> Thanks so much guys for your suggestions, I'm following up with a few
> people who responded and I'll let y'all know how it turns out and what the
> process was like in case it can be useful.
>
> =D
>
> --
> Anders Nelson
>
> +1 (517) 775-6129
>
> www.erogear.com
>
>
> On Wed, Jul 3, 2013 at 12:52 PM, Anders Nelson <anders.k.nelson at gmail.com>wrote:
>
>> Good afternoon comrades!
>>
>> Anders has yet another mobile app question - can anyone recommend someone
>> or a firm that can make a mockup of a mobile app that runs on a mobile
>> device?
>>
>> I'm not looking to implement real functionality, only the UI elements and
>> simple transitions between pages or something. I'm thinking this could be
>> built with a cross-platform foundation like Titanium to make things easier.
>> Again, all it has to do is look like it's doing something when the user is
>> pressing buttons (maps text field, static map view with animated
>> GPS-looking beacon, normal view transitions, etc).
>>
>> I'm slated to shoot the video and stills for the Erogear Kickstarter
>> campaign June 18-19 and I'll need to have this simulated app ready by then.
>>
>> May I tap into your infinite wisdom?
>>
>> =]
>> --
>> Anders Nelson
>>
>> +1 (517) 775-6129
>>
>> www.erogear.com
>>
>
>
> ----------
>
> dorkbot: people doing strange things with electricity
> http://dorkbot.org/dorkbotsf/
> SUBSCRIPTION AND UNSUBSCRIBE OPTIONS HERE:
> http://music.columbia.edu/mailman/listinfo/dorkbotsf-blabber
>
> ----------
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.noisebridge.net/pipermail/noisebridge-discuss/attachments/20130724/2cfbd638/attachment-0003.html>


More information about the Noisebridge-discuss mailing list