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.

New idea

Before I went to OFFF, I was hoping that it would help inspire me into my new idea. Although it wasn’t OFFF that did it, something sprung up in my head. Throughout this project so far I have looked at a variety of styles and themes that I have liked and I have wanted a bit of each of them, but I couldn’t see a way to make that work. So what I have come up with is a design that will let me style each element in completely different ways if thats what I decide I want to do. The idea is junk mail and post themed.

Although we all hate it when people post leaflets and flyers through our letter boxes I thought it would look great as a theme. For this I will make my website vertical with a letter box at the top with post hanging out of it, from there I will then have different letters and flyers and other mail falling down onto the mat at the bottom where I can keep my postcard idea I liked so much about my other design. I have drawn a sketch for this layout in my sketch book and have started mocking up some individual elements that can be incorporated.

I have also created some logo designs which are in my sketch book and have started creating a digital version of the one I like the best, this will take pride of place on the front of one of the letters which will be in my post box.

Change of plans

After having thought about my idea over the last few days I have decided that I am not 100% happy with it, although it could look fun, it might also look a bit strange, making the theme a country I have no relation to. So I have decided that I am going to do another sketch or two, speak to Andrew and try and come up with something more suited to me.

I am hoping that being at OFFF festival in Barcelona will inspire me to come up with an idea that is creative but also practical.