Div Map, Visual Design/Typography and Start of Content.

I then began work on the div map. I knew from the outset the sort of structure I'd need, with a main container file for everything, a div for the content at the bottom. The header div was a bit more complicated because it had the main header div with a div for each button in the menu thereafter. I then used the rainbow technique which I'll leave preserved in the CSS so I could tell where each thing is at a given time. This left me free to set each thing to the size I needed it and I could see it. I was very grateful for the rainbow technique because it really did make things a lot easier.

I then started piecing together the visual part of the design so it wasn't just rainbows I was looking at. The header was done, and that was easy, so I revisited the colour palette and tried to create the visual design for the rest of the page. This is what I came up with for the background, with the main headers and information to sit on the orange-brown 'canvas'.

The background photo was of a sunset with scattered clouds that I took myself but I turned the hue to green to keep in line with the colour palette. I turned down the opacity to show more of the image behind, otherwise it was hard to distinguish what it was. The green bar above was just the header with the background 'rainbow technique' on it.

For the web typography I decided I wanted to use a websafe font from the start - not because I was too lazy to search for a different one, but because I thought the idea of using a websafe font to create a good-looking website was an interesting challenge. I made some tests using lots of different websafe fonts, and in the end I chose Palatino Linotype. I thought it was the most appealing of the websafe fonts and was also very legible. Looking at it I don't see it as a 'boring websafe font' even though it's quite simple. I had trouble getting the font to work at first, but that's because I chose "font" in CSS when I needed to choose "font family", and after that it worked.

I started putting in the content but at this stage there wasn't too much to put. The home page statement was easy to do and I personally added a bold word each time a page name popped up in the paragraph to give viewers an even further indication of what lay on the page. Most of the services were availlable as were the library information and frequently asked questions, but the assignments and emergencies page just had the home page text as placeholder at this stage.