Zen Photo Web Photo Album

zp_banner

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.

Concept

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

zp_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

zp_nextprev_img

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

zp_nextprev

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:

window

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:

menu

Demo

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.

Afterthoughts

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.

25 thoughts on “Zen Photo Web Photo Album”

  1. Nik says:

    Now this looks good.. and with cool fresh-air visuals from Mr Asmussen, it’s going to be a winner!

  2. Kyle Jones says:

    Lets just hope it doesn’t get confused with Creatives new Zen (Micro) Photo . http://www.engadget.com/entry/1234000630054279/

  3. Levi says:

    I’ve been watching the development of zenphoto for a little while now and it looks like it’s going to be a fantastic peice of software. I can’t wait to get my hands under the hood and start developing a few styles or plugins for it.

    Your work on this project has made all the difference Joen.

  4. It’s been a year since I talked about wanting “a proper gallery solution”:http://binarybonsai.com/archives/2004/09/10/gallery-woes-yet-again/, I can’t wait to try out ZenPhoto.

    Great job, the both of you!

  5. Tristan says:

    My Pingback didn’t work, so here’s a manual one.

    “trisweb.com update on zenphoto”:http://www.trisweb.com/archives/2005/08/23/update-on-zenphoto/

    Or, “view Joen’s theme on the demo gallery”:http://www.trisweb.com/zp/

  6. Tristan says:

    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 😉

  7. Joen says:

    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 🙂

  8. Rogier says:

    Looks very promising.

    And with the new Plogger.org coming soon, we might just have 2 great web photo albums 🙂

  9. Joen says:

    Three. You’re forgetting “iPAP”:http://rebelpixel.com/projects/ipap/ which is also looking great. The triad will change the face of the web, I’m sure. No more Coppermine, no more Gallery.

  10. steve says:

    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.

  11. Joen says:

    Thanks Steve,

    I say there are two options. Either wait for a week (my GUESS is there’s a stable beta by then), OR go with “Plogger”:http://www.plogger.org , which is also an excellent app.

  12. Matthew says:

    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.

  13. Joen says:

    Matthew,

    You can check out the admin here:

    http://www.trisweb.com/zp/admin/

    login: admin
    pass: 1234

  14. Matthew says:

    Nice! I like the Ajax (it is isnt it? I feel stupid if it isnt) inline description editing like in Flickr.

  15. Jonas Rabbe says:

    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 🙂

  16. Joen says:

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

  17. If Else says:

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

  18. khaled says:

    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.

  19. Bilal says:

    I love the theme. Very neat and simple. 🙂
    Can’t wait for the release.

  20. Joen says:

    Thanks Bilal,

    Neither can I.

    I hope people will customize the theme to hell and beyond, and modify it to suit their own needs.

  21. AkaXakA says:

    It’s fantastic.

    Can’t wait to use it for my own albums.

  22. Teddy says:

    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

    Teddy

  23. Joen says:

    Teddy,

    EXIF is not yet in ZenPhoto, but it has been planned, and as far as I know, it’ll be in 1.0.

  24. Teddy says:

    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.