30 December 2008

web screenshot project

Last week I had the chance to take some (badly needed) time off, for a short Christmas/anniversary trip to Prague with my family. And before that, work had been as busy as ever (when it rains...). Thus the lull in blog postings so far. I haven't even had a chance to keep up with my fledgling blog yet! We're off to a good start, then.

Anyway, the latest project I completed was a single entry page for a website – not my usual thing, being a print designer and all. But I thought, well, it's really not even a layout or template for a website; it just has to be a single page where it can be unstructured and just... well, if you'll excuse the arrogance... art. Not that I'm asserting my work is art, mind, it's just the frame of mind I had to be in to tackle a project like this, being out of my element. And this suddenly became an exciting challenge.

I was given a page as a sample, that my client really liked and wanted theirs to be modeled after (yozzan.com):

Of course, I couldn't just swipe this designer's idea, even if I brought original images into it, because a. that would still be stealing, and b. that wouldn't make me a very good designer. So I had to come up with a similar idea but still with its own look and feel. My client loved the idea of a door as an entry way, and she mentioned having a coffee-shop feel, being warm and inviting. She also loved the grunge look (which, after lots of small self-prescribed experiments through the past recent months, turns out to be much harder than it seems). So these rules of guidance, along with some specific lines of text to be included, were more than sufficient to get me going on my way.

My first mistake, as happens more than I care to admit, was that my excitement over the project outweighed the practical need to start with a pencil and paper. So I gathered some images, fruits from my labor of web-trolling and scanning, that I thought would work nicely, and just dove right into Photoshop. Here's what I came up with originally:

I only added the diagonal lines in to give it some sort of anchor, but the overall effect was pretty bad, and I think you'll agree this was far from the finish line. But after several hours of work and not lifting my head up, I felt pretty good at this point, so I sent the first draft over to the client (cringe). She did like it, but mentioned it was a bit too feminine – something I had failed to see myself. How right she was. Way too feminine, no anchor or balance, and just a plain mess to the eye. Time to take a step back.

I worked on this a while longer, taking out the most feminine aspects of the piece, and adding in some hand-drawn elements. The image was still a big mess, but at least I got all my ideas down on the page (or screen, to be literal). Keeping that in mind, I'll show you where it now stood:

Yep. A GREAT big mess. So finally I did what I should have done in the first place, which is to put pencil to paper and start sketching out ideas. Here is one of those sketches:

To be fair, I did take quite a few notes actually, as the first thing I did, even before opening Photoshop. But that was a close second.

The sketch provided me with the answer to my dilemma: some sort of balance to the page. I opted to give the feeling of a third dimension; instead of the flat front-facing door, I thought a diagonal horizon might provide an anchor point, as well as a little movement and energy. I ended up skewing the door image and pathway a bit in Photoshop as well, which gave it that little bit of extra dimension my first two drafts were badly lacking. Anyway, many hours later, here's what I finally arrived with:

The door was actually taken from a photo I took while on holiday in Prague (oh, the paradise of beautiful doors!), and as you can see I dropped the idea of the arrow; it just wasn't working. There's a balance here between making it visually interesting and original, yet making the piece have simplicity and meaning as a whole (ie, you can't just throw things down randomly and hope they work, without having a reason for them to be there in the first place). Oh, the endless struggle... what else sucks time down the drain like this noble pursuit?

Of course, at some point there has to be an end to the endless abyss of tweaking, and it always helps to give myself a final hard deadline for this reason. The client was happy, and I could finally say I was happy with the final outcome as well.

So this has been my process for this project. I always enjoy seeing other designers' layout of the process they use to get from point A to B (and all the bits in between), so I thought I should share as well.

And in what other career are there new challenges all the time? I love my job.

No comments:

Post a Comment