5/4/2023 0 Comments Basecamp 3 app androidThe first surprise was that sharing a URL, while handy, didn’t provide enough context. Sharing was one of the key requirements in choosing a prototyping tool but it’s also the area where our expectations were the mostly incorrect. It was dead simple to drop a URL in Campfire when we needed feedback. And if they have a copy of Framer Studio on their Mac, they can open your prototype and edit it themselves. They’ll be able to interact with it in their web browser or on their device just by opening the URL. When it’s time to share a prototype, Framer pushes your prototype to the cloud and provides a private link you can share with anyone-all with a single click. I’d expect most web designers who are comfortable with HTML, CSS, and JavaScript could be productive with Framer in a matter of hours. Integrated access to the excellent documentation on its framework made getting started easy. As much as I loved using Quartz Composer it wasn’t intuitive and I had to learn a lot to become proficient. It’s so easy to fire-up Framer and drop a screenshot into a prototype that it’s even become my go-to tool for making device artwork.įramer prototypes are written in CoffeeScript, a language in which I was already familiar that compiles into JavaScript. A nearly final Basecamp 3 design prototype in Framer Studioįramer’s previewer also includes a nice selection of device frames to wrap your prototypes in including various models, sizes and colors of iPhones, iPads, Apple Watches, and Android devices. Make a code change on the left, try it on the right in real-time. It consists of two panes: code and preview. 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. Interactive prototyping was essential to designing Basecamp 3 for iOS and Android.
0 Comments
Leave a Reply. |