Junecloud

We make apps for iPhone, iPad, Mac, and Web

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:

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:

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!

View more

Design

About us

We’re a small software company in the Metro Detroit area of Michigan. We create software for the iPhone, iPad, Mac, Apple Watch, and the web. Learn more about us here. If you have any comments or questions please contact us.