on: creating a new design style

Click to play the
Create your own photobook - Powered by Smilebox
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:

  1. The design must have a variable number of photos
  2. The user should be able to edit both font aligment, and font color
  3. Page layout options should provide a wide range of photo sizes and orientations
  4. The colors provided for both fonts and backgrounds should be fresh, but popular
  5. The design should be clean, simple, and easy to use
  6. Images, if not already full-bleed, should be zoomable.
  7. 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.

Advertisements

One thought on “on: creating a new design style

  1. I am a French designer
    (not yet interactive design but volunteers to learn it)
    and I discovered recently Smilebox
    I have tried almost all designs !
    I “felt in passion ” with :
    may be because I have a lot to say as “on customer side ”
    and also as creator
    I would like to work with Smile box ‘s team
    I feel very motived with this subject
    Sophie Sauzéat

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s