How SEIBERTRON.com transformed ...

On June 12th, 2005, SEIBERTRON.com unveiled an all-new design just in time for its five year anniversary on June 26th. Can you believe it's already been 5 years? This site was around during the last year of Beast Machines and saw the debut of at least 6 Transformers series: Robots In Disguise, Armada, Alternators, Energon, Robot Masters and Cybertron.

Unlike the other designs of previous years, this version of SEIBERTRON.com was truly an original design. Yet at the same time, the design might seem "familiar" to those of you who've been around for awhile. Well, that's because the site took many design cues from the Transformers packaging and paperwork from 1984 to 1988. Check out the images below to see where we got the original idea and how it ended up looking once the idea was interpreted to the web.

You are viewing images 1 through 16 out of 16 total.

The idea for a new site design started after looking at some of my old TF boxes one day while I was *GASP* cleaning my apartment (my Mom would have been proud).

The box around the character's name is what started it all. I saw a black box with white text above a yellow box with black text and thought ... that's a mouse-over! That's what ended up becoming the site's navigation.

Then I started looking at some other key features from the packaging such as the "More than meets the eye" text, which I thought would look nice next to the site's logo in the header.

Then I started thinking about how the red and purple square pattern would look kind of nice as a background image throughout the site

Then I thought how it would be fun to figure out with some style sheets how to make a transparent Transformer image (complete with white and black border) overlap the colorgrid that you see in this image of Sixshot.

The purple pattern around Sixshot's foot was the original purple background on the Decepticon scheme before I created my own, which looked cleaner and I could reuse the same box pattern for the red Autobot square pattern.

The text that says "Transforms from plane to robot and back!" is what actually inspired me to give you guys the ability to actually "transform" the look of the site. I'm even using the Eurostyle fonts from the packaging throughout the site.

Of course, if the site was going to transform, I had to implement the "Start," "Change" and "Finish" arrows that appeared on the packaging from 1984 to 1987. This ended up on the page that transforms the site.

The robot points was a classic part of the old school G1 packaging so I made sure that the site would have "robot points" on the homepage.

Another staple part of any toy packaging is the UPC code. If you look closely at the UPC code on the homepage, you'll see that the image changes by the minute ... it's a "UPC" clock that shows the current date and time. The UPC code actually works too.

The pattern around the tech specs gave me the idea for the pattern that I ended up using around the features on the homepage. Now if I can only figure out where to use the actual tech specs. Hmm ...

I ended up using the "TECH SPECS Clip and Save!" text that appeared above the tech specs as the heading for the FEATURES section on the homepage.

Rather than having the traditional text navigation in the site's footer, I decided that to style the navigation to look like the "INCLUDES" text from the packaging. The black/yellow text box ended up above the character image in the site's header.

Even the "AGES 5 & UP" text ended up in the footer navigation in the form of "AGES 13 & UP."

I thought the text from the first year catalog, "Welcome to the world of the Transformers," would be an appropriate image for the header. After all ... SEIBERTRON is the Transformers homeworld. ;)

The Checklist along with checkboxes ended up on the homepage for the Vector Sigma Database random character listings.

Charge Our Energon Reserves. Join the Seibertron Elite.

Support SEIBERTRON™