opinios

Shortcutting The Design Process

For those who don't know me well, I have both technical and creative streaks. I studied computer systems engineering at university, but up until then I also spent a good deal of time drawing cartoons, sketching portraits and writing poetry to express myself. While this background often works well for me, especially considering both are required to be a good web designer, at times I find they tend to conflict with one another.

One example of this became obvious when trying to come up with a new design for this site.

I've spent a good chunk of yesterday and today messing around with new ideas, and each time I think I am making progress, I decide I am unhappy with what I've done and start over. It wan't until I took some time out this afternoon to take my mind off it that I realized why I wasn't getting anywhere: I've been trying to shortcut the process.

I would start out disciplined, by drawing a few pages of thumbnails and sketches and reworking ideas until I think they have potential to work up on the computer. It's at this point that I should spend more time in Photoshop, free of browser quirks and CSS syntax, to narrow down what I want to achieve and iron out all the detail.

But instead the right-brain semantic purist (and probably the impatient designer who wants to visually see some kind of result) steps in and insists that the HTML corresponding to the information I want to present be laid out logically before it is styled. Which is still ok, I guess. It's just that it's not the most creative step.

And then I try jumping to the finish line by writing my CSS directly. And that's when things falls apart.

It's not that my CSS isn't up to producing individual effects that I am after. It's pretty good these days, I can position things by writing floats and position: relatives and pretty much get the layout I'm after on the fly. But it still takes longer than it would to draw it in Photoshop. And it leaves out all the integral factors that go to making a good design:

• typography (often achieved with an image, due to the limitations of a web browser)


• a consistent colour scheme (yes it's easy to change the colours for multiple elements in a stylesheet, but I'm guilty of having only a rough idea and thinking "I'll tweak that later" while forgetting how difficult it is to visually adjust things while constantly flipping back to your browser and hitting reload)


• element relationships (essentially, the bigger picture of how different parts of the page connect to each other)

The last couple of lectures at design class have verbalised some of these concepts, such as the "CRAP" theory (contrast - repetition - alignment -proximity) and other similar ways of dissecting a layout, and all the while I've been listening intently, taking notes and finding it all very interesting, and then completely ignoring it all when "whipping up" a web page.

So maybe it's not that the left and right-side of my brains are competing with each other - perhaps it's just that I'm impatient. Well, no longer. It's back to drawing board, and no wavering on discipline! I think I'll document each step of the site redesign process here, it should be interesting.