4th & Dragon : Dungeons and Dragons...and stuff

Very cool Chibbs.  That’s exactly the kind of website I’d visit everyday.  I would like to see a side-by-side shot just to compare the two visually.

LOVE it, Chibby.  It’s very classy and “fantasy-esque”, exactly what it needs to be, rather than a slapped-together “cartoony” design that only resembles a fantasy site if you squint really hard.  I personally love the utilization of art, as I’m a visual person when it comes to my creativity, and a website such as this would definitely entice me to give D&D a try (if I weren’t already playing ).

I’m glad you took the time to show us what it *could* be like with a little time and effort.

~~Becka

Not bad at all, Chibbs. I understand better what you mean in the comments on your last video about organization. I’m not quite sold on the dark color scheme, but the layout and use of art is top-notch.

That looks way better.

I love it. Let’s hope WotC is watching…

WotC needs to be making a job offer.  I like the redesign.

It is definately easier on the eyes, and easier at a glance to see what catches your interest.

Great job Michael! I gave you a shoutout over at my blog today, just don’t make a video about how terrible it looks.

--Propagandroid

Diggin it, very pleasing to the eye though the page itself is a bit too long for my taste. How do you go about designing these things (I’m amateur but I like learnin’)?

Wow...just, wow! I keep looking at the image and thinking about how much better THAT site would be. Can you create an interactive gaming table as well

WOTC should seriously consider hiring you. This is awesome!

http://hasbro.recruitmax.com/MAIN/careerportal/Job_Profile.cfm?szOrderID=2925&szReturnToSearch=1&szWordsToH;ighlight=

just saying.

Looks good, but, and this is huge to me, I believe your navigation at the top is a problem. It takes up what looks like about half of the top part of the “fold”. On every page. So as you navigate through the site you’ll have to scroll down to see the actual content. I recommend making the top nav something like half of its vertical size.

Hope you find this helpful!

Me being someone who has a hobby of some interior design work, visuals mean everything.  Sort of to the point where you don’t know what it is, but something is pleasing about this.  For me it’s the colors.  Instanlt my eyes were relaxed by Chibby’s color pallete for this layout.  Right there alone, I’m comfortable reading on and the layout become easier to interpret.

Excellent job.  And shows that it’s a no brainer to bang something out by a professional in as little time as a weekend.

I have to agree with both Jim and gwystyl.  The nav area doesn’t take up half of the page pre-scroll for me, but I do think it could be reduced.  As I look at the page there is a slight margin above the D&D Insider login pane and below the black WotC nav bar at the top.  I think that this margin could safely be eliminated.  The WotC logo and the D&D brand name have plenty of space around them to accomodate this change without looking like the grid system has been broken any more than the Game Day picture breaks the grid by bleeding to the left.

At least, that’s my uneducated opinion.  I’m no graphic designer and I’d have to see the result to really know if it looks okay.

Lets hope that WOTC just offers you a tun of money for that design. I don’t think you were being harsh on their web site. There are articles that I know they have written and posted to their web site, but its faster to go to Google and search for the article than it is to try to navigate to it through the WOTC site.

Well done!!!

This looks great Chibbs.  I know I said that in another thread, but I figured I would reiterate it here.

Something I think everyone needs to keep in mind when you are giving Chibbs advice on how to refine the site is he did this in 2-3 days as a mock up.  In literary terms this wold be a “rough draft”. Are there problems, of course, does it matter? Probably not, as I imagine this is also the final, and only draft.

I am not trying to be difficult here, I just think we are loosing sight of what this is and why Chibbell did it. He did this to prove what could be done by a talented designer in a minimum of time, and I think he did a wonderful job.

As one of the people who works on the D&D website, I’ll toss in a few reactions.

First, this take on the website demonstrates what can be accomplished by a single person working toward a single vision. Unfortunately, that’s not the case with the D&D site. It serves many masters, and they all get a voice in how it’s put together. The web team wants one thing, the brand team wants another, marketing wants a third, and corporate tosses in a fourth. Everyone knows what happens when an elephant gets designed by a committee. No one gets everything he wants; it’s all a compromise.

But second, yeah, we do pay attention to things like this. We (the web team) have looked at this build and tossed it around a bit. There are things we like and things we don’t, as might be expected. But no one dismissed it out of hand. We’re always open to good ideas.

