The excellent Framer Studio for Mac is a one stop tool for developing, previewing, and sharing prototypes. What I hope you’ll find interesting in this article is how Framer met our requirements and what we learned about those requirements after we had been using it regularly In fact, Quartz Composer was my favorite tool to use-the springy-band UI is unique and super-fun-but it lacked on-device preview at the time, a deal-breaker for us that has since been corrected. N.B., We evaluated these tools nearly one year ago at the beginning of Basecamp 3’s mobile development so some of the reasons we choose Framer over the others may no longer be true. We looked at a ton of tools and put several through their paces including Quartz Composer w/Origami, Form, Pixate, and Briefs before settling on Framer. We’re all developing on Macs but it was important that any tool worth considering would be suitable for prototyping both iOS and Android app designs. Prototypes would serve two purposes: Quickly sharing work-in-progress designs for critique and sharing the final, high-fidelity reference designs with our programmers. We wanted to see and touch designs on real devices, desktop emulation alone wouldn’t cut it. It was equally important that the round-trip was short between making changes, previewing them, and making further tweaks. Above all a suitable tool had to be faster and easier than putting something together in native code or even HTML/CSS. So we set out to find a prototyping tool that met these requirements: For example, full-screen transitions or fixed navigation bars. Simple things that are essentially free in native code can be difficult or quirky in web browsers. It was tempting to simply make prototypes in HTML, CSS and JavaScript-tools we’re very familiar with-but it turns out they’re a poor fit for the kinds of designs we wanted to try. We wanted to see and touch our designs on real devices. We knew right off that static Photoshop mock-ups weren’t going to cut it. Over the course of a day that time adds up.
It’s worse when you consider that making even seemingly minor visual changes to iOS or Android designs in native code can take much more time than you might expect. Even for the simplest of changes the difference between refreshing a web browser and building an app to a device (or simulator) is orders of magnitude slower. When designing Basecamp’s mobile apps it was a completely different story. We’ve done it this way for years -our workflow and development stack are highly optimized for it. We can then see and click the work-in-progress design just like our customers will the finished product. We don’t make highly-polished comps but instead work right in Basecamp’s code making hundreds (even thousands!) of tiny revisions until the design is just right.
In this article we’ll look at how we chose a prototyping tool and take a peek at a few of our prototypes.Īt Basecamp design happens through iteration. The only real weakness of LICEcap is that it can’t access the menu bars, meaning it isn’t able to record the entire screen or menu actions.īy the way, if you do plan on recording animated GIFs for use on the web, be sure to grab ImageOptim as well to compress the file size considerably before uploading them to anywhere, it works just as well on gifs as it does on PNG and other formats.Interactive prototyping was essential to designing Basecamp 3 for iOS and Android. Here’s another with just a simple screen recording: So what does a sample output of a screen recording gif look like? The one at the top of this post is one, and here’s another with a title frame and elapsed time shown: Launch the app, then drag the recording window to the region of the screen you want to turn into a GIF, size the recording window appropriately, choose a frame rate (8FPS is the default and reasonable), then choose “Record” to start.Īfter you click “Record” you’ll be presented with a simple file save dialog of where to send the screen recording GIF to, which also provides some additional options for the recording, able to set an intro title frame, record mouse presses, show the elapsed time, and determine whether the GIF should repeat or not (the default is set to repeat). Grab LICEcap free from the developer (Mac OS X and Windows).
0 kommentar(er)
