Friday, December 28, 2007
Kid in an eye candy store
Steph came to me with an idea for a book, a guide for project owners—typically board members of nonprofits, Steph’s usual clients—to help them understand how a large project gets designed and built and to help them understand their own roles and those of the other players in the process. But Steph also wanted the book to be a rich visual experience for the reader with some instructive illustrations but also with inspiring images of great architectural examples.
Serendipitously, Steph had access to the images at Shutterstock, and he took full advantage of it, selecting lots of great eye candy for the book.
Because of Steph’s strong visual sense, working with him on the design of the book was a great collaboration. He didn’t come to the project with a visual vocabulary related to books, but he learned quickly as we went along and was ready with immediate and specific feedback as the design took shape. He also trusted me with the editing, because, as with a lot of strongly visual people, the details of grammar and spelling sort of sail below his radar.
And then there was the website
[Note that I’ve given up on “Web site” and have made the transition to solid, lowercase website. Language marches on.]
We had started out with a straightforward design for a static HTML website for Steph’s consulting business and to promote the book. Blecch! It was duller than the roof of the used GMC van I once owned. So Steph rooted around at Shutterstock and came up with the image he wanted to use for the site background.
Only there were a couple of problems. First, the laptop screen was not exactly vertical and rectangular. It was tilted toward the viewer and trapezoidal. Okay, Photoshop to the rescue on that one. I isolated that part of the image, distorted it to make it rectangular, and then did some other Photoshoppy things to fill in the skinny blank triangles that maneuver created on the sides of the screen. No big deal.
The second problem was that I had to accommodate the wide range of browser resolutions people use. I did not want anyone to have to scroll down to find the menu buttons or scroll across to find the page contents. And if I made the image small enough to accommodate the smallest browser, the contents would be unreadable on a high-resolution browser. That meant I had to figure out how to scale the background image to the browser size.