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.

Pitch Feedback

I have just pitched my ideas to the class and I received good feedback about my theme. It was suggested that I look to see if I can get a rotational navigation so that my name can be in the centre and my elements can be in a circle around that. This is something I have not heard of before so I will be interested in seeing if this is possible.

Over all it looks like the class were in favor of my theme and the elements I have already drawn up, so I will continue on with this idea.

Digital elements

Here are some images of the elements I have started to draw up using Illustrator to show the class when I need to pitch.

Moodboard

Here are some images that I have collected together to get inspiration for my website and theme.

Design Ideas

I have been looking around for inspiration for this website and so far with this nice weather I am thinking about quite summery themes. I have drawn up a mock up of one of my ideas (you can find it in my sketch book), this idea it to have a large tree in the centre of the screen with my navigation carved into the trunk and to then have parts of the tree coming out either side into little clumps of cartoon style bushes. The way this site would navigate would be to have the initial screen just showing the tree and then to go either left or right depending on which button was pressed to these individual clumps and to have a back button possibly along the bottom of the screen.

Another idea I have been looking at is to have a vertical site which starts in the clouds with navigation to the other sections which are ground, underground and if you were to have selected the option to go up you would be in a space themed section. I do like the idea of this but I have seen something very similar before and think I would like to try and be even more creative with this project.

My favorite idea so far is to have a Hawaiian themed site. This started when I came across this image of a post card on a website. I thought this is such a good idea I wanted to incorporate it into my own website and as I was looking at images of postcards I came across a Hula themed one which sparked my Hawaiian theme. For this I would have my name in Hawaiian flowers and then I would move along the page horizontally to show off the other sections which will consist of images such as tiki cups and hula girls. Here is a rough sketch of what I would like this to look like (the original and clearer version is in my sketchbook)

Layout Options

After looking at other one page websites I have fond that the most common layouts are either a long vertical or horizontal page which you add sections into so that your navigation can simply slide through to the part you need. I am currently torn between layout options and will most likely have to draw up some sketches for both layout options and see which suits the designs better. For now I have drawn up some rough layout grids.

One page websites

For this project I need to produce an interesting but well structured one page site. Before I can start I need to have a look at other one page websites to see what is possible and what I feel would work best for me. Below I have looked at a few websites and written a brief overview of what I think is good and bad about them. 

http://www.fabmedia.com/

No navigation when moving down the page, because of this you need to go back up to the top to find next section, not good! This website looks too plain as I am moving down the page. There are some nice transitions but the site looks cluttered and boring. 

http://www.catalytic-design.com/#home

Nice transitions and layout. There is a good change of background between each section, this means that even when just scrolling you know where the sections start ands finish, this is helpful to the viewer. Interesting design and the navigation is always reachable which is a must!



























http://www.christianarth.de/

Vert clean smart transitions, simple and well put together website over all. There is a nice use of texture in the background mixed with the white space at the bottom making the site look clean cut and professional. The images have been very well placed so they do not look messy. All together a very well made site. 



























http://www.pusulaweb.com/default.html

I like the simple website layout and the large image at the top holding the navigation. The site then slides down to under the water which holds all of the content, and there is good use of a handy back button to bring you back above water. They have used nice transitions. The site looks simple but well designed.

Brief- portfolio site

We have just received our brief for this new project which is called “portfolio website”. This brief says “In this assignment, you will design and build a website containing your FdA work to date, plus any existing work you feel you should include in your portfolio and biography information such as an ‘about’ section and/or a CV. This will form the starting point to your portfolio website which you will keep up to date with new projects throughout the course.”. Having read this brief section I am very pleased with the idea of this project, I feel that not only is it going to let me be really creative and have some fun but it will also benefit me out of University.

The main thing that is going to make this website difficult is that we have been told that it has to be a one page site, meaning all my content will need to be broken down into sections of the page and I will need to use Javascript and Jquery to move around the page instead of linking my navigation to separate pages. Because of this I will need to be very careful with the structure of my site in my code as that will be its layout. The other thing which we have been told is that “text is text” and for this website we must do our best to avoid using images instead of text.

Overall I am very excited about this project, I think I will learn a lot about code and structure and I will also be able to have fun and be completely creative with the design.

The first thing I need to do it to have a look at single page sites to see my options on layout and to find out what makes them good and bad.