Artefact 6 Screenshots

Below are the screenshots of the mobile site in action and how the site would look when saved to the home screen of an iPhone or iPod touch. The app icon was created by myself and code is entered to make it appear as the default home screen icon.

Artefact 6

My final artefact is complete! It can be found at http://www.georgewood.me/artefact6 and is best viewed on an iPhone/iPod Touch as it is a mobile site.
______________________________________________________________

My sixth and final artefact was a mobile version of the site I created for my fifth artefact. Combined these sites take ideas from feedback gained throughout the process of evaluating my previous artefacts in order to make a music website which contains everything people want from a music website. Mobile browsing is already hugely popular and the amount of people who use this method is constantly growing, therefore it would be important for a company to have a site that is tailored specifically for the mobile device.

I am very happy with the overall design and it is clear that it links in with my fifth artefact. It was an interesting process to take the ideas and designs from the previous version and to alter them to work aesthetically on the mobile screen.

I am very happy with the process I chose and I feel that this artefact is a nice conclusion and my artefacts as a whole have taken a very logical route to the finish.

If I had more time then I would like to extend on the artefact and build in some extra features to make it even more functional. I would also like to find a way of being able to preview songs on the device, similar to the preview on the big-screen version.

I used HTML5 and lots of CSS3 once again in order to make sure I was using the most advanced techniques once again and therefore it was completely adequate.

The site works completely as it is but I would like some way of being able to play the music without navigating off the page, however the time constraints led me to stick to just video in order to get sound, whilst I put in lots of information to make up for the lack of music.

Artefact 5 Evaluation

My fifth artefact is a fully functional HTML5 and CSS3 music website which has been created by taking ideas from feedback gained throughout previous artefacts. It features a preview mp3 button, as well as artist information as well as videos. I have also implemented many CSS3 features to improve the design such as rounded borders and background gradients.

I am very happy with the design and feel I have implemented plenty of CSS3 without over using it and sacrificing the quality of the design. If I had more time I would like to extend the page further and play around with different border radius effects.

The process I chose worked well and I feel I have achieved something that takes ideas from all the feedback gained through previous artefacts meaning that my artefacts have taken a clear path through to my final one.

It was good to learn the new CSS3 values and this proved a helpful experience for me, as I was able to learn different things for the first time. I am now confident I can implement these things in future sites I create.

The two-week period allowed me just enough time to design and build the site from scratch, whilst being able to look back through previous feedback in order to take ideas that I then implemented in the site.

I used the most advanced techniques I could to create the site and I don’t feel there were any other techniques I could have brought in which would have added to the site.

Overall I am very happy with the artefact and have received positive feedback from others throughout the process. There isn’t much I would change and I feel that other than a few possible design tweaks it would be hard to improve.

Artefact 4 Evaluation

My fourth artefact was designed to see whether certain website features which have only been available since the introduction of HTML5 and CSS3 have an effect on which sites people prefer to buy their music from. I mainly used the ability to bring in any font that you desire to alter the looks of the three sites. I asked people to look at the three example web pages and then answer six questions relating to them.

I am very happy with the design of my artefact. I managed to create three mock websites with the same content that looked completely different. I don’t really think there is any way I could change the design of them to improve the set of survey results I gained.

I had sufficient time to design three web pages well and then have 30+ people complete the survey. I feel I had the perfect amount of time to get the most out of this artefact.

For this artefact I just used Photoshop to create the mock websites, after compiling the results next time I will properly create a web page in HTML5 and CSS3 in order to give the user a more realistic feel to the site.

I feel I achieved a good set of results from the survey that will allow me to move forwards with my final two artefacts. People had fairly unanimous views that allowed me to collate my results nicely and gain some good responses. Many of them also said the usage of fonts within the sites affected their decisions on which to choose, this has led me to decide to explore the use of fonts within websites further in my next artefacts. They also said they would rather download songs than listen online, this makes it easier for me to progress with my artefacts.

PHP Problem

I had another problem when creating the contact form for the Bluebell webpage. When data was filled out into the form and the send button was pressed, rather than sending it to the correct address and redirecting to the 'message sent' page, a page with the PHP which sends the message appeared;



