You must be logged in to post messages.
Please login or register

Website Feedback & Announcements
Moderated by Swolte

Hop to:    
Welcome! You are not logged in. Please Login or Register.34 replies
Age of Wonders 2 Heaven » Forums » Website Feedback & Announcements » Building a Community Website: AoW2 Heaven - updated w/ Part V
Bottom
Topic Subject:Building a Community Website: AoW2 Heaven - updated w/ Part V
« Previous Page  1 2  Next Page »
Angel Draco
HG Lawgiver
posted 07-10-02 01:14 AM EDT (US)         

Previous Images: Part I; Part II; Part III; Part IV


Oooh! What are these busy little guys working on?

Give up?! Why it's AoW2 Heaven of course! That blurry image will get clearer as we get closer to launch!

We are soooo close to launching AoW2 Heaven that I'm bouncing off the walls! The new site is SOOO COOL and I can't wait for all of you to see it! The site is essentially done--content wise--except for one major section, and its the most important section off all! Downloads.

User-created content is what kept AoW1 going strong all these years and HeavenGames isn't skimping on the most important part of the website! We feel it's better to launch a finished site, rather than an incomplete site with lots of "under construction" notices.

Angel Zen has been coding his tail off and has reportedly already gone through keyboards! okay, not really, but still.... Uncle Zen has been uber-busy coding a brand new downloads section from scratch for all of you, which will resemble the Empire Earth Heaven downloads section. Unfortunately, Real LifeTM tossed Zen for a small loop quite recently and he had to run out of town for two small job-related trips.

So, I'm going to breakout my dusty old book of "101 Stalling Tactics" here and try to keep you all entertained here for just a few more days. I'll be talking about what goes into designing a website and show you some of the concept artwork that was created as we moved closer and closer to the final design of AoW2H.

If you'd like to submit any custom scenarios you've created for AoW2, just use the current Submision Form for the time being and we'll move your scenario over to the new downloads archive when we launch the new site. Be sure you clearly add "for AoW2" in the "Title of upload" box! Thank you!

[This message has been edited by Angel Draco (edited 08-06-2002 @ 02:05 PM).]

AuthorReplies:
Angel Draco
HG Lawgiver
posted 07-10-02 01:52 AM EDT (US)     1 / 34       
Building a Community Website: AoW2 Heaven - Part I

