Those words struck fear into my heart. Sam was supposed to be on a plane halfway around the world. He wasn’t supposed to be sending me new things to do. Plus I was pretty sure that he didn’t even know how to work a fax machine. With him it’s iPhone or nothing. Here is what he sent me. It’s a little blurry but trust me, you wouldn’t be able to make it out even if it weren’t.

A bit later he attempted to explain his latest wild idea. The Enterprise Octopus had reared it’s head once again. It has done so several times. This time a new illustration was needed.

“I need you to draw the anatomy of the enterprise octopus with a bunch of people inside and you are on top with Doppler for a head. The tentacles are grabbing all this stuff. Then I need you to draw the octopus as bowl, upside down, with a man drowning in paperwork.”

Did I mention he was insane?

Fortunately at the time I had David Carroll working for me and he took the first stab at it. That’s what a good minion is for after all. David’s idea was to make Octi into a sort of enterprise machine, with its eyeballs and mouths on hinges with people popping out to say hi. It was a very creative idea and I really think he did a great job on it. I added a little cherry on top, translating Doppler into Radar and making it a man’s head. as well as a few touches like the rubber grommets. I also really dug all the rivets David added and how precise the seams were.

David also drew the safe and the screen by hand. The truck comes from a Yellow Icon icon pack.

Of course Sam had asked for two drawings, so I took a stab at the back. The idea was an enterprise that had collapsed under its own weight. The standard array of office apps aren’t getting the job done and pure chaos reins supreme. I went with the idea that the tentacles were literally crushing people, perhaps having been chopped off in places. People are trying to work with files but have no idea what to do or can’t work with them. Others have given up. Oh and Sam wanted a man with a bag over his head representing the employee, lost in a sea of files and confusion.

Here are the steps I took in creating it. If you’d like to see these in full res you can check out my Skitch account. I worked in chunks, sending progressive updates to Sam to be sure I was on the right path. That way if something was wrong he could stop me early and set me back on the right direction. Sam and I work best like this, especially for complex designs or illustrations and allows for a lot of feedback throughout the entire process.

As you can see, the first stab at the piles of paper looked a bit like rice. I ended up biting the bullet and drawing 10-15 unique pieces of paper and then cloning them all over the pile. I then unified them by giving them a universal light sorce.

You can also see where our styles diverge a bit. I used a more traditional illustration method, painting the scene with a Wacom pen and tablet. David used vectors and a much more controlled and precise style. His people are a bit stiffer, like what you’d see on a bathroom door. Mine are pudgier, luke plastic bags filled with blue jello. Neither way is right or wrong and I really liked seeing our different interpretations of the same subject.

David had given us a great start but Sam was a bit concerned that the Enterprise Octopus was looking too machine like. He wanted something a bit more organic. I went back and retouched it, removing many of the machine bits. To give the COLORS acronym a bit more contrast I added a wavy blue banner. This helped the words stand out a bit more.

To see them at full size and to get a bit more context check out Sam’s blog post explaining this madness. It goes into a lot of depth explaining what each represents and is a fascinating analysis of how enterprises work.

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.

In preparation for my presentation at Beer and Blog I hastily put together this list of useful design resources. I hope people find them helpful. I’m also quite positive I’ve left off quite a few things that are obvious. Please feel free to leave suggestions.

Pixel Pushers

Pixelmator (OSX) - http://www.pixelmator.com/
Great low cost image editor for the mac. Very much like photoshop though in its infancy.

Paint.NET (PC) - http://www.getpaint.net/
Free image editor for the PC. Been seeing it garner traction lately. An undergraduate project that’s grown up a bit. Source code available too.

Picturesque (OSX) - http://www.acqualia.com/picturesque/
A very quick small, focused image editor for the mac. Easier to make rounded corners and reflections with it than photoshop. Batch processing can be quite useful.

The GIMP - http://www.gimp.org/
Completely free and works on anything. Started its life on Linux I believe. I’ve never been a huge fan but some people LOVE it. Of course they also tend to love writing their own drivers and other scary linuxy things.

Screenshots Galore

Snipping Tool (Vista) - http://snurl.com/25025
Great article on Life Hacker on how to use the new built in screenshot tool for Vista. Glad Windows finally built in something better than Print Screen.

