Another busy week for me, and things are going along pretty well. This week I almost finished up my character, Robin Hood, and also worked on the website, even though the design is not complete yet. From my experiences at work, making a website is a work in progress. This allows tweaking the design as the template is being developed. Once we have the main structure of the site, the other elements such as imagery and typography can be changed at anytime with the power of CSS.
Modeling
As I said, I finished up my character by attaching the head to the body that Ben modeled for our male characters. The main challenge was to add enough resolution so it matches to the head that I modeled last week, and keep all the faces as quads. The head of character had more resolution compare to the body, and I didn’t want to add edge loops all along the character, in order to keep it smooth. Here is the snapshot of the work:

I also added his boots, gloves, shirt, belt and some accessories. Below are screenshots of each:

Hour: 7 hours Percentage: 98% (modeling)
Website
Design:
Based on Ted’s comment last week, I tweaked the design of the site a bit, so it has more characteristic. Most of the elements on the design are still place holders, and we can improve those after we have the interface of the game to judge from. My huge concern about the design is the Typography. Right now I’m using Verdana font font for all the contents, headings, and navigations. I was doing some experiment to see whether or not we can use graphic text for our headings (with text behind them for WebText readers) and I found that it’s doable in Drupal. However I’m not too sure about the navigations, because those are being generated by Drupal, and I don’t know how we can add class to them so we can control them with CSS. But I’m pretty sure we can either find a way with more research or find a proper font that matches our game. Below is the screen shot of the template:

The rotating image gallery will change in sequence and will link to each character’s profile page. Ben and I will get together this week and work on a proper frame for it (and also for the buttons in side navs) that matches the design of the card and the game interface.
Hour: 2 hour Percentage: 95%
Coding:
I also spend some few hours developing this design with XHTML and CSS. The design is a bit challenging because we have two backgrounds. One is for the header and main nav (the black and brown bar going across the screen), and the other for the background (paper texture). The problem is we cannot add two pictures to the “body”. The solution is easy: to take the header div out of the “main” division that is inside the “container” div, and add a repeating background to it. But this is against the Meyer’s web standards and other UI’s standards. I was browsing the internet looking for other websites with the same structure, and I found out most of them used the same solution, so I think it’s alright to overlook some of these standards. Long story to short: it validates!! and that’s all that matters. As for the CSS for the site, again I used Meyer’s reset CSS. that can be found at this location. This piece of code simply reset all the CSS sets by browsers by default (mostly Internet Explorer) and makes our life a lot easier trouble shooting IE issues.
I really wanted to proudly not support Internet Explorer 6 for our website, but unfortunately statistics show that there are still people using IE 6! As a result the website will have 4 CSS for different purposes. The first one is called main.css and is addressing intelligent browsers such as Firefox, Safari and Chrome. There will be two other CSS for IE 6 and IE 7 specifically. I will detect these two browsers with the following code:
[if IE]><link rel=”stylesheet” href=”css/ie.css?version=date” type=”text/css” media=”screen, projection”><![endif]
[if IE 7]><link rel=”stylesheet” href=”css/ie7.css?version=date” type=”text/css” media=”screen, projection”><![endif]
and lastly there will be another CSS named print.css that makes our website printer friendly. This CSS is also useful for any smart phone other than iPhone, Blackberry and HTC (these can render main.css perfectly).
The following link is the “work in progress” template development. Pardon my guidelines, and placeholders:
http://www.lexiconquest.com/template/
Hour: 8 hours Percentage: 25% (coding)
Long post! sorry