iPhone Design Award-Winning Projects phần 6 pps

93 93 Chapter Postage Developer Name: Chris Parrish and Brad Ellis Development Company: Rogue Sheep Tags: OpenGL ES; Art; Memory Management; Team Development URL: http://postage.roguesheep.com / This is the story of a band of engineers from a serious public software firm and their attempt to go solo and make serious software. What they ended up with: construction paper scraps on the floor, an ADA award, and one of the iPhone’s most exquisite apps, Postage (shown in Figure 7–1). Figure 7–1. A postcard created in Postage, ready for in-app mailing. 7 CHAPTER 7: Postage 94 In 2002, five Adobe engineers from the Seattle office were culled together to work on a spinoff project, a scaled-down version of InDesign aimed at amateur publishers. The five would bond, code, and compile themselves into a working friendship. And when their project was killed in 2003, they’d jump ship in frustration, tumble into careers as coders- for-hire, and pop up in 2009 as the winners of an ADA for their picture-perfect postcard app for iPhone. This is the story of an unlikely bunch of aesthete engineers that calls itself RogueSheep. There Were Sheep The name isn’t a purpose-built marketing tool or an age-old inside joke, according to Chris Parrish, one of the founding members of the flock. It’s more of an analogy for how the company got started. “The name just kinda happened,” says Parrish. “We went on a road trip to Oregon together. There were sheep, there was the Rogue River, and a microbrewery out there,” he recalls. “It fits our character.” The outlier spirit is what drew the five members of the flock together in the first place, alone together as they were. “We never felt like we could ever do anything creative while we were at Adobe,” says Parrish. “We felt removed from San Jose” [where Adobe is headquartered]. On a behemoth project like InDesign, Parrish says he and his cohorts would be among dozens of other engineers—up to 50 at one point, he remembers. “The creative expression and control you have is minimal; someone else is deciding what things should look like and feel like.” It was only once he and his now-coworkers began the InDesign spinoff that they realized their chemistry. “We had similar sensibilities, and we had a really good time,” he says. Another thing they had: new ideas. But in the Adobe hierarchy, new software concepts are bought, not incubated, Parrish says. They left the company as a group. “We thought, ‘What can we do with this team?’” The answer was they had no answer at all. “We kicked around a lot of ideas, and we talked about doing games,” Parrish says. But each time the spaghetti hit the wall, nothing really stuck. Then one of the founders—the only one who has since left the team of the original five—came up with a proposal. His wife was doing her PhD dissertation at the University of Washington, and she was struggling with the software tools she was stuck using in the university labs. The group thought they had found their opportunity to build an elegant software solution. “Once someone had an idea that seemed remotely reasonable, we went with it,” says Parrish. The problem had to do with a painstaking research technique known as “gel electrophoresis,” a process by which life science researchers analyze the nature of DNA and RNA samples. “The results of these experiments are these crude negative images,” Parrish says. “A lot of the research is doing these experiments, and if you’re going to publish your results, you have to label up these negatives. All that labeling was tedious, and they were doing all this diagramming and graphics work in PowerPoint, which was terrible,” he says. They saw that the task needed graphical richness, but that it couldn't be static—it had to be alive with usability, and dynamic enough for revisions. “Interface concerns are high on the list of how we approach a problem,” he says. CHAPTER 7: Postage 95 They set to work at RogueSheep’s office in the Fremont district of Seattle. There, in the shadow of Seattle’s unusual statue of V.I. Lenin, they began building a cross-platform solution with all the graphical potency they thought the problem warranted. Then they made a decision: they didn't want outside funding or interference. That meant picking up consulting and contract work to keep money coming in, but it also left almost no time for their own work. When they had time, the team played around with Apple’s growing suite of apps. “We borrowed lots of ideas from iTunes and iPhoto,” says Parrish. They were inspired. “Instead of just focusing on the labeling and output of these gel images, we totally retooled it,” he says. They made the app into a kind of image notebook for researchers, complete with tagging, smart search, metadata, and exporting. But despite positive feedback from lab beta-testers, sales interest was tepid. After months of development, the project was tabled without so much as a name, but it had taught the team to pay acute attention to Mac UI. They ditched Windows and Linux and became full-time OS X developers. Is This One of Them Internets? Apple’s 2008 WWDC was the group’s deus ex machina. “Day to day, all of us run on Macs,” says Parrish, “and only occasionally—and begrudgingly—do Windows software. The iPhone was a big thing for us. We were all excited.” They showed up to San Francisco’s Moscone Center in 2008, having heard about developers tinkering with the guts of the phone version of OS X long before the SDK was released. Once Apple announced their free iPhone developer kit, it opened the idea faucet. “We got the idea for Postage right there, at WWDC,” says Parrish, at a company dinner. The first storyboard, created by the group’s design guru, Brad Ellis, is shown in Figure 7–2. “It was a simpler time for the Postage project,” he says. Figure 7–2. With a phone that can do rich HTML email, the possibilities for impressing peoples’ moms became endless. The concept was simple: a rich, purpose-built app that would send electronic postcards based on photos taken with a user's iPhone. At the time of the ADAs in June 2009, Postage 1.1 did just that, and with aplomb. The app boasted 50 beautiful postcard templates, which users filled with their own photos they could pan, zoom, and rotate into any preferred orientation. To that photo, they could add one of several effects, such as a monochrome filter or sepia tone; they could also choose the color and font of the CHAPTER 7: Postage 96 message text, and send the card to several recipients at once, all of which could be culled with a simple search from the iPhone’s address book (the maximum number of recipients depends on how much of the phone’s memory is available). The app is available in three languages—English, Dutch, and Italian. It won a fast audience with reviewers, both professional and otherwise. MacWorld called it a “perfect iPhone app,” and users raved about the “exemplary” technical execution on the iTunes App Store. As auspicious an app as Postage would be, the idea sat undeveloped for months after the team returned from WWDC 2008. Caught up in their contract work, RogueSheep simply didn’t have enough manpower to do the fun stuff. It wasn't until February 2009 that they could peel off a couple of developers from paying gigs and begin in earnest. Luckily, Ellis had already begun spec’ing it out. Ellis’ second storyboard is show in Figure 7–3. Figure 7–3. A more detailed Postage storyboard, this version drawn without anyone’s mom. CHAPTER 7: Postage 97 Even so, they were behind: the SDK had already been out for the better part of the year. “All our peers had figured [the App Store] out a year ago,” says Ellis. “We were late to the game.” But while the PR blitz around the iPhone had begun to wane, Ellis’ excitement had only begun to ramp up. “What I enjoyed was looking at the UI stuff,” he says. “With the iPhone [I] got to totally start over, and put aside all that other knowledge I had been accumulating. You just get to start fresh.” He started a torrent of downloading—by his own account, “all the free apps” in the iTunes store. “I've checked out all of them,” he repeats. The potential for a simple, beautiful, functional app had a powerful allure, but not a lot of fiscal incentive. “The economics of the App Store had really changed” since the early days of $100,000 overnight sales, recalls Parrish. “We didn’t know what was possible. We just knew that it would be worth doing just to get leads for other jobs.” Coding for Fun What the iPhone platform lacked in business incentives, it had in entertainment. “I haven’t had that much fun programming since I was a kid,” says Parrish. There was almost no learning curve switching between Mac and iPhone development, he recalls, making the challenge purely creative and only minimally technical. Fueling the innovation were dozens of other excellent iPhone apps that the RogueSheep guys say inspired them to keep their expectations for their own work high. “Classics is a great example that makes you reach for a higher bar,” Parrish says of the intricate iPhone book reader built by Andrew Kazmierski, which had received over 3,000 four- and five-star ratings in the iTunes store as of WWDC 2009. Another source of inspiration is developer Will Shipley’s iPhone version of Delicious Library 2, the catalog-everything-you-own software that recognizes CDs and books by viewing them through your Mac’s iSight camera. “We hung out with him a lot [while developing Postage],” says Ellis. The list of plaudits doesn’t stop there: the RogueSheep guys also say they marvel at the brilliance of NewsGator’s NetNewsWire client for iPhone, and the Twinkle Twitter client by prolific game maker Tapulous, creator of the TapTap line of iPhone games. Yet even with so many adroit developers building for the iPhone, Parrish says, his team found they drew even more inspiration from elsewhere. “In a lot of ways, we were more inspired by Mac apps, thinking we wanted to translate that kind of experience to the iPhone,” he says. And when it came to those, well, there was really one company that epitomized brilliance. “All of us strive to think: what would Apple do? Some of the native apps on the iPhone are what we’re really trying to match with our own interface, and our presentation to the user.” But Ellis, ever the paper-and-glue throwback, credits actual postcards for the beauty he built into Postage. “I wanted it to be like a physical postcard, and I’ve been trying to hammer that idea home from day one,” he says. “It’s what I've picked up from my art background.” Although they might not share muses, the entire team at RogueSheep seems united under an umbrella principle that is palpable in Postage: zero learning curve usability. “This was built for our wives,” Parrish says. “We wanted them to be able to use the app without ever having to hesitate or get confused.” Ellis chimes in: “In fact, a wife that CHAPTER 7: Postage 98 doesn’t even have an iPhone should be able to pick up someone’s iPhone and be able to use it.” The key to usability, the RogueSheep engineers believe, is concise, narrow focus, something that they believe Apple has mastered. “It’s not necessarily having every option, but having the right options, so people don’t have to put in a lot of effort to generate something that’s beautiful,” Parrish says. “That’s one of the great things about the Apple applications for the desktop,” he says. “Look at Numbers; you can create beautiful spreadsheets with very minimal effort. You don’t have every option that Excel has, but it has most of what most people need, and the end result is just beautiful. That’s a big motivating factor.” While the challenge of building Postage wasn’t in the method—the RogueSheep engineers were all Mac-happy Objective C developers to begin with—it presented the bright, obsessive team with dozens of new ways to streamline the way it worked. While their workspace is in flux due to an office overhaul, the company’s first since its founding, the stockpile of tools in its arsenal is ever-growing. There are plenty of the trademark silver Apple towers, they say, but not the ones you expect; only Ellis has a Mac Pro. “All our desktops are G5s that we’ve had forever,” says Parrish. “We really haven’t had the need for the brand new eight-core Mac Pro’s. I’m a developer—I’m supposed to need the biggest, baddest machine,” he says quizzically, “but the G5s are at a sweet spot where they’re still quite usable. I spend more time thinking about what I’m going to do than waiting for it to do something.” With Snow Leopard on the verge of release, he concedes, the team might have to make a capital investment. “We may have to replace them,” he says a little glumly. The G5s have help: an array of 15-inch MacBook Pros and a few dual-monitor setups. “I can’t get enough screen space,” says Parrish. “I have two monitors, and Spaces, plus the laptop.” Ellis, as the resident creative, has a tablet-centric setup and “matching pen cups for different color pens.” Unlike the other developers, Ellis has spent much of his Postage project time working on video and still mockups. “All the animation for Postage has been done in Motion beforehand,” he says, and iterations he created in Photoshop were often dozens of layers deep, containing smart objects that themselves contained dozens of layers. “Before we started coding it at all, I had made what each screen looked like in a big Photoshop document,” says Ellis. “This document ended up housing every asset, so I could look at the whole screen while I was tweaking my pixels.” (See Figure 7–4, a .psd mockup.) CHAPTER 7: Postage 99 Figure 7–4. A Photoshop mockup featuring Ellis’ two roommates. “Little differences here and there,” Ellis says, “but generally we knew exactly what the application was going to look like before we even started.” To allow the team to keep tabs on his progress, Ellis used a tool called LiveView. Written by an industrial design firm in Palo Alto called Ideo, it’s a screen-casting app for both desktop and iPhone. The desktop iteration, ScreenCaster, presents a small, iPhone- shaped bezel on the screen of your Mac. Drag the bezel around your screen, and whatever’s inside will appear magically on any iPhone within your LAN that is running LiveView for iPhone. “Everyone could pipe in and see my progress,” says Ellis. “It was kinda fun.” Longtime Mac developers, the RogueSheep crew remembers the days when Apple’s own dev kit wasn’t so hot. “Xcode has really matured a lot,” Parrish says, describing the way it caught up to—then overtook—Microsoft’s tools for Windows developers with its killer feature set. “It’s so awesome to see Apple having money coming in, and on this growth path,” he says, “because its teams are chartering new territory now. Ten was always a superior platform, but Project Builder was a little dated,” he says of Xcode’s predecessor. “The features are there. I’d be lost without Xcode now.” Even when they have to develop for Windows, Parrish says, some members of the team often write the rough draft of a program in Apple’s IDE, putting it into Visual Studio only when they must. CHAPTER 7: Postage 100 The Circling Shark While many iPhone developers run light apps that never come close to exceeding the iPhone’s 64MB allotted memory for apps—which is effectively only 20-30MB in practice, say the RogueSheep engineers—the development of Postage relied unusually on Apple’s tools to optimize and reign in memory management. “Without Shark and Instruments, we couldn’t have gotten Postage working. It would have been so hard to figure out why it was crashing [in early versions],” says Parrish. The problem, he adds, is that all of Ellis’ intricate images and textures hog memory. “We were running into problems at the ‘sent’ screen. The app would be hitting the memory max, and then in the background the phone goes to check for mail, blowing us over the limit,” he says. While he concedes that the task of keeping Postage within Apple’s memory guidelines is easier now, thanks to improvements in iPhone OS 3.0 and OpenGL 2.0 ES, the original development process meant keeping a squeaky-clean leak profile. And it wasn’t just memory leaks that almost killed the app, says Parrish, but restrictions of the iPhone’s framework itself. “We had to make tradeoffs between performance and memory,” Parrish admits. One example: at first the team wanted to keep lots of elements at the ready to ensure quick load times, but memory economy dictated they resort to lazy loading. Then Ellis wanted to use a torn-edge look for the perimeter of the templates, but it ballooned the file sizes of some assets. “That’s one of our strong suits,” says Ellis, of memory management. “Originally [Postage] was crashing after sending four postcards, and Chris said, ‘No, dammit, we’re going to be able to send as many postcards in a row as we need to.’” “You have to go past the regular usage scenarios to get to what you expect to be stable,” Parrish adds. Cutting down the graphical quality of the app’s assets was never an option, the team agrees. “If your app has 200 frames and is under 10MB, then I think you’re doing it wrong,” says Ellis. The engineers still feared their app might get into a cycle of crashing on launch because of bad persistent data. “We had seen this happen to a number of developers, and the end result was not pretty,” says Parrish. Because of Apple’s long wait times for app update approval, users could be left for weeks with non-functioning apps whose only remedy was deletion and a fresh install—a pretty “violent” solution, as Parrish says. The team decided to write a little flag into the app’s NSUserDefaults when the application starts. If the app crashed on startup more than once, the flag would activate and blow away that persistent data after the next crash. “Ultimately you’d like to just never have a bug with your saved data,” Parrish says. “The reality is, it’s going to happen to you at some point. This technique can at least manage the user experience to something more reasonable on a platform like the iPhone, where the data storage is opaque to the user and it’s not trivial for them to take an action to fix the problem themselves.” Describing the flag, he says: “We clear it when the application quits normally. In the event of an abnormal quit, the flag is not cleared. We note the state of this flag at startup; if it’s the second time the flag is not cleared, we take action to remove all the saved data and start with a clean slate.” CHAPTER 7: Postage 101 If your app pushes the limits of the iPhone, it may pay to implement boolean expressions like those in Postage. The following are some of the relevant API calls. RSCrashDetector class : - (void) appStarting { NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults]; BOOL crashedOnce = [defaults boolForKey: kCrashDetectorAppLaunchedKey]; BOOL crashedTwice = [defaults boolForKey: kCrashDetectorAppLaunchedAfterCrashKey]; [defaults setBool: YES forKey: kCrashDetectorAppLaunchedKey]; [defaults setBool: crashedOnce forKey: kCrashDetectorAppLaunchedAfterCrashKey]; [defaults synchronize]; crashedTwice_ = crashedTwice; } - (void) appTerminating { NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults]; [defaults setBool: NO forKey: kCrashDetectorAppLaunchedKey]; [defaults setBool: NO forKey: kCrashDetectorAppLaunchedAfterCrashKey]; } In the Application Delegate : - (void)applicationDidFinishLaunching:(UIApplication *)application { RSCrashDetector* detector = [RSCrashDetector crashDetector]; [detector appStarting]; // Initialization stuff if ( detector.crashedTwice ) { [[RSPostcard sharedPostcard] clearState]; } } - (void)applicationWillTerminate:(UIApplication *)application { // Save data if appropriate RSCrashDetector* detector = [RSCrashDetector crashDetector]; [detector appTerminating]; } As fickle as the iPhone platform can feel, Parrish says that its tight-fitting restrictions belie the creativity it inspires. “Everyone wants garbage collection [for iPhone], but we all know that would make the phone terribly slow,” he says. “But to those of us who would be called old school, it’s like going back to the Apple II. It’s this restricted environment. CHAPTER 7: Postage 102 We’re used to 10 gigs of RAM and unlimited power,” he says, “but if you’re trying to develop an app that’s sophisticated like Postage, the memory management is nostalgic. Sometimes limitations make you produce your best stuff.” Ellis says he likes that it puts new developers and old alike on equal footing in the race for new ideas. “We’re given a clean slate as user interface and experience designers,” he says, “and it’s time to go back to the core ideas that computers were founded upon and redefine everything so it makes sense in our new world. I don’t have a tremendous amount of experience designing for the iPhone, but nobody does, which actually makes me right with the rest of the crowd out of the gate.” Homegrown Design To say that RogueSheep produced its “best stuff,” as Parrish calls it, doesn’t quite do justice to the massive graphical effort that went into Postage’s postcard templates. “Everything in these templates is me-generated,” Ellis says. And he’s not simply talking about the interface, though all the buttons and nav designs are his, too. “The textures, the components lots of them are made from physical objects, all scanned and set up,” he says. The 50 templates that come with each copy of Postage are full of mementos. “A photo of a flower I brought in, or a paper I made when I was nine in class that I’ve been holding onto because I'm a pack-rat,” Ellis says. Others contributed, too. “Chris’ wife Liz took their kids down to the beach and got shells; Chris’ son Aiden has one of his shells in a template in the travel category,” he adds. “Everything in the Cutouts category was all cut from large sheets of construction paper by Liz and scanned into the computer.” One of the creative challenges the templates presented was how to give users a lot of options, but still maintain a common visual language throughout. “The templates are already a scattershot of different styles and flavors. I constantly fought an internal battle over how different each template looked from one another,” says Ellis. “There are so many different styles all packaged together.” (Figure 7–5 shows the construction paper elements of the dinosaur theme. Figure 7–6 shows the finished product.) The team was careful to organize all the app's graphical elements in a way that would be conducive to easy, fluid user interaction. “We made the decision early on to have the templates and backgrounds be different assets,” Ellis explains. “It makes it easier to put your photo into fun shapes, like this dinosaur mouth. It also lets us animate the card without moving the background on the iPhone.” The distinction is part of what Ellis says is “underlying concept” of Postage: “You’re working on a card, and the card should be separate from the background.” [...]... paradigm house of good design, much of the distinction they achieved with Postage came from avoiding the iPhone s general user logic and replacing it with something purpose-built “We really thought about Postage from the ground up, tangential to the existing iPhone interfaces,” says Ellis “What’s the right thing for the user?” The answer to that question was sometimes to fall back on iPhone controls and... (See Figure 8–1.) It’s a model iPhone client for the desktop version: quick to update its database, easy to navigate, beautiful to behold and massively scalable Figure 8–1 Library for iPhone is a model client app, and shares aesthetics with its desktop version 109 110 CHAPTER 8: Q&A: Delicious Library Delicious Library for iPhone was built by Wil Shipley and two outside UI designers Shipley is the founder... Delicious Monster Tags: Client App; Visual Design; Memory Management; Efficient Code URL: http://delicious-monster.com/ What the iPhone lacks in size it does not have to lack in luster Delicious Library, the companion app to the Mac desktop program Delicious Library 2, allows a user to sync his Mac’s database of scanned books, movies, albums, and other sundries via iPhone, complete with Amazon information,... framework for their ADA-winning app, AccuTerra.) 107 108 CHAPTER 7: Postage By the time RogueSheep gets back to building its own pet iPhone apps, the development landscape may have changed Tools like WebApp.net are allowing developers with no C programming experience to mimic the iPhone GUI on their web sites, eschewing any need to build a native app The kit provides items based on JavaScript and CSS, works... bound to find justice and get in the store Building On Postage The iPhone has also proven itself to be creative catnip With desktop development, the possibility for invention is so limitless that it’s almost enervating It’s also been well-worn in the 22 years since NeXT licensed Objective C from a software company called Stepstone But the iPhone means a new user experience for a new kind of computer, something... of old ones “Developers have seen their imaginations run riot with ideas for software that might have been too small for the Mac, but fit the iPhone just right,” says Parrish RogueSheep is no different “We have many whiteboards here, full of growing lists of apps,” he says “It’s hard to pick which one to do.” The team says they find the new ability to work with video on the 3GS compelling, but they...CHAPTER 7: Postage Figure 7–5 The actual paper cutouts made and scanned by Parrish’s wife for the “dinosaur” template Figure 7 6 The finished template “Everything is from us, by us, and made with love,” Ellis says 103 104 CHAPTER 7: Postage For all the praise among developers and designers for Apple’s UI kit—the standardized controls, the carefully crafted buttons—what truly sets Postage apart is how its... obviates Apple’s approval process Other programs like NimbleKit by VolnaTech give you desktop software that allows you to build a native iPhone app using popular web languages NimbleKit works by providing its own API on top of Cocoa touch, allowing users to build apps from a HTML templates with embedded JavaScript, and then submit them to the App Store Web-language evangelists see this kind of tool... weekend we were going to put [Postage] in the app store, I came across something online that said that people who made apps with pictures that look like Polaroids got rejected for copyright infringement At the last minute we yanked those templates.” Then he came upon other Polaroid copycat apps soon thereafter, confused (Figure 7–8, the original icon for Postage, which was scrapped because of its use of... brainstorming, 30 to 35 weeks of labor, months of sticking half their team on the app full time, and 10 days of waiting, they were crestfallen “The first time we were rejected, I felt like, ‘No more iPhone apps!’” says Ellis “It felt like you didn’t get into college.” But being a pro developer has its perks The RogueSheep guys were able to open a case with friends at Apple’s Developer Support, even though . Postage 100 The Circling Shark While many iPhone developers run light apps that never come close to exceeding the iPhone s 64 MB allotted memory for apps—which is effectively only 20-30MB in practice,. client for iPhone, and the Twinkle Twitter client by prolific game maker Tapulous, creator of the TapTap line of iPhone games. Yet even with so many adroit developers building for the iPhone, . Written by an industrial design firm in Palo Alto called Ideo, it’s a screen-casting app for both desktop and iPhone. The desktop iteration, ScreenCaster, presents a small, iPhone- shaped bezel