Steve

No one gets everything he wants; it’s all a compromise.

I don’t think Chibbs was suggesting you use his build, but that it is fairly quick and simple to create a product that is vastly better than what is currently in existence.

No offense, but when it results in the abomination that is the D&D website, don’t you think it would be a good idea to NOT manage by committee?  Maybe the D&D brand SHOULD pay a single person whose whole job it is to work towards a single vision?  There’s something to be said about everyone having their say.  And then there’s the result which resembles the cluttered desk of an OCD hoarder.  Or, you could have someone take the the reigns in hand, alone, weigh the cost/benefit of the individual department requirements, and then create a singular work that is both functional and pretty.

Simply put, if “everyone knows what happens when an elephant gets designed by committee” (which is actually a skewering of the original aphorism), then perhaps it’s time to stop listening to all the chatter.

So this is where you guys ended up after 3rdedition.org. So glad I finally tracked you down. Love the new site. Mike, great review of the current WotC D&D site, and awesome mock-up.

@WotC_Huscarl - It serves many masters, and they all get a voice in how it’s put together.

How many masters will the DDI website, tools, etc. serve? How many does Gleemax serve already? The larger concern in the community seems to be with Wizards’ overall design strategy for its marketing, forum, and interactive gaming websites.

Heh, PlayDnD brings up a good point, WotC_Huscar.  Your post explains why you helped make the D&D site what it is, but it does not explain why WotC management made you make that site.  Your comments also do nothing to alleviate peoples concerns that DDI will will share this flaw (as gleemax already does).

@WotC_Huscarl

A reasonable response—but something you may want to bring back to them—unlike most web pages, you will soon ask me to pay for the joy of experiencing your website. It is therefore no longer fair to let it sere many masters—it needs to serve one master—and that’s me (and the many other users who will pay to use a well put together DnD site).

You wouldn’t let Marketing put an add next to the ranger write-up for DnD minis, why can they direct the design of this product?

Anyway—just my two cents.

One important issue with the current web site, which can’t be really
addressed in your front page redesign, is the organisation of the
‘back catalgogue’ information.

The D&D website has been going for some time, and there is a lot of
material on it. Trying to find it is horrible - a simple text search box
isn’t enough.

At the least the site needs article tags (like used on Dragon Avenue),
advanced search so you can target articles or adventures or whatever,
and much better organisation of previous material in a sensible fashion.

With DDI and the move to online Dungeon and Dragon, this situation is
only going to get worse.

Much as I like the idea of making the magazine more prominent in there current state that is probably a bad idea. Hopefully they will improve once 4th Ed comes out, but I’ve seen nothing to indicate they will.

Michael,

Now this is constructive criticism!

Thank you for taking the time to put together an alternative look for the D&D website and explaining the mechanics of why it is better (I especially like your explanation of using a strict grid system).  I am glad to see you aren’t just a ‘punk with a camera and a opinion’ but someone who DOES know their skill and can show their skills in the form of a most noteworthy example.  Most definitely ‘putting your money where your mouth is’.

Now, for my opinions (as you said, we all have our opinions):
* I like the dark backgrounds behind the text at the top most.  It gives a good ‘smoked glass’ look and showcases the fine artwork. 
* I’m not too keen on the red, but I understand your theme (matches logo) and certainly would accept it over many many other color combinations.
* Keeping the Dragon and Dungeon sections as main panels and then putting features below in a list form is marvelous as it automatically helps with the rolling of old articles off the bottom while giving each synopsis adequate real estate.
* Somehow I think marketting would really want to have the countdown timer for 4th edition higher on the page, meaning either swapping it with “News and Features” or “What is Dungeons & Dragons?”.  Heck, one of the animated blocks that change every so often between the three of them might be in order (to give that animated advertisement look).  I know ... not everyone likes those, but it does catch eyes.
* Although the logo is definitely less cluttered, it either is too small or has too much white (red) space around it.  You probably couldn’t do much with the limited size and quality of the graphic.

Anywho, I’ll refrain from making more nit picks on a great mock-up that already got WotC to look at it.  Your original misunderstood message is now getting people to go, “Yes, that is much better Michael, it can be better....”

