1.) We decided to use a blank template instead of using a ready made template as we wanted to make sure that we could create a website with the same layout as our draft which a landscape format with a navigation at the bottom of the website.
Home page for website
2.) This print screen shows that layout of the beginning of the layout. The right side of the print screen shows the page manager which shows what pages we have created. So far we have just added a blank homepage.
3.) This print screen shows us choosing a background colour for the website. We clicked on the background button and then clicked on brown (respondents from questionnaire preferred brown earthy colours) which came up with different brown backgrounds. We choose a brown gradient colour as we wanted to have different tones of browns on the website. At the bottom we created a navigation bar by adding pages on the page manager and then dragged the navigation bar at the bottom of the website. Once we created the navigation bar we double clicked on the navigation bar and then pressed on the format text button which lets you customise the font and style. We choose a formal style font (preferred by the respondents from the questionnaire) with different tones of browns.
4.) We wanted to see to adjust the colour of the background to make the website look more darker by clicking on the background button on the left side. We thought by doing this it went with what the target audience expect in an RnB/Soul music website (dark colours) although we had to be careful that you could still see the writing.
5.) For the homepage we added a picture of the band (requested by the target audience) by clicking on the add button and then uploaded the images of the band from my computer and then onto the website.
6.) As our target audience wanted a retro and nature based we decided to add a old film frame on the main image in order to give a retro effect which enhances the actors style of clothing.
7.) Whilst adding features onto our website we changed the colour and made the background colour lighter as we think brown makes the website look better. We then clicked on the add button on the left hand side and then added the band name on top the main image. We used the same font from the navigation bar but different colour as wanted the bring out the white frame, so that the main images stands out.
Biography of website
8.) When creating the biography page, we double clicked on the page and then added a Article template as it has a navigation at the side which changes the page to each article.
9.) We deleted the images and text on the page and then changed the text on the navigation bar and added the individual bands members names. Afterwards we changed the font and colour of the navigation bar as the same style of the navigation bar on the bottom of the website.We decided that we wanted to add an effect on the navigation bar by clicking on the replace skin button and then adding a casino animation effect which makes the bar scroll when the mouse is placed over.
10.) We then added the individual image of Genelle by clicking on the add button on the left side and then added the uploaded picture of Genelle.
11.) This print screen shows us adding the old film frame on the image as we wanted to show continuity of the retro theme we are trying to convey.
12.) We then added a text box in a shape of a speech bubble (make the text look more personal and directed towards the audience) at the side of the Genelle's picture.
13.) We then edited the text by using the editing tool above, we changed the style of the writing and added a more formal type font.
14.) We then added the name of the band member on top of the fact file in the same formal font.
15.) We felt that the top of the biograpghy page was bland and therefore we added the word biograpghy on top to make the page look more filled up.
16.) Sofia clicked on the add button and clicked on the clip art section which gave me a variety of images to choose from. Sofia and me felt that the star to make the page look more exciting.
17.) Again we added the Alice name on top of her fact file, to make it clear which band member the fans are looking at. Within the fact file we included that Alice is usually a 'drummer' in the band, but for this music video she decided to play the 'tambourine' to show her diversity in musical talent.
18.) We added Jessica's name on top of her fact file.
Gallery for the website
19.)
Sofia liked the idea of a circular gallery as it goes with our retro theme and gives a 60's feel towards the page. Although I thought that the square frames were more conventional and it didn't look too extra, I did like the circles but then asking a few people for feedback, they all preferred the circle frame instead.
20.)
To add our picture, we double clicked on the gallery and uploaded all our images from our files onto the gallery.
21.) We wanted to add the same effect from our homepage image which gives the illusion of old film effect which again shows continuity of the retro based theme for our website.
22.) Sofia and I clicked on the add button and then clip art which had loads of nature based images that we could use for our website.
23.) When adding the images we double clicked on the image and added a glow and brown/ black tint to make the images blend with the background.
24.) We then added the same effect here and a different image.
25.) We then added the same effect again and a different image.
Video for our website
26.) For our video page we clicked on the add section and choose a video style on the video manager and then imported our music video from you tube.
27.) Then we added the title of the music video on the left side of the page so that the consumers of the website would find the information on the page more clearer.
28.) We then added a scroll box and added information about the music video so that information is more clear and professional looking. The scroll bar contained information about the record label (EMI), the famous artist who had written the song for the band (Emelie Sande) and when the album is coming out in store. These are all the conventions you are likely to find on a website related to the album release and other information which is relevant. The only difference is that you may find this information in smaller writing on a actual website.
29.) I suggested that we should add a nature based image on this page in order to show continuity of the nature based theme.
30.) Sofia clicked on the video manager and found a transition tool which makes the video appear in a floral design when you click on the page.
Tour dates page for our website
31.) When creating our tour date page we added an image of the band together rather than a concert image which initially decided to add from our draft for the website.
32.) We then added a glow effect on the image to make the image look more effective and too stand out.
33.) We then added the page title on the left side to make the page look more full.
34.) We then added a scroll bar for the tour date information.
35.) We then added the text but separated the text in three columns to make the tour dates more clear and easier to read.
This is the final look of our tour dates page.
Contact us for the website
36.) When creating the contact page we added a speech bubble effect on the outline of this page.
37.) We then added the contact box by clicking on the add section and then the clip art on the comments button.
38.) I connected my email onto the comment box so that when publishing the website all the comments will go onto my email account.
39.) Afterwards we added the contact us on top of the page.
40.) Underneath the tittle we added address details of the company so that this page looks more professional and completed.
41.) This print screen shows us adding a rose at the side of the contact us page to make the page look more appealing and to blend with the nature based theme.
No comments:
Post a Comment