Wherein the story of the new Madlife web site is told in aching detail... 

A few weeks ago I got a somewhat frantic phone call from Chris, drummer of Madlife, desperate for me to put something, anything, new on the Madlife web site. Things had been quiet musically (har har) with the band the last few months and it was beginning to seem like they'd disappeared. They'd recently hired a new bass player and taken some new photos, and when Joyce sent me one of the photos it looked great. However, Chris wanted me to use it on the main navigation page. Problem: it was very orange and the current site was very blue. The only solution was to completely redo the site, also because the old bass player's face was all over the site and we couldn't simply put up a picture with the new bassist in it while the old one was still "around." Joyce sent me a few more pics, including a Photoshopped version of the first orange one that had a cool blur effect to it. I used those two in a simple Flash introduction over a short clip of music from the single the band is pushing via a radio promotion deal they signed up for, and then got to work designing a new version of the site. I'm particularly proud of it and the progress I've made with CSS, so come back if you want to read my posterity notes.

Funny how you stumble across an interesting visual hook by accident. Take the horizontal and vertical lines behind each of the navigation buttons. I knew we needed to keep the scary Quake font, but I've never had any experience giving more depth to my graphics. But, just futzing around in Fireworks, I came across the line types "Piano Keys" and "Toxic Waste," and combined with the Quake I instantly knew I'd found something cool. The orange-brown of the letters suddenly became a rusted industrial look when next to the sleek horizontal lines, and the freaky vertical line suddenly became strangely DNA-like. Whereas the previous version of the site was all about the cool efficiency of steel blue glinting in the lights, this new look seemed to be referencing Alien or The Thing as it might have been set in a burned out version of Metropolis or one of those other sci-fi movies where life isn't sleek and polished but strangely untechnological (can't remember the movie, but it's the one where the guys works in the office and they all talk to each other around the building using big black air hose-type things. Basically, the guy's trying to break out of the conformity, etc. It's pretty recent I think. MEC?) Anyway, that led me to the first challenge: color. I had the rust/orange, but where do you go from there? Since I was working on the navigation (oh, I also wanted to do a real vertical navigation thing unlike the three-column layout previously) I got familiar with Fireworks' frames feature (for rollovers -- it exports the images and the appropriate html which you then import into Dreamweaver. But you all had experience with that already, didn't you?) and came across the yellow, followed by the freaky greenish-blue on the vertical lines (that made it look like DNA). Briefly dispairing over the thought of a return to orange and yellow (which marked the 2001-2002 edition of the site, before the steel blue phase), I kept at it.

Next to be created was the large header graphic at the top of each page. The Madlife wording is a bitmap and until now I'd resisted putting in the effort to break it up manually in order to use with the letters individually. Well, this time I broke out the old lasso tool and lasso'd the "A" because I wanted a long version of the horizontal line to pass under that letter. That done, I brought another of Joyce's images into Photoshop for a general filterization. I came across the Cutout filter that messed with the image just enough to be cool. Truthfully, from a design standpoint I think it basically contradicts the rusted industrial of the rest of the graphics, but it was the best I could do and it didn't look completely terrible either so I kept it, and then the big header was done. Then I added the rust/brown double border around the big content <td>, deploying CSS border styles for the first time as well as setting the padding of that single cell with CSS. Small things, I know, but I hadn't used them in a real-world site before, and the feeling of CSS control (particularly for margins) is great.

Then came the hardest part: I've got rust, I've got yellow, but what color for the links? Something wild came out first: a bright green-blue that at first seemed wild enough to be cool. Then it quickly seemed too wild and I began darkening it gradually, to maintain the mysteriousness of things, you know. I still needed a third (and a fourth) accent color, and that dark green-blue (#003333 for those of you keeping score at home) worked (darker still became the visited links), but never as a full background color (far too green in that amount). It would only work as a thin line, and thus the idea for bordering interior tables and setting off divisions of the pages with those borders. Some more experimentation produced the fourth color: the table header color of #111111 -- just grey enough not to be black (on a Mac) but not visually distracting the way a brighter hue would be.

The dark gold text and the Courier font were easy to arrive at: Courier is mono-spaced and olde computer-like which fit with the trans-historical feel of the design; and the particular shade of gold looked cool both against the rust and with the #003333 interspersed for links.

From there is was a fairly simple copy and paste job from the old site files into the new. The Guestbook and Forums haven't received their makeovers yet because they'll require I redo some more graphics and set the colors through trial and error via a web interface, and I've not yet had the time to get to them. I spent about a week straight in the redesign and the necessity of getting back to the book has taken over for the moment. Still, I got rave reviews from the band and so forth, and all in all, I'm pleased. Comments and critiques are of course welcome!