Composition
Ever played Suduko ??
you have to put the numbers into the boxes.....
Well there are thousands of possible combinations, but alas only two or three that actually work, building a web page is like that, so lets take a look at a web page.
Most
web pages have a similar layout to this one.
We have a header / logo box, we have navigation, either vertical or horizontal,
and we have a footer at the bottom, and the most important part is the content.
We also have some important white space too. all of these elements are contained in an outer or wrapper Div.(red line). This stops them floating all over the page.
If you think of any magazine or newspaper, this is in essence a magazine for the web. Hence we have a logo / header, "Branding" so people who visit will know where they are.
Navigation to get you from page to page or chapter to chapter.
Content to explain all about your site, who you are and what you do
A footer is to show where the page ends, this normally shows the copyright and contact info
White (or Negative) space, this is used to lead the eyes around the page, and to relax the eyes, most newbies try to fill the page with content and graphics, don't fall into that trap, a page needs space to allow it to look open and unconfined, if you have lots of content use another page.
THE FOLD
When using Expression web, in design view you will notice a line across the page at approx 420 pixels down the page. This is known as "The FOLD" as I have already mentioned, a webpage is likened to a newspaper, the fold is where a newspaper is folded over. So everything above the fold is what your visitors will see before they have to scroll further down the page.
THE RULES
There are three rules that I believe make a good website and should be adhered to
- The Rule of Thirds
- The Three Click Rule
- The Golden Split
The Rule of Thirds
This really is the backbone of your web development, although some of this is sixes the major part is the thirds, so grab some paper and lets see. you need a grid of three by three, ( a grid to play tic-tac-toe or nought's and crosses )
As
you can see here, the top row is then split and the three columns are split,
this helps with your layout for your pages.
Expression web has a really good tool called "Tracing Image"
under the VIEW menu. this will allow you to place an image as a background to
your page but it will not be visible in your browser when you view the page.
Placing this grid as your tracing image will allow you to build
and place your div's in a logical and relative manner.
right click and choose "Save Picture as" to download this image
By using different size div's, for your layout you can have several different layouts
Expression Web comes complete with several different layouts (css styles) if you do not wish to create your own, But going back to suduko, there are two or three which are mainly used, the two and the three column layouts, which are used in just about every website. But as proved above you can create your own easily if you want to be different.
The Three Click Rule
This is the web designers nightmare, and very often cannot be followed in large corporate websites, without layered menus, but the rule is:
"every visitor should get the information they are seeking with no more than three clicks of a mouse"
Navigation is so important in a site, visitors will leave quickly, never to return if they cannot access the information they are after, if you were reading a magazine, and the latest gossip was promised on page 5 but turned out to be on page 13 after you had to look at every page, you would not be happy.
always, always check and double check your navigation and links, and remember when you link to other sites, sometimes they move without telling you, so check external links often.
The Golden Split
Artists, designers, and nature, combine to form this rule, Taken from nature to make things easy on the eye, and to make mother natures wonders pleasing to the eye is: 1.62
1.62 is the golden ratio of nature, just like pi in a triangle, Nature has given us 1.62
This relates to basically two-thirds
so if you have a portrait photo the head of the person should be two-thirds of
the width of the photo with the other third being the background on both sides
of the head.
this works
out at 61.73cm per 100