|Make a Smilebox photobook|
From time to time I like to play a little game – what was I doing this time last year?
Last year, while still working full time, onsite at Smilebox, I tasked myself with creating the first square, 12×12 photobook. Up until that time, we were using a 1024×768 model with a page turning algorithm that flipped the pages up from the bottom right hand corner. It was a solid model, but customers wanted more flexibility and designs that they could print out for use in physical scrapbooks (hence the 12×12 format).
I challenged myself with the following list of design specs:
- The design must have a variable number of photos
- The user should be able to edit both font aligment, and font color
- Page layout options should provide a wide range of photo sizes and orientations
- The colors provided for both fonts and backgrounds should be fresh, but popular
- The design should be clean, simple, and easy to use
- Images, if not already full-bleed, should be zoomable.
- The user should be able to turn on/off any and all minor page element embellishments.
With a strict two week design production schedule, I set out to create this entirely new design model by modifying our existing AS2 class codebase to work with the new dimensions and page flipping that would be required in all future square books. The rework of the code took the majority of the time, and required the addition of several functions – including the short-lived page zoom function that actually zoomed each page in and out, allowing the user to delve deeper into the design. It was also one of the first designs in which I was able to begin the transition from using the very ugly, chuggy, and chunky built in Flash tweens to the lighter, friendlier Penner/Fuse-based tweens.
With much of the book code complete, I began working on the “Smileboxification” process of the individual design. The design was built using Flash 8 in conjunction with an XML companion file that provides the UI controls shown in the client for user customization.
Stumbling blocks: as with any design, the driving question as I built “Story Book’ was — “how easy/hard is this going to be to use?” The design required many UI tweaks, even after it shipped, as a limitation of the technology available at the time (such as the “click me” text that appears on zoomable images which I have, in recent months, been able to stow for a much preferred custom cursor icon which lends itself well to localization and a more refined aestheticism).
The result is a fun to share, versatile photobook that acts a great showcase for user’s photos/video.