Daniel Michael 3103360 Tracy Redhead - MTEC6707

Lecturer: Tracy Redhead

Student: Daniel Michael

Student Number: 3103360

Course Code: MTEC 6707

Course Name: Music and the Internet

Assignment 2: Designing a Website

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

Section 1

Write a brief report outlining:

1. The objective of your website. What or who are you promoting?

• Your target audience

• The content of each page of each site. What text graphics, audio will you use?

The objective of my site is to create and promote a startup business for a DJ enthusiast who creates

emotive tracks under the business guise of ‘Blood Red Chords’ for use in TV, film and animation

projects.

The site features live streaming enabling samples to be listened to with a single click through the

integration of a SoundCloud player, as well as having complete tracks downloadable for purchase, and

has many different types of engagement for an immersive interactive experience, including social

sharing, twitter feed, newsletter subscription and RSS syndication.

The target audience for Blood Red Chords is directed at small production companies, corporates, and

producers of film or television series that require original scores or backing tracks for a range of AV

work.

The aim is to provide niche, interesting, original high quality soundtracks starting from $1.99 AUD.

There are quite a lot of different sources available but top search results look fairly unattractive, old and

poorly designed:

• Karaoke Version

• Music backing tracks

• Backingtracks

• Cooltracks

Most sites have a focus on backing for karaoke or musicians to use in cover bands. Focussing on these

weaknesses, the site I have designed will be simple, easy to use, aesthetically pleasing, engaging and

interactive.

To promote the business the site will include social integration via clickable buttons allowing users to

connect and share the content.

The layout, structure and content of the site is detailed in the flow chart and storyboards below.

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

2. Develop a flowchart indicating the links between pages and illustrate the styles of navigation utilized.

Fig 1. Blood Red Chords flowchart

The website uses a common tabular style of navigation which provides users with a familiar experience,

and builds on three levels stemming from the landing ‘Home’ page (level 0).

Stepping through four main pages (level 1) with sub categories (level 2) that feature the main types of

content. Users will know where they are in the site at all times, as indicated by the highlighted tab

providing a clear sense of being where they are and what options they have to move around and where

(Krug).

Page Level 0 - 1 will feature social network integration via ‘share buttons’ that allow users to connect

with the content and share it amongst friends through popular social networks like Facebook, Twitter

and Share This.

The FAQ (Level 1) page will also have a direct link to the Contact page (Level 1) in the same hierarchy,

as queries may need further assistance that FAQ cannot provide. FAQ pages will not be developed for

this project, but is shown for completeness and continuity of the design elements.

This tabular style of website layout provides a consistent easy to use navigation for the end user so

they can dive straight into the content with a minimum of experience, manipulating a simple point and

click driven navigation (Krug).

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

3. Develop a storyboard showing a layout sketch for each page.

The Homepage (Level 0, Fig. 2) has been developed as a master template using the tabbed style of

navigation building on ideas presented by Robin Williams and the principles of Contrast, Repitition,

Alignment and Proximity (Williams, 2008)

Each Level 1 page is accessed by one click on the relevant tab title running under the main header.

The left hand navigation panel by default displays a Twitter Feed and Need Help widget, but could

include further customisable options, such as; Newsletter Subscription, Blogroll or integration of extra e-

commerce functionality such as additional revenue generation through Adsense placement.

Fig 2. Screenshot of homepage mockup

This leaves the main content area customisable for each pages content, and provides room for growth,

improvement and updates depending on the clients future requirements. Content on the Homepage is

simplistic and features a short intro statement plus a testimonial from a fictitious user.

The Homepage is designed to entice the user to click and explore and feel comfortable doing so

because of the familiarity of repetition (Williams, 2008)

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

The Products page (Level 1, Fig 3) highlights the content that is available on the site.

It provides a quick summary of the content that is available to preview or download and a sample of some

notation.

Fig 3. The main screen from the Products page.

The use of the master template maximises the opportunity for interaction with end users through the use of a

real-time Twitter feed and interactive social media buttons. This extra functionality encourages the user to

share and promote the content throughout her own networks increasing chances of extra revenue and return

visits.

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

The Try & Buy pages (Level 1, Fig 4) allows the end user to sample different file types and listen to short

pieces of music from the different genres.

Better methods of navigation between the YouTube player and the Soundcloud player (Level 1, Fig 5) needs

to be investigated to provide clarity.

Fig 4. An example of the YouTube integration from the Try & Buy page.

The user can view YouTube videos ‘in page’ so the experience remains in browser.

The featured video has a ‘Blood Red Chords’ soundtrack that moves through a variety of genres and gives

clear example of how a narrative can be supported through the use of a Blood Red Chords soundtrack.

