Riding the wave of web design

I'm currently working on my own web page, and I'm not at all displeased with the progress. People will certainly recognize that I have gathered some design cues from Blizzard Entertainment, a company known for very energetic and rich web sites to support their games. This is a strong step away from a long attachment to minimalist designs. I've always loved the simple elegant sites that still remain perfectly usable and totally intuitive. Websites should look like you can use them to do things. Tabs and big buttons of current designs have helped, and I like the solid colored div layer designs being used these days.



For years now, I've read CNN.com as part of my routine. While I have many news sources these days, CNN is the one I've used the longest, and have seen the evolution of their design.



If you look back through the years using the WayBack Machine (or, in this case, the mirror at the Alexandria Library site) you can see this evolution in action:

Important Note: I am not a design expert by any means, these are just my thoughts on things based on my own experience in web design and being a web user.

• 2001 - Mostly text on a white background, seems to be trying to stay low-bandwidth for dialup users, not many images. It seems like they are attempting to get as much info in as quickly as possible. Design is built mostly with tables.


• 2002 brings us a more intense design, the logo is larger at the top, sections are defined with bright color headers, the sidebar menu has changed from a light sky blue to an eye-catching dark blue. It's meant to be bolder and more serious. The design is still created using tables, but with a lot more Javascript. Interestingly, the first bit of Javascript is a CSS fix for users browsing with Netscape.


• 2003 through 2005 stays essentially the same, proving that sometimes a good design just works. Gone is the placating of low-bandwidth users. Headers, search bars, titles, all made with graphics adorning them. The main story takes center stage, allowing browsers immediate access to "what's important right now". While CNN, and most other news sites have always had a "headline" story, this took it to a new level on terms of real estate dedicated to one piece of information. Very little changes over the years, the Google-powered search becomes a Yahoo-powered search and in 2005, they introduce RSS feeds to the site.



• 2006 sees the first steps towards the latest "Web 2.0" trends with embedded video, some rounded corners, etc. There's a higher level of integration with the specialty shows on the network, blogs by anchors and other journalists, and a streaming video pay service that drops the latest content to your computer as it's happening. While some divs sneak into the code, it's still a table based design. But I don't consider any of that to be the big design change. The big thing to me is that they finally broke the 800px width barrier. Just that little change allows them so much more space to work with, finally breaking the crowded busy atmosphere of the earlier iteration.
  


• It wasn't until just a few months ago that CNN really hit the level of interactivity and design that I expect in "current" sites. Here it is. Finally, built completely out of div layers, and fully AJAXy in implementation. Obviously, the design is different. The big blue side bar is finally gone, turning in a seamless and almost unnoticed top menu. Data is streamed into the site, allowing for you to see popular topics, most viewed and most emailed pages, etc. The "main" window of the whole page, holding the summary of the headline story and the other top headlines in one place, and refreshes automatically via AJAX. The "ticker" provides a live feed of incoming stories and updates to stories. A "Developing Story" bar sometimes fills in between the top bar and the content, alerting you to what's occurring now. The whole format of news delivery puts you in the moment, getting up-to-the-minute information. It has a user-oriented methodology as well, focusing a good deal of their space on what is popular and being viewed.
  
  What gets me the most about this design is in the stories themselves. I was shocked to see this feature added in when this version of CNN.com was beta-testing, but they have a "Story Highlights" section at the top, like a Cliff Notes version. The title section of the story's page, which is definitively separated from the story, has the title, then three or more little bullet points giving you the pertinent information, however generalized it may be, and directly under, has a link to the next story in that section. They are inviting users to "skim" the news, get the basics, and move on. While I abhor the thought and think this is where misinformation comes from, for a modern web-user, busy and not able to read EVERY story out there, it gives you a wonderful preview function to see if you want to continue down to the story below.

Long story short, you can see how the focus has shifted from getting the information up there for the lowest cost in bandwidth to making it look as good as possible and stacking features on top, to finally resting on a low-impact, high-usability web site.

When I think about these sites, I wonder about how I could better optimize my own design, and, of course, I wonder how I could possibly match the simple beauty and function of the Windows Live website. Is it enough to have a really really nice menu bar across the top that does everything you need?

Status and Questions

It's been quiet since the last time I said it wouldn't be quiet anymore :p

Warren Spector , one of my favorite game developers, muses at how easily his blog became a meta-blog, blogging more often on how hard it is to keep a regular blogging schedule. I'd try for sympathy, but Owen does more than I do (and better, I should add) and still blogs like a madman.

But routine is something I haven't had enough of in my life recently, and in regards to this blog, it's one of the things I'm going to be changing.

To begin, a list of what I'm doing. I had considered separating my "project" and personal blogging off somewhere else, but I think it's probably better to have it all in one place. I believe it will prompt me to write here more often. These are the projects I'm currently undertaking...not really all at once, more like the list of things that I want to accomplish.

• Zero-Altitude - this is my big one. The name which I will be publishing any zany works I develop. My friend and creative partner Will and I came up with the name to indicate the ground floor, the base level. I've talked about it before, but the website should roll out this week
• Continuing the tutorials, of course
• I'm working on a quick and dirty HL2 with a friend who is a very talented level designer. His concept is a battle in a contemporary setting, such as an office building, where weapons are one-off and one-use. The horror-shooter Condemned used a similar concept, with the main character pulling pieces of rebar up as weapons or things of that nature. In this concept, every day items would be the only weapons, and they would have a one hit durability. That is to say, once a hit is scored, the weapon is destroyed. At the same time, weapons would have realistic effects on enemies, meaning it wouldn't take much to knock someone down. The big draw is exploring the amazingly modular structure of the Source Engine.
• Of course, FSX and XNA experiments. Zero-Altitude is supposed to exist as a test bed for all sorts of experiments in game play, and XNA provides a good place to start.
• Learning Silverlight - I have to say, from the demos, I'm impressed, and I'd love to poke around and see what makes it all tick.

So that's it for now. I need more coffee, and I want to read more about this massive 737NG inspection happening, but work is work so back to coding I go.