About

12/12/02

On this page I would like to share some background information on this site with respect to its evolution, the dimensions of the page layout, icons, lines and finally over the menus.

 

The evolution of this web site:

My intention was to design a web site with limited and simple graphics to be maintained with Netobjects Fusion.

After creating some line elements in a picture (e.g. the banner line crossing and the small lines) the concept was born.
Trying different line ends and banners, combining them with region elements, and the web site got shape.
The requirement that it should be (almost) independent of the font size caused a lot of problems. Original designed line elements with corners crossing margins gave problems by large font sizes.
(Fixed font sizes cause readability problems with high resolution displays and for visibly disabled people.)

So different elements are added and with some fixed text block heights things seem to be stable and the concept prevailed.

Creating menu buttons was easy. Putting them on the right place was more difficult. See menu section.

Finally some (of my old) icons were ‘simplified’ and added to the layout.

 

Page content and borders:

In this picture you can see the placement of the page elements on a site page.

2

5

1

3

 

De Header (2) covers the top of the page.
The Left Border (1) is on the left of the Content (3) Area.
The Footer (4) covers the bottom of the page and the Right Margin(5) is on the right of the Content (3) Area.

 

Each of these element has a specified width:

  • The Header has width of 620 pixels and a height of 130 pixels.
    • Left logo width is: 100 pixels in width, 40 pixels in height.
    • The top menu is: 475 pixel in width, 20 pixels in height.
      • A button is 95 pixels in width, 20 pixels in height.
    • The page banner; width 340 pixels, height 60 pixels.
    • The content menu (if present)
      The width is: ? pixels, The height is: 20 pixels.
      • A button is 65 pixels in width, 20 pixels in height.
  • The Right Margin has a width of: 25 pixels
  • The Content Area has a width of: 475 pixels
  • The footer has a width of 620 pixels.
    The footer has a height of 40 pixels.

Footer and height permit a browser to have scroll bars without the lost of page information.

 

Icons:

Icons cover a square with 25 pixels in each side and are reused in resized form my older sites but stripped from multiple colors.

 

Thin Lines:

The thin line has three equal lines of two pixels in width with 4 pixels in-between and 2 pixels on the outside.
It comes in two forms. One for the vertical and one for horizontal region backgrounds. Line ends are in in ascending format (including a mirrored one) and point format. By rotating the end pictures every line can be easily constructed.

 

Menus:

Simple buttons for a simple site.  The three button types, Unselected, Selected and Highlighted serve all needs for each of the type groups of buttons

As there are only two pages three levels below the top level a small child / brother menu is placed on the page content to keep a ‘page history path’ to the top level.

Pagina Teller

© 2002 PK

www.vandekerkhof.com/webdesign