Two weeks ago I posted about how I spiced up the graphs in CMS.  Well, now it’s time for the gantt charts.  This is what they looked like before:

And this is what they look like now:

Quite an improvement if you ask me!  Although things do look more attractive with the 3d shading, I think the real improvements are in readability.  The partially complete tasks now make more sense, and the grouping categories don’t get in the way.  Keep an eye out for this new functionality in CMS 2.0 soon!

Nothing is polished yet, but here’s a sneak peek of where we’re going with dashboards in CMS 2.1.

Note:  An old college friend recently asked me to critique the design of one of his web projects.  I thought some of my advice might be helpful to web developers in general, though, so I’m publishing a few excerpts here.

Color scheme and ascetic choices are some of the more subtle design decisions, but they go a long way towards improving site usability. Take the video sharing site, Vimeo, for example. Zach Klein, one of my favorite designers, is largely responsible for its look and feel, and he’s done a great job creating a site that just seems easy. Don’t confuse good design with simplicity, though. A lot of effort has gone into making this page look clean.

My first piece of advice is to not be afraid of white space. There’s absolutely nothing wrong with having sections of the page empty if everything is laid out well. This took me a very long time to learn.

Less is better. Our mission as web designers is to put as little information on the page as possible to accomplish what needs to be done. Not only does this apply to layout, but also functionality. The guys at 37 Signals say that the mark of a good developer is the ability to say “no” to the majority of requests for new stuff. If you haven’t read their book I highly recommend it.

Avoid using black text, or black anything for that matter. It’s jarring and super high-contrast. Instead, use a slightly faded version of black, which will look pretty much the same but with a subtly smooth appearance. You’ll also have 100% black in your arsenal to use when you really want to draw attention to something. I’ll bet you didn’t notice that this text is dark gray until just now.

This concept goes for everything, actually. If you’re writing white text on a baby blue background, throw a little blue into the white. I like to think of everything as being 90% opaque. Photoshop helps a ton in this area.

Finally, use large fonts when appropriate. Sure, you’re going to want some text smaller, but a nice size 20 Helvetica/Arial font really lets people know what page they’re on. I prefer sans-serif fonts.

to be continued…

The graphs in CMS get the job done, but they’re just not as attractive as they could be.

So, two weeks ago I set out to make them look better!  Behind the scenes these graphs are just a bunch of math equations, so I dusted off the old Trigonometry textbook and got to work.

I ended up adding rounded corners and outlines to the boxes, 3d gradients to the lines, and soft shadows to everything.  I think the end result is pretty sharp.

So, keep an eye out for these changes in the next few weeks!