A2 media: April 2011

Sunday, 24 April 2011

steps of making: second page of website

step 1

•I wanted to design some adverts for the second page of my website. Write the summer coming up it is evident that many students go on holiday so I decided to design an advert for a competition to win a five star holiday I started with a an image from the holiday then started adding layers on top. I used bole yellow typeface to write “ win a 5 day, 5 day holiday for two” I did this is because this prize would be the thing to really entice readers to enter. But putting a box out over the image at the bottom it enabled the important information (the question) to stand out. I changed the opacity of the box to 50% so the picture could be seen behind it as the image is another tool to entice people to take notice of the advert.

audience feed back:

positive points:

nice idea for advert will attract younger people

the image is good as it shows the audience what they could win

the blue links with colourscheme of the rest of the newspaper

Bold and bright typface stands out and catches reader eye

nagative points

need contact details

people will not know where to submit answers to

step 2

•I placed this advert in the bottom two fifths of the page that I had set up using the same dimensions as the first. I then started making a second advert. I did this by splitting the page into three columns and placed it inn the top two fifths of the right hand column. I used an interesting, funny image of a young person to grab the reader attention as well as bright, bold font. The question Bored? Involves and engages the reader. Now they are interested in what the advert is advertising they will be more likely to read on to find out- the answer being a club aimed at young people.

•I also added a banner at the top of the page which was for a title. These were also used in my first page to highlight key titles and headlines.

step 3

I shaded a small section of the box out a blue colour and used the smudge tool to add detail this made my advert stand out that bit more

step 4

•I added a title for the page, it was to be the entertainment page. I used a white font which stood out on the blue banner. Then added a story about a local band using a bolder, large font for the mast head. I also added two images of the band to draw in the reader. I placed the images in boxes with rounded edges which I have used throughout the website pages.

step 5

•I now had a narrow space to fill so decided to put in short movie reviews another topic that young people are interested in also added a blue banner to the bottom three fifths of the left hand page

step 6

I made another simple advert for a well know company as young people tend to be always after the latest deal for their phones especially as the website and paper is aimed at student or young people who may not have a lot of money.

step 7

•After my market research I found that a popular activity for young people is going to the cinema so I added a film review section in the centre of the entertainment page. The yellow stars not only act as a rating system for the films but catch the eye of the user.

•I also placed an orange advert at the bottom of the empty column which left me with enough space to put in a box for another feature.

•So this page flowed from my home page I added made the box the same colour as the blue I used on the home page. I did this by using the colour pick tool and then using the paint bucket tool to fill it in.

step 8

•I added in a final article named fun in the sun, using a yellow bright font to make it sand out and putting the same style sun I used on the home page for the weather report.

In my feedback i found that most people agreed I needed to add contact dteails to my advert the holiday so i adjusted this accordingly.

The next step was to put this onto dream weaver, i did this in the similar way to the home page. By saving the facebook art into a PDF file and saving it for web and devices i was able to paste the artwork into the main section of a template we were given with the dimensions on and then add in my ast head and links.
I added in th esame links, benner and mast head to the dream weaver document so my website appeard consistant.

here is the final Html code for my Entertainmet page.

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: second page of website

steps of making: home page of website

About Me

Blog Archive