Graphical Styling (musical styles)
Task information:
This post contains my work for “Task 3”, this task involved designing and creating two different ,visually themed, pages of the same HTML content.I set out to create two webpages with different music genres.The music genres i have chosen to represent in HTML form is Children's Music (such as rhymes and well known children's songs) and Rock and Roll, i chose these two genres of music because they were at totally different ends to each other which meant the visual outcome of the pages would look different but the creation mechanisms would be the same.
Before jumping in to the creation of the webpages i had a look at the different designs on http://www.csszengarden.com/ for inspiration and a look into how graphical styles can be applied to present the same content in a range of very different ways.After looking at Css ZenGardens graphical styles i believe i have got some knowledge of the way i would like my own webpages to be stylized and created.
I will begin by creating a basic HTML page layout and will mark the text with the appropriate <p> <h1> and <h2> tags , also i will use <div> tags to divide the page into 'header' 'content' and 'footer' areas which will give a basis for which the graphics and be applied to. I will then be designing and creating graphics on adobe photoshop to be applied as background images on the page to create a strong visually coherent overall design. I will hopefully achieve a layered page with visual elements that tie together to give an overall musical mood to the page.
I know that the aesthetic feel of the page is important and will be designing the background elements to complement one another and work well within the overall graphical and visual theme of the page.To do this i have sketched out some ideas for graphical themes for my page which you can see below:-
The above sketch was a quick idea on how the children's music page might look graphically,i don't think i would have a big image in the back ground, however i would try to put the giraffe so it was on background but positioned on the left hand side so that when you scrolled it did not move with the page sort of thing.
The sketch above is one which i did in reflection of the rock webpage that i want to design and create, i have made the title rockabilly drift in reflection of a sort of 1950's rock and roll design as that movement is starting to get quite large.
I designed my pages with the knowledge that i had learned and applied my ideas from my sketches to my screen work.
The Links below will navigate you to the web page designs for task 3:
Rock Website Design
children's Music Website Design
