Iron Butterfly
This project is showcasing one of America’s most successful, influential and progressive rock bands in the 60’s. Iron Butterfly are much more than your average "one hit wonder," Iron Butterfly, in many ways, epitomized late '60s hard rock, specifically the moment where psychedelia spawned the somewhat media driven, somewhat accurate, and somewhat silly moniker of "acid rock.
Table of Contents
UX
As this band was formed in the 60's many users may be classed as 'Silver Surfers', this is the primary target audience and therefore as the designer I have taken this into consideration. Also, it gives a historical timeframe of how the band has evolved over time.
The initial design of the website was done using pen & paper - the design was not stored electronically but apart from a few enhancements; I have stuck rigid to the initial design.
This project is a simple 4-page website primarily designed to be as user friendly as possible. It has easy to see and click navigational buttons which will take the user to a new page on the website. There are no external pages where a user might get lost. But primarily the site is designed to give the user information (either historical, factual, visual, audible) in an uncomplicated manner.
There are links to the original pen & paper design which can be found in the folder website design that I created as part of the design process.
Keeping with the spirit of the bands ‘psychedelia’ image, I tried to use colours as a focal point to give the feel of what it would be like in the 60’s. Many of my colleagues in work remarked (in a positive way) the clever use of colour which matched parts of the Logo and the navigation buttons.
Features
-
Home Page
This page gives the user all the band information from current members (pictures and a short bio) but also a timeline of events for the initial years.
-
Music Page
This page gives the user a tasting session of 5 tracks by the band (again including a write up of each track) but also a discography of albums released by the band.
-
Tour Dates Page
This page gives the user information relating to forthcoming tours the band have planned. Also, there is a fans video showcasing the band playing live at a previous gig.
-
Contact Page
This page gives the user an opportunity to submit a form to the band. Although, all the fields can be filled out, the link to the band is not active and it is outside the remit of this project. But the form itself is again user friendly.
-
Header
The header which is displayed on every page has a real stylish logo also the band name and their highest award they have received through album sales.
-
Footer
The footer which is displayed on every page has more information of the band, more details of their awards and the required social links. These links highlight when hovered over but as previously mentioned, they are inactive and do not link to any external sites.
-
Navbar
Centrally placed links with subtle animation and the use of fontawesome was integral. The choice of colours also reflected the symmetry of the project and designed to give the user a pleasurable experience.
-
Audio Player
Standard HTML5 audio player with enhanced but subtle animations which again, is designed to the user a pleasurable experience.
-
Video Player
Standard HTML5 video player using iframe, source of video was taken from youtube.com. The video player can play full screen if the user requires but the default size matches the structure of the page.
-
Booking Form
The booking form were taken from Bootstrap forms but customised to suit the purpose of this project. The form fields all work but there is no post method for the form as again, it is outside the remit of this project.
Features Left To Implement
Would have liked to design a purpose-built audio player which would have every album listed with their tracks, designed in a 60’s theme jukebox.
Technologies Used
The framework used was bootstrap (see link https://getbootstrap.com/) which also gave me the CSS stylesheets that was required. These gave me the structure that I required. I was impressed by one of the tutorials demonstrating different fonts and therefore I included fontawesome (see link https://fontawesome.com/). For all the hover tricks I went to https://cdnjs.com/. All the technologies used was encouraged by various tutors in the modules and using their knowledge and experience it was very useful. Not only the usefulness but also an understanding a new coder needs to learn and implement with confidence.
Testing
Using Chrome as my default browser I used its development tools to check the responsiveness of the website through various screen sizes. I had already put @mediaquery in the CSS stylesheets and checked each page individually. All hover buttons work, audio files play and also the video file plays. The form in the contact page can be accessed in any screen size and notifications are present when you place the mouse pointer over each individual form box. I have run the CSS through a validation site (see link https://jigsaw.w3.org/css-validator/)
Deployment
This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.
To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://amzn1963.github.io/iron_butterfly/ into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.
Credits
The text for the home page (the band) was taken from www.ironbutterfly.com
The text for the home page (band info) was taken from Wikipedia https://en.wikipedia.org/wiki/Iron_Butterfly
The bio used for each track on the music page was taken from Classic Rock https://www.classicrockhistory.com/top-10-iron-butterfly-songs/
The 5 audio tracks on the music page are from my own personal music collection.
The discography on the music page was taken from Wikipedia https://en.wikipedia.org/wiki/Iron_Butterfly
The text for the tour dates page was taken from Bands in Town https://www.bandsintown.com/
The fans video on the tour dates page was taken from https://www.bandsintown.com/
The booking form on the contacts page was taken from a design used in one of the modules of the course but modified to suit.
The logo and footer text for the band was taken from www.ironbutterfly.com
All content taken from www.ironbutterfly.com was agreed by Mike Green (percussionist) via phone conversation.
Special thanks go to one of my work colleagues Phil Harlow who suggested Iron Butterfly.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent