Building AoW2 Heaven, Part 3

Don't forget to check the blury image at the top of this page, which is slightly less blury than on the previous page!

At the end of the Part II, we thought that the nav bar problem had been solved. 160 pixels. Bam. Done. Well, maybe we popped the champaign corks too early as there were still some issues with that.

Before I get into the endless navbar size problems though, I want to address a question that was asked on another HG forum: "Why the need for two nav bars?" That's a good question and deserves a little history as well. Be warned, I could've answered this question in one sentence, but hopefully you'll enjoy the "long answer" as well as this short trek through the History of HeavenGames website design. I'm only going to reference HG sites that are currently up and running.

Initially, HG sites did not have two navbars. Like many other websites at the time, HeavenGames' first few sites had only a single LHS navbar. The year was 1997 and the Internet was really starting to kick into full swing. Graphics and design were getting much more savvy than a loud metallic wallpaper and flashing horizontal page divider lines (remember that horizontal divider line that looked like dripping blood? LoL!).

Update: Look, I found my favorite line divider of the 90s!

Our first three sites, Age of Empires Heaven, Age of Kings Heaven and Caesar 3 Heaven had only a single LHS nav bar that went all the way up to the top of the page. None of these sites had a "main header bar" that ran across the top. Just a simple center graphic indicating the title of the site.

The design reason behind having a single LHS nav bar was that the default resolution viewing size was 640x480; very tiny! A vast majority of people owned only 14" or 15" monitors and often viewed sites in 640x480. It was simply impossible to squeeze in the standard ad banner on a page with LHS and RHS navbars.

But as website design became more sophisticated, there was more stuff to put on them and a RHS nav bar was a convenient place to put that information. However, the problem of pixel width was still there. The solution? Enter the "floating" nav bar.

In early 1999, about one year after AoKH opened, the "floating" RHS nav bar was added to its design. When Pharaoh Heaven opened in January 1999, it too employed the "floating" RHS nav bar. However, these floating navbars only appeared on the sites main news pages, not on the other content pages throughout the site. On these pages, the LHS nav bar goes all the way up to the top of the page, the title graphic and the ad banner uses the rest of the window which gives them plenty of space, and the RHS nav bar starts lower down, below the title graphic.

When Zeus Heaven opened in June 2000, it offered a look at the future course HG design standards would take. Zeus Heaven had a main header bar across the top and LHS and RHS nav bars benath the header on its main news page, along with the ad banner in-between them. The reason this was possible was because 800x600 resolution was now the "industry standard" viewing size and so there was more room to play with.

In hindsight, Zeus Heaven would appear to be an experiment in dual nav bars use, because the next three Heaven sites to open would not employ dual nav bars: Empire Earth Heaven in October 2000, Cossacks Heaven in January 2001, and our own Age of Wonders Heaven in April 2001. Thanks to the technical skillz of Angel Nojd, however, AoWH would add a "floating" RHS nav bar a few months after it opened, and both Empire Earth and Cossacks Heavens soon added dual navbars to try and achieve a more unified design across HeavenGames. More on unified-- but unique--designs in the next installment.

Another page was turned in the history of HeavenGames website design when Age of Mythology Heaven would employ "the new standard" of HG design, with a scalable main header and dual nav bars. Star Wars: Galactic Battlegrounds Heaven would follow a similar style as well. However, the dual nav bars still only appeared on the main news page.

Stronghold Heaven's design would take a short detour from the direction HG design was heading and showcases another experimental design. It employed a website management program called ZOPE, which used a custom programing language to setup page templates and allowed for the online editing of web pages, rather than editing content on a local machine, then uploading it to the server through FTP.

With the launch of Dungeon Siege Heaven earlier this year in February 2002, yet another HG design standard was set; that of employing the dual nav bars through out the entire site. Not just on the main news page, but on every single content page. AoW2H will follow this design template as well.

Whew! Well, with all that said and done the short answer to the original question--which was, "why the need for two nav bars?"--is that it gives us more options. More options for the placement of content such as headlines, polls and announcements. It also allows us to explore new sources of revenue to keep HeavenGames alive, such as vertical column ads.

But I digress; back to our navbar width problems...

It turned out that we needed to trim the nav bars down even more, from 160 to 150 pixels. As Nojd figured out, the page should work for a resolution size of 800 pixels wide. The ad banner width = 468 pixels. The IE browser with scroll bar wastes about 25 pixels. Thus, the two navbars are allowed to be (800 - 468 - 26 ) / 2 = 153 pixels. As such we had to trim the nav bars down to 150.

Well, now that we REALLY did have the design nailed down, we started to experiment with (read: haggle, fight, kick, bite, barter, argue over) different colors. Each of us shared what we felt were the dominant colors from AoW2, based upon the screen shots available at the time. In AoW1, green and brown were the dominent colors as most of the menus and interface were done in those colors.

Some of the common AoW2 color themes identified were dark purples and blues, along with a grey/green/gold mix seen on the interface screen shots. The parchment color was also prevalent because it was seen so often in the spell book and many of the sub-menus, like the diplomacy dialog and messages from spirits.

Nojd's Photoshop skillz were really taking off, so we began the experiments, trying to get a feel for what went well together. We also had to keep in mind that whatever we came up with did not too closely resemble another HeavenGames site. Utilizing the option in Photoshop to set down different layers of color and texture, it was relatively easy to swap out colors and tweak shading gradients. Keep in mind that for every image shown below, there were probably 4-5 versions of that concept with subtle tweaks.

click for larger image

click for larger image

click for larger image

Besides basic color design there are many other detailed graphics to think about as well; especially for the navbar. I thought the blue mana gems seen in AoW2's title menu looked really cool from the first time I saw them, and I wanted to incorporate them somehow. I thought they would work out great--in theory--as section buttons on the LHS nav bar.

click for larger image

Okay, so in practice they didn't look all that great. I actually thought they could work the first time I saw them, but my hopes and dreams were shattered when Angel Bluecollarheaven said it reminded her of the Flintstones. R.I.P. cool blue buttons.

We started to mess around with some parchment backgrounds for the main news/content section, and once again I had an ill-fated idea. Anyone seeing a pattern here? Geez, a fella just can't get a break. Take a look at some of the different headers on the images below as well. I'll highlight all of the header concepts we came up with in an "evolution of a header" segment in a later installment. Some of them were really cool... wacky and unusable, but cool nonetheless!

click for larger image

click for larger image

click for larger image

Another one of my brilliant ideas that ultimately ended up in the recycling bin was to incorporate the Dragon Frame graphic into the design. The dragon frame appears in the cut-scenes between the campaign scenarios and was another one of those graphics I just thought looked really cool. And since it was so cool, it would probably look great in our new design, right?

click for larger image

Wrong. I thought the dragon frame would be a great place to bundle up a mini-screenshot and the news headlines. But Angel Zen quickly pointed out it was simply too overpowering. It dominated the design and looked really out of place. R.I.P. cool dragon frame.

After a few more dozen color combination experiments, we took a break from the main layout for a little bit and really went crazy with some header designs. Coming off our rainbow marathon of header concepts resulted in even more outlandish color concepts for the main content section; all of which I'll share with you in the next installment over the weekend - it will be a visual feast!

If all that doesn't take too long, I'll step away from design for a few moments and talk about what really makes a site: content; how we planed to organize it and streamline the compilation of game information. Nojd had perfected a fantastic system for mass data-uploads when he completed our AoW1 Units section, and his system would make adding content to AoW2H a snap.

<< Part 2

Introduction

Part 4 >>