DigitalFusion is a digital photographic rental and post-production facility based in Los Angeles, California. Their goal is to help professional photographers evolve from conventional film photography to digital photography by providing a digital replacement to the typical photographic workflow.
I’ve been involved with DigitalFusion as a web design and development contractor since December 2005. My first project entailed design and front-end coding for two internal DigitalFusion web sites: a corporate intranet and a client/job management system. I worked with Sam Devore of TeachesMe.com on both of these sites. Sam programmed the backend with the CakePHP framework while I worked on coding and designing the interface (CSS, HTML, JavaScript and graphics).
Pleased with the results of those two web sites, DigitalFusion invited me to be a part of a very exciting project: the third incarnation of their flagship software application, DF Studio. DF Studio is a web-based program designed for professional digital photographers as an editing and job management application. It creates a powerful and collaborative workflow for the photographers and their clients.
In April 2006, I started working on the new version of DF Studio as part of a small web development team. My role in the project was a major overhaul of the UI (user interface). This visual upgrade involved realigning the web application to use modern web standards since the new design required a solid foundation of valid HTML markup. For example, where the previous version used tables for layout, the new version sports a CSS-only layout. These changes opened the door for new user-specific features such as background color choices, layout sizes, and much more. The power of the CSS-based design is that these various flavors and ways to view images inside the application are all drawn from the same source code files.
Cleaning up the HTML code and converting the layout to CSS wasn’t enough, though. The new version implements improved interactive tasks and navigation using JavaScript. (This use of JavaScript in tandem with server-side technology is sometimes referred to as AJAX). Thus, the popup windows and dialog boxes became in-page elements to improve the interaction and response of the program. For example, to edit the name of a client in the contact list, the “Edit” link now opens the form on the same page instead of a new page. After selecting “Save” the program sends the changes to the server in the background so that work can proceed immediately.
Besides all the technological changes, I aimed to improve the readability and usefulness of the application by providing better typography, icons, layouts, and color choices. One of DigitalFusion’s requirements involved a CSS-driven layout that would correctly display on anything from a typical laptop screen up to a 30″ Apple Cinema Display. The end-result is a collection of flexible and usable layouts that focus on the images. After all, it is a program for professional photographers…
Below is an example of the old jobs index page, and next to it the new one (these small images link to the full-size version).
The meat-and-potatoes of the application is image management. The post-shoot workflow includes uploading images, selecting images, communicating selections and edits to the client, and receiving feedback. I dedicated a large amount of time and energy to this part of the application, and I feel that it shows the power of CSS-based design. People viewing and managing images can change layout size and type, background colors, and toggle on/off different features. In the previous version, the only background color was white; now the default is black, but white and several shades of grey are just a click away.
Examples of the DF Studio proofsheet layout (old is first, then new—click for larger versions).
Image selection and management can also happen in full-size image mode. Changes to this part of the application included minimizing the header/footer areas to show more of the main image, and the addition of a thumbnail row across the bottom. The row helps navigate the current collection of images, rather than just moving back and forth with arrows and seeing each large image one at a time.
Screenshot of the new DF Studio proof (medium size image) layout.
DF Studio has many other features than those discussed here. Read more about DF Studio on the DigitalFusion web site. The bottom line is that by using web standards and JavaScript techniques this new version of the application is easier to maintain and customize, is more flexible to meet customers’ needs, and looks great in the process!
DF Studio version 3 was featured in September’s Picture Magazine (see DF Studio: The Best Next Thing), and received attention at the 2006 Photokina convention in Germany where DigitalFusion shared a booth with camera giant Hasselblad. Look for the public launch of DF Studio version 3 in early November at PhotoPlus in New York City. Here’s the official announcement from DigitalFusion:
“DigitalFusion is pleased to announce the release of DF Studio version 3 on November 2, 2006. Version 3 features a completely redesigned user-interface and extends DF Studio to users worldwide through DF Studio Link, a new easy-to-use upload tool.”
Along with DF Studio version 3, the DigitalFusion development team is launching new upload tools and a plugin for Apple’s Aperture software. My talented friend and colleague, Sam DeVore, is responsible for those two projects (with more to come).
Launch Date: November 2, 2006 at PhotoPlus.
Work Done: For DF Studio I performed front-end coding in XHTML/CSS, JavaScript and interactive design, template programming in JSP within the Java Struts framework, and graphic web design using Adobe Photoshop and Illustrator.
The Sensible Leader 