Lesson from the Design Assignment

So, my Design project is done (early, no less!). I elected to create a page from my final project, thus using this assignment to do some prototype work for the final project. Given the lessons I learned (see below), this is a Good Thing (apologies to Martha Stewart).

Things I’m proud of:
How the KDCB buttons work. These are on the right side of the page, and will serve as the primary navigation within the History section of the site. It’s a rollover button for CSS technique I found on the web. It’s an elegant solution and is easy to implement.

The notes in the text. While I don’t have any footnotes, I used Professor Petrick’s Sidenote 2 technique from her “Managing Endnotes & Footnotes” essay. I was able to get this to work (again), and I really like the way the additional information provided in the notes stays out of the way until it’s needed.

The header image. I really wanted to get my header image “outside the box” and I’ve very pleased at how it turned out. And even better, implementing the iepngfix.htc hack worked, too, so my hard work shows up in Internet Exploder, too. Good thing, since I’m sure 90% of the intended audience will be accessing this site in IE. If I’m lucky, it will be IE7 for most of them, but I’m sure that Microsoft will have a hand in most of the views.

Now, my lessons:
Just because you’ve done it once, don’t expect it to be easy to reproduce the effect again. Several of the techniques on my page were things that we’ve done in class throughout the semester. But I underestimated the time it takes to recreate these things when it’s (literally) been weeks since I last thought about it, much less practiced doing it in real code.

Start with a plan – the development phase is the wrong time to be doing design work. This is a lesson I’m personally embarrassed to re-learn – it’s in the day-to-day activities of what I do for a living, for crying out loud! I harp on “design then develop, design then develop” all the time. In spite of a sincere effort to think through the design of this page, much of the design is an organic outgrowth of the work I did, as I did it. I’d be creating a button and have an idea about how the buttons should be for a different navigation menu, necessitating going back and re-creating new buttons with a different theme. I would have saved several hours’ worth of work if I’d just thought it through a little more.

Line up your resources first – stopping to create new images, for instance, is a real drag on momentum. As much as I hate to admit it, I needed a project plan for this work. If my design had been more complete, I could have focused my time in Photoshop. That way I could have been banging out buttons and correcting images in quick succession, reinforcing the process with repetition and building up some momentum. As it happened, I jumped back and forth between XHTML/CSS code and Photoshop several times, and each time it took time to get back into the groove of each (very different) activity.

The devil’s in the details – keep a “punch list” of things that need to be fixed. This was actually something that I did right. I kept a running list of things I needed to fix as I went. That allowed me to stay focused on the current task without losing track of each little detail that needed attention. Several times, for instance, I started to work on trying to figure out the IE fix for showing PNG files. When I realized that I was getting off task, I was able to haul my attention back to the item I was working on and see it though to the end. I was even able to prioritize my punch list, so I focused on the “need-to” items and left the “want-to” things to the end. I eventually did tackle the PNG file issue (it works!), but only after I had completed all of the important things for getting the page to work in a standards-compliant browser.

Comments

[bill]

Chris, You're rightfully proud of the header image--it really fits the site. Nice cutout top and great font. I really liked it.

Bill

[Laura Veprek]

Chris,

Really great job! I love that you used bright colors and a rather wild though not too distracting (and thoroughly appropriate) background image. Your header is pretty good, too, and I commend your efforts there. I have a couple of suggestions that you may consider including in your revision for your final. First, I would actually take out the image background in your navigation buttons. I think for your purposes, it's distracting, even though I appreciate the perhaps unintentional homage. I would consider white, and be sure to get rid of the borders, unless you want them. The other thing I would do is add a background color to your images that are included in your text. I like the way you've styled them otherwise, but I think it would be nice to set them off a little bit more with a different background color. Maybe the purple you've used for the headings? Play with it a bit and see what looks good.

I really like your clean layout and your lines. It's very crisp and fun. As a clown band website should be.

See you in class,
Laura