Web Process: Part III
August 11, 2004
We got the ball rolling last Friday with the basics of hosting, domains and DNS. Yesterday we got to the heart of the matter by outlining the vision of the site. Finally, we can design. Note I said finally. The mistake I always used to make was jumping right into what the site should look like, without even thinking about what the site should accomplish. But we're past that now and we're ready to bring together a web composition.
A web composition is a graphical representation of what you want your site to look like when you are finished. If you have spent 3 seconds in (x)HTML code, you realize there is a better way to kick start a design. I often use Adobe Photoshop for this and usually prefer it, but because of the nature of the design I was looking for (remember: cartoony), the vector based environment of Adobe Illustrator was the place to be. But wait, I can't start yet. I haveth no color...
The base color for bradleyboy has always been a deep green, usually hovering around the web safe hexidecimal value of #336633. The current design was really ambitious color-wise. I got really crazy with a couple of shades of gray. Wow...
I recently gleaned a tip from Doy on how to grab a nice color-scheme from your favorite digital photo. I would permalink to him, but since he is in design hiatus I will give a brief overview here.
First, find a photo that has several well contrasting colors, including your target color if you have one. I chose this photo I took a while back out in Bromont, QC:
Once you have your photo, open it up in Photoshop and select Filter > Pixelate > Mosaic. Choose a cell size in the 20s or 30s and walla, you have a nice little color pallete. Here is how mine turned out:
Now just start testing those boxed for colors you think will work. This is so simple and effective for finding a good color scheme. Here is what I ended up with.
Of course we will add in some white, black and grays for typography and other effects, but these are the colors that will be driving the bus. I really like the earth toned feel of the palette. Ok, now let's put them to use.
I start off by firing up Illustrator and setting up a workspace 760px wide by 600px tall. I always design for a base resolution of 800 x 600 and 760px allows for the browser chrome and scrollbars to be in play without causing that ever annoying horizontal scroll bar. The first elements I want to lay down are the key players in the design, particularly the caricature and quote bubble, along with the bradleyboy productions masthead. After some fiddling I have the basics down in position as you can see in Figure 1.
Next, I want to lay out the basic shapes and positions for the rest of the site. Just below the header and to the left of the caricature will be a big bubble of navigation. Then, the main content section will run below that, with a sidebar to the right. Basic layout and position, Figure 2.
Now this is all very flat looking and monotone, but not for long. Time to call on our color palette and our old friend the gradient to give this site some texture and depth. Every element has a gradient to a slightly darker shade toward the bottom of the element. Starting to come together in Figure 3.
Better, but still pretty flat. A little drop shadow will take care of that. I didn't want it to be too defined, trying to keep that cartoon look going. So I dithered it up quite a bit and applied it uniformly to all elements. At this point I began to add some text to the elements as well. Almost a finished comp in Figure 4.
At this point, I thought I was done, but something kept bothering me. The bradleyboy productions bubble had nothing to it, and it really should have some focus. After staring at it for a while, and then some more I finally reached a happy ending with a little bit of accent and a green stripe that runs behind the header. An identical green line will hold the footer at the bottom the site as well. So here we are, the finished comp. I have posted a slideshow in the photo section of the site so you can click through to see the progression.
Next time we will start to port this over to XHTML and CSS, specifically looking at a great technique using CSS for rollovers. See ya then...
Filed under Design, Technology
Comments
Karen Anderson says:
keep it coming...
Doy says:
For your hiatus needs:
http://www.doycave.com/index.php?p=144
...under the radar and all...
Comments are closed for this entry
Mom says:
Hey - even your Momma is enjoying this one!!!!!!Maybe now that I am almost unemployed - I will become a web designer ---NO!!!