Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to prototype Google Glass apps

In this article we will describe how to prototype applications for Google Glass with Justinmind and how to run them inside a real Google Glass device.

Think you have the perfect idea of a Google Glass app, but don’t have the high-tech specs (or perhaps the technical expertise) to make it happen? Now you can create your own Glass apps without having Glass or any coding experience.

Installing the tools

  • First you need Justinmind Pro (try it 30 days for free) and the library (you can download the library from the ‘widget libraries‘ section).
  • Include the library into your Justinmind using the menu option ‘Widget libraries -> Import widget library’, you will find your new widgets in the ‘My Widgets’ tab. (if you don’t know how to import libraries, Take a look at this tutorial).

Building a prototype

Now you can start building your prototype. You can draw a card for each screen or you can use the dynamic panels to design transition effects inside the same screen. If you plan to show the prototype always in a computer, you can drag the widget called ‘Canvas’ into the default template and place the cards on each screen. You can also use the ‘gestures’ widgets included in the library to make the prototype more self explanatory.

gestures

You can download an example of a prototype made that way here.

Displaying your mockups inside Google Glass

If you want to run your prototype inside a real Google Glass device, you have to do the things in a slightly different way. In this case you don’t use the ‘canvas’ widget but the cards right away. Once you have a card you can see it inside your Google Glass by following these steps (tip: paint the background of your screens in black, they will look better when displayed in Glass):

  1. Go to the menu option ‘Simulate -> simulation settings..’ and type ‘70%’ in the ‘scale’ property (for some reason the browser include in Glass zooms in a bit any web displayed in it). That way your prototype will fit into Glass perfectly.
  2. Select the option ‘Publish online’ and publish your prototype.
  3. On Justinmind online platform, invite yourself as a reviewer of that prototype with the email account you have on your Glass.
  4. You will receive an email on your glass with a link, open it
  5. You’ll see your screen inside Glass in all its glory

Running interactive prototypes inside Google Glass

Ok, now you know how to display static mockups inside Glass but, what about interactive prototypes? Glass use it’s Internet browser to display the prototypes. That browser captures all the user gestures, so none of the gestures or events defined on the prototype will work. But don’t worry, there is one event that do work: on page load. With that event you can at least create a ‘demo like’ prototype with all the effects and interactions you want. Think your prototype as a ‘video’ showing how your application will work.

gestures2

Just define ‘on page load’ events and all the actions from page to page. Once you have your prototype with all the events, select the option ‘Publish -> Replace prototype’ and re-publish your prototype again. You’ll receive another email in your Glass with a link, open it and enjoy your demo.

You can download an example prototype from here.