I felt it must have been a small problem with the HTML of the contact page as I could see the PHP was all correct. It took me while to find it but I had made a small error in the HTML for the form and had entered an incorrect value for the 'class' section. I corrected it to this;



The contact form now works fine.

Client Problem

One problem I had when creating my clients website was with the width of the footer. It was set to 100% as you can see below;



However, even though the width meant it should go across the whole page, it didn't and left gaps to the side and bottom;



I had a play around with different ideas and eventually worked out that the default setting for Dreamweaver pages was to have a small, 10px gap around the edge of the webpage. I therefore needed to remove this gap through using the CSS 'body' tag. I added this section of code;



And after doing that the border has been removed and it now displays correctly;

Artefact 4 Results

My fourth artefact was designed to see if certain HTML5 and CSS3 elements, such as being able to use any font, effected peoples decisions on where they would rather buy from. I made a page featuring three different website designs and asked people to look at them and then answer 6 questions, here are the results;

1. Would you rather buy from site 1, 2, or 3, and why?

3, it looks the most stylish and cool.

3 because it is very clear to use.

3 More professional looking

3 - 1 is too dark and boring and doesn't necessarily convey what the website is trying to do. 2 is too amateur and childlike, the 3rd is much more professional and easier to navigate. Nice use of graphics with the 'pause, play' etc.

I would rather buy from site number 1 because it tells you exactly what the website is for unlike site 3 and the font is easier to read than the 2nd site.

3. Font is the sickest. Colour scheme is nice. It just generally looks quality.

3. Is clearer and text is easier to read.

3. Plain and simple

Site 3 I like the buy now function and the description next to the number one

3. Nicest layout and prefer the font.

3 best layout. 1. looks like it has the stylings of a marijuana paraphanalia website 2. looks like a chewing gum packet 3. looks smart and is the best

3 - I think in looks a lot more professional and modern

3 - It looks more professional and more aesthetically pleasing. The fonts are easier to read. I feel it uses space more effectively that the others.

3 clear font, looks more interactive and provides more information.

2, easy to read and looks easy to use

3 - Looks more official which i believe is down to the neutral colours used.

3 - its looks more professional and the text is easy to read. The font used on 1 and 2 was hard to read.

Site 3 as it is clear and has the simple colouring of black text on grey with a clear buy now button like you would see on itunes!

3 - looks more professional and gives more information.

2. Given the choice, would you rather be able to save songs as favourites so you can listen many times online, or download a song so you could have it on a personal music player to listen to whenever?



3. If the pictures were really fully functioning web pages, which do you think would be the most user friendly?



4. Briefly, if you had the chance to create your own music download site, what features would you include?

Create my own playlists to listen to each time I visit

play online download mp3 download the video favourite

artist profiles and background info see gigs they are doing

A feature similar to Itunes genius - recommended music related to whatever the person has downloaded so far. Also the option to browse by genre.

a top 10 chart and the prices of the songs

To be honest I can't really think of anything that isn't featured on these sites. Maybe a free album artwork updater?

Recommendations

'Trending' type feature split into genre's to highlight album tracks that are listened to a lot that might be missed due to lack of commercial promotion

lyrics, song recommendation

Have a genre filter and a new music recommended to you section

A listen before you buy option, some artist info including some art work and also suggested artists relating to your previous purchases. Basically Itunes.

images, songs, artist description

recommendations , facebook link, high quality MP3 format, large music catalog.

Song previews, videos, artist biographies, charts, playlists

a suggestions app to analyze your previous purchases and recommend new music. A social element where you can add friends and see their purchases and favourites.

send music to your phone create playlist of most popular music

Youtube clips of the songs/ Videos, A member log in, Paypal/ Payment options, Blogs, News Feeds, Clubs, Quick downloads.

Previews of videos/songs.

smart playlists giving you songs similar to your own choices. Ready made playlists for specialised genres.

free single of the week like iTunes. suggestions of music in the same genre you may like to download.

5. Would you be happy to use and download from all three of the sites?



6. Did the usage of different fonts within the pages affect your decision on which was your favourite?