This short is one of those tests.  Shot with a Canon 7D using an EFS 17-55 zoom, Manfrotto tripod with fluid head mount. (I’ll put that to use later …;-)

(Update: Wow, lot’s of iPad users out there already … thanks for pointing this out. If you’re here on an iPad, Vimeo has not released the embed code for iPad video playback. Until their new HTML5 version is out – soon they say – click on the Fountain link below. The HTML5 version plays fine from their website on the iPad. Sorry for the inconvenience tablet crowd.)

(Update II: This post is now using the new iPad-friendly HTML5 embed from Vimeo so it works great on the iPad. Problem is it looks for Flash on the desktop – which I’m allergic to. So, trying now to figure out how to default to native HTML5 presentation on the desktop …. gah.)

Fountain from Applied Design on Vimeo.

We’re still here.  Just buried on a project.  We’re within a couple of weeks of launching our first designed-from-scratch iPad app and it’s a pretty much 24×7 effort (including the India team).  App will remain a mystery for now, but we are looking for beta testers prior to launch.  If you have an iPad, watch television on a regular basis, live in the U.S. and are willing to give us some feedback let me know.

We’ll make an announcement here (among other places) once we hit the app store.

Burn a candle for us!

I’ve been working on a project for weeks now involving a high-def (H.264) video of an iPad application (for a pitch) and the problem has been how to build something believable from something you’ve never even seen (in real life).

As an example, part of the video involves using the iBooks application.  The only source materials available before Saturday to work with were low-res screen shots from Apple, and their Guided Tours videos (which is why I was obsessed by knees the other day).

Specifically, in order to seem at least believable (or rather in order to not distract from the story we’re building by not completely rendering the actual interface) I needed to create the weird “secret library” spinning bookshelf effect that happens when you touch the Store button in iBooks to toggle to the online bookstore.

There are always those that will brute force through a problem like this – 50+ frames of skewing graphics in either Photoshop or Illustrator and laying off one frame at a time.  But I was looking for something a little more elegant, something that could be repeated in a render-modify-render work cycle.

The first attempt was in Cinema 4D using a modeled “shelf” object, UV unwrapped and texture mapped with a front-side-back graphic created in Photoshop (you can see this UV map in the gallery above).  The problem was twofold: it was very difficult to match the luminance of the 2D before screen, with the animation frames, and the resolving 2D after screen.  And secondly, the texture map – while it looked great in Photoshop – lost resolution in the modeling environment.  I’m sure it’s me – I’m not the greatest modeler – but I couldn’t figure out how to get the resolution back and since the target output was H.264 it needed to be there.  And the old motion-blur trick is a cop-out.

I have never used the Extended part of Photoshop Extended, but – on a whim – I gave it a shot and was pleasantly surprised.  The 3D tools in Photoshop can’t hold a candle to a package like C4D, but if you’re only modeling a simple box, it’s actually pretty great.  I set up a 50mm camera (not to exaggerate the spin of the object in the frame), a single front light (which seems to be how the object is “lit” on the iPad), and mapped the high-res front, side, and back graphics to the box.  The animation couldn’t have been simpler: just a 180 degree rotation in 1.5 seconds for around 45 frames (at 30 fps). (See the gallery above for a shot of the Photshop 3D environment.)

The best part about doing everything in Photoshop seemed to be matching the 2D before and after screens to the animation frames – they were much closer than what I got using C4D.

Bringing the frames into After Effects as a JPEG sequence made it easy to drop into the project, scale and match to the rest of the piece.

I’ll be posting the finished project at some point here, but suffice to say that the final animation looks pretty damned close to the real thing.

As best I can tell.  I haven’t seen the real thing yet …

With the impending release of something book or tablet-like from Apple (next week) I thought it would be interesting to pull the following story from the archives.

Allison’s Book was the first story in a trilogy (never completed) describing the use of new consumer electronic devices in the near future (long past now). This was written I think around 1991-92 and describes events in the distant technological wilds of 1998. Suffice to say, it’s now 2010 and we’re still not there. Keep in mind, this was written just shortly after the Apple Newton appeared and long before things like iCal (2002), the consumer Internet, browsers, the iPod, desktop / mobile synchronization, home networks, etc. were in play.

It would be pretty funny if the name I used for Allison’s Book – the iBook – did in fact turn out to be the case. Gruber likes it.

It is the year 1998.

School is starting in another week and Allison has, like the other tenth graders at her school, appeared to collect her textbooks for the year. She’s on her bike. That’s no problem because her textbooks – everything she will need for the year, including all referenced texts, workbooks, and quizzes – are given to her on a small disk that costs her about $20. She fills out the check provided by her mother, drops the disk in her small school bag over her shoulder – where it will be carried with her the entire year – and heads back home to peruse the year’s texts.

