Completed website

I have had to submit my final work for the year. As I had produced three different version of the website  I was only allowed to submit one. So I have chosen to submit the red wall paper site. For me it has the most impact.

I have made a short movie which seems to be the best way to illustrate how the site looks and feels.

Flood of activity

Blue print website

Since coming to grips with the positing I have a flood of activity I have finished a working version of the website and I have to refine the content. I have also adapted from the font a logo. I have been able to over / underlay different elements. I taken a side turn and produced a slightly different working version of the site employing the same basic model as the blue print with the addition of different background, and more underlay elements.

Red wall paper website

The Red wall paper website has added elements to highlight the text and the navigation is what I call a lift button.

Vertical site

Now that I have switched to a vertical site I am following the same ideas the background will use the same blue colour and a similar layout as with the floating site. I sill having issue with positioning after a discussion with my tutor I have anchored everything in side a box and each box is repeated. I still unable to get to grips with the terminology. Everything is position from the left and down from the corner of each box.

Repeatable box layout

 Since I used this method things have become easier and is allowing me to be more organized with my content.

Having a few problems

I really like the idea of the floating site but I am have a few problems. Due the the nature of the coding which makes the site glide I am having trouble adapting the j query to my site. I can't lock the size of the website so it looks the same on different size screens. With the last project I was able to have the main part of the site 960px with a floating background. so if viewed on a smaller or larger screen it would only be the background image that changes.

Screen resolutions

I have done a little research into screen resolution. My laptop displays at 1440 x 900px from what I can see if I try to keep the resolution to around 1280 x 900px I will encompass most of the screen resolution used. I have also decided to change the type of navigation on my site.  I am changing to a vertical type and hopeful this will give me better control on placement of the elements on the site, this will allow me to float everything from the left. The other advantage to the vertical model is I can add a new level as I wish, even though I have not tried it if I was to extend my floating site I would have to add three units at a time.

Reference W3schools

Fonts

I have been looking at fonts for my blue print themed site. I want the font to have the feeling of  being hand written.  My initial idea was to go for comic sans ms.

Comic sans ms

During my presentation this is the type face I said I wanted to use. However during discussions in class most people said they did not like this type face. I have since discovered that some people like it and other hate it, so I have looked around for a less controversial type face.

Selection of fonts

As part of the brief we have to use we have to use webfonts from @fontface or Google web fonts. I have looked at more fonts and have chosen  'Shadow into light two'. It has everything I want to convey in a font, it is a hand written style of script. The hand writing is neat and well ordered and is easy to  read. If you look at the last example of script type, 'Cedarville Cursive', I find this harder to read even though it is more like hand writing and that is way I rejected it.

Website presentation

I have found a navigation system that allows the part of my site to float from one point to another. The concept for my portfolio site is of a blue print which is laying on an imaginary table and the navigation glides from one section to another.

Sections of website

At this present moment I have nine section to the website. A welcome or home section, Fuji printer of the year, Royal Opera House, Paper mache artist, Bea Cummings project, my panoramas, Propaganda poster, Web project, Contact and CV. 

I have generated a wire frame to give an indication where the content will go. Each of the section will follow the same patten, however the Background image and the static content could be swapped round to break up the feel of the site.

My navigation will look like a list on a piece of paper and it will float in the bottom left of the page.

I have generated a movie to show how the site will work.

More Navigation

I have come across a website called Fredhq this site has as he say in his words awesome web things. Here a couple of examples of the web things I may consider for my web page.

These are basically the same type of navigation one is more 3d than the other. I would put my content on each of the faces. It does advise on his web site that your browser has to be able to show the 3d movement.

Link to Fred hq