making the site

using the mockup i made in Photoshop i got it ready for slicing in Image Ready so i made the header, menu, menu-buttons, page bottom, body txt block all seperate.

I then imported the photoshop file into Image Ready and sliced it up and created the rollovers for the navigation menu.

I then imported the Image Ready file into Dreamweaver and started shoving in all the info into my as planned, 3 column table. Also added images and incorporated css style sheets for parts of the body txt, subheadings and shiz.

I was unable to finish the rest of the artists backgrounds, i got up to metallica.

More sketches

i needed a design to go on the bottom of each page so i sketched some more ideas up.

Mockup in Photoshop

After i'd finished playing round with graphics and the header i did a quick mockup of how the website might look in photoshop with the navigation menu and background.

Website Graphics & Header.

Now that i'm happy with my layout design i went on to scanning in my previous layout sketches and working with them in Photoshop and vectoring them up with the pen-tool.

Final layout ideas

I've decided on how my final layout will look, i've gone with a thin vertical portrait layout with a big fat graphic header reading 'Rock Realm' placed at the top and just underneath will be the navigation menu giving easy access to other pages. Body txt will be placed in 3 columns so i can vary where i want pictures if i need them beside the text.

Mock Ups

I did a bunch of sketches of interesting layouts using references from photos of guitars and taking parts from the instrument and using them as a graphic feature for the site for example guitar strings, knobs, pick, speakers, frets etc. Also playing with type and using the word 'rock' and playing round with it, enlarging, rotating, cropping and zooming.

Website Layout

http://www.last.fm/
i like this music website because it has a simple interface with big buttons, easy navigation and a tidy simple layout, with spot colour used in the design.

http://www.submarinechannel.com
This was made i'm guessing with flash as it has this cool little sidescrolling effect when choosing a link to another page which works well and also makes navigation simple & easy + the fun of playing with the scroll feature.

http://www6.islandrecords.com/site/home.php
Has a simple layout, horizontal menu at the top easy navigation and looks good.


http://www.atlanticrecords.com/acdc/
Has a cool wee flash thingy at the top and when an item on the menu is selected a little extra info about that part of the site is exposed. Also there's a little webradio in the corner which can play music music if u choose which fits in with the design nicely.


http://www.goldenshower.gs/e/home.html
very original homepage, has a lil pixelart design in the corner which works as a menu when the mouse is pointed at various objects in the bathroom, very simple clean original design, though hard 2 read and not so easy 2 navigate i think as it's so different from the usual.