Wireframing - it's quite important.

As much as we all enjoy just throwing ourselves straight into the design process with a blank slate, some planning beforehand will save you a mountain of fixing, moving and deleting items in the long run.

First things first, make a list of everything that you want on your web page and note any paragraphs, headings or images included as well, this will help in the process of wireframing as then you know everything than is needed on the page. Now you can begin to break your page up into different sections and begin to block out key areas in which things need to be placed.

When making my timeline for the JFK assassination in Narrative and Interactive Media, I began to wireframe each page on a rough idea of how I wanted it to look as seen below.

I knew my first page didn't include much content as my thought was to have a sound bar on the first line and a continue button on the second. (see above)

Continuing from my first page, I wanted my timeline to slide in from each direction as the user scrolled down the page as depicted in my wireframing above. I used large black arrows to show the direction of movement. As there were no camera movements, white small arrows were left out.