Print Scr (PC)
For those without Vista, you can also take screenshots by tapping Print Screen on your keyboard. This will capture the screenshot onto you clipboard. No mouse point though. Pressing Alt + Print Screen will capture JUST the active window. Great for sharing screenshots of how badly your website is broken in IE6.

Shift + Command + 3 (OSX)
This will automatically capture a screenshot of the current screen onto your OSX desktop. If that’s too awkward of a key combination, you can always go to System Preferences > Keyboard and Mouse > Keyboard Shortcuts. There you can see all kinds of helpful shortcut and change them to your hearts content. I also highly reccomend "Alt + Shift + Command + 4". Then you can copy a selectable (click and drag a box on what you want) picture of the screen to the clipboard. Even better, before you click, press the Spacebar. Your mouse will turn into a little camera and you can click any open window to get a screenshot of just it, window shadow and all.

Skitch (OSX) - http://skitch.com/
My current face. They just make it far too easy to take a screenshot, mark all over it, upload it and share it. Useful for spreading ideas quickly. Too bad that its mac only. Their file organization and page layout could use some work though.

Screengrab! (Firefox Extension) - http://www.screengrab.org/
Another great tool, this time specifically for Firefox. Great for grabbing a screenshot of the entire contents of the page, not just what you see on screen. Can copy straight to clipboard or save out to a file.

Paparazzi (OSX) - http://www.derailer.org/paparazzi/
What I used to use for grabbing screenshots of pages on the mac. You input the url and I believe it uses Webkit/Safari to generate the screenshot. Nice part is that it lets you specify exact width.

SnagIt (PC) - http://www.techsmith.com/screen-capture.asp
Probably the better known screen capturing utility for Windows. Paul Biggs swears by it, though I haven’t messed with it much myself.

Screen/Video Capture and Video Hosting

Screen Flow (OSX) - http://www.varasoftware.com/products/screenflow/
A great new app for capturing video of your screen, mouse and mouse clicks, camera, mic, system sounds. It has some pretty simple built in editing too so that you don’t have to open up iMovie. (Why did you have to ruin iMovie, Apple!? Why!?!)

Camtasia (PC) - http://www.techsmith.com/camtasia.asp
Also from TechSmith, the same people that make SnagIt. I’ve used it once and it was pretty adequate for my needs at the time. Again, I think the PC users are missing out on some really good, simple apps. This one is a bit more of a heavyweight.

Vimeo - http://www.vimeo.com
Need a place to host video that has higher quality content and feedback? Vimeo has to be one of my favorite sites on the net. Really great atmosphere, excellent web design and even the option to upload High Def video. Hard to beat. Great for hosting video-blogs, short vidcasts and your own homegrown videos. Not the place to host your marketing materials.

Blip.TV - http://blip.tv/
Now this is the place where you can host your marketing materials. Or you developer videos. Or anything you want really. Really great for hosting say your own online product reviews or something of that nature. Anything episodic in nature works well with their interface.

Image and Design Resources

Flickr - http://flickr.com/photos/chibbell/
The goto resource for hosting your photos online. Also a great place for me to host all my screenshots and keep them organized. Also a great resource for free photography if you pay attention to what license the photographer is using. Surprising amount of people are ok with you using their photos. Also a good resource for finding random objects, textures and effects that you could manipulate or cutout and make your own imagery with.

stock.xhang - http://www.sxc.hu/
Great resource for free stock photography. Not quite as nice as flickr but a lot more of your typical stock photos can be found here. If you’re on a budget or just need something simple, this is the place to check. Site can be a bit on the slow side at times.

iconBase - http://iconbase.com/
Great free icons from the people of Yellow Icon.

Silk Icons - http://www.famfamfam.com/lab/icons/silk/
A set of 1,000 16x16 icons from Mark James. Realy great stuff. Heck, we use some of it in Clearspace.

Designer’s Toolbox - http://www.designerstoolbox.com/designresources/
Recently found by my colleague, John Lascurettes. A really great collection of resources for design. Everything from PSD’s of form elements from every modern browser to templates for CD labels. Never forget the dimensions of a A10 envelope again!

Open Source

Open Source Living - http://osliving.com/
Hands down one of the best designed and organized resources I’ve seen for open source software. A lot of potentially great apps in there that I’ve yet to try. Gotta thank Chris Kalani for this one.