Tiny Forest and zoomThing

I’ve just finished a complete redesign of Tiny Forest, the personal portfolio of cartoonist and illustrator Holly Tickner. The site has quite a bit in common with the original design, which she created herself. The spot illustrations, typeface, and colors are all lifted directly from her design, which you can see here:

The original Tiny Forest design by Holly Tickner

For the new site I started with the same basic elements and simply rearranged and refined them. A thicker bar along the top gives the title a stronger impact, and subtle outlines and shadows make the text easier to read. Moving the main navigation icons to the top bar left room on the side for secondary navigation, making the gallery much easier to browse. A section with notes on each piece was also added along the side. You can see the results here:

The new Tiny Forest design by Mike Piontek and Holly Tickner

Visit Tiny Forest for a better look at the new design.

The underlying code, of course, was also completely reworked. The site now uses web standards to ensure that it works correctly in the widest range of browsers possible. It also degrades gracefully in older and more limited browsers, like screen readers and handhelds. PHP was used to make the site more manageable, and Tense Log was used for much of the content. With Tense Log, Holly can post updates to her site without using HTML, and a comment area and RSS feeds are generated automatically for her.

Another major part of this update is the new Flash image viewer, which I call zoomThing. Holly wanted a way for visitors to zoom in on her work easily and move around the page. This was important for her comics pages, which were difficult or impossible to read on the old site. This could have been accomplished with DHTML, but using Flash helped ensure that it would work consistently in every browser. Flash also allowed for more intelligent loading of the images. After the first page of a comic is loaded, subsequent pages are loaded in the background, one at a time. This means there’s a pretty good chance the second page will already be loaded once a visitor has read the first.

zoomThing is also easy to update, without requiring Flash at all. The title and list of images are stored in an XML file that can be updated in any text editor. The images themselves are simply JPEG files, stored outside of the Flash file. The best part of this is that only a single Flash file is required, no matter the size of the gallery. I plan to make zoomThing freely available in the future, in a more customizable form that allows easy customization of the fonts and buttons.

Holly is graduating from Savannah College of Art and Design next month, and I hope the new site will help her find work!

Comments

This entry has one comment.

Rob McMichael

Rob McMichael wrote on April 22, 2005:

Wow great work Mike.

I love the flash viewer thing, its a great idea, and really allows you to get great detail from the comic :)

I also agree with your layout at the top. It gives the header more strength and stops the site form looking displaced.

View more

Design

My First WWDC Above: Apple’s live App Store wall at WWDC. It showed icons of 20,000 iPhone apps,…

Getting creative with transparent PNGs for Delivery Status The old Delivery Status graphics system When I started the Delivery Status widget it…

Business Cards My new business cards finally showed up today, and they look awesome. Same as with…

Welcome to Junecloud! When I first started running my own business full time a few years back, I really…