Final website

After a few more tweaks and coding I have finished my website and am very please with how it looks. Here is what the finished site looks like. 

Building the site

On my static work section of my website I was planning on having a carousel showing my images, I had a look on various sites and found this one which seemed to be the most popular and exactly what I was after. (http://fredhq.com/projects/roundabout/)
After having downloaded the files and following the tutorial several times I found that I couldn't seem to get it to work. I then went about trying to find more and I came across a few but each time I tried, I couldn't seem to get them to work. 
I then decided to try and use an image slider/slideshow instead but as before even after following the tutorials I couldn't get it right. Reading the comments on the sites from other people I could see that it was a fault I was making, however, even carefully reading through the tutorials I seemed to be missing something. 
After a few days of this I decided to find another way of showing my work which didn't take away from the theme of my site. I then thought about making thumbnail photos into stamps and having lightbox so that they could be seen at a good size as well. 
To do this I first saved two versions of my image, one being the full image at 800px width and the other shrunk down to 125px width and with a stamp shaped border which I added in Photoshop. I then downloaded the code I needed for lightbox and saved it into my js and css folders as the tutorial asked me to. The next thing I needed to do was to link the jquery and css to the head of my html document as you can see below.

Once this was done I then needed to create a div which would hold the images, style it in css so that it was in the place I wanted it and then using this code I added in the two pictures making sure the one with lightbox was the larger image.

All I did then was repeat this with all of my images changing the css on each div to make them look different and this is the result.

Building the site

I have successfully arranged my html and css to place my divs in the right places, navigation is the next thing I need to think about. To keep my navigation from getting in the way of my design or from it being unreachable I have decided that I would like to fix it to the left hand side of the page.


To start my navigation I create an unordered list in my html in a div called navigation.

Once I have given each list item the right name I go into my css and add the following code 

I need to float my navigation left so that it can not be seen by any of the other divs, preventing them from all moving out of place and also so that it moves to the left hand side of the page, to keep the navigation fixed in the same position so that when I scroll it doesn't move with the page I use the fixed position option , after this the only things that are left to add are a background colour and text-align to make my text line up down the left of the div.

Here is how my navigation looked after it had been styled.

Linking the navigation to the sections of my website was slightly more difficult. To link my navigation up and add the smooth scroll I needed this code which was placed just before the end of my body tag.

All I needed to do after this was make sections on my site it attach my navigation to, I kept this simple by using divs named "page1" up to "page5" these divs were simply placed around the divs that were holding content on my page, for example "page5" was placed around my header div as you can see below.

To then link this in the navigation I simply typed "#page5" into the href in my navigation list as you can see below.

Now that all of the links have been filled my navigation will smoothly scroll down to the sections specified by each button in my navigation making my one page website look a lot closer to being finished. 

Building the site

Before I start coding I need to make sure I have my folders set out properly so that linking all the separate parts is simple and so that when it comes to uploading my site I will not be uploading unnecessary images and files. 
The folders I need are css which will hold my styles.css, images which will hold all the images that are being used on my site, js folder will hold any javascript and jquery and I will also make a folder called working files, this will keep my Illustrator and Photoshop images as well as those which I have optimised for the web but will not be using (this will be in a sub folder called not used). Having these folders sorted before I start will help keep my folder clean and organised. 


Here is an image of my folder layout.

Now that I have this folder system I can start to code my website. For now I will build this down as a normal site, making sure that whatever order I want my divs in is the order they appear in my html and css. 

Page mock up

I have started to create a page mock up to give me an idea of how my website will look. Here you can see that I have got the door in the background with a few of my postal elements. Im sure there are bits that I will end up moving and tweaking as I build the site but this is a good indication of what I am hoping to build.

Digital elements

After drawing a full mock up in my book and a few sketches of the individual elements, I decided to start creating them in Illustrator. Now I have created these separate elements I am confident that this theme is strong and interesting. Below you can see a selection of my individual elements, once I am happy with these I will create a full digital mock up of what I would like my page to look like.

Logo

Here is my finished logo design, I have decided to keep this logo simple and clean so that it could be used in multiple places such as on business cards as well as on my website. I can also change the colour of this logo easily to suit the work I am doing but this will be its primary colour.