...

Once I had finished the homepage, I copied and pasted it into other html docs so I can edit from there rather than repeat the whole process again. My next page to work on was Terminology, for this page I made a diagram to go with each term I was describing. I made all of these in Photoshop. Below are a few samples...

These diagrams sit on the right under the div, with a small piece of writing to the left of them saying what they mean. Originally I didn't make the diagrams all the same width, so when I put them onto the site they looked terrible, I have now made them all the same width and changed them, they look a lot better!

I had some problems trying to sit the images and text side by side. I tried 3 different ways of doing this and eventually got it right. Firstly, I put 2 column divs next to each other in one main div - This didn't work! Secondly I put each image and text set in individual divs - This was just messy! At last it worked well just by sitting them all in one big div! Eg:
Image - text
Image - text
Image - text
Image - text
Image - text
Image - text
and so on...

This page is looking really good now, at last - progress!

And so on...

I have decided to change my design from brown paper to a textured paper colour I made in Photoshop. It will look much better tiling and will have no join lines.
To begin with I made my layout, tiling the tablecloth background (which is only 4 small squares originally), I then tiled the paper (which was also a tiny image). The paper is my wrapper where all my content will sit. I put the Nav bar in (notepad) and it looked far to big, I decided to cut it down to about half the size and make the text buttons much smaller. My logo sits well above the nav and I now have more room for content, without it all being pushed aside.
The homepage is just a brief introduction/history to Typography. I have put a div to the right of the nav and another under the nav and text, this is so the text will look as if it is floating around the nav. I have also added the image of the book, all images I have removed the backgrounds so they are transparent in Photoshop. I have added a small footer, which isn't really that noticeable - But its not supposed to be...

Reviewing and changing designs...

After making my presentation and thinking about my design more I have decided to make some amendments. For a start I have decided not to make the whole background brown paper....the content will just look lost if someone is viewing it on a large screen, so the first thing I changed was that... I also decided to have the notepad straight rather than tilting, this is because it will be in an invisible box and content will be tricky to place around it....
I thought it was a good idea to make the logo bigger, in my original designs it was smaller than the navigation type. I have also added a drop shadow to the logo like the notepad...
I then added the book image in as well, this I have left tilting but outside of the brown paper so there will be plenty of room for content. I also added some buttons in front of the type in the navigation, it makes it more clear...

I changed my content type to Arial, this font works well on the brown paper and is very clear to read, most computers should have that font installed also...
I have decided to have a tablecloth like background on my site, I can tile this pattern easily and the content won't look lost as it would have on brown paper (which would also have been tricky to tile)...

Designing continued...

For the logo of my site I wanted to keep it simple but with some meaning behind it. I have added baseline, cap line, mean line etc to the type, this is a sort of basic lesson in typography in the logo... I made this using illustrator then transferred it to Photoshop and put on similar lined paper...
Before this logo I experimented with a few other ideas...

I added a footer with another small navigation and copyright information...
I then started playing around with layout and content...

I thought it would be a good idea for the homepage to have basic information on Typography and maybe some suggested reading, so I added an image of a useful Typography book...
I then decided to tilt the notebook and book and create sticky tape to make them seem as if they are pasted on the brown paper. I also wanted something to show what page the viewer is on which I thought a pencil would be good to show (This example is of a very rough pencil drawing!)
This is what it will look like as different pages are selected...

Designing my site...

Originally thinking of my scrapbook idea I started playing with some hard-copy drafts and scanning them in to see how that would work...
I liked the idea of torn notepaper...and brown paper...I also thought that handwritten type could look really well, I experimented with all of these ideas...
When playing around with these images on photoshop I realised that they will look ok as headings but that the page won't really sit well together. I decided to make the whole background brown paper. I scrunched up a sheet of brown paper, scanned it into photoshop and played with the light..
When that was complete I started on my notepad (which is where I want my navigation to be)
I drew a plain white rectangle..
I then started to make circle and rectangle selections along the top and deleting them to make the holes...

I then gave the whole notepad a drop shadow...
I then started on making the notepad lined...
Then deleting what was outside the box...
I then did exactly the same thing in red down the left side to make the margin lines...
I made the paper seem creased by using a huge brush which I stamped once over the whole notepad then changed the opacity down...
All I had left to do was to mask some of the notepad away so that it would seem torn...
I found a font on the internet that I want to use for my Navigation, its a sort of 'handwritten' font and works really well on the lined notepaper, its called Quixeramobim, I was going to use this for body content as well but I can't, i will have to use it just for headings and navigation and use images.

Looking at sites..

I thought it would be a good idea to look at websites that I like he design of and some Typography websites to see what sort of hings they have included...

Typography sites:
I Love Typography
Typography Served
Typographic
We Love Typography

All the above sites include all of the information I was thinking in including in my site. They also have lots of fonts people have designed, typography photographs etc...

I like the idea of having a sort of 'scrapbook' theme for my site...I'm thinking brown paper, done notebooks, things like that..

Web Project Research

I have chosen Typography as my topic for my site. I am interested in Type and there is a lot to cover, which makes it easier!
What kind of things I can cover on my site;
Fonts, designers, terminology, designing a font.
I have thought about this in more detail and have made a sitemap (below)