Venice Drone is a band that make music. This site will showcase the latest releases by the band, make an archive of releases available to click through to, let users see upcoming gig dates with links to buy tickets and give a options for fans and industry to get in touch or book the band.
- Venice Drone - Band Website
Venice Drone are an extremely simple band in a very confusing time. The aim with this site is to provide the most important information, very easily and quickly and keep the delivery of such in theme with the bands' tone, and that of their fans.
- Established fans of the band
- New and curious visiters
- A website that delivers the latest and current information first.
- A website that delivers the essential information that fans or new fans will want to see in one place:
- Music links
- Latest releases
- Next gigs and upcoming dates
- Social links
- Direct contact information
- A chronologically curated archive of releases and video content.
"As a user I want to see what the band is up now, especially what they released last"
"As a user I want to be able to find out how to book the band"
"As a user I want a place to see the entire release history of the band"
- Deliver latest news and releases in the first loading of the site
- Curate a chronological archive of material for people to link through to
- Provide links for fans to access content on the platform of their choice
- Deliver contact points for fans and industry professionals.
- Familiar and easily navigation bar with clearly labeled sections
- Familiar tone to the band in the language and aesthetic.
- Current information and up to date links to social information.
- To see songs they know, and be able to discover songs they may not have heard before
- Have an opportunity to contact the band.
- Find information to book press interviews and book shows with the band.
- Find out what is new and have an opportunity to catch up.
The user experience is focused site-wide. The Venice Drone fanbase have a wide age range, so this site must be usable by teens and adults. For that reason each content section is separated by a title header in a bold colour with to-the-point titles, and nice spacious margins around the content that is in focus for that section, which changes depending on view height.
I wanted to achieve a useable website, with a tone and copy that represented the bands precise and to-the-point nature. For this reason only the content that is new and being promoted is on the front page. And more content is under the nav bar sections on other pages.
They are a secretive, non-ego driven band with very little desire to share personal stories and damage the music with their own images. For this reason an 'about me' section was omitted.
The site is designed to be easily modifiable, since Venice Drone are an active band, when more content is released, it can easily be added to the site, and copied to the front page for a feature. Other sites I referenced were Radioheads 'WASTE' site and Idles website Particularly the titles, dimensions, simplicity and direct tone.
The font used throughout the site is a simple Roboto provided by Google Fonts CDN. The spacious and unobtrusive nature of the font provided a clear and direct approach to copy impact.
Icons were provided through the Bootstrap recommended Font Awesome.
In the current iteration of the site the colours are generated from the artwork of the latest release by the band.
The off set RGB light scatter and black hole image were striking enough, and lended to a delightful palette:
Some features changed during the build, but the change from version 1 and version 2 to version 3 proved to be a much more functional platform to build from. The design stopped being so spread out and instead simplified and streamlined.
- Landing page provides all essential information at first sight.
- Contact form
- Links to social platforms
- Links to social audio platforms
- Links to social video platforms
- Upcoming gig table in chronological order
- Direct downloads of tracks and videos from the site
- Media player for online content
- Shop for merchandise
- Band curated image library
- Further reading section
- Visual Studio Code - The project used the Visual Studio
- HTML Validator - The project used the HTML Validator to validate and find errors in the HTML.
- CSS Validator -The project used the CSS Validator to validate and find errors in the CSS.
- Balsamiq - The project used the Balsamiq to create wireframes for the site.
- Chrome developer tools.
- JQuery is used to simplify DOM manipulation, delivered with the Bootstrap CDN.
- PopperJS delivered with the Bootstrap CDN
I've been testing the site with the band themselves and with their sposes and partners. Focusing on features that they deemed necessary, and tone that they find on-brand. The final version and the final wireframe shows the journey through testing to release. The Logo in the nav bar nearly proved too distracting first, followed by the .gif background idea - simplified the site.
I used VS Code Extensions to preview the site in different browsers, via Chrome. Extensively testing the layout changes at all media breakpoints. This process was made easier with Bootstrap.
- Plan - The site had to have a responsive layout that works on all platforms for an ease of access to all users.
- Implimentation - Using Bootstrap was a much easier option to ensure usability on all platforms since they have such an integrated flex box system.
- Results - After a few rebuilds and back and forth between the live delpoyment and developer tools in Chrome, a stable desktop, tablet and mobile broswer build had been developed.
- Verdict - These tests were systemactially passed with each section.
- Plan - There is a minimum list of features to be implimented in the site to ensure its value to users.
- Implimentation - All the features planned had to be static by design. So using well organised HTML to keep the content ordered and easy to edit with time was essential.
- Results - Gig table changed from a FORM tag to bootstraps row and column style. This also applied to the contact listings of industry points.
- Verdict - Information in each feature is easy to read on all platforms and can be changed in the code easily with a basic understanding of HTML.
-
Bug - There was a recurring layout issue in the medium break point where the media boxes align the album artwork and the text left to the box, leaving a lot of wasted space on the right of the box. And a <750px but >1080px alignment of the social icons in the contact page.
-
Fix - This was fixed with a stricter focus on the implementation of the Bootstrap framework.
-
Verdict - Sticking to the Bootstrap build system (Container - Row - Col) is the only way to build on bootstrap without finding these errors.
-
Bug - During the creation of the media boxes that have the album artwork and the tracklisting, year, and social links next to them, there were constant back and forth with designs in different sizes and breakpoints showing all sorts of errors. Specifically in the smallest viewpoint, all content would over lap each other.
-
Fix - Again this was fixed with a stricter focus on Bootstrap container-row-column documentation.
-
Verdict - Reading and understanding the work flow of Bootstrap once again prooved to be extremely useful.
Venice Drone Band Website was developed on VS Code, using git and GitHub to host the repository.
When deploying Venice Drone Band Website using GitHub Pages the following steps were made:
- Opened up GitHub in the browser.
- Signed in using username and password.
- Selected my repositories.
- Navigated to 'lornebb/Venice-Drone-Website'.
- In the top navigation clicked 'settings'.
- Scrolled down to the GitHub Pages area.
- Selected 'Master Branch' from the 'Source' dropdown menu.
- Clicked to confirm my selection.
- Venice Drone Band Website now live on GitHub Pages.
Cloning Venice Drone Band Website from GitHub:
- Navigate to '/lornebb/Venice-Drone-Website'.
- Click the green 'Clone or Download' button in the top right.
- Copy the url in the dropdown box.
- Using your favourite IDE open up your preferred terminal.
- Navigate to your desired file location.
- Copy the following code and input it into your terminal to clone Holiday Destinations.
git clone https://github.com/lornebb/Venice-Drone-Website.gitThis site was made for educational purposes only by Lorne Ashley Brigham-Bowes, 2020.
- Chris Palmer - helped with my rebuild and kept my thinking and implementation simple.
- CI Student care - For getting me off the ground with my first IRL CDN.
- Simen Daehlin - my mentor during this build, provided above and beyond help to teach me how to make it reach a standard I could be proud of.
- The copy used for the make contact section was copied and heavily edited for privacy from the Idles Press & Bookings page.
- CSS and HTML help was found on MDN Web Docs and Stack Overflow.
- All media in this project is created by Venice Drone.
- I received inspiration for this project from my fellow students and the wonderful team on slack, my good friend Dave at EightArms, and a thank you to my mentors, Antonjia and Simen.