Making the Website - Screen Shots

I felt that iWeb was the best program to use because this allowed me to create a stylish website with ease. I opened a blank template which meant I could edit it at will and it had no pre-sets that might interfere with my own design ideas. I placed a line (object) along the top, leaving room for the links such as 'Main Page'. This is a common convention of other newspaper websites. I did not want a coloured background because I felt this would distract the viewer from the main body of text.

I wanted a website that people would remember, and one that was very interactive, therefore I placed a large copy of my masthead on a blank page and linked it to the main page. This means when my audience searches for my website this is the first page they will come across. I feel this gives my website a very unique feel. 

I deleted the top bar and added 'click to enter' under the masthead to make sure my audience do not become confused when presented with this page. You can enter through clicking the masthead or clicking on the word enter. 

After much thought I then chose to delete my bar at the top and instead place my masthead there because this anchors the audience to the newspaper. I placed a search bar next to the masthead so that my audience can look up any news story they might be interested in. This only encourages the audience more to come back and revisit my website as it is user friendly. 

I then made my own links bar again and this time I made the bar bolder. I also added a reflection to the masthead to give make the website seem more youthful, since this is my target audience. 

I then copied and pasted the same bar so that the preferences are kept the same.

I began adding my links in between the lines and I personally feel that the website is starting to look very professional. 

I moved the search bar to the bottom right, above the links, to attract attention but also make the website page look aligned. 

I began making the footer by adding the newspapers address and another copied bar down the bottom of the page. 

I added links such as 'terms and policy's' because this is a common convention of newspaper websites and shows the audience that I am a proper company. I also added a 'contact us' link which meant that the audience felt involved in the product. 

At the moment the website may look blank without any stories but the basic layout is looking like a professional product. 

I began by adding my main story image in the top left. This catches the audiences eye straight away and draws their attention to the story. 

I added an outline around the image which meant that it looked part of the page instead of it just being placed there but not so much as it looked boxed in and childlike. 

The headline is coloured blue as this represents linked text. 

I personally feel it looks better along the top of the image than on the side as it 'headlines' the whole story, rather than looking more like a caption.

I stretched the text box so that the headline flows in one straight line and then began adding additional information. 

The first story was complete in layout. I then added a grey box to show where my link to the moving image would be. This allowed me to work around the area with some idea of spacial awareness. 

I placed a subtle line below the two stories so separate the main two stories from the secondary stories.

I then moved the line to below the main story to save on space.

I began to work on my secondary stories by adding images and text and aligning them as shown below.

This is my finished front page and I feel very happy with the results.

Below shows how I created my website pages stage by stage.