Allison’s new school disk can be read by either her desktop computer in her room, or her portable electronic book she was provided with by her school her first year there. The day is nice so she heads for the front porch swing with the portable. This machine can be held in the hand or propped in the lap much like any book. It runs on rechargeable batteries charged by the holder on her desk in her room. The iBook ¹, as the kids so fondly refer to it, has two screens, both color and both as easy to read as the books still on the shelves in her parents house – easier in fact, because the screen adjusts its backlighting automatically for the ambient light, even in a dark room or bright sunlight.

Allison, as usual, has also brought out her folder of other disks that her parents have bought for her over the years. In the small portable file in her hand is the equivalent of a small town library in intuitively organized disks that include, among other things:

• a comprehensive encyclopedia
• an unabridged dictionary with full word origins
• a thesaurus
• roughly the contents of the ‘Harvard Five-Foot Shelf‘, including most of the classics, all of Shakespeare and the primary texts of all the great religions
• other general reference books she uses on a regular basis ²

There are two slots for disks in her iBook.  Allison slips her new school disk in one and opens the device as you would open a book.  As she settles back in to the porch swing the power light blinks on, the disk whirs in the drive, and the title ‘page’ appears on one of the screens in front of her – crisp and clear as a book page, the contrast adjusting quickly to the filtered sunlight on the porch.  The small speaker icon in the upper right hand corner of the screen tells her that this year’s textbooks are finally in full 16-bit stereo.  Yay!  As she pulls out her small headphones, she reads on:

Turning the ‘page’ by thumbing the button at the bottom right of the iBook, Allison moved on to the orientation section as a rather hokey recording of the school band sounded over her headphones playing the school song. “Keep practicing gang,” she thought as she tapped the music icon with the iBook’s stylus and reached for her disk folder. Sliding in a music disk (one she borrowed from her father’s collection), another icon appeared on the screen and, tapping it, it began to spin as a favorite study recording for her – Beethoven’s Piano Concerto No. 3 – slowly swelled in the headphones in breathtakingly clear stereo. Allison pulled down the volume icon a little with the stylus and settled back again to read.⁴

Back to the orientation, Allison tapped the calendar icon to take a look at her school schedule. The entire school year popped to the screen with colored bars representing holidays or exam weeks. “Yuch,” Allison thought as she noticed that her birthday icon fell on a Wednesday during a school week. Tapping on the first day of classes, a schedule for that day popped up, with those classes with reading assignments highlighted in red. Later Allison would print out the week’s schedule with assignments, but just out of curiosity she tapped on the French I class block to check out her first reading assignment.

A small window popped open with a description of the assignment with a button labeled ‘Begin’. She tapped this button and on the opposite screen of the iBook the introduction to her new French text jumped to life with the title appearing slowly as a full motion color video shot of the Paris skyline began panning by below. As the Eiffel Tower disappeared to the left the Cathedral at Notre Dame appeared on the Seine to the right. Allison paused her Beethoven and tapped the music icon on her new French text thinking “boy! this will be so much more fun this year with full stereo!”. Immediately Bizet’s Carmen began. The combination of the panning video and the French opera sent a small chill up Allison’s spine. Her dream was to visit Paris and it was all she could do to refrain from beginning this lesson – learning everything she could about her dream city – right now.

With excitement, she noticed another icon by the spinning music icon that she knew would tell her more about the opera she was listening to, about the composer Bizet (including a spoken pronunciation of his name – this year would be much more productive in French with spoken pronunciations of all words just a stylus tap away) – about the sights in the panning video, etc. But she closed the text with the stylus and, unpausing her Beethoven, watched as the window shrank back to the button she had tapped to start her French lesson, which was now labeled “Continue”.

With a tap, the day’s schedule shrank back into the calendar. While she was thinking about it, Allison tapped on the Thursday of the first week of school to enter the dentist appointment that her Mom had scheduled – a sore point with Allison because it was during school hours. Tapping the appointment button for that day, she wrote the time of the appointment on the screen in longhand and the short description “Dental appointment”. A confirmation window popped up with her handwritten note converted to display type and the message:

Allison tapped the “Yes” button (as the computer made a digital note to prompt her to download that day’s in-class lecture) and then wrote down the time she wanted the iBook to inform her on that day that it was time to meet her Mom in front of the school. If her iBook was open at the time, a small icon would pop up on the screen with a reminder. If the iBook was closed, a small alarm would sound on either the iBook or her computer in her room.⁵

