The project was to build a website for an Australian electronic music group, the core challenge was to mirror the group's eccentric style in the user interface and aesthetic choices made. In tension with these ambitions, was the clear necessity to make the website as functional and rational as possible.
This site is supposed to be a band site in the guise of current band sites, such Franz Ferdinand and Mumford & Sons.
The site owner's goal is to maintain a media platform for the group that reflects the group's personality. The audience that this site has been specifically designed for are people unfamiliar with the group, but, of course, fans should enjoy it to.
The ambition of the site is to showcase the music and music videos of the group, while informing them of upcoming tour-dates and the most recent album. These features are in place to create a feeling of excitement about the group, while maintaining a literal "price-less" aesthetic, purchases can be made one-click away but no prices are visible on the site. This was a choice made due to the clear counter-cultural aesthetic maintained by the group, outright commercial features would alienate the intended audience.
-
First time listener/user: searches for site, trying to learn more about musical group. First item seen is the video loop of first major hit single. Due to disorienting nature of video loop the user is curious and slightly on-edge, these initial impressions are reinforced with the video player set to play "Frankie Sinatra" the lead single from the new album.
-
Current fan: opens site trying to find email updates, scrolls past identifiably separate elements to contact/detail section which is traditionally at the bottom of a site. The section is completely functional and very subtly reinforces the group's aesthetic.
-
Social Links: allows users to access the band's social media platforms.
-
Navigation Menu: a visible and clear guide to the features of the site, each link directs to a named area of the site .
-
Video-player: an inbuilt youtube player on the site, so that new users can become quickly familiar with the band's music videos and broader aesthetic. This same rational explains why "Frontier Psychiatrist" plays as a 30secs muted loop on the site.
-
Tour-list: to inform new users/current fans of upcoming live performances. Tickets for these events can be purchased from the sites linked with this feature. A more extensive guide is available from the "View All" option, similar to the video-player's "View All".
-
New Release Showcase: key tracks from the newest album are available to listen on the site. This feature exists to, again, introduce new users quickly. There are two modes available, select from either the Spotify or Soundcloud links available. The artwork from the newest album is also showcased.
-
Contact/Updates: this feature allows new users/current fans to contact the production team, to keep updated on the band's news or upcoming events.
-
Social Links: allows users to access the band's social media platforms.
-
Terms & Conditions Links: allow users to fully grasp the social/legal implications of their actions on this site.
HTML5 - As the project was a website, HTML5 was necessary. It is crucial in arranging the separate elements necessary to build a site.
CSS - Again, as this was a website, CSS was necessary to apply stylistic changes to the core elements introduced in HTML.
Bootstrap - This is a front-end framework chosen to add specific stylistic aspects beyond CSS, especially useful in arranging lay-out columns.
Font Awesome - A font toolkit based on CSS, that works with Bootstrap. This was used to add further font variety to the project.
GIMP - A raster graphics editor used to alter/retouch the images used in this project.
Handbrake- A transcoder for video files, this was used to convert the file-type of the "Frontier Psychiatrist" looped video.
Shotcut - A video-editing application, used to clip the "Frontier Psychiatrist" video from full length to 30secs.
New User
-
Social Links : On Desktop/laptop feature displays correctly, all social links operate as designed by opening the link in a new tab.
-
Media Links: Displays correctly, and links function, behaving as social links.
-
Video-player: Displays correctly, and as user hits play the video plays immediately within situated Youtube window. "View All Videos" opens new tab with the full selection of Youtube videos available.
-
Tour-list: Displays correctly, and all links related to tour dates function correctly, and "View All Tour Dates" opens a new tab in which takes the user to a full list of upcoming shows.
-
Music-player: Displays correctly, and all links attached open new tabs on either "Spotify" or "Soundcloud".
Current fan
-
Contact page: Displays correctly, and all three text input fields operate as designed.; as do the three check boxes. The "Subscribe" button makes critical use of information inputted and opens a new tab that conveys essential group info. The hover function operates correctly on "Subscribe" as it does on all hoverable links.
-
Social Links: Displays correctly, all social links operate as designed by opening the link in a new tab.
-
Terms & Conditions: Displays correctly, all links operate as designed by opening the link in a new tab.
In testing, we have been unable to open AWS in other browsers, as the login details do not seem to function on Chrome. Access to AWS on Chrome is only possible by opening a Vocareum log-in page on Chrome.
The site operates on all screen sizes between full desktop size and small mobile. However, it has specifically set for 320px, 375px, 425px, 768px, 1024px and 1440px. At different screen sizes, features have been adapted to function correctly due to the different inputs or screen visibility.
The live site can be found here. This project has been deployed to GitHub. The process went gradually, step by step, with steady updates in HTML/CSS together, later updates came with an expanded images folder and eventually a ReadMe file.
- All social links taken from Font Awesome
- Wildflower - Album cover taken from Spotify
- Frontier Psychiatrist Looped 30secs clip taken from YouTube
- Star-filled night sky taken from a Google search
- Looped video intro concept taken from Mumford & Sons site
- Music-player concept taken U2 site, this concept then adapted for video-player.
- Tour-dates and Contact pages are relatively standard across this variety of media, particular inspiration taken from Franz Ferdinand