Charles Judge Paintings Case Study This site was created to showcase paintings by composer and painter Charles Judge, with a relaxed and flowing user experience. Design Challenges Some visual and interactive design challenges were how to show the 51 works in a very simple and straightforward manner, with a very minimal interface, keep some sort constant movement, and avoid many user-required actions such as repetitious menu selections and back and forth clicking. We also wanted to avoid the typical 'web page' type of user experience and encapsulate everything in a single display frame with a persistent navigational user interface. Given that only one painting would be displayed at any one time, we wanted to take into consideration how to transition from one painting to another. Charles wanted to the outside frame of the displayed painting to morph itself to the size of the next painting. This would add to overall flowing nature of the user experience. An important function of the site was to emulate a gallery "walk-thru" mode, where no user actions would be required to browse the entire catalog. Another real-estate related issue was how to present all of the paintings as thumbnails, avoid a tedious hierarchical menu, and still have plenty of room to display a fair-sized image of the selected painting. With the amount of detail present in the paintings, image and music load times were taken into consideration and it was important to provide an acceptable user experience for those accessing the site with modem bandwidths. In addition to his painting, Charles Judge is a musician and composer, so naturally the site was to include a background soundtrack - one that would evolve over time and respond to user actions. The site was to be treated as a work itself: self-contained and self-determined. To that end there are no user configureable parameters such as volume controls, walk thru speeds or state "bookmarks". Design Solutions The rich media requirements of this project made Flash the obvious choice for handling the compressed image and sound. Actionscripting would enable us to carry out the dynamic loading of selected images, morphing the painting frame from one size to another, and allow us to create an quasi-generative sound playback engine. The Canvas A painting canvas metaphor was chosen to display the site. This would display the selected painting in the center of the canvas, but still accommodate navigational elements. The site nav was placed far right, the painting nav was place far left. The Palette Neutral colors were chosen for the overall site - so as to avoid conflicts with the painting images. In order to suggest a more organic canvas quality, the display area is slightly shaded at its outer edges. Charles selected the three highlight colors for the site nav elements, which were given a 'contructivist' treatment which would contrast well with the biomorphic style of the paintings. Thumbnail Navigation Painting selection via thumbnails was an important part of the user experience - it needed to be flowing and it needed to minimize button clicks on the part of the user. An automatically scrolling list of thumbnails was created that, when clicked, would display a larger version of the selected painting in the main display area of the canvas. A gestural element was added to the scrolling list - the user can speed up, slow down, stop, or reverse direction of the scrolling thumbnails by gesturing with mouse pointer anywhere over the thumbnail list. A null point is indicated by in-pointing arrows in the center of the scrolling list. The main benefit of the scrolling navigation is the user can preview paintings before selecting them, can quickly scroll the list of paintings, and is able to arbitrarily select paintings in any order, without being forced into a simple forward/back nav paradigm. Walk thru Mode A walk thru mode is provided where the paintings are displayed for a short time before automatically moving to the next painting - no user action needed. Soundtrack Playback Engine The ambient soundtrack is comprised of 2 main components: an evolving background bed and single-event sounds that are triggered by user selections. In order to avoid long download times and playback interruptions common to streaming audio playback, we chose to avoid playing back a streaming mp3 file Instead a playback engine was created which would take individual "seed" sounds, randomize them, then schedule them for overlapping playback. This would enable us to run a continuously evolving, never-ending, non-repeating, glitch-free soundtrack over which we could trigger event sounds in response to user clicks or changes in the displayed image. Client: Charles Judge Role: conceptual co-design, Flash actionscripting Development time: 10 days Visit Charles Judge Paintings