Once a selection has been made the user can click through to the Buy Page (Level 1, Fig 5) where the

transaction can be completed.

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

On this version of the Try & Buy page (Level 2, Fig 5) the user can stream samples of the different

soundtracks, view different information and purchase her chosen products.

Fig 5. The Try & Buy page - perhaps the most important element.

The Buy page features integration with the popular musical social network Soundcloud. It has a feature rich

embedded audio play that provides the user with many different options to test suitability including live

stream, embed code, absolute URLs and a visual player.

Selection is made by clicking the appropriate ‘Buy Now’ radio button which features integration of a PayPal

Shopping Cart function building on the trustworthiness of that as a successful system as perceived by users

(Helander, 2001).

Terms & Conditions of purchase and use should be outlined here, the content needs to be sourced and

deemed as appropriate with the client. It is possible the Paypal integration may have this extra functionality

which would reduce duplication.

Content is structured around user selection and the final check out. PayPal Buy it Now function briefly takes

the user to a secure site to complete a transaction and then returns the user back on-site which triggers the

download.

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

The Contact page (Level 1, Fig 6) shows the user the methods of Contact available by web form and

provides the option to contact Blood Red Chords by completing a web form.

Fig 6. The Contacts page - a simple webform for contacting the host for further information

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

4. Draw up a resource table outlining resources, resource type, acquired, comments.

Resource Resource Type Original Source Acquired Comments

Domain name Asset mynamespace.com Y www.bloodredchords.com registered for one yr period

Hosting Asset - Cloud storage

Bluehost Y • Personal hosting space already owned

• Nameservers set to reflect domain

Menu Graphics Author Y • Template sourced for CSS and HTML framework (www.freewebtemplates.com)

• Requires heavy modification to suit visual style of client request

Graphics Images Author N • Need to style background and header/footer images to suit the look and feel of product name

• Need to design and complete work on a Logo

• Any other custom images to complete CSS modification

Audio Author Author Y • Files created using Garageband loops and modifying them

• 3 different files created in MP3, AIFF, M4A, OGG and MIDI formats

• Research still required to determine suitability for streaming using Flash Player

Website Code Author & Web Y • YouTube embed code checked and provides easy integration with HTML template

Website Code Author & Web Y • SoundCloud provides full functioning audio player for full integration with HTML template

e-commerce Code Paypal N • Need to obtain the relevant Paypal code for e-commerce integration

Copy Text Author N • All copy needs to be tweaked to suit each page

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

Section 2

1. Submit one:

• Excerpt of Notation: MIDI conversion from original file created by Blood Red Chords.

Fig 7. A sample of sheet music notation converted from a MIDI file

• A Graphics/image file: (Fig 1) The Homepage

• A table: See (Fig 5) The Try & Buy Page

• Hyperlink: See Need Help widget (Fig 1) links to Twitter and Soundcloud

• Form: See (Fig 6) The Contacts Page

• Button: See (Fig 6) The Contacts Page - Submit and Reset buttons

2. Select one of each of the media elements and generate the appropriate media files. Create one of

each of the following files:

← An MP3 file: Submitted via Blackboard designated link.

←

← A Real Audio/Real Media file or similar: Submitted via Blackboard designated link.

←

← A MIDI file: Submitted via Blackboard designated link.

←

← A file using another format (Ogg Vorbis): Submitted via Blackboard designated link.

MTEC6707 MA2 - Designing a Website

Daniel Michael 3103360 Tracy Redhead - MTEC6707

Works Cited

ARIX Media. (2004-2010). Free web templates. Available: http://www.freewebtemplates.com/. Last accessed

30th March 2011.

Helander, K & T. (2001). Affective Design on e-Commerce User Interfaces: How to Maximise Perceived

Trustworthiness. Available: http://citeseerx.ist.psu.edu/viewdoc/download?

doi=10.1.1.29.2787&rep=rep1&type=pdf. Last accessed 30th March 2011.

Krug, Steve. (). Don't Make Me Think. Available:

http://www.gamutart.com/pdf/book/Book_DontMakeMeThink.pdf. Last accessed 30th March 2011.

Roy. (2009). How to secure a website form. Available: http://www.rawseo.com/news/2009/04/20/how-to-

secure-a-web-contact-form/. Last accessed 30th March 2011.

Soundcloud. (2007-2011). Soundcloud. Available: www.soundcloud.com. Last accessed 30th March 2011.

Williams, Robin. (2008). The Joshua Tree Epiphany. In: Davis, N The Non-Designers Design Book. 3rd ed.

California: Peachpit Press. 13.

MTEC6707 MA2 - Designing a Website