Get RAD with DevRocket, Framer, GhostLab and Photoshop

Introduction

As a designer, I often find myself looking at things and saying “I could make this way cooler.” The Citibank app for iOS is a perfect example. With its complicated UI, lackluster appearance, and muddy response time, this app needed some serious love. Thus, I decided to do something about it and thought it’d be a great opportunity to illustrate a process I’ve come to love; getting RAD with DevRocket, Framer, GhostLab and Photoshop.

RAD or Rapid Application Development is methodology for prototyping software; essentially getting something, in someone’s hands, as quickly as possible. Both RAD and rapid prototyping are great methods for dissolving communication gaps between designers, developers and clients. When designing apps, mobile especially, UI matters but UX is everything, and it can be challenging to communicate the full experience with flat mock ups or clickable wireframes. As Koen Bok, the author of Framer, says “if you’re putting out static work then you’re not actually doing the interactive work… you’re only doing half of the work.”

While there’s no silver bullet, the process I’m about to describe is an excellent tool for communicating the look and feel of an app; both quickly and easily. Over the next few weeks, I’ll walk you through a complete step-by-step guide to building Xiti; a mock iOS application built with DevRocket, Framer, Ghostlab and Photoshop. We’ll discuss tools used, how to configure them, propose an ideal rapid prototyping flow and utilize a bit of JS programming. The end result: a shareable, clickable, interactive prototype iOS app.

This article will go over the following:

• Introducing the tools
• A proposed prototyping flow
• Getting started with DevRocket
• Setting up our GhostLab site
• Quickly discussing why it’s important for designers to code

Dependencies. First and foremost, required tools:

• DevRocket—the DevRocket Photoshop Extention is worth it’s weight in gold. DevRocket is an incredible asset, allowing you to create ready to use iOS view templates with a click. The view templates include iphone4 and 5, iPad and even icon assets.
• Framer—an amazing tool that reads your Photoshop files and converts them into HTML/CSS/JS, again with a click. Best of all, it’s free! (for now)
• GhostLab—a fantastic app for synchronized testing across devices and browsers. Load your site into GhostLab using their intuitive UI, run it, open the URL on all your devices and badda-bing—synced interactions. GhostLab syncs up scrolls, clicks reloads and even forms inputs across all connections to your Ghostlab site.
• Photoshop—We’ll be using CC although CS5 should work too.

Proposed prototyping flow

This is by no means the most perfect process but then again, what is? As with all things digital, it’s subject to change and adaptation.

1. Assuming that you have all the tools installed and configured (which we’ll cover).
2. Sketch out your app. Paper and pencil, OmniGraffle, Balsalmiq, Keynote, whatever you want to use! Creating a general wireframe + story is essential to the overall flow process.
3. Translate your sketch into design. Jump into PS and design to your heart’s content. Important– organize, organize, organize. Keeping your layers organized and uniquely named (from the start) will help you immensely.
4. Open Framer and run it. Framer will read your PSD and create the necessary HTML/CSS/JS files.
5. Add the directory created by Framer to GhostLab.
6. Run your GhostLab site and open the URL on your target device, ex: iPhone5.
7. Make edits to app.js (which is where the framer magic lives), then save and watch GhostLab automagically update your browsers.
8. Make edits to your PSD, run Framer again, and watch the magic happen, again.

Why Framer?

Admittedly, there are tons of tools for rapid prototyping mobile apps. So why Framer? First off, Framer is great for demoing just about any type of UX. Want to do something for your 1024 desktop view? Honeyframer don’t care. How about your BAM, big a** monitor? Honeyframer don’t care. Still not convinced? Well, not only is Framer a great demo tool, it can also spit out some awesome CSS for your build; it may not be the most production ready but it definitely gives you a better foundation.

Getting Started

Now, lets begin. I’m going to assume you’ve downloaded all required tools and installed them flawlessly, yah? Fab, let’s roll:

• Open Photoshop and DevRocket extension through Window > Extensions > Devrocket.
• With the DevRocket Panel open, click “View Templates”.
• Select desired template. For our purposes, we’ll select the iPhone5 template, or the top, middle, item.
• Following that PS is working correctly, you should have an iOS7 looking template sized to 640×1136 in view.

Now, before we jump into designing anything, we’re going to make a small change to Background layer in our document. Why? Otherwise when we run Framer the Background won’t be included in our prototype because it won’t be seen as a view. According to Koen, “a view is just a square that draws stuff”, thus in order to be “visible”, art must be a view. More information on views.

• Select your “Background” layer and duplicate it using CMD + J on a Mac.
• Add newly created “Background” layer to a layer group and rename the layer group Background.
• Delete the Photoshop created “Background” layer.
• Save your file.
• Open Framer and click the “Run” button.

Problems? Are your images a little off or the wrong size? Not sure what causes this behavior but I’ve found it can be resolved by toggling all your Layer Groups, on and off, then rerunning Framer. If push comes to shove, delete your layer groups and design your own.

Once Framer has finished, you should have a new Finder window with the following files:

• app.js – This is where our magic happens and where we’ll focus our efforts outside of PS.
• /Framer – Home to the magic’s source, don’t touch.
• /images – This is where all the assets created by PS live.
• index.html – Our application’s html file.

Open the index.html file in your favorite browser, Chrome. Framer is actually optimized for Chrome and Webkit so, biases aside, run with it. You should see your app within the browser window, sitting atop a transparency grid.

Take a moment to click on your app and marvel at the animated goodness generated by Framer. You’ll notice all your grouped elements have a bounce action. This is because Framer includes a bit of demo code in the app.js file for the generated views. Enjoy it while it lasts, ‘cause we’re killing it.

Setting up our GhostLab site

• Open GhostLab.
• Click the “+” button in the upper left.
• Navigate to the directory where you saved your PSD.
  • You’ll notice that Framer automagically created a directory with your web files.
• Open directory and select “Add”
• Click the “Play” button to the right of newly added entry in GhostLab.
• Click the green “Rocket” button to launch GhostLab site in browser.
• Make note of the URL in your browser, which may be something like http://10.0.1.2:8080
• Assuming your devices are are the same wireless network, open that URL in your mobile browser
• Boom! You should be able to view your newly created app on both your phone and your desktop’s browser. Congratulations!

Designers should know how to code

Simply put, coding is the 21^st century literacy. On a base level, those who design for digital landscapes should know how to code them. Does this mean a degree in CS is necessary? No. However, understanding what’s under the hood is and with so many incredible resources, there’s really no excuse. I for one have racked up over a thousand points on Treehouse and continue to do so every week. So, empty that #headtrash and start coding already.

Reelin’ her in

From here things get even more intriguing, but this post is getting a tad long. Here’s what we’ll try to cover in the next post:

• Creating the app icons
• Snappy proto with fastclick.js
• Adding it to the homescreen
• Accommodating the default iOS status bar
• Explaining the default Framer code
• Creating an easier method for accessing the views in JS

Additional Resources

• Check out Koen Bok’s overview video on using Framer here:
• Extending Framer by Cemre Güngör
• Framer Director by Joe Critch

Check out the entire Get RAD series below!

• Get RAD, Part II: App Icons
• Get RAD, Part III: Animations + Framer