Friday, December 21, 2007

Redesign

So I've done what could be considered a very bad thing, and redesigned A2A's game page entirely. Don't worry, it didn't come entirely out of thin air - I met with a friend of mine (thanks Jackie!) to discuss how it looked, and I felt that based on what she advised, I was better off doing something completely different. And you can see it here!

Here are some of the advantages I see of the new design:
  1. Much better use of browser space. One of the most important suggestions that my friend gave me was maximizing my use of screen area. There was quite a bit of wasted space in the old design, between fonts that were probably larger than necessary, design elements that could not be used to convey information, and a few things that weren't sized relative to how important they were - for instance, the chat window was ginormous, and the judge interface was tiny. The game will fit into a 1024x768 monitor, even when there are twelve players, and hence twelve cards being played at once. It should also be playable in 800x600 as well. The old design wasn't even close to fitting into 1024x768 - in fact, only the chat window fit on my screen.
  2. Less bandwidth. Given that there is going to be a LOT of AJAX-based communication going on, I need to conserve the amount of data I transfer as much as I can. And the primary way that I'm doing that is by removing most of the images from the design, since images are usually much bigger than text. The old design had a whole bunch of images, most notably the rounded corners and shiny buttons. Those are gone now, and the only images in the new design are the logo, the card background, the background image for the headers, and possibly whatever I do with the gavel icon.
  3. Better organization of information. As stated before, I've resized some of the parts of the page so that they better reflect their importance. The judge interface has been replaced by a table showing every card that's been played so far, and the chat area has been reduced in size. I also added a little box at the top of the screen to indicate whose turn it is and what everyone needs to do, which should be a great help. I didn't really have anything like that in the old design.
  4. Finally, it just looks better. It's kind of a relative and subjective measure, but I just like it better this way. The old version was just kind of pink and wimpy, but this is a little more dynamic.
On the other hand, I feel that I am going to web design Hell for this. Yes, I used tables for the design instead of divs and CSS. I totally understand and agree with the notion that divs are much more readable, and easier to maintain and update (although I'm skeptical of just how much of a redesign you can do just by updating your CSS file). However, I think tables have an advantage in that they just seem to do what I expect, whereas divs tend not to. Maybe that's just a function of having learned to design with tables, but I just think divs have a ways to go in terms of usability. I also could not find a way to implement my initial concept (the interface resizes to take up your entire screen) just using divs, whereas this was possible with tables. I think it's more important to be able to do something in the first place than being able to update or maintain it. As things are now, I think I could still redo it in divs instead, but I think I'm going to have to take the laziness approach for now.

Regardless, I promise to stick with this design for the "final" product and not stick you guys with any other redesign changes, although I still need to redo the homepage in this format, and I am reserving the right to make minor changes here and there.

No comments: