Tom and I have been working on Frameographer on and off for about 6 months. Like our other products, it was created to scratch our own itch. We were dissatisfied with the current offerings in the market and we wanted to make something really great, something that we enjoyed using. I can’t tell you how much fun I’ve had making little movies in Frameographer.
I’d thought it’d be interesting to walk through the design process for Frameographer. We decided on the general functionality early on, but went through several iterations to get the UX just right. The app has 3 main screens: Home, Capture, and Project. I’ll walk through each, one by one, showing the initial concept sketch all the way to the finished product.
Home
Of the three screens, the Home screen stayed pretty true to how we originally designed it.
Aside from the ability to Play from the Home Screen, everything else remained intact. Notice also the original title, Sequence.
We went straight from sketches to visual comps. If you’ve ever worked at a design firm it might seem bizarre to skip the wireframe stage, but that’s one of the advantages of making an app with just two people. We don’t have various stages of “approval,” so we get to skip some steps.
We started with a pretty heavy use of the linen texture, but ultimately phased it out of the design, for no reason other than wanting to create a unique look for the app.
We initially settled on the name “Frames” for the app, but as outlined in a previous blog post, we had to change the name shortly after launching, and went with “Frameographer.” The logo on the home screen uses the same typeface as the Glif logo (Estilo Script), with the same modified “f” that looks like a Glif.
In the final version, we flipped the + and (?) buttons, and enlarged the project thumbnails to make them a bit juicier.
Capture
The Capture screen was a tricky one. The first rough sketch imagined tucking all of the capture options in a pop-over.
We carried this idea into the mockups, where controls like Onion Skin and Manual Shutter were hidden in a menu.
It took a working prototype of this interface to realize how bad it was. It was frustrating to always have to open and close a menu just to toggle a simple control. Furthermore, the distinction between stop motion (manual shutter), and time-lapse (automatic shutter) was confusing at best.
At this point most of the iteration was happening in the code, so I don’t have any of the screenshots, but the screen below represents the final design of the Capture view. We were able to bring all of the controls to the forefront, so no menus are needed. We also implemented a big slider switch to make clear if you are in stop motion or time-lapse mode. Based on some feedback from user testers, we changed the (X) button to a [Done] button, as the (X) button was causing anxiety, thinking that tapping it would cancel all of the pictures you had just taken.
Project
The Project screen, arguably the most important screen, also saw quite a bit of iteration during the design process. This first sketch was simply a brain dump to get everything we thought was needed, functionality wise, on the screen. Clearly, it’s a mess.
This second sketch attempted to clean up the mess from the first sketch, and better organize the various functions.
This sketch was most useful in bringing to light a tricky problem: working with a 16x9 preview window. We knew we wanted to capture at this standard video ratio, but it is hard to fit nicely on a 3x2 screen. After some app exploration, we noticed that iMovie for iPhone solved the problem quite nicely, by putting the UI buttons to the left and right of the preview window, rather than above and below it.
I showed the above sketch to my wife, and she mentioned how it would be useful to see a “preview” of the previous and next frames in the sequence. A great idea, and what ultimately morphed into a full blown timeline.
We felt good about where the design was at this point, so we mocked it up in Photoshop. As you can see, aside from the linen texture and the pink (!) frame, everything stayed pretty much intact.
Another difficult aspect of the Project screen design was figuring out what happens to the timeline when the user taps the Play button. It would be distracting to simply have the timeline autoscroll, so we knew it either had to be hidden or changed in some way.
The above attempt was a simple scroll bar that would replace the timeline with a cross fade. We liked the idea of the entire timeline being accessible in one screen; this is especially useful for navigating projects with hundreds of frames. However, we thought the scroll bar was a little plain, and could stand to be improved.
One of the hardest things we had to figure out was the transition from the “zoomed out” timeline to the “zoomed in” timeline. It needed to feel elegant and natural, as the user would see it every time they pressed the play button. In the end result, there are several animations that occur simultaneously: 1) The frames shrink in size. 2) The frames fade out. 3) The “zoomed out” timeline fades in at a larger size. 4) The “zoomed out” timeline shrinks slightly. 5) The blue frame morphs into the playhead. 6) The translucent frame marker bubble fades out. 7) The frame marker slides up to the playhead. 8) The playhead moves horizontally to the correct position on the timeline. All of these transitions occur in 0.4 seconds, and the end result is (hopefully) a fluid animation that feels natural to the user.
Icon Design
The design of an app icon is one of the most important parts of the app. Not only does it occupy a prominent chunk of real estate on the users’ home screen, it is the primary way an app is represented in the App Store. The easiest way to signal to a potential customer, “hey, this app is high quality,” is to have a well designed, high quality icon.
We went through dozens of iterations before we finally arrived at a design we were happy with. It was the part of the app Tom and I were fussiest about, and nearly lead to the dissolving of Studio Neat (not really).
We started off by having a graphic designer friend take a pass at the icon. We didn’t give too much direction, other than showing her the UI of the app and giving her a few napkin sketches of icon ideas. We liked where we ultimately ended up (the bottom right icon in the above image), but after sitting with it for a few weeks we thought we might be able to improve upon it. Additionally, we were worried the blue frame looked too much like a picture frame, which could potentially confuse the function of the app to someone browsing the App Store.
Tom and I liked the idea of trying to incorporate the lowercase “f” from the Glif and Frameographer logo, which also resembles the silhouette of the Glif itself. We took a pass trying different variations. I really liked the brown kraft paper version, as it matched the packaging for our physical products, but in practice it seemed too random and did not match the look and feel of the UI. We ultimately settled on the version in the bottom right corner, but again, after sitting with it for a few weeks, it didn’t feel right.
We decided to pull out the big guns, and hired Iconfactory to take a crack at it.
We intentionally did not show Iconfactory any of our past iterations, as one of the reasons for hiring them was to gain a fresh perspective. We gave them a beta version of the app to play around with, and they responded with the above concept sketches. We liked the new directions, but felt that the page flip metaphor spoke more to traditional, hand drawn animation, rather than photography based animation like stop motion and time-lapse. This was an important realization though, as it sparked a new direction of incorporating a camera lens.
Although the use of a camera lens for a photography based app is somewhat overused, we felt it worked really well and at least hinted at the function of the app. We also really liked how Iconfactory incorporated the blue frame around the lens. After some back and forth, and tweaking of the details, we arrived at an icon we are very pleased with.
Onward and Upward
Hope you’ve enjoyed this peak behind the scenes. As with everything design related, it’s all about constant iteration until you get it right.
Tom and I are greatly looking forward to continue working on Frameographer. We stripped the app down to its essence for the 1.0 release, but plan to add some cool features in the future. Stay tuned.
March 28, 2012 / 46 notes
I do this kinda stuff, yet it still blows my mind that people do this kinda stuff.
Fascinating look at the design development process of a movie creation app.