Simulated Project - Music Player

This was the piece of interactive that I found quite difficult to create mainly because of the advanced coding that I had to learn. I received the coding from another website but I am still on the hunt to find the reference because the files have disappeared from my laptop but as soon as I find it again I will load it on here.

Below is my first initial idea though. David helped me figure this out however it was not what I thought the music player would look like.



As you can see with this player the user would click on each number depending on which track you wanted however, a problem that came to my attention was that if the user continued to press play then it would start playing the song again, overlapping each other.

Now that I know what I wanted I guess I'll just has to search the web to find the answers

design testing

Below are two examples of what colours I would incorporate into my final website design. Initially I was thinking of having one colour background making the CSS coding easier however when talking to my peers it was agreed that using the different colours would look more appealing and make the design more interesting.

Simulated Project - Music Player update

Ok so have now found a music player that I can understand the code (after some thorough reading) and I will use it for my interactive piece on my site. As you can see below I first created a template and for those who didn't realise it was only meant to be a template not the final product.



As you can see it brings out the general layer of what I want my music player to look like. Rather then the user selecting a track number the user would have to select the next and previous button to allow it player the next song.
I used a piece of coding called 'ID3' it picks up the mp3 songs info and pulls it out of an external file and onto the music player. I changed the colours and the detail of the buttons to suit the look of the site.



I kept the design simple having looked at other examples of music players it clearly showed that most music players worked around a black colour theme. I have tested the music player a few times and as long as I keep the external mp3s in the same file it will work. The only point that I have to think about is whether to have the music player as a pop-up or on each page.
Having it on each page will start the music player over again whereas as a pop-up there will only be one music player but it will look a bit messy, so maybe I will have the music player on one page. We shall see

Simulation Project - Client feedback

When talking to my client (David) he mentioned that he wasn't too keen on the colours that I used in my initial designs. When he looked at them he thought that they were too bright and needed to be toned down.



When I first heard this feedback I disagreed, thinking that my designs were successful however being the client I took his opinions into consideration and looking at the designs now I think that they look more effective. When I first tried the new colours I was unsure however, when I look back at my old design I have to agree with David.


When I received the feedback David suggested some pastel colours. I had a play around with some colours and toned down the main content box. I tried using one colour but like I said in previous blogs it did not give out the effect that I wanted.

I next tried to work with the background. I found this quite difficult though because I had to find a colour that would suit all of my chosen background colours. This is where I came up with the light beige.


When I asked for feedback from my peers they all agreed that the new colour scheme was more appealing and I have to agree the new colours that I chose are a lot more toned down. When I look at the old designs they appear to be very bright and overwhelming.

It just shows us that you do have to take into consideration what the client wants. it has been good practice and a learning curve for my live client project.

Simulated Project - Final Product

Well its all finished now so here are a few screen shots of some of the different pages showing you what I have done on each page.



As you can see home page has the music player. I have only added that on this page. The general layout is with the image at the top, menu beneath and information at the bottom not forgetting a menu at the bottom including an accessibility page.



The File Sharing Page



As you can see at the bottom of the pages I have the menu incase the css style is switched off, the logo in bottom left shows that I have tested all of the pages with the W3C site.



I have added some simple imagery to represent what is in the text.



As you can see I have included my flash quiz which I have mentioned in previous posts.



I added an accessibility to explain to users how to make the text bigger/smaller

Simulation project - Imagery

One of the main points that I stated in my proposal was that I was to incorporate imagery into my website however rather then finding the images online I thought that I would actually create my own images being that this is a 'copyright' project.

So with the help of my friends and a very good camera I created these images below that you may have seen in other designs of my blog but I wanted to show everyone that I was the one who shot these images.











I was initially going to leave the photos as they were but when other people looked at the images they all said that there was something missing. When I went back home for a few days my mum said that she really liked the logo. As there was no appropriate place to put my logo within the site I decided to incorporate it within my image. Other people also said that when searching the site they were unsure as to which page they were on, so I have added a few words making it clear to the user which pages they are looking at.

Simulated project - Interactive elements

As I stated in my proposal (even though you cannot see it) I intended to do a couple of interactive elements for the micro site. From looking at different campaigns questionnaires were the best source of interactive elements so... if it worked then I'm going to use it.

I managed to find some quiz questions that I found online which you can find here they're basic knowledge but it works with the website.



As you can see I have incorporated my logo into the quiz however changed the colours to signify whether the answer could be right, wrong or both.



From user feedback I received some positive comments. The main issue with questionnaires was either they are too descriptive or too long. Having kept the questionnaire to five questions the user will not lose interest.
I did also provide the user of three options. If the question was answered wrong then the user cannot proceed but can try again until they get the answer correct.



This is one of my interactive pieces I still need to work on the music player but thats one piece done.