When the staff began thinking about AoW2H, we all agreed that some things needed to be done differently from the current site:

  • Speed up average loading time (especially for dial-up users like me!)
  • Make colors easier on the eyes to read.
  • Uniform template design so that pages could easily be moved around with out reassigning filenames.
  • Main header and double-navigation bars throughout.

    The current "trend" of HeavenGames sites is following this streamlined site structure, e.g., Dungeon Siege Heaven and Age of Mythology Heaven. It's worked very well for those sites and so AoW2H would follow this structure, but retain a signature HG artistic look. This structure also works well when viewing the site in various resolutions, from 800x600 to 1280x1024.

    When designing a website, you want that "signature" look so that the visitor instantly knows (a) which game the site is for and (b) that they're visiting a HeavenGames website. Using a theme is the best way to do this. For example, we have a medieval leather and parchment theme for Age of Kings Heaven and a sandy, desert theme for Pharaoh Heaven.

    For the current Age of Wonders Heaven site, we have a fantasy theme using game graphics familiar to the user. Anyone who has played Age of Wonders will instantly recognize the big red dragon from the in-game navigation menu, the parchment scroll and familiar green background. We also have a small clip of actual game graphics in the corner that a new visitor would see and associate with the game.

    Actual design concepts and artwork for AoW2H began back on February 10, 2002. It was around 2:30 AM and I couldn't sleep. I was browsing through some of the latest screen shots for AoW2 and a few ideas began coming to mind.

    I fired up the most advanced graphics program I have on my computer, none other than trusty old MS Paint, and hastily began some simple cutting and pasting of images along with blacking out parts I didn't want. At 3:07 AM, I had cranked out my first "sketch":


    click for larger image

    All this really consisted of was isolating two parts of the game's interface, and setting one on top of the other. Simple, huh? I took it all from this screen shot at GameSpy. It's not too pretty, but it was a good, rough layout of where I wanted most of the future content to go.

    Zen happened to be online at the time (what can I say, none of us sleep; heck, it's nearly 2 AM right now!) and we started chatting about AoW2H. I showed him my "rough draft" and cleaned it up a bit, which resulted in this Concept #2:


    click for larger image

    Remarkably, Zen whipped up a "main header" graphic for me in only a few minutes (he's a Photoshop monster). In stark contrast to the rest of the site, this header would barely change its basic design over the course of the next few months; tweaking only its colors and subtle changes to the graphics.

    Little did I know at the time that AoW2H's design would change dramatically between this first concept of mine and our final design. All in all, AoW2H went through over 60 concepts! While Zen was away for a month, poor Angel Nojd got a crash course in photoshop from Zen and I promptly proceeded to drive Nojd insane requesting tons of minuscule changes to the design.

    In the next segment of this article I'll talk about why this initial concept was actually a bad design and how we proceeded to modify it.

    [This message has been edited by Angel Draco (edited 07-11-2002 @ 12:43 PM).]

  • Swolte
    AOWH/AOW2H Seraph
    posted 07-10-02 06:19 AM EDT (US)     2 / 34       
    Looking good..!



    Get the unofficial Patch v1.4. here!
    My best AoW-Sm map: Drums of Death (This is the multiplayer version; for single player, or AI use different version)
    Other proud AoW-sm maps: The Key of Kharzul, The Fight for Light, Waikiti Island, Goldrush Mountains
    My proud AoW2 maps:The River Arne
    Coordinator of the v1.4 and v1.5 patchteams, Seraph of AoWHeaven, PBEM Singles Champion 2008
    Der_Waggs
    Member
    posted 07-10-02 09:30 AM EDT (US)     3 / 34       
    Looking Nice so far

    Der_Waggs
    King Warriors of Humas
    Owner/Admin: leagueaow
    Guild: The Cause
    ICQ 716948 WWW.leagueaow.com
    Tekk Zero
    Member
    posted 07-10-02 10:12 AM EDT (US)     4 / 34       
    now I am drooling.

    Our greatest glory is not in never falling but in rising every time we fall. ~Confucius
    Email at: Tekkaman_Zero@hotmail.com 124881677
    Raging Joel
    Member
    posted 07-10-02 04:00 PM EDT (US)     5 / 34       
    I think this is all just a cruel joke. Look at the little guys. They are PRIMITIVE. They can't build a webpage, much less code fancy scripts and stuff. The greatest thing they could ever build would be a castle complete with a moot, drawbrige and murderholes.

    SHAME ON U for tricking all gullible AOW 2 fans

    Sunshine
    Banned
    posted 07-10-02 04:46 PM EDT (US)     6 / 34       
    Bravo, Draco, on creating a great and interesting article. I can't wait for the next parts.

    BTW. Nice one with the Zeus Artisans Reminds me of the week up to the Zeus Release where the impressions site did the same thing.

    David
    HG Alumnus
    posted 07-10-02 06:28 PM EDT (US)     7 / 34       
    Intresting read, now where's the next part?
    Devon_
    Member
    (id: Lord Devon)
    posted 07-11-02 01:46 AM EDT (US)     8 / 34       
    Nice! Can I be a Cherub?

    "I have curly pubic hair. If I don't gel it down, it puffs up into a miniature afro and looks rediculous." -Kman
    Jayhawk
    Eminence Grise
    posted 07-11-02 02:47 AM EDT (US)     9 / 34       
    For a second, I thought you'd put a certain thread up here

    Angel Jayhawk
    Eyrie • Caesar 4 Heaven • Children of the Nile Heaven • Stronghold Heaven • Caesar 3 Heaven • Emperor Heaven • Pharaoh Heaven • Zeus Heaven • My Deviations
    Support your local Heaven • My Recommendations • EXCO • HALO
    I believe violence will only increase the cycle of violence. — The Dalai Lama
    Angel Draco
    HG Lawgiver
    posted 07-11-02 10:27 AM EDT (US)     10 / 34       
    Building a Community Website: AoW2 Heaven - Part II

    Don't forget to check the blury image at the top of this thread, which is slightly less blury than the day before!

    I finished my last entry stating my initial "cut & paste" concept was ultimately a bad design that was quickly modified. Looking at the two concepts above, can you spot the major design flaw? Hint: look at the header (i.e, top portion).
    .
    .
    .
    .
    .
    The problem with the main header is that it's simply too ridged. While I really like how the rotating screen shot has a little home up there, along with a convenient place to put the news headlines, all of that stuff in between the left and right header pillars completely fills up the space, and that's no good because its too rigid and can't scale to different screen resolution sizes.

    One has to take into account that visitors will be viewing your website in different resolutions, which means a key feature you must factor into your design is that the site can easily scale to meet those varying resolutions.

    The current standard (or default) resolution size is 800x600. The PC gaming industry itself is a good litmus test of what the present-day "industry standard" resolution size is. While just two years ago many games supported 640x480 resolution as the default size (e.g., Icewind Dale), today the minimum supported resolution for Icewind Dale II is 800x600, although (obviously) higher resolutions are supported as well. Personally, I have my screen resolution set to 1024x768.

    With these principles in mind, a site must fit nicely into a browser window at 800x600 (i.e., no side scrolling required), but must also look good at higher resolutions like 1280x1024 (or higher). I had initially pushed for a default resolution of 1024x768, figuring that AoW2H would be a very active site for at least two years, and by that time the "industry standard" resolution size may have increased to 1024x768. However, since a design based on 800x600 still looks excellent at 1024x768, it was decided to stick with 800x600 as the default design size.

    While we're on the subject of browsers, lets talk for a minute about something many website designers overlook: browser compatibility. There are a lot of them out there, and lots of different versions too! Internet Explorer ("IE"), Netscape, Mozilla and Opera are the big ones. Tack on about 4 different versions for each of those browsers and you have a compatibility nightmare.

    As we were messing around with our earliest designs, here were some of the anomalies Angel Nojd encountered when viewing the same page with different browser versions:


    • Netscape 4.73: Everything looks like garbage, more or less. But this browser is simply too old to worry about.
    • Netscape 6.2.1: The page looks good, except that the pillar dividers are missing their middle section.
    • Opera 6.01: The header and the footer ruler don't extend all the way to the right. The pillars are missing their middle section.
    • Mozilla 0.9.8: The left pillar extends only down as far as the left side has contents. The right pillar extends only as far as the right side has contents.
    • Internet Explorer 6.0.26: Everything looks the way its intended it too, with the pillars extending all the way down to the bottom horizontal ruler.

    You absolutely must take browser compatability into consideration from the very begining. Otherwise you may end up spending countless hours coding a fantastic looking page in IE, only to relealize much later it doesn't load properly in Netscape... and then its back to the drawing board.

    Currently, HeavenGames attempts to make its sites compatible with IE 5.0, Opera 4.0, Netscape 6.2, and Mozilla 0.9.7. Netscape 4.7 is being abandoned because it's a very old piece of software that is awkwardly outdated. As Angel Zen puts it, "[Netscape 4.7 is] the equivalence of trying to run a train on asphalt."

    But I digress; back to designing AoW2 Heaven. So, what to do about the header? I liked using the "pillars" from the game interface to separate the left-hand side ("LHS") and right-hand side ("RHS") navigation bars, but the top bar had to go. The center news/content section could be easily scalable (as pure text always is), but the main header graphics would need to be severely modified or thrown out completely if we couldn't get them to easily scale to different resolution sizes.

    After a few experiments, we decided to pull out all the screen shots and headlines from the main header and went with a simple straight bar header, similar to Age of Mythology Heaven and Dungeon Siege Heaven.

    A straight bar header like this one, with graphics balancing at either end, is easy to scale because the middle is simply a texture pattern. It's also a convenient place to put the title of your site, and to showcase a little bit of the game graphics (which, you'll recall from the first installment of this article series, was one of our design goals). We made several concept headers, all of which you'll see in a later installment of this article series. Jayhawk made the header seen below. One of the problems with this design is that the header has a thick line across its base (the dragon frame segment seen later in this article), and when placed upon the nav bars creates a fat "double line."


    click for larger image

    So, this is shaping up nicely. We have a scalable header (with the site name and game graphics), a center news/content area, and LHS and RHS nav bars. A clean, efficient structure.


    At this point, the design structure was shaping up nicely, but looked pretty drab. I especially didn't like the uniform black (it looked too much like Game Banshee!). I thought the news could stay black (ala Dungeon Siege Heaven), but I wanted to see some colored texture backgrounds for the main header and the LHS and RHS navbars; just something to spruce it up a bit. But what to put there?

    While examining some of the earliest screen shots, we noticed there was a subtle texture behind all of the writing on the game interface. It was dark and had just enough texture to offset it from solid black. A good possibility for the news/content section.


    If you're viewing this on an LCD screen, like a laptop, the texture may be hard to see.



    click for larger image

    We also liked the parchment color/texture from the diplomacy screens. Especially the "Circle of Evermore" rune/watermark, representing the six spheres of magic. Another candidate for the news/content section background texture. Jayhawk tried adding that rune in a header concept. The rune would ultimately be incorporated into the header, but in a more subtle way.

    Around this time, one of the first major conflicts arose amongst the staff members: what will the primary colors of the site be? Dark? Light? Grey? You want to try and stay away from a "grey" site. Typically, the text isn't all that easy to read. The site your're visiting right now, AoWH, could be considered a "grey" site, as could Zeus Heaven.

    I was favoring a dark site with light colored text. Personally, I find it very easy to read light text on a dark site. Nojd, on the other hand, believed a brighter site, with dark text would be easier to read (although he admitted a dark site looked better, it was harder to read). We would spar over this issue for the next several weeks, experimenting with both styles (all of which you'll see in a coming installment of this article series). Nojd's words back on February 12, 2002, however, would be prophetic:

    Quoted from Nojd, The Swedish Oracle:

    My ideal mix would be dark background/light text for navigation bars and other smaller areas on the site, and light background/dark text for longer articles.

    At the same time we began playing around with the graphic details, we also took a closer look at some of the remaining problem areas. The most obvious being that our site design was still too wide for 800x600 resolution.

    The causes of this problem were the LHS and RHS navbars; they were simply too wide. The minimum pixel width for the site was was 800 pixels, which meant each of the navbars needed to be 150/160 pixels max (including the divider graphic); they were currently 187 pixels with the pillars.

    Why 160 pixels max? Because the advertising banners need to fit into the main content section between the nav bars. If the nav bars are over 160 pixels wide, you are going to have ugly issues with ad banners pushing the RHS navbar off the screen at 800x600 resolution viewing size.

    We liked the pillars and tried several things to make them work, from a gradual tapering of the size, to cutting them down a bit:


    click for larger image

    But with those skinny divider lines, the top bar of the navbars look much too bulky; there was essentially a double-line and was wasteful. Bluecollarheaven was the first recognize the pillars just weren't blending too well with the direction the site design was heading, so ultimately the pillars were completely eliminated.

    Well, now we were without navbar dividers, so we rooted around in our spare parts bin to see what we could find. We also examined more game interface screen shots looking for inspiration. We had these super-thin gold frames, some various mouldings, and also a small segment from the larger dragon frame graphic in the game (which we had already incorporated into one of our main header concepts).

    After some mix-and-match experiments, the thin gold frames were too small; the dragon frame segment was too big; but one of the mouldings was juuuuust right! 160 pixels on the nose! Add to that a slick new header by Uncle Zen (can you spot the 'Circle of Evermore' rune?) and the site design really started coming together. It finally began to look like a publishable website.


    click for larger image

    No sooner had we nailed down our design structure then the seemingly endless days of color tweaking and debating were about to begin. At this stage it was still a very dark website; something that would be endlessly debated over the coming weeks. But that debate will have to wait until the next installment.


    By the way, since I'm a lawyer I love legal disclaimers. All of these original designs and the arrangement and/or placement of any AoW2 game graphics into an original design are Copyright © 2002 by HeavenGames, LLC. The unauthorized reproduction, copying or imitation of these design images is a violation of United States and International copyright law.

    [This message has been edited by Angel Draco (edited 07-11-2002 @ 01:10 PM).]

    Sunshine
    Banned
    posted 07-11-02 01:20 PM EDT (US)     11 / 34       
    Bravo Draco. You did a great job on the second part. I'm eagerly awaiting the next part.
    David
    HG Alumnus
    posted 07-11-02 04:46 PM EDT (US)     12 / 34       
    Hmm, judging from the top picture, the news/main content area will have to be changed to a lighter background image...looks like some parchmentlike thing.
    Angel Draco
    HG Lawgiver
    posted 07-12-02 04:43 AM EDT (US)     13 / 34       
    Building a Community Website: AoW2 Heaven - Part III

    Don't forget to check the blury image at the top of this thread, which is slightly less blury than the day before!

    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.

    [This message has been edited by Angel Draco (edited 07-16-2002 @ 03:10 PM).]

    Swolte
    AOWH/AOW2H Seraph
    posted 07-12-02 05:04 AM EDT (US)     14 / 34       
    I really like the way you guys think about using colour: keeping close to the AoWII atmosphere game-colours!!

    Too bad about the Flint'stones'... Blue was right, though.



    Get the unofficial Patch v1.4. here!
    My best AoW-Sm map: Drums of Death (This is the multiplayer version; for single player, or AI use different version)
    Other proud AoW-sm maps: The Key of Kharzul, The Fight for Light, Waikiti Island, Goldrush Mountains
    My proud AoW2 maps:The River Arne
    Coordinator of the v1.4 and v1.5 patchteams, Seraph of AoWHeaven, PBEM Singles Champion 2008
    Sunshine
    Banned
    posted 07-12-02 11:21 AM EDT (US)     15 / 34       
    Once again, Draco, You've made an excellent article. I also agree that it looks good how you've mixed the different colors from the game. Reminds me of how AoKH was created.
    Devon_
    Member
    (id: Lord Devon)
    posted 07-12-02 12:30 PM EDT (US)     16 / 34       
    Wow Sunny, youve been here a while

    "I have curly pubic hair. If I don't gel it down, it puffs up into a miniature afro and looks rediculous." -Kman
    Angel Draco
    HG Lawgiver
    posted 07-12-02 12:54 PM EDT (US)     17 / 34       
    Thanks much Sunshine! Glad you're enjoying it. It's been fun to write and "relive" those months of design.

    BTW, if there is anything someone has questions on, or would like some more information on, feel free to post and I'll try to address it in a future installment.

    TheShadowDawn
    Member
    posted 07-13-02 06:18 PM EDT (US)     18 / 34       
    This has been a very interesting read Draco, seeing the process going along. I can't wait to see the finished AoW2.

    TheShζdψwDεwn
    If you're like me, then it's possible you're a clone generated from my stolen DNA. I suggest you turn yourself in for destruction immediately.
    Angel Draco
    HG Lawgiver
    posted 07-17-02 02:54 AM EDT (US)     19 / 34       
    Building a Community Website: AoW2 Heaven - Part IV

    Don't forget to check the blury image at the top of this thread, which is slightly less blury than the day before!

    Before I begin I'd like to thank ZenGamer who felt this article series was worthy of a news post! ZenGamer is a great site for all gaming news (I check it regularly myself) and very in-depth reviews. Read their AoW2 review here.

    I'm sorry about the delay with this next installment. As much as I'd love to be Angel Draco 24/7, RealLifeTM sprang up. Dropped a big project on me last Friday night and I had to work most of the weekend. I even had to pull an all-nighter on Sunday! Haven't had to do that for a while. But I digress; we were talking about colors for the main header (or "masthead").

    Before I get onto the masthead colors though, lets talk a little bit about having a unified, but unique website design within the pantheon of HeavenGames.

    HeavenGames is trying streamline usability across all of our sites (of which there are currently 12 will soon be growing besides AoW2H!). HG wants to make it easy for you, the visitor, to cross-jump between Heaven sites. We're implementing cross-site usability features with all new sites, and we're trying to retrofit the slightly older site designs as best we can.

    Streamlining usability is achieved by making the underlying design for all new sites similar. Although the artwork and colors may change, all of the main section buttons on the LHS navbar will share common terms, and a similar order. Likewise, by having the RHS navbar appear on all pages throughout a site, you can put commonly accessed reference material there, like News Headlines, Important Announcements, Polls, Contests and Links to other HG sites.

    If you look at our first site, AoE Heaven, most of the sections have a special name, like "Granary," "Town Center," "Storage Pit," "Siege Workshop," or "Academy." While unique names may sound like a fun idea at first and appear to create a theme, they don't help usability. Are downloads in the Storage Pit, or the Granary? A newbie wouldn't know, and having to add text below your special names to explain what section they're really for is a waste of space.

    A user should be able to visit a HeavenGames site and instantly know where to access the information he or she wants. As such, all new HG sites (like DSH and AoMH) have standardized section headings for the LHS navbar:

    NEWS
    FAQ
    COMMUNITY
    LIBRARY
    DOWNLOADS
    GAME INFO
    MEDIA

    We want a user visiting an HG site to know that things like strategy articles will always be listed under the LIBRARY, and that forums and ICQ lists will be listed under COMMUNITY. She can quickly scan the news headlines by looking in the RHS nav bar, and any links to a new patch or important announcement will be right under the headlines. And if she wants to visit another HG site, there is a list of links to all the other HG sites appearing at the bottom of the RHS nav bar.

    If she happens to be in the forums and wants to visit another HG site, she can look to the upper right-hand corner of whatever HG forum she's currently browsing and instantly "hop to" another HG forum by selecting it from the pull-down menu.

    *pauses while everyone looks for the "Hop To" pull-down menu*


    At the end of Part III, I explained how we took a break from the main page designs and focused on the masthead. It's an important graphic because it's often the first thing a new user will look at when visiting the site. And
    since it's also the largest graphic on the page, it tends to set the visual tone for the entire site. Changing the masthead color dramatically affects the look of the entire page.

    There were about 45 header concepts in total, although many were one "concept" with about 5 different tweaks to it, like more or less "glow" added to the logo, darkening or lightening the rune watermark, or changing the color and texture of the masthead background. On with the parade!

    This was the very first masthead Angel Zen whipped the very first same night I showed him my original concept (see first pic in Part I above). As opposed to the rest of the site, this design would end up changing very little! This one doesn't actually have the Rune from the game in it, but some Celtic knot Zen had in his extra parts bin.



    click for larger image


    Angel Jayhawk experiment #1



    click for larger image


    Angel Jayhawk experiment #2 (note new bottom border).



    click for larger image


    Similar to Zen's original concept, but now with Rune instead of Celtic knot. Oh, and it's red.



    click for larger image


    The next three samples are an example of the "tweaking" I was talking about. It's the exact same masthead, except the background color and texture are different in each one. Oh, and the dragon's head was sharpend up and made less fuzzy-looking.

    Blue marble, strong rune watermark.


    click for larger image


    Blue velvet, weak rune watermark.


    click for larger image


    Dark blue velvet, no rune watermark.


    click for larger image


    Here is a collage of all of the logo tweaks; different levels of "sharpness" to to the dragon's head itself, and moving from lots of "ghostly glow" behind the words to no glow at all.


    click for larger image


    We would mix and match the five versions of the new AoW2H blue dragon logo with the five masthead background styles. That's a lot of combinations to choose from! Made our heads spin sometimes.

    Nojd came up with a code for naming the images so that we could keep track of what was different in each sample. There were five main styles (or series): Z, BDV, BDV2, BDV3. An example of some of the file names are:

    Z_ND_T.jpg
    BDV_ZD.jpg
    BDV_ND_T.jpg
    BDV2_ZDL.jpg
    BDV3_NDL_NW.jpg
    BDV3_ND_NW_T.jpg

    Here how to decipher the file names:


    1. The first Z is for Zen's original background, or BDV(2/3) for Nojd's Blue Dark Velvet background (three different versions).
    2. ND is for Nojd's Dragon Head, ZD for Zen's Dragon Head. An added L to that means there is a "ghostly glow" on the dragon head.
    3. An added NW means No Watermark (it looks horrible on BDV3).
    4. An added T means no glow on the Text.
    Nojd used this naming standard so that he could easily reproduce the same images from the Photoshop file, where the different parts of the image are stored in different layers. The different layers could easily added or taken away to change the effect or colors.

    After we argued over which one looked the best for some time, Zen offered a new idea with a red dragon. It was also a larger graphic of the dragon instead of just the disembodied head. While I liked the larger dragon graphic, I didn't like the red dragon. AoW players will know that the red dragon was a staple of AoW1. Heck, we feature it prominently in our LHS navbar and our title graphic! AoW2, however, features the same dragon, but this time in blue. Therefore--in my mind at least--a red dragon means AoW and a blue dragon means AoW2. Of course, there were about five versions of this header too with different backgrounds, glow effects, ect.


    click for larger image


    Nojd liked the splash of color though (he thought the site was looking too "bluish"), so he tried a masthead with a full-bodied AoW2 blue dragon and a dash of color. It was okay, but the red didn't really "work" with the rest of the site's color scheme. However, the new dragon logo he came up with was great and we would end up keeping it.


    click for larger image


    New blue dragon logo on a purple background with a cool texture.


    click for larger image


    I had an idea about superimposing wizard portrait over the rune that would randomly rotate whenever someone visited or refreshed the page. AoMH has something like this in the LHS of its masthead. If you go to AoMH and refresh the main news page several times you'll see a different portrait randomly appear (like the Viking, Cleopatra, Minotaur, ect.). Unfortunately, we has a hard time isolating all of the wizards images from their portraits so it didn't work out too well. However, the idea of portraits in the masthead would also evolve and be eventually be incorporated into the final design, albeit in a less ambitious way.


    click for larger image


    Well that wraps up the masthead experiments; exhausting, eh?! Tomorrow I'll post Part V of this installment, which will also be the final part in this series hmmmm, now what could that mean?

    In Part V I'll go into some more detail about the organization of pages and file structure. You can run into some very tricky and not-so-obvious problems if you're not careful. You'll also see the last of the navbar/content concepts. As I mentioned at the end of Part III, after this whirlwind of masthead concepts there was lots of creative inspiration for the main content section. Thanks for reading! Until tomorrow....

    [This message has been edited by Angel Draco (edited 07-17-2002 @ 12:28 PM).]

    Narvek
    VIP
    posted 07-17-02 06:31 AM EDT (US)     20 / 34       
    Hey, it looks great! I can't wait until tomorrow: that fussy picture sure is tantalizing! Keep up the good work!


    Greetings,
    NARVEK
    LonelyTower
    Member
    posted 07-17-02 12:07 PM EDT (US)     21 / 34       
    As a fellow web-designer I salute you - Whew - all those colour designs, interface considerations, sidebar designs and so on would make a great case study for my report. Oops. I saw the legal disclaimer. Maybe I had a bad idea..;-)
    Devon_
    Member
    (id: Lord Devon)
    posted 07-17-02 12:46 PM EDT (US)     22 / 34       

    ewwww... it would only look good if you got rid of the portraits background


    "I have curly pubic hair. If I don't gel it down, it puffs up into a miniature afro and looks rediculous." -Kman
    TheShadowDawn
    Member
    posted 07-17-02 12:56 PM EDT (US)     23 / 34       
    *Liked the header without portraits*

    Looking good Draco.


    TheShζdψwDεwn
    If you're like me, then it's possible you're a clone generated from my stolen DNA. I suggest you turn yourself in for destruction immediately.
    Angel Draco
    HG Lawgiver
    posted 07-17-02 03:50 PM EDT (US)     24 / 34       
    Agreed Devon, but we had a problem isolating the wizard's portrait from the background.
    Nojd
    Member
    posted 07-17-02 03:50 PM EDT (US)     25 / 34       
    Draco has mentioned quite a few of the design aspects to consider. I have to mention another one that that caused us lots and lots of problems and long arguments about what looks good and bad: The appearance of colors and contrasts on normal screens vs laptops.

    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. Soon I expect we'll have the verdict!

    Jayhawk
    Eminence Grise
    posted 07-18-02 03:55 AM EDT (US)     26 / 34       
    Still looking good, Draco.

    Guess who's working on a new design?


    Angel Jayhawk
    Eyrie • Caesar 4 Heaven • Children of the Nile Heaven • Stronghold Heaven • Caesar 3 Heaven • Emperor Heaven • Pharaoh Heaven • Zeus Heaven • My Deviations
    Support your local Heaven • My Recommendations • EXCO • HALO
    I believe violence will only increase the cycle of violence. — The Dalai Lama
    Sunshine
    Banned
    posted 07-18-02 02:33 PM EDT (US)     27 / 34       
    Once again you've come out with a great article on 'HG website building', Draco. I'm eagerly awaiting part 5.

    Quote:

    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.

    Yes, I agree with the fact that website's may look different on laptops, Nojd. I sometimes use my laptop when I am out of town, and some websites do appear differently on laptops. It's great that you use both a laptop and a computer when designing images for websites.


    [This message has been edited by Sunshine (edited 07-18-2002 @ 02:36 PM).]

    Angel Draco
    HG Lawgiver
    posted 07-19-02 02:42 AM EDT (US)     28 / 34       
    Building a Community Website: AoW2 Heaven - Part V

    Don't forget to check the blurry image at the top of this thread, which is slightly less blurry than the part before!


    Quoted from Nojd the sparce, undecorated Swede:

    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, Sanctuary

    All 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 image

    Typing 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/strategy

    http://aow.heavengames.com/strategy/index.shtml

    All 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 image

    By 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).]

  • LordTheRon
    Member
    posted 07-19-02 03:10 AM EDT (US)     29 / 34       
    Going on vacation real soon. Hope that I get to see the final result before that. The unit descriptions look excellent!
    Swolte
    AOWH/AOW2H Seraph
    posted 07-19-02 02:34 PM EDT (US)     30 / 34       
    Good job!


    Get the unofficial Patch v1.4. here!
    My best AoW-Sm map: Drums of Death (This is the multiplayer version; for single player, or AI use different version)
    Other proud AoW-sm maps: The Key of Kharzul, The Fight for Light, Waikiti Island, Goldrush Mountains
    My proud AoW2 maps:The River Arne
    Coordinator of the v1.4 and v1.5 patchteams, Seraph of AoWHeaven, PBEM Singles Champion 2008
    « Previous Page  1 2  Next Page »
    You must be logged in to post messages.
    Please login or register

    Hop to:    

    Age of Wonders 2 Heaven | HeavenGames