I appreciate the feedback that everyone gave on my previous video slamming on the Dungeons and Dragons’ website.  It seems that it is something very important to many of us.  Some of you had some excellent questions and I felt that there was no better way to answer them than to show you what is possible.

But before we get to that…

It’s fair to say that my previous video was a bit of rant and not the most constructive form of criticism.

As I commented online, it’s not just about margins, gutters, grids and the like. Wizard’s web site should be about making a rich experience that showcases and harnesses the power of their content, entices visitors and is a joy to use and navigate. Their website is one of the primary means in which new gamers learn about D&D and we existing gamers find the latest information about our hobby.  Their print material is absolutely fantastic but unfortunately their online presence does not have the same level of quality.

With these thoughts and your comments in mind, I spent the weekend figuring out how to put my money where my mouth is. 

For what it’s worth, I am full-time web designer working for Jive Software.  I am also very involved in the Portland tech community.  This exercise is just a way for me to share my knowledge with you and the D&D community at large.

The Design

So here it is...my interpretation of the Dungeons and Dragons website.

Whether or not you find this attractive, I believe I have very successfully solved several of the issues with the current design.

Global Nav

Starting from the top, my overall objective was to reorganize the information so the site was easier to use.  I wanted to showcase the artwork and increase the content on the home page without losing existing information or sacrificing any of their branding.

At the top we have the global Wizards of the Coast navigation.  I retained the positions of the Dungeons and Dragons logo and the DnD Insider login, while removing much of the clutter.  This removed some noise from the branding and made the login form much more obvious.

The next thing I did was to move the navigation bar.  This frees up horizontal space in the content area and provide a navigation in a single location.

The Masthead

Next we come to the primary focus of the page which is the large promotional area.  Here we showcase some great art which helps set the tone of the page and provides a large space for promoting the world wide D&D game day.  I pulled content about the game day here so the user doesn’t have to click to learn about it.

The Magazines

Similarly, Dragon and Dungeon magazine gain a much prominent position.  At a glance, the reader can see what the latest issues are all about.  I thought it was also important to retain prominence for the D&D FAQ, one again pulling more information to the homepage.

All of this fits “above the fold” of a 1024x768 screen.  In other words, all of this content is viewable on most monitors without scrolling. I’m not a huge believe in the importance of “above the fold” design on the web but in my analysis of the current D&D website it seemed like it might be a requirement.

News and Features

The largest change to the site is the news and features area. It is currently quite difficult to navigate new articles and content as they are released. The way I solved this was to take all of the latest content and combine it into a date sorted blog roll of sorts.  At a glance, the reader can see which content is newest, where it belongs, and what it’s all about. This is heavily inspired by news and magazine websites with similar amounts of content for readers to filter through.

The news and feature header was inspired by the new 4th edition titles as seen in the recent photos of the Player’s Handbook. It helps to tie their print and web materials together.  You may also notice that several of the titles use the same typeface as the magazines and products. Also on the header is a clear link to subscribe to an RSS feed of new content.

You may notice that I did add links to the latest content up in the masthead area. This is for users whom might not want to scroll through the page.

Right column

To the right we have another area that can be used for anything.  In this design, I’ve included the 4th edition countdown, the 4th edition game demos, and the product release schedule.  This area is very flexible and could easily be used for any periodic content. In the product release area I’ve increased the size of the images and included additional text describing the products.

The footer

At the bottom, I made sure include Sage Advice, links to the Community, and submission information.  I felt that it was a nice terminator for the page that still providing meaningful content.  Again, I’ve respected the Wizards brand and have included their global footer, terms of use, privacy statement, and other links.

The big picture

As a whole, I wanted to make the site feel like Dungeons and Dragons.  I’ve used as much artwork as I possibly could without losing focus on the content. I’ve also used the deep red color scheme with blue and gold accents found in the D&D logo, Dungeon and Dragon magazines, and the upcoming rulebooks.

But is it usable?

I also did what I could to respect the workflow of content contributors.  It is not only important that the site is easy to use by visitors, but that it’s easy to update and maintain.  In fact I feel that this design requires much less photoshop foo by contributors to update the site.

The Grid

One of the most important aspects of web design is to draw the readers eye from one section to the next smoothly.  One way this is accomplished is through a strict grid system.

This helps align content and reduces visual fatigue as the user looks for content relevant to them. Another way this is accomplished is through focal lines and a visual heirarchy that draws the reader to important content, such as the angle of the sword or the flow of background imagery and masks.

Conclusion

This is one designers idea of what this could be like.  With more information and some collaboration with their team, this design could be made even better. I love Wizards direction with 4th edition and am looking forward to their new releases.  I can only hope that they eventually put as much time and thought into their online presence as they do their print products.

Whether you love it, hate it, or just don’t give a crap I’d like to hear from you in our comments or forums at dragonavenue.com. 

Chibbell out.

I woke up to another Twitteriffic morning. It wasn’t a month ago that I thought Twitter was a useless waste of time. Now I find it to be just as important to my daily activities as IM, email and Clearspace. I’ve made some very interesting and valuable connections through it. It gives me a certain sense of connection to the community. I love how brain-dead simple it is. That little 140 character box has forced me to become much more succinct and focused. Alas, it’s another giant time-sink that I find can be distracting. Like anything else, sometimes you just need to turn it off.

The conversations Sam and I have are usually via IM. He’s usually off traipsing about the globe while the rest of us salt miners hack away at a design or code. Sometimes this can be incredibly frustrating as we are both very poor at instant messaging. Our brains move faster than IM allows. Three or four conversation threads start to happen at once. I’m also quite handicapped at conversing when I can’t gesticulate wildly with my hands. Occasionally though a true gem sprouts forth. Something like today’s amusing banter.

Michael Sigler: how’s the foot? is it rotting yet?
Sam Lawrence: it really sucks. it’s broken in three places and i’m in a stupid wheelchair
Michael Sigler: Do you have osteoporosis?
Sam Lawrence: blow me

Ahh Sam, what would we do without you? Hope your ankle heals soon!

We had quite a great encounter in my Age of Worms campaign this weekend. The party has reached Kuluth-Mar, where Kyuss bcame a deity. There they met up with a few BBEG’s from the past and some souped-up monsters.

A few rounds into the combat and Jim’s Radiant Servant of Pelor was staring down the barrel of a charging enemy on horseback (well, Nightmare-back) with a +4 unholy greatsword. He was already under some serious mind-affecting effects and unable to defend himself.

At the last moment, his wife Rebecca was able to recover and come to the rescue. She lashed out with one of the first truly epic Disintegrates of the campaign.

112 pts of damage and a failed FORT save sent my beloved Knight of Kyuss, Loris Racknian, former champion and owner of the Greyhawk Arena, into oblivion.

This is the first time for many of my players at this power level. Its a lot of fun watching them roll 26d6 of damage for the first time.

Jim, ever grateful for having his cleric saved, had to snap up a picture. Just look at all those sixes and fives!

The Passion of the Wenckus from Michael Sigler on Vimeo.

I tricked my friends into thinking they would have to help me move. Little did they know that we had hired movers the week before. Instead of hauling heavy stuff we pretended to be rock gods.