First, I took a look at my web layout drawings and opened Photoshop to work with the designs. I played around with moving the header and footer to occupy different locations, and decided on a footer that covers only part of the screen and aligns with the main content area. Similarly, the header stops short of running all the way across the top of the screen. I tried running the header from edge to edge, but the look was too blocky. I also added a rounded corner to make the header look a bit softer. My goal here is to create a site that looks sophisticated and sleek, but not overly contemporary. Therefore I have incorporated some Web 2.0 touches, like rounded corners and drop shadows, but kept them minimal.
Here is the first rendition:
The web area is defined by the orange and burgundy borders. I plan to make the dimensions compatible with 800 x 600 screen resolutions, just to make sure I don't annoy any potential visitors with horizontal scrolling. This is important in order to make sure that both the side navigation and main content areas remain visible. The brown area surrounding the web page is the background area that will display at larger screen resolutions.
Once I blocked out the elements I began to add colors. As you can see from the image above, I initially intended to use an analogous color scheme using red, orange, and yellow. I choose burgundy because as I thought back to the Beaird chapter on color I remembered him mentioning that dark reds were rich and luxurious, and would be good for sites related to fine living. Taste the World will feature unique spices, fresh roasted coffee, imported olives and cheese, and so forth, so the luxurious association seems appropriate. Working from there, analogous colors seemed perfect because it would have allowed me to include orange as well, which Beaird mentions is associated with food and appetite. Sounds perfect for a high-end food store. However, as I worked with the colors I found the orange to be too jarring, even though I experimented with many tints and shades. Also, when combined with the brown background it just screamed out fall or harvest.
In trying to fix it, I added a general gradient, and came up with the following, which I liked:
However it was not really a sophisticated look, so I abandoned it without finishing the edges. I might save the look for a future project though. After this point I abandoned trying to work orange into the design and decided a color palette generator was in order.
So I went into Adobe Kuler and entered the code for my burgundy, which I still feel is the most important starting point for the site colors. I then generated a complementary color scheme, just to try something new. It was wasn't quite right initially, but when I played with the settings I was able to find a good olive hue that made a perfect combination. I know, red and green sounds a little too thematic — as in Christmas owns the combination — but trust me, this is so far removed and sophisticated it won't conjure such associations.
This is my new color scheme, using olive, burgundy, brown, and ivory:
This got much closer to a sophisticated look that suggests indulgent foods. Once I had the colors, I decided to work with some gradients since I felt the green was a little intense. I already had a slight gradient on the header and footer area, using a narrow range of hue and shade to create just a little depth. I then added a gradient to the green area, setting the parameters to run from light olive to brown in order to create a slightly different look.
This was the result:
This look is closer to what I was looking for, with a little added depth. I decided it was still a little too bright though, especially in the upper corners. I wanted the brown to blend a little closer to the background color in order to soften the edges between background and web area. So I went into the gradient tool and tweaked the settings to darken more, resulting in this look:
The difference is subtle, but the darker brown adds depth and richness. With the color scheme in place, I added some subtle background textures in the form of light drawings along the top and left edges. I also added a drop shadow under the header and an inner shadow on the right edge to give the illusion of some dimension. In order to balance this look, I left some elements, such as the secondary navigation box, flat. I also made sure not to pack the page with too much information, leaving some open spaces at the top and bottom of the page so the design has a little breathing room.
The main template is now done, with all the above elements put into place in Dremweaver. I am still working out the look of the buttons though. I am leaning toward a rollover with a small hand-drawn graphic, but haven't finalized the design yet. It will fall into place at some point, but I'm toying with different graphic drawings. The Facebook icon in the corner will be a classic looking icon, but instead of the usual blue it will be the same brown from the background area. That's it for now; on to figuring out my shopping cart situation!
No comments:
Post a Comment