Allison would finish updating her calendar and to-do lists later. She now opened the curriculum outline to glance over all of the texts, graphics, videos, photographs, maps, etc. contained on this year’s disk. Some, highlighted in red, were not ‘unlocked’ to her yet. Access to various materials (especially the answers to the regular quizzes!) were regulated by the teachers’ machines in the classrooms and updated whenever Allison attended class and dropped her iBook into the desktop holders there or dialed into the school network from home. It looked like a fascinating year, especially since they now had sound and other improvements that made her texts more like the fantastic college texts her big brother had shown her.

Since the geometry text had been specifically mentioned in the introduction, she opened it with a tap and, riffling through the ‘pages’ by holding down the right thumb key on the iBook, ⁶ she stopped at the first intimidating diagram she could find to check out the new dynamic graphics features.

This was a diagram accompanying a discussion of eccentricity – the ratio of distance-from-focus to distance-from-directrix – in ellipses. Allison tapped the words ‘focus’ and ‘directrix’ in turn to bring up quick definitions of the two words that she barely remembered from last year. Then, closing the two definition windows, she returned her attention to the diagram.

The ellipse was in color and overlaid an X and Y axis. Underneath the diagram was an equation that represented the pictured ellipse. Last year’s geometry diagrams were static, but Allison had heard how this year’s diagrams would be dynamic. In the equation below the diagram Allison wrote in a different coefficient for one term of the equation and watched in fascination as the ellipse grew taller. ‘Grabbing’ the right side of the ellipse she ‘dragged’ it to the right and watched in further amazement as the coefficients in the equation spun by in response. In only seconds of ‘play’ Allison had a real grasp of how the equation for an ellipse ‘worked’. She was eager to further experiment with this and the other diagrams in the textbook.

“Later,” she thought, as she tapped ‘Close’ and the textbook collapsed back into the curriculum outline. Allison’s parents had commented on how much less TV she had watched last year – the first year she had had an iBook and textbook disks in school. And with this year’s improvements – like these cool geometry diagrams and the wonderful sound – she knew the television would be even less attractive. Compared to her iBook her Dad’s old textbooks stacked in his room were terribly boring. No wonder kids back in the ’80’s watched so much TV!

The Beethoven piano concerto wound to its climax as Allison wandered back through the house – iBook under her arm, conducting in the air – to get a coke. “School is not until next week,” she thought, “time for a little more R&R”.

Allison was reading an interactive novel from Illuminated Books – one of her favorite interactive book publishers – and had an hour before her softball practice. Her family had collected a fine library of interactive literature over the years. Her Mom often marveled at how the small case in the living room contained more works that did the town library when she was a child – and how their little library down the street now carried the equivalent of the Library of Congress back then. And it was all there for her daughter to use whenever she wanted, in her studies or just to satisfy her insatiable curiosity.

Allison was finishing up Robinson Crusoe by Daniel Defoe – a classic – before school started. This was a favorite of her father’s as a boy and, despite her objections when he had given it to her as being ‘too boy,’ she had enjoyed in greatly. Mostly due to the wonderful graphics and sounds that the Illuminated Books people had compiled to accompany it. She looked forward to again immersing herself in the now familiar world of Crusoe as she walked out to the back yard – bathing suit on, coke in hand – to work on that essential back-to-school tan.⁷

The Illuminated Books people did their best to provide a complete experience for readers of their interactive books – most of them simply classics enhanced extensively with glosses, timelines, maps, sounds, music, photography and video. This book – Robinson Crusoe – had been for Allison no exception Not only had she enjoyed the text as originally written, but she had learned so much more about other things like the period DeFoe wrote in, the period Robinson Crusoe lived in, the character DeFoe had based Crusoe on (Alexander Selkirk), the islands of the Pacific, sailing and navigation, survival, religion, and on and on. The novel had been a springboard for forays into all of these fascinating areas, made pertinent and bound together by the fabric of the wonderful old story.

Allison also enjoyed the environmental touches Illuminated Books added (most readers either loved or hated them) like the background sound effects you could play while reading. She settled back in the lounge chair and, tapping a sound icon, the soothing rush of waves on a beach came clearly over the stereo headphones punctuated by seagulls’ shrieks and the clattering of rocks as the waves retreated. Closing her eyes a moment, she was once again amazed at how the sound of the waves – familiar to her now – could bring her right back into the world of this lonely introspective man. Other readers preferred the video segments of the disk, showing the barren coastline of a small Pacific island much like the one Crusoe would have been stranded on ⁸ to get them into the mood of the book. Another video segment ‘took’ the reader on a short walk through the jungle to see the bird life, with brief glimpses of Crusoe’s wild cats and one of this goats bounding away through the huge green tropical leaves, bleating wildly.