Oh, BTW, can you fix the archives and the search feature now? And the RPGA stuff? And Gleemax? And organize the ....

I like it, especially the dark top part, but downwards from there I think it’s too ‘bloggish’. It looks transplanted from this or any other two-column right-sidebar blog. I’m almost expecting a little “0 Comments” bubble beside each title or something.

Dont get me wrong, I’d definitely use it and like it very much on my personal site or a friend’s site, but I think a site as central/iconic as WotC’s really needs to break out of the ‘bar nav, list of posts with a sidebar, footer’ thing.

Very nice, but requires an awful lot of scrolling to get to the community and sage advice parts (which are VERY useful and should be more obvious than the image of something posted one week ago).

Wait… my mistake… it DOES have a “# comments” link beside each title. Yeah, that’s a blog, man.

Not to sound harsh because you are taking action to help and that is commendable, but there ARE other design concepts out there, and it’s very common for sites with a more serious or corporative bent to need some distancing from that sort of feel.

Oh no no, don’t get me wrong here, I love blogs. I make ‘bloggy’ designs a lot of the time. In fact I’d go as far as to say ‘bloggy’ currently represents the most advanced mix of usability and visual attractiveness we have today (which is a big part, I think, of why this design looks so much immediately better than WotC’s one).

What I’m saying comes from my own smallish experience, when I deal with very small businesses or stuff like artist’s personal portfolios, blogs and galleries and people interacting suit them fine and make them happy, but a lot of the time when I deal with a more serious or corporate type client, “We don’t want it to look like a blog” is very often one of the first things I hear. “We don’t want people writing anything on the article pages” is another VERY common one, and one that is rarely budged on.

It’s really nothing to do with design or usability concepts but rather the type of client. When I think of WotC as I hold them in my mind, that’s the first impression I get. It’s kind of a mental reflex for me now… bigger business website == stay away from blogness. (Of course never having met anyone from WotC personally, I could be completely and absolutely wrong on this.)

As for showing my idea of designs, I regret I have to wuss out and proclaim you the better man on that one for now, no time Besides nothing I can show you is going to be “better” than this per se, just “more likely to be accepted by a corporate development team”.

By the way, while I’m here, let me say that even though this is my first time posting here, I’ve been reading D&D on this site for a while, and enjoying every minute of it.. you guys do an awesome job.

Okay that design at least looks a lot better than the current d&d website. The search field looks like a straight port from a mac program, but that’s just nitpicking.

I do think that a blogroll would only make the real problem less apparent. New articles would be easily found, but what if you’re looking for older material? The logic behind where some content is found still eludes me, other than “this column used to be in the Dragon magazine” or “this used to be a Dungeon mag feature”. Properly tagged articles would make it easier to find the content again, it would still make no sense as to why the article is in that particular spot.

I guess what I’m saying is that redesigning the website is only going to improve things if they change the way they manage their content.

Love this new proposed look.  It seems actually usable, instead of what WotC has now!

I posted this over on ENWorld, but I’m cross posting here to make sure you get a chance to look at it.

To summarize for anyone who doesn’t want to read all of that (it is exorbitantly long):  I definitely like the concept, and the design is very good. To me though, it was still lacking in a few areas… the biggest of which being branding. It looks like a spectacular D&D site, but it doesn’t really look like anything we’ve seen from 4e. As a result, and because I had some free time on my hands, I threw something together that used your site as a basis but fixed the couple of issues that I came up with, focusing primarily on branding, length, and contrast.

I’d be interested to hear what you think of it:
http://www.mattylee.com/images/designs/dd_redux.jpg

That’s actually a very good revision, though I actually have some minor issues with the redesign as well. I’ve actually put a lot of thought into the Wizards site myself, since I was once an admin WizO and did all the design work for a major WizO intranet site that tied into the design of the rest of the Wizards of the Coast site. The site never launched due to the shift towards Gleemax and the adjustment in the way the WizO team was organized (which meant eliminating the Admin WizOs and whatever projects we had going all together), but the time spent on the project left me intimately familiar with the overall site structure of the WotC pages.  As harsh as the original video review was, it was pretty well spot on and a little more gentle than I had been in the past.

I do have a few issues with the new design…

