Mtec6707 Univesity of Newcastle - Website Development


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mtec6707 Univesity of Newcastle - Website Development

  1. 1. Daniel Michael 3103360 Tracy Redhead - MTEC6707Lecturer: Tracy RedheadStudent: Daniel MichaelStudent Number: 3103360Course Code: MTEC 6707Course Name: Music and the InternetAssignment 2: Designing a WebsiteMTEC6707 MA2 - Designing a Website
  2. 2. Daniel Michael 3103360 Tracy Redhead - MTEC6707 Section 1Write 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 createsemotive tracks under the business guise of ‘Blood Red Chords’ for use in TV, film and animationprojects.The site features live streaming enabling samples to be listened to with a single click through theintegration of a SoundCloud player, as well as having complete tracks downloadable for purchase, andhas many different types of engagement for an immersive interactive experience, including socialsharing, twitter feed, newsletter subscription and RSS syndication.The target audience for Blood Red Chords is directed at small production companies, corporates, andproducers of film or television series that require original scores or backing tracks for a range of AVwork.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 andpoorly designed: •Karaoke Version •Music backing tracks •Backingtracks •CooltracksMost sites have a focus on backing for karaoke or musicians to use in cover bands. Focussing on theseweaknesses, the site I have designed will be simple, easy to use, aesthetically pleasing, engaging andinteractive.To promote the business the site will include social integration via clickable buttons allowing users toconnect 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
  3. 3. Daniel Michael 3103360 Tracy Redhead - MTEC67072. Develop a flowchart indicating the links between pages and illustrate the styles of navigation utilized. Fig 1. Blood Red Chords flowchartThe 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 ofcontent. Users will know where they are in the site at all times, as indicated by the highlighted tabproviding 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 connectwith the content and share it amongst friends through popular social networks like Facebook, Twitterand 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 forthis 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 sothey can dive straight into the content with a minimum of experience, manipulating a simple point andclick driven navigation (Krug).MTEC6707 MA2 - Designing a Website
  4. 4. Daniel Michael 3103360 Tracy Redhead - MTEC67073. 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 ofnavigation 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 couldinclude 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 mockupThis 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 issimplistic 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 sobecause of the familiarity of repetition (Williams, 2008)MTEC6707 MA2 - Designing a Website
  5. 5. Daniel Michael 3103360 Tracy Redhead - MTEC6707The 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 somenotation. 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 areal-time Twitter feed and interactive social media buttons. This extra functionality encourages the user toshare and promote the content throughout her own networks increasing chances of extra revenue and returnvisits.MTEC6707 MA2 - Designing a Website
  6. 6. Daniel Michael 3103360 Tracy Redhead - MTEC6707The Try & Buy pages (Level 1, Fig 4) allows the end user to sample different file types and listen to shortpieces of music from the different genres.Better methods of navigation between the YouTube player and the Soundcloud player (Level 1, Fig 5) needsto 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 givesclear 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 thetransaction can be completed.MTEC6707 MA2 - Designing a Website
  7. 7. Daniel Michael 3103360 Tracy Redhead - MTEC6707On this version of the Try & Buy page (Level 2, Fig 5) the user can stream samples of the differentsoundtracks, 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 richembedded audio play that provides the user with many different options to test suitability including livestream, embed code, absolute URLs and a visual player.Selection is made by clicking the appropriate ‘Buy Now’ radio button which features integration of a PayPalShopping 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 anddeemed as appropriate with the client. It is possible the Paypal integration may have this extra functionalitywhich would reduce duplication.Content is structured around user selection and the final check out. PayPal Buy it Now function briefly takesthe user to a secure site to complete a transaction and then returns the user back on-site which triggers thedownload.MTEC6707 MA2 - Designing a Website
  8. 8. Daniel Michael 3103360 Tracy Redhead - MTEC6707The Contact page (Level 1, Fig 6) shows the user the methods of Contact available by web form andprovides 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 informationMTEC6707 MA2 - Designing a Website
  9. 9. Daniel Michael 3103360 Tracy Redhead - MTEC67074. Draw up a resource table outlining resources, resource type, acquired, comments. Resource Resource Type Original Source Acquired Comments Domain name Asset Y registered for one yr period Hosting Asset - Cloud Bluehost Y •Personal hosting space storage already owned •Nameservers set to reflect domain Menu Graphics Author Y •Template sourced for CSS and HTML framework ( ) •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 pageMTEC6707 MA2 - Designing a Website
  10. 10. Daniel Michael 3103360 Tracy Redhead - MTEC6707 Section 21.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 buttons2.Select one of each of the media elements and generate the appropriate media files. Create one ofeach 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
  11. 11. Daniel Michael 3103360 Tracy Redhead - MTEC6707Works CitedARIX Media. (2004-2010). Free web templates. Available: Last accessed30th March 2011.Helander, K & T. (2001). Affective Design on e-Commerce User Interfaces: How to Maximise PerceivedTrustworthiness. Available: Last accessed 30th March 2011.Krug, Steve. (). Dont Make Me Think. Available: Last accessed 30th March 2011.Roy. (2009). How to secure a website form. Available: Last accessed 30th March 2011.Soundcloud. (2007-2011). Soundcloud. Available: 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