OUGD504: Design for Web, idea development

I started with some website design ideas, I sketched out what I thought was appropriate from my research and website analysis. I used the conventional navigation bar along the top and the side, and tried adding my logo to see how it'd look on the page. I tried making the navigation bar a bit different, using influence from Shigeos design (See the first website design sketch below)

I combined a selection of the designs and came up with this idea below. I was keeping the design minimal and easy to navigate around, I decided on having a home page, a timeline, about, gallery and shop.

I worked out some measurements using wire frames, this was for the benefit of when I code the site:

I put my design onto the computer to see what if it worked digitally, I also played around with some other designs which I'd previously sketched:

I was keeping with the minimal theme similar to Fukudas work, and I added the red to represent japan. 

Here is the site which I showed in crit:

I kept everything clean and simple, again I kept the red.

I added a loading page just as a proposal, I may not use it but It was fun designing and seeing what I could produce.

After the crit I then developed that idea further, I felt like the original design was a bit clunky and I didn't like the side navigation bar. I tried to make my design more compact and professional:

Here is some screen shots of my development:

After designing my site on illustrator I had to then use Dreamweaver to code it together. I struggled with this majorly but with a little help I managed to get it all done.

I started by making my root folder, and inside this had an image folder for my pages and navigation bar:

I used a style sheet to create a main container, then a logo container, a navigation bar, the body, and the header of my site, each page is laid out the same so it was easy enough to do this part:

I then applied these to the HTML page using <div> tags 

On the HTML page I then added the code for the navigation bar, with all the pages linking up to the saved HTML, here is an example: