NYPL Labs

I have finished the design for the new look of the Digital Gallery. For the most part, I’m totally excited about it. I’m a little sad that one or two ideas didn’t pan out, and I wish I could have come up with better solutions. But this is but the first of a few Digital Gallery revisions (as I’ll discuss further down), so for now, here’s what’s happening:

Home Page
While the elements of the home page have gotten more polished, the concept hasn’t changed much from its initial mockup: the main parts – the Gallery pick, the search box, and the browse list – were there from the beginning.

The next pass moved the big elements around a little, and then finally settled them in their proper places. All that was required for the final design was a little refining.

Collection Guides
As it turns out, our users often start with the “home page” of one of our collections. So why not redesign those pages to look like the home page? I reused the vocabulary of the home page to place the elements of a Collection Guide page, and put the red stripe and some navigation at the top of the page, so as to designate it as a “secondary” page.

Oh, the navigation. Don’t get me started. What I had in my head just never really made it successfully to the page/screen. Maybe that’s because it wasn’t super-clear in my head. I will be doing a bit more research into alternative navigation paradigms after this redesign happens. In the interim, I hope a nice clean line of text will suffice for offering the user some broad ways to browse around.

Object Page

I had been designing the “object page” (the page that displays the individual image) for a while. I knew what I wanted it to do, but couldn’t come up with a good presentation.

(Incidentally, this is how I worked out the functionality. I love tracing paper!)

This is where I thought a lot about the concept of offering the user a “workspace” where they could interact with the image in different ways. The idea is for the user to click on an image and arrive at a page that displays just the image, the caption, and some basic controls (enlarge, select, and so on). The user can then open and close related menus, tools, and content such as related images, code for embedding the image in another web page, and full metadata records.

Object page

with expanded metadata

with related images and titles

with embedding code and “search like items” box

with all of the above open at once

We have some other functionality plans, not only for the object page, but for other parts of the site too, that are slated for what we’ve been calling “Phase 2.” (I suppose we could have used the names of mountains or big cats or something to designate our releases. Oh well.) Phase 1 is about making the Gallery’s current offerings better organized and better looking. Phase 2 is about adding functionality that requires some programming on our part.

So there it is. I’m going to start transforming all this into code now, which I genuinely enjoy just as much as I enjoy designing. (Weird!) Hopefully my posts about the coding process will remain more or less as coherent as my design process posts. Wish me luck!

(Fun Fact: this site was designed while listening almost exclusively to “Minimal,” by the Pet Shop Boys. If you don’t like the design, I’d like you to blame them.)