We began the production of our website using Macromedia Fireworks. Due to it's interface having very similar features to Adobe Photoshop CS2 (the software used to create our digipack), Josh and I felt confident to begin the process using this particular programme. We wanted our Music Promo, Digipack and Website to all be associated media products, and we have achieved this by using similar imagery (gothic and eerie), colour scheme (red, black and white) and angularity (dancing and forest) throughout each of their aesthetic appearances. By linking the media in this manner, we are creating continuity between all our products so consumers would be able to easily relate each product and gain familiarity with our style.
Stage 1
We first imported our main promotional image (that we used for the front Digipack cover), as our main background feature. We increased its size and cropped the outer edges using the selection tools, to suit the dimensions of our website so the webpage would be compatible for all internet browsers. We then decided to place the image slightly off-centre so the hair would ultimately take the centre of the home page so the embedded video could merge into this space after exporting into Dreamweaver. The final process in this stage was inserting the title of our homepage below the central image, which we edited using the font and colouring tools.
Stage 2
We then inserted our other digipack artwork and shrunk their size to create symbols using the vector tools (inspired from 'The White Stripes' website). By placing these symbols (later to become hyperlink buttons) underneath the area of the video, our consumers will be able to easily notice their presence on the web page, enabling easier navigation. We inserted each symbol using the import and transfer tool that allowed free alignment position on the web-page. By using the symbols in this manner, the consumers are able to notice their relevance to our video-narrative and create their own association between the two products. We created hyperlink sections around each symbol using the 'Web tools' (polygon cutout tool), which enabled us to transform them into buttons after exporting. So our consumers could easily identify where each symbol would take them on our website, we inserted text boxes above and below the images. This way, we are enabling an easier experience of navigation.
Stage 3
We imported a raw web image of the 'Sony BMG Music' logo to place at the bottom of our webpage, as this is commonly seen on professional music websites to advertise the artist's music label/producer. We decreased it's opacity depth so it's appearance would tie in with rest of our colour scheme. We then placed the 'Facebook' and 'Myspace' pictorial links to Imogen Heap's profiles either side the logo, giving our consumers an area where they can browse through other interfaces that promote the product (as well as our website), which ultimately spreads awareness of our merchandise.
Stage 4
Having investigated further, and analysing our research in more depth, we realised we needed to insert simpler buttons above our embedded video so our consumers could easily access popular areas of the website like the 'login' database for members. By including this type of membership on our website, this automatically creates a sense of loyalty for the consumers, providing them with a more personal experience with advantages such as emails, promotional offers and exclusive track previews.
Stage 5
After further customisation of colour scheme and arranging the composition of buttons using the BITMAP tools, we were able to isolate the necessary sections of our website that would later become areas of hyperlinks. At this stage we were able to export the page into Macromedia Dreamweaver to create the HTML in our website and modify the nature of buttons (rollover behaviour). For the buttons above the video, we altered the HTML text colour coding so when the consumer rolls over this area with their cursor, they are able to easily notice the buttons change of colour (to white) for their required navigation:
We then modified the hyperlink for each isolated (polygon cut-out) section of the page, so when clicked on...the web-page will re-direct our consumers to the appropriate area of the website.
Stage 6
As the final stage, we embedded our final video into the cut-out section (over the hair) by copying the code from the YouTube interface, into the embedding option within Dreamweaver. We were able to move the video around this cut-out to our required area, so it's alignment was symmetrical with the composition of our buttons and symbols. Dealing with embedding is a tricky task which was made far easier using the viewing and preview tools within the Dreamweaver interface. After further HTML encoding our website was ready for exporting to become a final website compatible for all internet browsers. As a final tweak, we centred the entire web-page and coloured the background black so the red and white features brightly stood out. Below is the final outcome and a hyperlink to our official website:
________________________
No comments:
Post a Comment