Apple Aperture and Designing Software Interfaces With CSS
When Apple released Aperture, its new professional photo editing application to compete with work alongside Adobe Photoshop, it really turned my head more than most software does. The interface is just beautiful, the features are amazingly thoughtful, and I honestly don’t think I’ll be able to use it to it’s full potential but I’ll probably still buy it. Now how often does somebody say that about a software purchase?
After the application launched, we spoke with our friend and designer [name removed] who happens to work in the Aperture software group at Apple. He/she didn’t tell us much detail about the specifics of his/her part in the software, but he/she did tell us that some of the interfacing uses Apple WebKit, Apple’s open source web rendering framework. Besides Safari, Mail, and now Aperture, there are a ton of other applications out there using HTML/CSS rendering inside their desktop-based software on Mac OS X or other platforms. That makes CSS geeks like me happy. Very, very cool.
CSS As An Interface Language
Prior to Firefox taking off as a browser, not many people really dug into the innermushings of how the Fox puts its pixels on your screen in a cross-platform manner. It may or may not be common knowledge, but every single button, image, and text element that comprises the chrome (FF user interface, everything outside the HTML render box) is actually a combination of XUL and CSS. XUL (XML User Language) is a specialized XML dialect that lets people define semantically-rich user interface widgets, which then allows the CSS to completely style them.
If you’re thinking about writing a Firefox extension, it’s really not that difficult because the extension’s interface can be designed using CSS and XUL. Last February (for my final college class) I did an independent study where I coded and designed a sample Firefox extension that lets the user lookup words in a dictionary. Not very complicated, and it’s already been done before, but I thought it would be a good exercise. I wrote about the process and it became a nice little tutorial for Googlers looking for Firefox extension how-to articles.
Aperture
Apple Aperture is gorgeous, absolutely stunning. I started thinking about how amazing it would be if more than just a small part of this software’s interface was designed in CSS, like, if the entire thing was. Imagine Cocoa or C API hooks into an XUL interface, that could be easily designed using CSS. Interface Builder could be modified so that all the interface widgets you drag into your application would write out XUL code, and then you can apply stylesheets to different sections just like you would with the FF chrome or a website. Right now Interface Builder writes out XML to NIB files but I’d like to see the proprietary (I believe) NIB file format moved over to XUL, and then we could have some really sexy cross-platform stuff coming out.
CSS-Based Designers
Right now, most CSS coders/gurus get work to code websites, but what if software engineering teams started hiring them to design desktop application interfaces too? That would really bridge the divide between “engineers” and “designers” that we know all too well.
