Information Architecture : Timeline

Hi ,

With both of my websites i try and add a jquery type side to it so i can add a bit of style and user interaction to my website but i now know that you dont need to have that to make your website as slick and simple, knowing that some jquery examples can also be a bit complicated at times, that’s what i didn’t want my website to be.

So i decided that with me doing a Liverpool FC history site, i thought that i would apply a timeline where the user would be able to browse the football clubs history, so i decided to browse i couple of websites for example jquerys i could implement them into my website.

http://timeline.verite.co/

http://www.csslab.cl/2011/08/18/jquery-timelinr/

So i did some experiments with the first one, because i really liked that one and it didn’t go well. I only wanted it to be simple but  i tried messing around with the divs and then finally give up with it in the end.

So i decided that instead of implementing Jquery in my website, when tried before with the navigation it didn’t work in my preferred browser, i’d just do my own.

The timeline consists of the main events that have happened up till the present day, with the key dates highlighted in bold. Along the side is a red timeline with the dates aligned with the key information on the left. The information has the right amount of detail on each event, because having all of the information i might aswell right a book and the users are more interested in the key dates like Hillsborough 1989 which has more because its a key date in Liverpool’s History and no one can disagree that.

 

Second Design (Best one)

Here is my second design and i think my best design. Here i have been looking at various websites on the web for inspiration, and i have mocked up this one which i think its going to be my main design. This index page will have a bit of everything on like Jquery, some text boxes. Also i have decided that i will have the global navigation in header because as you can see from the other design, it looks more stylish for the navigation to be in the header because the user will automatically know where the nav bar will be when they open the page. Unlike having the nav bar on the left, right or on the bottom. Also to make a point none of these two designs have a nav bar on the right because if the user happens to minimize the page it will cut the nav bar off and that will not happen in my web pages. This is my final design because i didn’t really have any more designs to give to Information Architecture so Kevin said that it was alright to stick with 2 if i couldn’t think of 3.

 

First Design (Not so Good)

Here is my first design. This was just a really quick mock up of a design because i really had a great idea in my next post that involves Jquerys etc.

Final Idea (Site Map)

Hi,

Following on from my final idea, i have produced a site map that is my final template on which my website navigation will be based on.

 

Index –  This will be the main page with all the links to other pages and basically introducting you into the website

History- This will display all the vital history of Liverpool Football Club

Timeline- Will display a timeline in javascript that will also show the history of Liverpool Football Club but show it in a more visual display, so the user will interact with the page more.

Gallery- Will show pictures via javascript of the History of Liverpool Football Club.

About Us- Details of website, admin and even maybe a contact form for feedback for the website

More to Follow……