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.

Simulated Project - The start of the web designing

So I have researched into the brief, created some ideas, wire frames, more designs ideas, recieved user feedback, talked to David and made my ammendments so now I can finally start creating my CSS template. As you can see below I have added some curves to the main content box (from a user opinion) but this is only the beginning stage. Having shown my peers my first outcome I will intend to create an internal box, also with curves to give it a more symmetrical view.

I will also have to work on the imagery becasue if the user switches the screen off then only blank boxes appear (obviously text has not been inputted).



This is a screen shot of my design on a computer screen with a resolution of '1920 by 1200' I have been working on my laptop (13inch screen) and it still look good even though you have to scroll down vertically you do not have to horizontally. So overall the site is comming along nicely.

Simulated Project - Design Ideas take 2

Ok going back to my wire frame ideas I then moved onto creating a photoshop design, basically what the wire frames would look like with imagery and text. Below are the four designs that I created.









As you can see from these four designs there was an improvement from the previous designs. I managed to get feedback from some potential users, asking them on what they thought was the ideal design, the majority of people that I asked agreed that the top design and bottom were the most successful ideas.

In my opinion I like all of the designs however the middle two designs was not what I was looking for, I wanted a simple design because of the brief stating that it was a micro-site. if the brief wanted a bigger site then I would have probably opted for the middle two designs because the layout in which I designed for them have the room for more information and interactive elements.

The two designs that I chose are basic but I feel that that is what we need for a micro site. after consideration I finalised my idea to the bottom design, my main reasons for this was because I felt that it would suit all monitor sizes and because the layout has been used in other websites so it has proven to be a good layout.

Having talked to David about my designs he pointed out to me the colours were too bright, which looking at it now I agree with. In my proposal I quoted that I was going for a 'light hearted' approach, how does bright red represent light hearted? So I opted for more pastel colours which work well in the design.

Simulated Project - Design Ideas

So I just had my presentation with David and when showing my designs it suddenly occurred to me that I haven't actually uploaded any designs onto my blog!! So I would like to present to you my first initial designs.







As you can see from these first three designs they were not very successful, I was trying to think of designs before I had even thought of an initial layout. Having grasped inspiration from other websites I thought that I could create an idea that would immediately work. I was very wrong.

The designs that I created here I feel are too 'square' they do not look like a website page. As you can see in my previous blogs I moved onto designing some wire frames which helped me choose my final design idea but I just wanted to show you that I did attempt some designs.....but they were not successful.