Apple Aperture-style panel and toolbar

While I was categorizing my photos the other day using Apple Aperture, I noticed there are some nice little UI controls on the panel that fit closely into the layout, hiding complex selections inside with a simple button.

See the image below:

The panel’s title bar are fully utilized by the three buttons inside, when clicked on each one of them, there will be a drop down menu with even more choices (this kind of button are actually called “disclosure button” as in Apple User Interface guide, which every serious UI/Interaction designer should read, again and again, and again…)

Also take a look at the control bar at the bottom of the panel, there are three buttons there with drop down menu too.

and here’s a very similar UI design from Breeze, notice how the button at the bottom occupies more screen real estate then Aperture’s one (overall speaking, Breeze’s UI looks too heavy and doesn’t feel as friendly as Apple’s, although I believe they share the same design concept).

If my memory served me right, Aperture is the newest application from Apple, so the UI design style probably reflect the newest trend of their research, and it’s indeed a very standard style of mac applications – simple and clean user interface, with all the necessary/advanced features just one click away.

I liked this design so much that I gave up categorizing the photos and tried to implement it in flex (this is the necessary evil of a software developer…)

After a couple hours of hacking, I got something like this:

As seen in the image, it’s basically a standard flex panel, with TitleBar and ControlBar on top and bottom of it, but of course all the bars are heavily customized to incorporate the buttons and various style settings.

Currently the buttons can be aligned on left, right, or middle, but actually user could put pretty much anything they want in there (like a combobox, date chooser, PopUpButton…you name it)

My next step will be focusing on the TitleBar, trying to make it as flexible as possible, so user can put standard min / max / close button there, or, they could put buttons with drop down menu just like Aperture.

Side note, recently while playing with Flash CS3, I also noticed some nice new UI controls there, which helps user to better utilize the screen estate, I probably will spend some time on that too (if I ever got another free cycle)