BEHOLD, my matchbook collection website. Below is my pdf progression of my how to navigate through the website. To recap, I wanted to highlight my illustrations and not have anything too distracting from them, but I also wanted something to sort of showcase them also. It's a classic/old school dated sort of look with the color illustrations. I think there's a nice mix within the website and a good balance between what's digital and what's analog. The wood in the background is to reflect a bar top because when I thought about where matchbooks might live, I thought bars are a good place to expect them. Not all of these matchbooks are from bars, though I don't think that matters.

There's an about page...about the collector and his collection.

A quick history of matchbooks page.

Then, let the sorting begin. First by location, alphabetically.

Then by venue.

and last by size.

The rollovers are a colorized square that is overlaid each matchbook. Just a subtle signifier of where you are.


The matchbook pages are pretty simple. Large image of the matchbook with a quick history overview. The bottom right corner has a "compare" button. This allows the user to view the infographics.

One of the infographic pages it might lead to.
No comments:
Post a Comment