Playing with image layouts

James Bridle’s portfolio site

James Bridle’s portfolio site

Do you remember Indexhibit? I’m very fond of it. It’s a wonderfully simple CMS for presenting visual work.

Indexhibit shines the light on the work itself, because visually it’s not trying to be interesting. It doesn’t look “designed”, and it doesn’t try to communicate much beyond the idea that it’s the work that matters.

I love its simplicity. The generic template that Indexhibit popularised made portfolio sites easy to use, but eventually fell out of favour. Time passes, trends change.

I wanted to compile a list of all layouts used by Indexhibit, but finding examples in the wild is tricky. The CMS cannot be downloaded any more, so instead I began researching portfolios which present the work in a simple, but slightly more unusual way. I was interested in image layouts that don’t necessarily have a hierarchical structure (something that one of the Indexhibit’s grid layouts did very well).

Christopher Paul Sharpe’s portfolio

Christopher Paul Sharpe’s portfolio

I found a few examples that used random (or seemingly random) image placement to simulate lack of hierarchy.

I was curious about automating a layout like that. How would it work if it were a part of a CMS, where you could never know how many images were going to be shown, and what their dimensions and orientations would be? How could you make it responsive?

RCA Design Interactions Show 2009

RCA Design Interactions Show 2009

deltainc.nl

deltainc.nl

I tried making something that could work with those constraints. The result is Moodboard — a tiny JavaScript library for presenting moodboards on the web.

Moodboard example — images only

Moodboard example — images only, configured to fill up more of the screen

Moodboard resizes the images depending on the available space and the number of images to show. By its nature it’s already responsive, no additional tweaking necessary.

Moodboard example

Moodboard example with a title

It has a reasonable CSS only fallback for situations when JS can’t be executed, and it’s only 7KB before minifying and gzipping. Download Moodboard here.