Brief

We have now been given our first brief of year two and although it seems a little confusing, after having class discussions about it, I now feel like I have a good idea of where I need to start with this project. 
For this new brief we have been asked to created an Ebook for the Ipad. This Ebook will be made up of animation, text, interviews, old photos and possibly some video. The book is going to be based on a family story, which means that we should be able to source our stories, photos and record an interview with ease. 
Although there is a lot to be done on this project along with a lot of research and investigating into my families stories, I think we have been given a fair amount of time and I am looking forward to getting stuck in. Luckily for me, my family has quite a few interesting stories which could all make for very interesting books, so what I will need to do is arrange a day to see some relatives and see what photos and videos they have to complement their stories and base my decision on the story that I find both inspiring and has enough photos to work with.
The biggest problem I see with this project is that I have never used Ibook software or After Effects before which is where we will be creating the majority of our work, for this reason I need to try and get my research and story set quickly so that I give myself as much time as possible to get my head round the software we are using. And although this is my biggest worry about the project it is also what I am most looking forward to, being able to use After Effects is something I have wanted to do for a while but have never known where to start and hopefully by the end of this project I will be confident enough to learn more on my own which will help in future projects. 
Over all I am excited for this project and can't wait to hear what my family come up with for me, I think my next few steps will be setting a time schedule, to optimise my time creating the final piece, research into Ebooks to see what does and doesn't work and also to get a solid story with everything I need including an interview, photos and possibly some video. 

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.