As an aspiring musician and freelance composer, Aether was in need of a focal point for his online ecosystem. This project provides a platform for both fans and potential clients to begin or expand their journey with Aether.

Fans can quickly see a brief overview of Aether's life and also can catch a glimpse of his latest tweets on Twitter. Following on from that they are encouraged to check out Aether's other social networks.

Potential clients can browse Aether's previous works and can contact Aether with collaborative proposals through a simple, clean contact segment of the site. (The contact forms functionality is beyond the scope of this project and therefore is a visual representation of features to come.)

Please see the wireframes used for prototyping the UI/UX design in the "Planning" directory.

Aether requires a clean and friendly environment that he can comfortably associate himself with both his fans and his potential clients. Users are welcomed to a clean and visually structured website.

Fans can easily find Aether's social links, platform links and an external store for those fans that want to show that little bit more love.

Clients have the additional benefits of easily accessing Aether's previous client work and the ability to quickly contact Aether through the user friendly contact form.

"As a long-time fan of Aether, and a heavy user of Instagram I really wanted to find Aether on the platform. When I arrived to Aether's new website I instantly seen the Instagram icon and to my surprise I found a link to his SoundCloud. Which had more unreleased/experimental material that I had never heard before!" - Jane Doe

"Playing Kingdoms & Castles as a developer I was captivated by the soundtrack. Once I found the original composers website I was easily able to find out details about him and his previous work. I was also able to find a link to his Spofity artist page which had a variety or material. I reached out to contact Aether with an interest in working together in the future." - John Doe

• Navigation

  • The navigation is responsive and fixed to the top on all viewport sizes. Screens narrower that 992px will host a collapsed navigation. This was achieved using Bootstrap. Both the collapsed and expanded navigations house all internal and external links.

• Landing

  • The landing page is clean, only showing the artists name and their role. Included is a small, animated indicator that the website can be scrolled down.

• About

  • Users on screens wider that 768px will have an embedded twitter feed to browse.

• Clients

  • As it says on the tin, the clients section has previous client work of Aether and links to these projects for further reading.

• Contact

  • The final section contains a contact form for potential collaborators to contact Aether with project proposals.

• Footer

  • Social links can also be found resting at the bottom of the page in the footer.

There were multiple features that were not included, as those features would have required understanding that was beyond the scope of this project. These features are;

• Internal store, or at least visual representation of products and merchandise linking to external site.

• Functional contact form that would generate an email to Aether's inbox.

• HTML5 & CCS3 Essential languages used to build a websites foundations.

• Google Fonts Used as a free and expansive library of fonts to create more appealing design.

  • https://fonts.google.com/ - main site
  • https://fonts.google.com/specimen/Raleway - font used

• Bootstrap An easy to use, responsive framework. Bootstrap was used to allow the navigation to be responsive and collapsible on smaller devices without the know-how of JS. Bootstrap's grid system was also used for simplicity and efficiency.

  • https://getbootstrap.com/

• Font Awesome A vast and free library of responsive icons. This library was used for the social link icons found in the navigation and footer. Font Awesome was also used for the collapsed menu button and the small indicator on the landing page to scroll down for more.

  • https://fontawesome.com/

• JS and JQuery These technologies were included to allow Bootstrap's collapsible navigation to function. The embedded Twitter feed also requires JS.

Testing for this project was straightforward as the project has very few 'moving parts'. The testing was primarily focused on UI and the responsiveness of the website on all device sizes. This was done manually by myself using a 'trial and error' method.

The website was hosted locally and bugs or unintended behaviors were identified and resolved to the best of my abilities. The code was then pushed to GitHub and hosted on a GitHub page where the site could be accessed on different physical devices. Identifying compatibility issues.

One bug that was discovered was when using the navigation. When a navigation link was clicked, the website would scroll to the desired content. However due to the navigation bar being fixed to the top of the viewport, this offset the alignment of the anchor point to which the site would smoothly scroll to. I was unable to resolve this bug at this time.

As the site was already version controlled by Git and GitHub, I felt that the best course of action would be to take advantage of GitHub's GitHub Pages functionality, which allowed me to deploy the website without needing any further deployment tools, or methods.

The photos used in this site were obtained from Aether.

I received inspiration for this site from Aether's current website:

• http://www.aetheraudio.co.uk/