A2 media: steps of making: home page of website

step 1.

•The next thing to do as make the two pages of a website for my newspaper. I started out by setting up a page in Photoshop with the required measurements. I then split the page into sections nine at the bottom of equal size and two at the top one taking up two thirds and the other one third. I kept a small space between the boxes so there was a small gap between them making it look more professional. The three sections in the right hand column I wanted to use for top news. I also made a facebook logo so people could contact the paper via this, i decided to include this as the website would be viewed by the target audience of people between 16-25 who all tend to have facebok and other social networking sites.

•I also kept the blue colour scheme so it matched the paper and added to its identity.

step 2

•I then changed the square boxes by rounding off the edges. This made the box outs easier on the eye and less harsh which suited the paper as young people tend to be relaxed. The round edges also picked up the roundness of the full stop in the mast head and linked the two together.

step 3

step 4

•Once I had decided on the layout and colours I started to add information about the top news (local news, entertainment and nightlife)

step 5

As this was the home page of my website i wanted to include useful information making people want to read the newspaper as they would think it was of the same quality. I started by adding a five day forecast as this is useful information that I believe younger people would want to know.

I changed the top news column to featured news as I felt this was important in linking the paper to the website so they boosted the audience for each other.

I added a section telling people about competitions, I found in my research this was an interactive activity/ device that was popular amount 16-21 year olds.

When I carried out research I also found that people between the Age group of 16-25 where interested in live music events. I took this into consideration and made one of the competitions about winning tickets to the summer festivals. I also wrote a story about a singer name Lexi Loveland who was from the areas who was coming back to the are to do some “hometown” feedback showed that this interested the archetypical audience of the paper and website as it was local news for the youth of castle point of Rochford matching my strap line.

By making key information in the article a different colour and font size it made it stand out and catch the reader eye.

I also inserted picture boxes so I could visualise where the stories would go in accordance with there stories.

•I changed the layouts of the box outs and the colour several times to see which one looked most effective.

step 6

•I changed the light blue box out to a white one as i felt it made the dark blue colour on the top stand out more which was important as the information was aimed at the specific age group so it was important they could read it.

step 7

•I changed the layout of the left hand and middle column by putting the article about “Lexi Loveland at the bottom and the competitions in the central column toward the top as it looked more central and was one of the things that would be seen first which was important as the competitions seemed to be something that would draw in a younger audience.

•I also added a blue banner across the centre of the first to columns which break up the page and made it look more symmetrical and therefore pleasing to the eye.

step 8

I decide to experiment with different layouts in this one i chose to have a list of links in the top left corner in order to achieve a user friendly website which was easy to navigate.

• I also moved the competition section to the middle of the first column so there were three equal size sections to add symmetry and order to the page.

step 9

•After reading the audience feedback to the two different layouts I took the best bits from the two of them and created this.

step 10

Took this image of a group of friends before their skydive to go with the relevant story on the website as well as the paper.

step 11

I placed the skydiving image and then placed a picture of “lexi Loveland “ next to the relevant story- I placed it into a square shape with rounded edges by lassoing it them using the magic wand shape to fit into the shape.

•Then wrote a story in the centre section entitled your stories- in order to appeal to the target audience as it is a story written for them by them.

i added an image into the rounded box at the bottom of the page by merging the image with the magic wand tool then copied the mergerd image into the box so it then bacame rounded a less fomal like the rest of my website.

audience feedback:
positive
colours scheme matches the newspaper and poster
the stories that have been written would interest younger readers/comedy
bolderf fonts used for important information
rounded boxes- informal
weather report is a good idea
lots of images to attract reader attention
looks structured and professional
used guidelines to make everything even
negative
need to put images in the right hand box out
the links at the top left hand side of the page are not lined up- the lines under them look messy
needs a mast head and a link bar

I added some more images into the right hand box out. aswell as checking spelling and grammer. I also got rid of the lines uner the links on the page so it looked neat and even.

It was finally time to put my art work onto Drea weaver. This was a process that i had never done before so was cean to learn how to do it.

firstly i saved the photoshop artwork into a Pdf file, for web and devices.

I then pasted this artwork into the guidelines we were given in dream weaver that had the dimensions in.

I decided that i wanted the vertical links on the page to have roll overs so I edited my original photo shop document and added yellow boxes aroun the links as i had already used alot of yellow on the page.

I added hotspots to the document and by doing this was able to paste the two different layers on dream weaver, in doing so creating a roll over.

I then pasterd in the mast head which i had also saved for web and devices.

To occompany this i made a links bar so my website was easy to navigate aswell as making a search bar so it gave the section a conventional look of a website.

Aswell as contact bar for the bottom alloted section of the layout

Here is the final codeing for my home page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Home</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body onload="MM_preloadImages('images/homepage_rollovers/home.jpg','images/homepage_rollovers/jobs.jpg','images/homepage_rollovers/comp.jpg','images/homepage_rollovers/gallery.jpg','images/homepage_rollovers/news.jpg','images/homepage_rollovers/night.jpg','images/homepage_rollovers/your.jpg','images/homepage_rollovers/enter.jpg')"> <div id="container"> <div id="masthead"> <img src="images/MAST-HEAD.jpg" width="800" height="120" /> </div> <div id="linksTop"> <ul> <li class="style2"><a href="news 2 copy.html">Home</a></li> <li class="style2"><a href="news 2.html">Entertainment</a></li> <li class="style2">News</li> <li class="style2"> Gallery</li> </ul> </div> <div id="strapline"><img src="images/BANNER FINISHED.jpg" alt="l" width="800" height="35" /></div> <div id="maincontent_Container"> <div id="mainContent"><img src="images/website home! .jpg" width="750" height="820" border="0" usemap="#Map" id="Image1" /> <map name="Map" id="Map"><area shape="rect" coords="14,19,184,36" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/home.jpg',1)" onmouseout="MM_swapImgRestore()" /> <area shape="rect" coords="15,49,91,64" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/jobs.jpg',1)" onmouseout="MM_swapImgRestore()" /> <area shape="rect" coords="15,77,207,93" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/comp.jpg',1)" onmouseout="MM_swapImgRestore()" /> <area shape="rect" coords="16,107,126,120" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/gallery.jpg',1)" onmouseout="MM_swapImgRestore()" /> <area shape="rect" coords="18,135,182,149" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/news.jpg',1)" onmouseout="MM_swapImgRestore()" /> <area shape="rect" coords="17,164,152,179" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/night.jpg',1)" onmouseout="MM_swapImgRestore()" /> <area shape="rect" coords="17,193,187,209" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/your.jpg',1)" onmouseout="MM_swapImgRestore()" /> <area shape="rect" coords="16,222,222,236" href="#" onmouseover="MM_swapImage('Image1','','images/homepage_rollovers/enter.jpg',1)" onmouseout="MM_swapImgRestore()" /> </map></div> </div> <div id="banner"> <img src="images/footer.jpg" alt="footer" width="800" height="35" /> </div> </div> </body> </html>

A2 media

Sunday 24 April 2011

steps of making: home page of website

No comments:

Post a Comment

About Me

Blog Archive