Webby Webby Bang Bang

So I'm working on revamping my website. Which is a pretty daunting task, considering how much time it normally takes me just to edit one page or (god forbid) revamp the entire concept I have for a series of pages. When you have 291 pages of one single webcomic, the thought of restructuring it usually doesn't go too far in my head before it hits a brick wall. I could spend 4 hours revamping a series of pages, or actually post a comic page. Or, y'know, go get something to eat.

Over the years I've gone through a few design phases, but mainly I've relied heavily on image maps.

Image maps always appealed to me because I could switch up the layout, images, and color palette without having to do to much coding around it. I loved the idea of big, bright images that people could click on, rather than having to navigate through tables and text links. But anytime I wanted to change a page, I did it individually, without considering the bigger picture. So my site has haphazardly grown over the years into a bunch of pages that may/may not match one another's overall theme:

As you can see, any sense of an overall design scheme is pretty much nonexistent. Recently, I've learned a lot more CSS, HTML5, and JavaScript, so I've been itching to redesign it. But if I worked in the way I normally work, it would remain pretty much the same. An updated piece here, an outdated piece there. I'm terrible at stepping back and painstakingly planning a process once I'm excited about something. I want to DO it, so let's do it! Instant gratification! Yay!

Luckily for me, I attended the HOW Interactive Design conference last week (as I may have over-mentioned already), and it helped me realize the value of putting on the brakes. Since this is such a HUGE change I'm looking to make, I'd like to make sure and do it right. (And by right, I mean the way that I define right, which could very well still include fake links and messed up pages. And probably will.) So, like  a proper grown-up, I've started with the first steps. Some sketches of the overall page structure/layout.

Next comes the wireframe, which is a black and white no-frills version of the navigation and what needs to happen.

(Okay, truth - I started the wireframe and then got excited/sidetracked by creating a mood board full of different things that I want to include):

Yep, off to a good start already. But I'll keep you guys updated on my process along the way, and I'd love to hear if any of you out there have gone through a similar site-wide redesign. Were you able to wait until the entire thing was planned? Or did you just start coding left and right, process be damned?