All articles are created equal
The new site makes little or no distinction between the different types of articles, and offers no obvious filter for selecting a single article type. Theoretically this could be done from the Archives page, but theres no reason not to distinguish from the beginning.

Thick header and masthead
That big masthead area looks great on the front page, but would be far too large for subsequent pages. Eliminating them entirely would result in fairly boring pages, but there isn’t any way to really scale them out properly. Its more scrolling than necessary, and on an informative website, that is a problem.

Black text on a white background
Tiny black letters on bright white is hard on the eyes. Designing towards readability, especially on a website that tends to favor large blocks of text, is very important. That said, it is a bold contrast against the primarily red and black, so design wise it is definitely your best option, but readability will suffer.

Long for a front page
While I admire the effort into making the article stubs legible and interesting, they stretch the page out far more than it needs to. The goal of a front page is to direct traffic where we want it. If the user has to scroll too far to find what they’re looking for, the lazy ones will simply give up.

BRANDING
The biggest problem with your design is branding. It’s a great looking site on its own, but held up next to the actual D&D 4e paper products, the two have very little in common. That’s something the marketing and branding depts at WotC should be fighting tooth and nail for, though at the moment their site looks like a hasty combination of 3.5 and 4e. The redesign here looks like 5e.

I still do work with the Wizards of the Coast online team, though not in the same capacity as I used to, but I’ll definitely do what I can to make sure that these complaints don’t fall on deaf ears. At least on my part, I will always be championing a better site design (and don’t even get me started on gleemax ;D).

I guess my concern with this one is that you have both a side and a top nav bar.  The redundancy is bothersome and doesn’t do much for the page’s clutter.

I posted this at ENWorld too, but I figured I’d paste it here too.

I like that your blog roll is smaller and that it incorporates a show/hide function, but I have a few complaints about yours too.

First, you have both a side and a top nav bar. The redundancy is off-putting and makes me wonder why there are both.

Second, the side nav bar looks almost like a spitting image of the current side nav bar and that’s not a good thing.

Third, although your’s is smaller (and like you said, better for people who don’t want to scroll), it still feels almost exactly as cluttered as does the current site.

Also - if Chibbell dropped the D&D minis product advert off his page, it would shrink the blog roll and come in quite a bit shorter.

Your side is like a hybrid between both Chibbell’s and the current one. If you dropped the side nav bar and found some way to have a show/hide while simultaneously leaving the art (maybe it shows the title and the first line or two so that the art can stay too), I think you might hit on something.

Better, IMHO, would be to find a way to add a show/hide to the blog roll that Chibbell has now, and then I think you’d have it.

Thanks for the feedback.  Like I said, this was just something I threw together quickly (less than an hour of real work) to show some of Chibbel’s concepts in a more “4e brand” feel.  Knowing what I do about large companies and branding, it doesn’t matter how good Chibbel’s design looks… if it doesn’t match the direction marketing and branding are going, it will go straight to the cutting room floor.  Its sad.  Its even tragic sometimes.  Its big business, and its the way things work.

I honestly wasn’t trying to compete or steal Chibbel’s thunder.  Just trying to show a bit more the direction branding and marketing would be demanding.  I will definitely respond to your comments though.

I honestly don’t know why I kept the side nav, to be honest.  That particular design is from an attempt I had made a while back to reskin the current site into a bit more open 4e look for myself through a CSS user style sheet (an intellectual exercise that I never ended up finishing).  That design was where I started with my own branding of Chibbel’s, but I ended up liking the top nav and used it instead.  The side nav should have been removed and the articles widened slightly.

The collapsing articles may not be useful to some people, but it allows you to show a lot of articles in less space and gives the user control of what they want to see.  The default would be to show the newest five articles or so, with another 5-10 shown collapsed below.  Allows you to find fairly recent articles without resorting to the archives and without wasting a lot of space on what is essentially old news.

The header probably should be toned down.  It originally didn’t have the news, (just image, logo, and login), but I added the news feature at the last second, since it is one of those things that marketing would likely be stuck on.  The best bet would be a slightly less busy header with a flash panel that cycles through the most important news and announcements. 

I’ve got 12 hour days all this week, but maybe I’ll have a few minutes free to touch it up real quick.