Saturday, June 25, 2016

i'm not a print designer but i play one on the web

It's Porchfest season! Besides helping Somerville's Porchfest website survive the onslaught, I've been doing a ton of design work for JP Porchfest.

Last year we started making 11x17 Porchfest Poster Maps to have at various locations (one part of me thinks everyone should "save a tree" and have people just use our web/mobile site, but there's still something that attracts people to the physical artifact.) With 70-80 porches and 100-200 bands, getting all that information on a sheet of paper is a design challenge.

I'm not a print guy, and the information was already online, so I created a web page to use as raw material for the page layout. One trick is how I used the (somewhat obscure) CSS property "zoom" to work at 3x size, to account for how print is 300dpi and the web tends to be more like 72. I then used that phantom.js trick to make a screenshot, even though the page was much bigger than my screen.

Here was last year's result:

I like the bold title on block schedule site. That was really a way of me coping with a layout issue, the block schedule "wanted" to be skinnier than the page, but the end result was striking.


I did a lot of work with the iconography, both highlighting sponsors and figuring out how to show performance sites that had toilet facilities.  (Near the end of the work process, I got told I needed to put in a lot of acknowledgements, hence the odd jumble at the bottom, but I think it kind of worked.)

Observing people using the posters in 2015, I realized there was a usability issue; people had to keep flipping back and forth to see what bands were playing vs where they were located. I thought about trying to somehow integrate the block schedule over the map, like in bits and pieces, but that seemed pretty labor intensive (and there are always plenty of last minute changes that would have to be incorporated). Instead, for 2016 I decided to arbitrarily divide JP's map into North and South sections:


With this layout I almost had "too much" space, so I filled it with extra titles and logos and stuff.

I miss the bold sideways title, but I think it came out pretty well. I'm worried people won't "get" the North/South split at first, but if they look for a second I think it will make sense, and in fact seeing the numbering broken up might make even more clear that the number is by north/south order. (Which isn't perfect - I wasn't smart enough to come up with an algorithm to sort by north south but by "visual cluster" instead of strict latitude.)

No comments:

Post a Comment