Planning

After some thinking I decided to go with a music website.

Due to the amount of websites already out there, actually deciding what the whole idea was going to be about was fair difficult.

But I decided on a music database. So that users can listen to one selected song before they buy the album. Due to restrictions whilst building this website I was unable to add a database into the website.

To get around not adding at database I choose 3 albums and 3 songs from them albums to put on the website the first being Bring Me The Horizon - Sleepwalking the second being Calvin Harris - I Need Your Love and the third being Fall Out Boy - My Songs Know What You Did In The Dark.

So now that I had some information to go onto the website I needed to consider a design for it.

I looked at these websites.

http://grooveshark.com/

Although I don't have the skills to create I browsed through this website and thought about what I could take from this website to incorporate into mine. With this website I really liked the whole search for the music you want to listen for bar, however if you felt indecisive you can just play a playlist, allowing you to discover new music.

https://soundcloud.com/

Sound cloud has a really nice slider effect on there website, when you hover your mouse over to the right it pops up with the next slide, if you click it will change to the next slide allowing you to see what people have posted on SoundCloud. I really thought about including this into my website, however I was very unsure on how to do it even with research into how to do it, and due to amount of other coursework I have, it would be unwise to spend a big amount of my time on this. 

I didn't really take anything from Soundcloud except awing in how good it looks. I really enjoy the player that they have within the website.

I notice neither of these websites have a navigation menu, this being a weird concept to me, I still decided to include this into my website.

So I decided to start planning the design for the website I thought of having something really simplistic, so i thought about having something music related on the website. I wanted a static image that stays there when you click on the images. I then thought how can i implement actual content onto the website. I then remember I had learnt about CSS boxes, I decided to implement this into my website.

I didn't really know how to plan the navigation menu, Im quite iffy with them, I know how to do them it's I am a fussy bugger. I remember learning about Classes in lectures. Through previous experience I know how effective they are, so I will be implementing them also into the styling of my website.

Styling my website won't be hard I feel like I know CSS and CSS3 fairly well to use it to my advantage to manipulate everything on my website into the design that I desire.

The design is simple I don't want a header on my websites I want it looking similar to this.

Nav 

IMAGE:CONTENT BOX

Although this is simple I believe I can fit all my information into this.

I thought about using Javascript through this whole website however I only have pretty basic skills. I only want to include a image rollover when the user is viewing albums, to show the front cover on mouseoff and when on mouseon it will show you the front cover. Although this isn't a big challenge I will be pretty happy with myself If I achieve this.

Colours are fairly important whilst designing websites, I want to keep to only 3 or 4 colours for my website these being grey, white and black.

Idea, Tips and Research

After reading over what was required for the assignment, i thought I need an idea and pretty quick. So i need something that I am actually interested in.

I have decided to do a website on music it will be my fictitious company.




Tips for designing a website:

• Provide information within index page what the product is about.
• Provide image rollovers within homepage to keep a visual element towards the website
• Motion captures the users eye, so use visuals but don't go over the top with them.
• Consistency within colour is important, also vibrant colour do not mix very well within web pages.
• Moving banners work well in a front page, allowing you to show visuals without having them scattered around the page.

Further Research to do:

• Research into mouseover text Javascript
• Research into Javascript sliders 
• Research into Current web trends
• Research into Colour matching

Assignment

A start-up organisation of your choice, which can be fictitious in nature, wishes to implement their initial 'teaser' website announcing their products and services. You have been asked to provide a functional three page site as your bid for the contract, with a development blog documenting the entire production process.

The site must be implemented using HTML, CSS and JavaScript, with extensive use of embedded media (Images, audio and video). The initial target platform is a modern, standards-compliment browser running on a desktop PC. Additional credit may be awarded by successfully supporting additional platforms such as a mobile and tablet. You do not need to target older, less compliant browsers. You should also avoid using server-side technologies (PHP, SQL etc.) as the focus of this assignment is on client-side languages only.

Take care in the design of your site. You will need to consider the user experience in creating a suitable interface and should refine the design over multiple iterations. consider the target audience of your chosen organisation and current trends in web design.

The development blog should contain detailed entries covering the entire project duration. This included initial concepts, idea refinement, research, implementation, usability tests and so on. It should also demonstrate an understanding of legal and developmental issues with web design (e.g. accessibility, browser support) and explain how your work takes these aspects into account . Blogs must be hosted at www.blogger.com as a unique blog containing only work for this assignment. Ensure the blog's visibility is not set to private. You must include screen shots of all blog posts with your submission.