menu.gif (4535 bytes) menu.gif (4535 bytes)
HEADERTECHNIQUE1.jpg (22454 bytes)
Technique 1
The Visual Language
HEADERTECHNIQUE2.jpg (17543 bytes)
           

 

The look of a web site is one of the most crucial elements in the life of a site. We will take into account that most of the planning has already been done and that all links and pages have already been textualy settled. This tutorial will help to make a visual representation of the planning you have already done.
photoshop copy.jpg (10976 bytes)Here are some of the things you will need for this process: an understanding of Photoshop 5, a rough sketch of your proposed design that includes all elements, and an open mind.
First we will start looking the rough sketch of the design you have created. This might not be a Picasso, but it should be more of a guide of all the elements that the final page should entitle. Ask yourself some questions about this sketch, "does it market my company effectively?", "does it have any visual metaphors?", "what colors will be used?".
Let’s open Photoshop and start taking this idea and realizing it. I almost always start a new document with the page dimensions of 600 pixels wide by 400 pixels high. This size, by the way, is the page size a 640x480 monitor can see at one time through any browser – so it’s smart to stick to this size for the homepage.
terrahostlogo.gif (4398 bytes)What is the logo or name of the company? For this example we’ll use one of RÍve’s partner companies, Terra Host. We know a lot of information from the name alone. It has to do with the world and hosting it. If you were to call TerraHost and ask what their line of business was they would tell you, "we do hosting for web sites all over the globe!" So you get better visualization of some possible images of what will be on the page.
The globe is already a sort of metaphor for host. Let’s see what we come up with combining a little bit of playing with the globe and the logotype. Already we start to see some possibility for the rest of the elements (fig 3). There is a problem though with the colors, they don’t match too well. What I tend to do is look at complimentary colors for the answer. Let’s change the globes overall tone to blue by using the Hue and Saturation menu, click colorize and nudge the controls to make the globe all blue in Hue. (fig.4) step1.jpg (25766 bytes)(fig 3)

globe.gif (5579 bytes)(fig.4)
Let’s break up the space a bit and make a bar behind the globe. I’ll make this the complementary color of blue (fig.5), which is orange. Already this better than most web sites I have seen but it’s missing some very critical information – the links. Let’s include the links and format them so they follow a curve similar to that of a side of the globe. colorwheel.jpg (15351 bytes) (fig.5)

step2.jpg (28462 bytes) (fig.6)

What we are doing is creating a visual language. This language is representative of this site alone, and comprises all the information you need to complete the rest of the site (fig.7). For instance, it would be a shame not to use the orange as a navigation bar in future pages. And you know from the Logotype that the character font you should use is something that isn’t too ornate and might be a Helvetica or Times for the body text. final.jpg (59123 bytes) (fig.7)
I hope this little tutorial has helped you create a more visually intrigueing site. If you would like more information or would like to submit a tutorial call RÍve Media toll-free at 877-432-2237