You Americans always want everything so bright and shiny.
Nojd's statement defined the final stages of the creative process. In the end, however, the final design was not chosen based upon personal taste, but the one that best presented the information.
Before I get into the closing concepts though, lets talk a little bit about the "behind the scenes" site organization, such as adding content, organizing the root directory/folder structure of a site, and the naming of html page files (at HG we use .shtml or .php files). If you're not interested in this kind of stuff, scroll down for the final concept screenshots. On AoW2H, we've prepared full online listings of all the military units in the game, all the spells, all unit abilities, ect. If you've ever visited our Units page for AoW1 you'll have an idea of what these listings will look like. As you can see, there is an incredible amount of small graphics and statistical information presented on those pages. Creating those pages by hand would have taken an obscene amount of time. However, thanks to Angel Nojd's programming expertise, hours of work were shaved off the creation time of these types of pages by automating the html formatting.Cay, Nojd and I would type out all of the stats and save them into simple text (.txt) files. Those text files were then fed into a java program Nojd wrote (from scratch!), which would automatically generate the HTML code for the pages. The data followed a set format that every entry followed. For example, here's the format followed for typing out one unit's stats:
Name;Race;Alignment;Type;Gender;Size;Level;S or P (for Summoned or Produced);Production/Casting Cost;Unit Image Filename;Movement Image Filename;Normal Attack Value;Normal Damage Value;Normal Defense Value;Normal Resistance Value;Normal Hits Value;Normal Movement Value;Normal Abilities;Silver Medal Attack Value;Silver Medal Damage Value;Silver Medal Defense Value;Silver Medal Resistance Value;Silver Medal Hits Value;Silver Medal Movement Value;Silver Medal Abilities;Gold Medal Attack Value;Gold Medal Damage Value;Gold Medal Defense Value;Gold Medal Resistance Value;Gold Medal Hits Value;Gold Medal Movement Value;Gold Medal Abilities;Requires
Changed stats when a unit is promoted to silver and gold medal are highlighted by surrounding the improved stat with bold html tags: improved stat.Here's what the Red Dragon entry looked like:
Red Dragon;Draconian;Neutral;Creature;Male;Extra Large;4;P;-;370;red_dragon.jpg;move_fly.jpg;16;10;12;14;30;40;Cause Fear, Dragon, Fire Breath, Fire Immunity, Flying, Magic Strike, Strike, Vision II;17;10;13;14;31;40;Cause Fear, Dragon, Fire Breath, Fire Immunity, Flying, Magic Strike, Strike, Vision II;17;11;13;16;32;40;Cause Fear, Dragon, Fire Breath, Fire Immunity, Flying, Magic Strike, Strike, Vision II;Champions Guild, Masters Guild, SanctuaryAll of the units for one particular race were be saved as a text file, e.g., draconians.txt, and then Nojd would feed these text files into his HTML generator java program that would create the entire page. Here's what the Red Dragon entry on the Draconians unit page looks like:
click for larger imageTyping all this out was time consuming, but it would have been ten times worse had all those pages been manually coded! Nojd's HTML generator program could be adapted to generate the HTML code for different sections, like all the Spells, Artifacts and Unit Abilities. It was a life saver!
Folder Structure:When you have 4-5 people accessing and making modifications to a site, It's very important to keep a large site well structured and all content placed in descriptively named folders. As Nojd puts it, "No general dump areas, please!" We organized our root directory folder to match our LHS navigation bar; all the major sections got folders:
aboutus
community
gameinfo
downloads
library
media
faq
includes (contains the RHS and LHS navbar files)
Using folders for these areas makes it easier to remember where sub-pages are since the organization follows a logical subject division. It also allows us to use .index pages for each of the major sections, rather than having to use named .shtml files, which makes for cleaner links.
It's really easy to remember the links to these pages because we don't have to worry about specific file names, just the short, general subject folder names. For any HTML newbies out there, the web browsers read the .index page within a folder as the "main" page for that folder, so it will always be displayed first. Thus, the following links will pull up the same page:
http://aow.heavengames.com/strategyhttp://aow.heavengames.com/strategy/index.shtmlAll of the sub-sections also got their own folders so they too could use .index pages. As Bluecollarheaven warned us though, extensive use of .index pages can be dangerous as it's all too easy to overwrite the commonly named file with the wrong .index page. As such, sub-sections were the last to receive index pages. So now we've got, for example:
library/scenariodesign/
library/modmaking/
library/strategy/
All of article pages in the sub-sections will have specific file names, for example: library/strategy/aiexploits.shtml
I try to stay away from underscores and hyphenating words when naming files. In my opinion, shorter names are better, and a practical name relative to the subject matter is easier to remember, especially when I'm trying to refer someone to a specific section on the forums. And whatever you do, don't include spaces in a URL file name! Browsers don't like the space and stick in charaacters to fill the space, resulting in some very messed-up URLs.
Image Organization:Managing all of the graphic files on a site can get confusing really quick. We store all of our graphics in a single image folder (ours is named "pics"). Again, the golden rule is no "general dump areas," so we don't just copy every image into the pics folder; it's carefully structured. The pics folder mirrors the general contents folder as well, so each section of the site gets its own sub-folder within the pics general folder, e.g., all of the unit images are stored in the pics/units folder.
It's also easier to scan through a shorter list of images in separate folders than if you had ALL of them dumped into one pics folder. Between all of the units and spell icons, there are hundreds of small images stored on our site. Can you imagine the amount of scrolling you'd have to do go through to find just one image if they were all dumped into a single folder? *shudders*
While we're on the subject of images, I'll let Professor Nojd take over and give us a short lesson in linking to images within a page.
Quoted from Professor Nojd, Swedish Institute of HG Technology:
A reminder about links to images. Please use paths relative to the root directory of the site rather than relative to the page. For example,
DO THIS: /pics/screenshots/outpost.jpg
NOT THIS: ../../pics/screenshots/outpost.jpg
The former will ensure that the images work even if the web pages are later moved around other folders. But for links to other related html pages, the relative links are good, since if one page is moved, the related pages will be moved along with them.
For example, all the City Structures pages are linked to each other. Those links start with the html filename without any preceding path, since they will always appear in the same folder. For example,
DO THIS: walls.shtml
NOT THIS: /gameinfo/citystructures/walls.shtml
To close this discussion on page organization, always remember to give each and every page appearing on your site a TITLE. The title appears in the bar at the very top of the browser window. If you were to look up at the top of your browser right now (and if you're using IE) it says:"Building a Community Website: AoW2 Heaven - updated w/ Part V - Age of Wonders Heaven Forum - Microsoft Internet Explorer."Don't you hate it when you visit a page and its bookmarked name is "Page 1"? Me too. The page title is VERY important because if someone bookmarks a page within your site, the page's title will be the default name of that book mark. If someone bookmarks our Unit Stats page, the bookmark will be named: "Age of Wonders II Heaven Units." The Elves' stats page is titled "Age of Wonders II Heaven Units - Elves." This is good netiquette, pure and simple. It makes it much easier for our site's visitors to find the bookmarked page when they're scrolling through their list of Favorites.
Another way to distinguish your site's bookmark link in a visitor's list of Internet shortcut favorites is to add a shortcut icon or "favicon." The Favicon was first popularized by its appearance in the "Address Bar" and "Favorites Folder" using Internet Explorer and is now a prominent fixture of web browsers such as Mozilla. It is a small, 16x16 pixel icon image named "favicon.ico" added to your site's root directory. It looks like this: . The favicon will replace the IE logo in the URL Address bar and next to a bookmarked link in a visitor's "Favorites" list. You may have seen something similar if you've ever bookmarked a GameSpy.com page. They have their green secret agent man as their favicon.ico. Click here to learn more about adding a favicon to your web pages.Whew! I don't know about the rest of you, but after all that techie jargon I'm about ready for some good old fashioned pictures! Let's now return to making AoW2H "bright and shiny."In trying to explain to Nojd all of the different color combos we wanted to see examples of, we all came up with the silliest names for the different colors and textures we liked, e.g., clean parchment, less-pink orange, ghostly glow, velvet blue, blocky purple, paper bag parchment. Here's an example of a typical request for Nojd:
"Nojd, can I see a velvet blue header with ghostly glow text like from concept #34, and darker rune watermark (but not as dark as #28), dark velvet blue navbar with golden buttons, original borders and the less-pink plain parchment from #39."
Poor Nojd! He had to decipher all these requests into some kind of cohesive image. After the marathon masthead experiments, we felt ready to go back and tackle the main site again. We were very close to reaching an agreement on the site. The full-bodied blue dragon logo (with a slight ghostly glow) on a purple texture emerged as our favorite masthead, and we all liked the dark blue velvet navbars with gold lettering. All we needed to decide now was the main news/content section.I didn't really like the current parchment color options we had. They were either too grey or a bad shade of yellow. Nojd, Cay and Bluecollarheaven were the strongest advocates of a lighter parchment color with dark text, while I was still advocating a black or nearly black texture with white or gold text for the news background.
Fortunately, around this time we received a good version of the parchment graphic seen within the game (which affectionately became known as the "paper bag parchment" due to its texture resembling a crumpled paper lunch bag and the paper-wrap used for mailing packages). Nojd added the new paper bag parchment to the agree upon purple masthead/blue navbar standard (the "purple/blue standard") to create concept #40.
click for larger image
Knowing I preferred a dark news background, Nojd tried a dark news section with lighter navbars. He used a very dark version of the previous blue navbar texture and the paper bag parchment for the navbar background (note: text colors weren't changed in this quickie job). This is what turned out...
click for larger image
Not to pretty, eh? Everyone agreed with Nojd that even with nicer colors, the site would be "unbalanced" with light navbars and a dark masthead and news. We toyed with the notion of doing something like what we have now on AoWH, i.e., a light main background with a dark news background. That discussion didn't last too long though as it would be too graphic-heavy and would drag down load times. Speeding up page loading times was one of our top priorities. However, I still favored a darker news section so we tried the same dark blue news background with the purple/blue standard.
click for larger image
Nojd thought this was way too gloomy, and still too "bluish," so he tried some bolder colors. Remember when he added that small red stripe to the masthead seen in Part IV? Well this time he went all out.
click for larger image
Personally, I think the red masthead looks awesome, but the blue navbars didn't gel with the dark news section. What did it need? More red of course!
click for larger image
Oooh, talk about bathed in blood. Bluecollarheaven thought all the red made it more like a Diablo2 site than an AoW2 site. One more try with red....
click for larger imageBy this time the beta demo had been released and we saw this nice blue/grey texture from a campaign cut-scene. We gave it whirl.
click for larger image
Bluecollarheaven thought too much yellow text on a dark background made the place look like Lego land. So we tried white text....
click for larger image
Before he dropped these dark themes, Nojd tried a darkened version of the dark green texture that's seen within the game for a news background. I don't think it's going to win any awards, but ya can't fault the man for trying.
click for larger image
Looking back at the last few concepts, it was clear a dark textured background made the whole site look too desolate and macabre. Bluecollarheaven also didn't like using nearly the same colors for more than one part because it looked boring and monotone. That is exactly why I loved a plain black background. While one might think plain black would be just as depressing, it actually allows the blue and purple to stand out more, without overbearing or dominating the design. The black concept below has the exact same purple/blue standard as the earlier concept with the bluish-grey news background shown above, but look how much stronger the purple and blue appear against the pure black news background.
Oh yeah... Back in Black, baby!
Bluecollarheaven thought the black still looked too gloomy and too PK-ish (i.e., player killer). To be honest, I really liked both the black and the parchment. Although the black may seem gloomy, it's very easy to read text on it. Based on my experience on other Heaven sites, I also thought the game info would show up better on black, e.g., unit images, spell icons, building icons, ect. A brighter background may have a tendency to "wash out" smaller images--like game units--unless the unit graphics are very dark.It was also at this time we realized the problem Nojd mentioned in his post above about viewing colors and contrasts on an LCD screen vs. a regular CRT monitor. The red undertones in the paper bag parchment made it look pink when viewed an LCD screen.
Quoted from Nojd the monitor shuffle board champion:
What looks leathery brown on my 19" screen appears pink on a laptop. A nice velvet blue color with a subtle texture turns almost solid black. I shuffled lots and lots of images back and forth between my stationary and my work laptop to scrap the concept designs that looked too different (or plain ugly) on different screen types. I think the final result looks good on most screens.
I experienced the same color problems viewing the site on a Gateway flat screen at work, but a CRT monitor at home. Everything was brighter (pink parchment) and more washed out; subtle textures looked black on my LCD flat screen. Zen noted those colors will also appear black to people who have color management enabled on their CRT monitors. As such, Nojd used Photoshop to create a "less pink" alternative to the original--darker--parchment color.
click for larger image
So.... it had come down to these two final concepts: light vs. dark. As I mentioned earlier, it would not be personal preference that tipped the scales one way or the other, but which one best presented the information.
I suggested to Nojd he try some game image/graphic experiments. Using AoW1 units, he placed some of the small, transparent units on each background to compare how they looked. I especially wanted to test units that were red, yellowish or orange in color (like the Beholder and Sand Worm).
Here are mini-vesions of the graphic experiments Nojd conducted. From left to right is the original parchment, the new "less pink" parchment and black. Click on a color strip to see a full page of Azrac units against that background.
The visual evidence spoke for itself. Nojd actually thought I would be right about the visibility of the units, but in fact the exact opposite was true. The parchment really brought out the shadowing artwork on the units, which gave them more depth. The black seemed to smother the images, making them appear smaller. On the other hand, the text looks great against the black, but is a little hard to read against the paper bag parchment background because of the dark "splotches" of texture.
Once we all agreed the lighter background was preferable, it was an awkward moment. Had we really reached an agreement? We'd certainly come a long way from my original cut & paste job.
To be honest, I still didn't love the parchment color we had, but I couldn't deny that a lighter background looked better. Luckily, Zen agreed with me and would replace the paper bag parchment with something else from his personal texture library. Zen would also employ his uber-photoshop skillz and "smooth out" the masthead and navbars colors/textures we had all agreed upon. I remember feeling stunned when he posted his first refined image; it was so perfect. After nearly two months, it just "worked." Two more small tweaks (one of which included fixing an old idea I had about portraits in the masthead) and the design was locked. Here were the changes Zen made:
Bevel width for the logo
Updated glow to include the II in AOWIIH
Added HG Logo
Added more contrast to the masthead borders
Made the dragon color more towards sky blue (Brighter)
Added black glow around dragon (to bring it out more - Blue & Purple does not mix well)
Changed the underlying background for the purple and blue textures (top and side bars)
Changed the color of the dragon frame header (in the content body) to bring out the details and make it look like it's printed on the parchment
Updated Parchment (you've had a peak at it reading this article, do you rember where?).
Added portrait to masthead
Added Drop shadow to top bar Of course, you'll have to wait just 1-2 more days to see that final, perfect design in all its online glory. As you have just seen and read, many, many hours of hard work have been put into new AoW2H site in both design and content. I sincerely hope you're just as pleased with--and enjoy using--the final product.I also hope you enjoyed this article series on building a community website. It was a lot more work than I originally anticipated, but I thoroughly enjoyed recalling the creation process and sharing the experience with you. If you're an aspiring webdesigner, I hope you took away one or two ideas and will avoid the small mistakes we encountered along the way. If you're a regular visitor, I hope you have a great understanding and appreciation for the work that goes into the creation of a HeavenGames community website. Thanks again for reading and for visiting HeavenGames!
[This message has been edited by Angel Draco (edited 07-21-2002 @ 11:56 PM).]