Wednesday, 9 March 2011

Website- Creating

I've never created a website before, I decided to use MoonFruit.com which allows you to pick a template and you have to adapt it to fit your own needs for the website.
I screen shot the steps I took as I did them so it would be easy to see how I created the site.


Creating the Homepage


I was constantly referring back to my research on what I wanted to be on the front page.
Here's a list of what I hope to have on the front page;
- Picture of the album I created
-Social networking Icons
- The Music Video I created (at very least a link to it to youtube) 
- The colour scheme I chose was Black,White and Red.
- Scala's name
- A clear menu bar ( using the "ScalaNews" "Scala Bio" names)



This was me creating a comment box, and I turned it red so it would fit in with the sites colour scheme.


Picking the title,I took font, colour and size into careful consideration it was a process of trail and error until I was satisfied. 





The completed comment box on left, with the YouTube video link which I'm going to link up with the music video I created. 


This was when I created the loading bar, which viewers of the website would be able to see to stop them from getting impatient if the site is running slow, this also fit in with the colour scheme I picked by being red and white on the black background. I picked the juggling balls because they're something different than usual loading bars. 


Creating the menu bar for my website, picking type, colour and size e.t.c.


Writing out some of the mini biography on the front page plus the promotion for the new video and album which I created.



These screen shots show the finished home page, just needing to upload the video onto youtube to link up.

Creating page Scala Biography 

I began by removing all the templates off the page so I could decide what I wanted to do with the space. I felt Scala's biography on their official website was too long. I wanted to shorten it down and provide more pictures and eye catching things on the page so whilst browsing they'd be more likely to and read about Scala. 

I decided to collect a few pictures of Scala to make a collage that would go on the top of the page. Here's me creating this collage in paint, I got the photo's off the internet and Scala's own website. 




This is the collage through the creating process and then on the site. 

Here's a print screen on the shortened down Biography because in my research and planning I felt Scala's was too long. 


Creating Scala News
Scala's website has all their recent news on a page in loads of detail with links, I'm going to change the basic layout they used on theirs and rephrase how it's written so it's more presentable and shorter so people are likely to take the time to read it. 

I'm going to do the news from the beginning of this year, rather than just putting the really recent stuff on. 


I did a tile format so it was easy to view the information, I used the same font for each title in the same size and I made sure my font use was consistent throughout the website. 


I linked up Scala's latest video and the one I made again as it's more advertisement of their products.
Unfortunately when I tried to view this page the links weren't working because of technical errors so I replaced these video ports with links to the page on youtube they look less professional but I felt that this was better than a broken video port or just a simple type this in to your URL bar or youtube these songs.

Creating Scala Concerts 
I was going to create this page for easy information for fan's to view and get dates but the dates on their site don't show any in England, I attempted to email them about this issue but didn't get a response. 

But the contacting Scala page will be ideal for fan's to ask about tour dates and tickets then.

Creating Contacting Scala
Once the templates were removed I added a form which was available from the site which people can get into contact with the band through email. As I got in touch with Scala through there contact us page I felt it was a necessity to have this page on the site. 




No comments:

Post a Comment