Creating The Home Page of the Website

To start my website, I must firstly created the image of it on Photoshop. I will use guides in order to ensure the image can be sliced easily later on and put into Dreamweaver and made into an actual working website.
The starting point was the top of the web page, where the masthead and buttons would be.
I started by placing the masthead int he top left corner, and then thinking of what navigation buttons I would need for my site. I decided on a 'home' page, a 'top stories' page, 'your say', 'classified ads' and 'contact' page for the buttons to represent. As I am only creating one other linked page for my project I will have to decide what one I want to create.
The masthead will stretch across most of the top of the page leaving a small area empty in the right of the page. As this will be the same for every web page, I need to pick something that would be relevant on each one. I noticed during the research phase while looking at newspaper websites that some offer the viewer to read the print edition online. This meant subscribing or paying a small fee. I think this is a really attractive feature for a website, and also a potential money making device, so I am going to add this to my top left ear piece.
After tweaking with designing I ended up with this masthead and navigation area for my site-

I have kept the area quite simple so that is is clear and easy to use. The button to read the print edition is large and in the same red colour used for the 'Q' in the masthead, so it coordinates nicely. I will the theme of colours of red grey and white used in the masthead as the main colours used throughout the web pages and used the rollovers.

I also wanted other aspects of the website to be similar to the print newspaper itself, so that the viewer recognises and has the sense of reading the paper even though its on the website, so I am also going to add two features along the bottom of the page that will stay the same on every linked other linked page.

Thishas created a 'template' for all of the web pages. I edited the 'clinic' advert from the newspaper and made it suitable to fit the web page. I also included the advert that encourages readers to share their stories online.
I then started to turn the stories from the newspaper into leads for the website. The main story of my paper was the one about the new campus at the university. I wanted this one to be a large picture, with a headline and lead to make people want to click and read the full story.

I used white text with blending options and shadow effects  to make it stand out. I also used a clipping mask on the photo to make it have rounded edges as this looked more pleasing to the eye. I will use this clipping mask throughout the webpages to keep the same style. The rollover will be the 'read more...' text. This will turn red when the mouse rolls over it. I did this by duplicating the layer and changing the colour of the text.

I then did the same for the fashion story which was featured on the second page of the newspaper.

 

Again I have stayed with the white text, which works well as the background of the picture is so dark. The rollover is the same as the last one, and turns red over 'read more...'. I also used the same clipping mask, this worked well on the dark photo. I placed both stoires onto the page and the layout started to grow-

This showed the reamining available space in which I had left to work. I wanted to make small box like leads to storys as I saw on other websites in the research phase. I decided to start this by turning the football team story into a lead like this. This would mean using the picture along with the headline or just one or two lines of text to make the reader want to click and read more. I played around with a few designs, and liked this one-

I used some bold text for the main part of the headline, and then a further line of information to attract attention. I plan to do toher stories like this to fill up the space with other story leads on my page. Here is what the story looked like once I included it in my page, and the rest of the available space. Here you can also see the guides and margins I have used to ensure my webpage is neat and laid out properly.

I plan to fill the rest of the space with similar leads to other stories and areas on the website. I created a similar lead to the story I used on the front cover of the paper, about the student winning the Art Competition and then filled the rest of the space with new other leads. My page started to look like this-

With the guides on I was happy that I had filled all of my space without making anything look too squashed or empty. The rollovers would be clear and there are many different areas and stories for a viewer to look at.With the guides off, my web page looked like this-