Zen Photo Web Photo Album


Zen Photo is a web application that allows you to create online photo albums. It supports automatic thumbnails and individual image comments. It has grown out of a desire to create simplicity among a myriad of complex alternatives.

I’ve been looking for just such an application for quite a while. Until just recently the landscape for web photo albums was bleak. Hence, I couldn’t refuse an invitation to design the default Zen Photo template, and the administration section.


Built from the bottom up with simplicity in mind, Zen Photo tries to adhere to the very photo album guidelines I proposed a while back. It wouldn’t be fair if I didn’t at least try to adhere to these myself:

  1. Simplicity in Structure
  2. Simplicity in Interface
  3. Simplicity in Concept

While these were meant for the architecture of the application, they apply just the same to the design. They have resulted in a number of design and usability decisions on my part.

Simple colors


I have spent only two colours. A hue of blue, and a hue of brown. Adjusting the brightness of these produces several shades used for different areas of the design, yet keeping the overall impression simple (but not simplistic).

Large buttons


According to Fitts’ law, “The time needed to acquire a target is a function of the distance to the target, and the size of the target.” For important navigation areas, such as the “Next” and “Previous” image buttons, I’ve increased the size of the hit area, so as to make the buttons more obvious and easy to hit, for faster navigation.

Additionally, since I deem these buttons the most important part of a web photo album, I’ve gone to great lengths to make sure the buttons stay in place all the time. This means that the next/previous button area will always stay in the same top-right location. Additionally, the next button will always align to the right side of this box, and the prev. button will always align to the left. As a result, you won’t have to move your mouse at all, when quickly flicking through an album.

The use of concepts


Paginated navigation has been used by search engines for years (visit Google for an example). There’s no reason to re-invent the way this is done. So I’ve done what Google does, but with big buttons; the active page is bold, and the remaining pages are underlined hyperlinks.

Unstyled GUI widgets

Jakob says it, and I agree. Whenever not absolutely necessary, and especially for web applications, one should always use unstyled interface elements. This means plain push buttons, plain input boxes, plain check boxes, etc. The result is an instantly usable page that anyone familiar with an operating system knows how to use. As an added benefit, widgets will be styled in the same way as the operating system itself, for instance Mac OSX styles it with Aqua and Windows XP with Luna.

Text is scalable

If the text is too small to read, scale it up using plain browser controls. Text sizes are in percentages, and do as they’re told. This is also recommended by our friend Jakob Nielsen.

Administrators Area

The administration area is the heart of operations. It’s the face of the application part of the web photo album. This carries with it a few demands;

  1. It has too look like an administration area
  2. It has to feel empowering
  3. It has to look as though it won’t break
  4. It should brand the application

Making users feel at home

I chose to once again go with unstyled interface elements. This is an integral part of any web application because at least it will have those elements in common with real applications.

Keeping the layout liquid and the margins and paddings relaxed opened up things and gave the whole area a look of simplicity when it is in fact, complex. This helps new users learn, and experienced users feel in control.

Branding a box

Basically, there are many boxes or frames used in administration layouts, so what better place to brand Zen Photo than by styling these boxes? There’s a logo of course (the work of the author – Tristan – by the way), but making sure a simple design is still unique is not an easy task. There are only so many options, and most of them have been tried already.

The result was a colored box, armed with 4 borders, one of them thicker than the others:


Tabbed navigation

Using tabs for navigation has, for better or for worse, become de facto for web applications. They have the unique power to simplify the structure of huge amounts of information, yet allowing for sub-menus. This one is designed with large comfortable buttons:



Tristan has put up a demo which you can explore. Visit it to see the theme, and stop by the admin section (login/password is admin/1234). Just don’t mess up Tristan’s nice gallery too much with your newfound powers.


I’m making a living designing websites, usability and even web-applications. Most of the time, clients are open to suggestions for improvement. Other times, clients have unique needs and wishes for their designs — needs that I have to fit in as best possible even though I know it probably won’t improve the product.

Working on Zen Photo has been a welcome change. Tristan gave me completely free hands, both design-wise and usability wise. It helped out a lot that the structure was already sound, and his feedback was essentially something I agreed with upon first hearing – or simply something I had forgotten in the first place.

I’m rather proud of the end result. I trust that users who want a no-clutter web photo album will thoroughly enjoy Zen Photo. For people who want to use their own designs, I think they’ll be able to quickly modify this new default template to fit their needs.

What matters is they both have a good and stable launch pad.

18 thoughts on “Zen Photo Web Photo Album

  1. Also wanted to say thanks to everyone for all the support. We’re on the brink of sharing it with all of you, and I couldn’t be more excited.

    That and I forgot to subscribe to comments 😉

  2. Thanks Nik!

    Kyle, interesting observation. I don’t think it’ll be confused, though.

    Levi, thanks. I appreciate it.

    Michael, yes I know, it’s been a LOOOONG while! Finally there’s a solution. I can’t believe someone had to write it for us, bottom up! By the way, what are all those “tags” for (on your articles)?- Edit: Technorati.

    Tristan, feel free to send me a trackback. I’m having problems witih pingbacks currently. Oh, and you can subscribe without commenting in the sidebar 🙂

  3. Nicely done boys… I’m excited to see the ease of use that was originally outlined in your ‘needs’ posting Joen. I wonder if it’s worth waiting for…. I’m putting a site together for someone and they need a gallery section… think I’ll try and wait as long as I can so I can use your hard wored new piece.

  4. Wow, that looks great, I’d definitely like see more of the admin area (though of course I can wait until the first public versions out). Just best not mention *cough* Flickr and also *cough* Gallery, there must be some easy way to update image urls surely?
    Oh and that Plogger looks pretty good too.

  5. Very cool. I always like “walkthrough’s” of design decisions. I don’t have much to do with graphic design at work, so I try to gulp down as much as I can in my spare time.

    I like the look, feel, and simplicity a lot. Nice calm expression while still looking fresh. Like a brisk spring morning 🙂

  6. It is indeed AJAX. To my understanding that just means JavaScript + XMLhttpRequest access to the database. And yes, it’s pretty damn cool.

  7. I’ll echo the thoughts expressed by everyone here and congratulate you one producing what looks like a wonderful piece of work. Nice job!

  8. Must be liberating not having me bitching about NO TABS :). I really love the colour scheme you’ve gone for, and the default theme is very nice as well.

    I honestly can’t wait to see this released as I’m hoping it’ll do for photo sharing what wordpress did for blogging, and I can’t wait to see the integration between the two (via this plugin you’re working on), in fact this warrents a little post, be right back with a trackback.

  9. I’m also looking for a photo gallery to replace the one I”m using now, Exhibition Engine. It’s a neat one, but too much work to get the images online and exposed.

    The ones mentioned here look very interesting, but I was wondering if it is possible to show EXIF data using the Zenphoto?

    I didn’t see it in the demos, but maybe it’s possible.

    kind regards


  10. Hi Joen,

    Thanks a lot for the reply. OK, sounds positive. I saw in the forum that some people have implemented it in a way.

    I’ll have a look or wait till version 1.0

Comments are closed.