Today me and Meilissa began creating Vanessa Carltons Website using the Dreamweaver software. We started off by setting up different folders within one main folder which we named Vanessa Carltons Website, these folders were named Images, pages and buttons. Secondly we created the pages we wanted to incorporate in our website which were Home, My Life, Gallery, News and Tour and saved them in the appropriate area before the designing process began. We added two more pages to the website which we will now draw up detailed plans for. These pages were Videos and Merchandise.
The next thing we did was decide on a background colour or pattern. We selected the following pattern as it fits and is consistent with the theme and house style we have created through our groups ancillary tasks. The house style is Red, Black and White. Below is the background pattern we selected.
We decided that this was a suitable pattern as it tied in and complimented the color scheme selected by the group. furthermore the rose petals tie in with the theme of the music video we are creating at from looking at other artists websites you can clearly see that the elements of the latest video and CD are incorporated within the website design. After selecting and inserting the background pattern we referred to our original plans and using AP Divs marked out the layout of each page.
Once this was completed we tested several fonts before selecting an appropriate font for the navigation bar. The font that we selected was called
We then drew a table at the head of the page and wrote the name of each page inside a different column in the table. Then we created a text link to link each appropriate page to the homepage. By creating a table we where able to ensure that each link was equally spaced and aligned. Below are the first print screens of each page within the Vanessa Carlton Website with further information on each page.
This is the first print screen of the Homepage of the website. As you can see me and Melissa have added the background pattern, created a black box for the information, interactive features and images to be positioned inside, created the navigation bar and set out where the features are going to be positioned using AP DIV'S. Where the white banner is will be a photograph of Vanessa Carlton and where the grey boxes are interactive features and links.
|
This is the first print screen of the My Life page. As you can see me and Melissa have used the same basic template as the homepage to keep the website consistent. The white boxes on the page are where the picture slide shows will be positioned and the text in the black space. |
|
This is the first print screen of the Gallery page. As you can see me and Melissa have used the same basic template as the homepage to keep the website consistent. The light grey box will be where the images will be shown in a scroll bar and the dark grey areas will be where the back and forward arrows to look through the images are. The white box is where the image will be displayed after it has been selected. |
Merchandise
This is the first print screen of the Merchandise page. As you can see me and Melissa have used the same basic template as the homepage to keep the website consistent. The grey boxes are where all of the different products will be shown along with the price and item description. The white box will show a larger version of the product when they smaller version is selected.
|
This is the first print screen of the Video page. As you can see me and Melissa have used the same basic template as the homepage to keep the website consistent. The light grey box will be where the different music videos will be shown in a scroll bar and the dark grey areas will be where the back and forward arrows to look through the videos. The white box is where the video will be played after it has been selected. We have decided to keep the gallery and video page with the same layout as this was a common theme in other artists websites for example Cheryl Cole. This is the first print screen of the News page. As you can see me and Melissa have used the same basic template as the homepage to keep the website consistent. The grey box at the bottom of the page will be where an interactive form is positioned. This form will allow a visitor to the site to apply to receive fan mail. The form will consist of questions such as Name and Email. The white spaces will be hot spots that are miniature newspaper articles. When you hover over the article or information becomes bigger and when you select it opens a pop up box.
This is the first print screen of the Tour page. As you can see me and Melissa have used the same basic template as the homepage to keep the website consistent. The white box is where different pictures of Vanessa practising and different venues and tour advertising material. The grey box will be a black and white close up image of Vanessa and the black space is where the tour dates will be listed. |
Now that me and Melissa have agreed on the basic designs, layout of each page, color scheme, information and interactivity of each page we have decided to split the website's pages in half. I am going to focus on the Homepage, Merchandise page and Tour page as well as half if the news page Me and Melissa will ensure that our designs are consistent and follow the same house style through regular meetings to analyse and discuss our work. The layouts that we have created together are not final they can be altered if me and Melissa believe a different layout would benefit the website as long as we discuss it first and give reasons for the design change.
I will now focus on the pages I have been designated showing the development of these pages through my blog. I will now create mock up designs of the pages in Illustrator (with no interactive features) so I can clearly see what I am creating and have a basis to work with in Dreamweaver.
No comments:
Post a Comment