Since the dawn of Toonarific, we have had more facelifts then some of the celebrities in Hollywood. Because of this, I have documented as many of those changes as I could. Usually it was when I remembered to, but most were just found with luck. Below are as many of the design updates that I could find, so far. There are not too many others, but if I run across them, I will be sure to add them. I have also included old menu designs and images on the next few pages. Take a look and reminisce!|
Our very first banner. Pretty scary, huh?!
|The original front page to the Toonarific site. Amazingly enough I still had a color print-out of the index page, with the original site title before it became Toonarific. As you can see, my HTML skills were minimal. The site was in frames, with the right menu controlling the content in the left-hand frame. We made many category buttons for the left-hand menu, but didn’t use all of them because we had thought of a new site design, which wouldn’t use that style of button.||This is how blah the original show info page looked. All of the info we compiled was coded onto the same page, including episode lists for the shows we actually had some for, theme songs, and stuff like that. The pages would get quite long, with lots of scrolling to read everything. In a later design, the ‘filecard’ layout was used, and tabs split up the content for the shows.|
|At this time, we were creating the option of both a frames and non-frames site, since at this time (approx. middle to late 1999) not all browsers supported frames like they do now. This image is of the first version of the sign, which is when we only had frames available. Clicking this version just brought you to a screen that looked like the above image, 1a. The later version of the sign, which also went along with the “Frames/ No Frames” links at the bottom of the page, had 2 options, an arrow to the right that said ‘frames’, and an arrow to the left that said ‘no frames’. After clicking what you wanted, you were wisked away to what was the start of the better HTML designs. I have yet to find the second version of the sign, but I may one day.|
|Now, this design stayed for quite some time. It original appeared around Oct. 2000, and was still in frames at the time. It wasn’t until 2002 that we finally scrapped frames altogether and stuck with tables. In the first version, the left menu was all seperate buttons, that when clicked, opened a page in the main frame on the right. However, the buttons were kinda hard to read for some users. so then we used DHTML for a rollover effect. When the cursor was placed over a button, the Droopy image on the button was replaced with just solid blue, so you could read the text better. Around Sep. of 2002, the menu was replaced with a Flash menu Stacey made, that animated the rollover effect and had hardcoded links to the appropriate pages, so there was no need for the seperate menu buttons anymore.||After clicking on the button marked “Cartoons” in the Droopy menu, this letter list menu would open in that particular frame. Of course, later on when we removed all frames from the site and had everything in tables. In the original design, the buttons were all individual images, and clicking on a letter or category opened the production title list in the right-hand frame. The show info pages would also later have this letter menu permanently hardcoded into the table design that later took over.|
|Around Aug. of 2003, the Droopy menu was replaced with Stacey’s fancy rotating sign-post menu. Click an option and the sign would spin around and display a list of available places to go. Her Flash skills were improving quite a bit. The content in the right section stayed pretty much the same, except we had eventually removed the webring links at the bottom of the page.||The classic filecard show info page. This filecard format actually came about around the time we had the Droopy sign index page in 2000. If you picture in your mind the letterlist menu in place of the fancy Flash signpost in this image, you can see how it looked in the previous setup. When we used this filecard design, each show listed on the site had 3 pages, and before we converted over to a database driven site, the entire site had approx. 14,000 pages (including screen shots, over 100,000 files)! Not database driven. This was hardcoded data that I did by hand. Of course I had templates for the 3 info pages, but still, that’s alot of work. Up until now, the entire site was designed, maintained, and so forth by only 2 people, and one of them mainly just did graphics. In this layout, you could see the show’s synopsis and cast, episode lists, and pictures. The bottom section of the filecard, under the info block, was an email link so people could submit info about the series we might have been missing. Talk about getting alot of emails!|
|All of these designs has brought us to our current state; database driven, a couple hundred files (most of them in php), and another upcoming design change within the year. At this point I don’t think much of the layout will change, but there will be alot more functionality and interaction added. Some things may change, and if they do, I’ll be sure to document the old before the new invades.|