These segments were fun, especially when reading certain sections of the book, like the tropical storm video when Crusoe sat outside his cave, so terrified after the earthquake on his island. But Allison most enjoyed the sounds she could call up – the wave and soft jungle rain and bird sounds. The producers left just enough to the imagination so that the books wer estill an individual experience; there was never a picture of Robinson Crusoe in this book for example. Allison had her own vision of him.

The ‘glosses’ of the text were fascinating. Allison had pursued the branches on navigation – both modern and of Crusoe’s time – with relish. With the search capability of the iBook she had found all references Crusoe made to navigation ⁹ and even worked with the program to envision the layout of Crusoe’s island, as he explored it and built new structures, by adding to a color map of the island maintained by the book.

Allison began reading. Crusoe was applying himself to the education of Friday. In the distance, the waves rushed the shore, the rocks rattled back with the ebb, and a breeze quietly rustled the palm trees. Allison imagined Friday and Crusoe lounging in the cool sand, and read:

“It’s funny,” Allison thought, pausing, “I’m almost like Friday myself, asking questions of my iBook about this Robinson Crusoe and his times, what this or that word means, what this mythical place England was like, so far over the seas (and so far back in time for me), what flora and fauna one might find on a Pacific island, what a tropical storm sounds and looks like, and everything else I’ve learned through this one book.”

It wasn’t long before and icon popped up in the corner of the screen and a small tone sounded over the waves. Softball practice in half an hour. “That reminds me,” she thought, “coach was unsure about the rules of pitching distance for women’s softball.” Allison slipped in her Encyclopedia Brittanica and looked up softball. “40 feet. And 46 for men,” she read. “It’s almost scary how much information is in these things,” she thought as she packed up to go back inside. “From Paris to and island in the Pacific, from geometry to softball diamonds. A whole world in a bookbag!”

There are great arguments for all of the traditional forms of rapid prototyping: paper, Visio, Photoshop layer comps, XHTML mockups, etc. But the two methods we’ve come to use more of over time are not the most obvious – certainly not the easiest.

As discussed in a previous post (here) we use Keynote (on the Mac) a lot for wireframe and rough prototype development. What’s key is the ability to work at pixel-perfect scale (to the target environment) and (as with Viso and other layered environments) to “page” through comps with perfect image registration. Unlike Viso (and Omnigraffle) I find Keynote much easier to organize and craft into everything from high-gloss presentations and walk-throughs for clients to hard-core detailed wireframe specs (pixel-registry) for designers and developers. Decks can be output in everything from Powerpoint to Quicktime to XHTML to PDF.

The other rather unexpected tool we use – especially for high-impact conceptual presentations – is Director. I’m a Director hack from way back and just can’t give up on it although Flash has largely eclipsed it these days. We’ve created iPhone (and other app) presentations that look and feel damn near like the final product – including interactivity, beautiful UI animation, pixel-perfect resolution, etc. We’ve even built into presentations the ability to trigger environmental conditions such as orientation, shaking, voice/audio input, etc. to demonstrate app response (see above comp).

This takes a bit of work, but the results can be outstanding. Since it’s so true that the later in a production process you change design, the more expensive it is, I feel like it is often justified – especially if you’re doing something new or weird – to comp up as realistic an experience of a proposed app as you can. Director does this in spades (using the same assets – usually out of Photoshop – that are going to go into the app anyway) as early in the process as you want.

It ultimately boils down to best tool for the job. I’m the first to admit that when starting a new UX project the first couple of hours are actually on the deck with a big pad of paper and a beer. But when you need to start getting others on board – product managers, investors, partners, designers, developers – the extra effort in prototyping / visualization using one of these tools usually pays off handsomely.

USC has launched dedicated device landing pages for all of their smartphone class devices in their network using the new icons and device landing pages designed internally.

The default mobile landing page can be seen here.
The Blackberry landing page here.
And the Windows Mobile device page here.

ADG performed all the UX, design and graphic production for this application which launched in July ‘09. Most of the app is actually HTML presented in an Objective C (iPhone app) wrapper which serves to capture the user’s location on launch. The challenge was to present a web app that looks and feels like the experience most users are familiar with in a native iPhone application.

Download the app here.

A sample of the design specification created by ADG can be downloaded here.

ADG worked with the exceptional development team at Sofmen, Inc.

Click the graphic above to see a couple of sample project fly-throughs.

If you are going to be at Ad:tech San Francisco this year, make sure you catch Steve Hayden’s keynote on Tuesday, April 21. We think it may be one of the more interesting presentations.    ;-)