House Made of Web (segment five)
December 23, 2008

House Made of Web is a series of posts explaining the web design process. Many seem to think it's a kind of arcane, magical process ... but it really shouldn't feel like some secret thing. This series of posts should help the non-designer and non-coder understand the process by which a website comes to life without getting too terribly techincal.
The previous posts in this series are:
House Made of Web - the backstory
House Made of Web (part dos) - Information Organization
House Made of Web (chapter tres) - Beginning Mockups
House Made of Web (numero cuatro) - Beginning Mockups

House Made of Web (segment five) - Development of the Mockup

In my last post, I spoke about the problems inherent in giving a client two mockups and how that can be a good thing or a bad thing. In the case of my client, Sherry K, this worked out well and I came up with a more refined design that she really liked.

The process of building the mockup is, for me, the really fun part. Generally speaking, I start out in Photoshop and begin building the various pieces of the site. I tend to start in one of two places: either the themed colour palette for the site or I go looking through the client's images searching for something to build around. In this case, I started with the splash of lime, thinking about pianos and her Kirby Lu Productions logo. I flitted around on iStockPhoto to get some ideas ... but I found a nice vector piece which I thought I could adapt to help create a really nice banner piece for her.

Using a stock piece is a risky thing in design. Anyone can buy a stock piece (vector or photo) - which means you often wind up with a design that looks a lot like every other design. There's not enough style which speaks of the client because it's something that was created specifically to be general (and thus the most use to the most people).

You'll notice in the mockup that the banner has a piano which is kind of grainy, fuzzy and has iStockphoto's watermark across it. Mockup 1c

When you're building a mockup, you do not want to purchase stock photography (or, in this case a vector graphic) before you know if the client likes it. Instead, you take a "comp" version of the image and insert that into the design. A comp image is one that you are allowed to use for a mockup in order to sell that image to the client, but it's provided in a smaller format to protect the copyright owner from theft. Obviously, I wouldn't want to use that comp image in all of its graininess - I want a sharp, clean look which I can only get from purchasing the image.

In this particular case, the stark white piano with the dramatic angle was something I thought could work really well with Sherry's site - and I thought I could add that splash of lime to the piano to further personalize it to my client. After getting approval from Sherry, I purchased the image and began editing it in Adobe Illustrator, adding the bit of green to the black keys and a hint to the front of the piano as well.

The Sherry K branding to go across that piano was also created in Illustrator.

For those who don't know much about graphics, you've probably been wondering about "vector graphics" and Illustrator. Why not just use Photoshop?

An image in Photoshop is essentially a lot of little pixels. It's great and you can do a lot with it ... but only if you have the right size image. You can't really enlarge the image much ... because there are only so many pixels.

A vector graphic sounds complicated, so hang on whilst I explain it. A vector graphic is a series of points and a mathematical formula to determine the lines and fills and shading. But a lot of artists are definitely NOT math majors - so how do they do the formula? Illustrator does it for us. We draw the image with our mouse or a graphics tablet ... and Illustrator does the math. What this means is we're not limited to a set number of pixels. We're only limited by our own precision. A vector graphic can be made larger almost infinitely.

So, I built the treble clef/Sherry K branding in Illustrator so I could continue to use it in multiple sizes and not have to re-create a large version in Photoshop later.

I also knew that the logo designed by Cary Zartman at Z Factory was not just important branding for Sherry K, but also personally very important to her, so I wanted to use the Kirby dog in the banner as well. Like most great designers, Cary had created the logo in Illustrator, so using Kirby was easily done. (Most logos are vector graphics so that they can be printed on a banner or billboard as well as they are printed on business cards.)

Also in Illustrator, I created the lime for the background image and the little juice drops. Then, I brought everything into Photoshop and began laying the pieces out and fine-tuning details. By the time I was done with Mockup 1c, I was pretty happy with it.

So was my client.

The next step for a small web design house is a complete flip in thinking. The pure design is done at this point. Next up is coding the thing into a real website - right brain/left brain flip time. Larger design houses will hire a designer for the design segment and a coder for the second (and possibly a programmer as well depending on what the site needs). Tiny places use one person for everything. I wind up spending a fair amount of time researching different nuances of code so I can make the design come to life.

Next time ... the fun of coding!

Posted by Red Monkey at December 23, 2008 5:03 AM | Blog | Design | | StumbleUpon Toolbar Stumble |

Free Pixel Advertisement for your blog