code-institute-submissions / monkees-website-5 Goto Github PK

The Monkees Website - Jack O’Neill

• This project was my first milestone project featuring skills and techniques attained through the first several modules of the course. The aim of the project was to create a intuitive, user-friendly and bespoke website for a band (in this case, The Monkees) in order to show case their members, music and brand in the hopes of resonating with both older and newer fans, hypothetically gaining them exposure. As such, I aimed to present the band’s music, style and characteristics through a website designed to be bright and appealing yet concentrated on simplicity of use as well as building a positive emotional connection with the user.

This page was created for educational purposes only and the entirety of its contents belongs to the artists.

Technologies

-HTML

-CSS

-Bootstrap (4.3)

UX

The requirements were to produce a website to display and increase engagement for the musical group the Monkees by targeting older fans of the group as well attracting potential new fans. As such, I aimed to produce a website that highlighted the aesthetic of the Monkees to resonate with long time fans, displayed on a page that was simple and easy to navigate. However, I aimed to embrace the current stylistic and functional uses of HTML and CSS as to give the website a fresh and contemporary look. I used a single scrolling page in my design because I wanted to relay a sense of simplicity and tried to format the page in such wat that would suit this style of navigation.

User stories

-User wants to check for information regarding the band recent endeavors. User finds homepage. User immediately made aware of the resources contained within the site.

-User wants to check recent photos and videos from the band. User clicks on Media tab, discovers a variety of band images. User also finds video to nostalgic song from the band. User appreciates watching the videos and checking out the images on the page.

-User wants to get in contact with the band, to enquire about potential future performances, user is immediately presented with the 'contact' function in the navbar which leads to simple submission form. User is satisfied with

-User wants further and wider engagement with the band's media. User notices the social media links of the band the footer and follows them to explore further content. User is engaged further with the bands media and online presence.

Wireframes

-I completed my wireframes using www.figma.com. A link to which is included in my github repository.

Features

-The site was aimed at displaying content in a simplistic and appealing manner. As such, I included a Navbar which displayed simply links to the contents of the page to allow navigation throughout, which also collapsed into a more compact view for smaller mobile devices. I implemented a carousel at the top of the page to demonstrate modern style technique and demonstrate various pictures of band in action upon immediate access to the site.

Underneath, I included a short synopsis of the band and individual mini biographies for each member. Below that, I wanted to include an array of photos in a gallery to display various aspects and the character of the band in a collage style, which varied in display properties for different screen sizes. Underneath, I embedded a video of a popular performance of the band’s. Finally, in the footer I included links to the bands social media and streaming sites for further engagement with the bands content and public presence.

Features Left to Implement

-I wanted to include an Audiobox on the website, but without a stronger knowledge of Javascript at this age of my coding career I felt ill-equipped to present one which matched the feel and aesthetic of the site. Attempts I made clashed with the style of the site and brought down the overall UX of the site.

Testing

-Code tested in the W3C HTML and CSS validation service. I also parsed my CSS through https://autoprefixer.github.io/ to ensure it is as semantic and close to intended function as possible.

• I used the Web Dev site to run an analysis of my site, the results of which can be seen here. https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://jackfino.github.io/Monkees-Website/#performance

Throughout the process of designing my website, I pushed my code onto Github pages on several increments. However, as certain aspects of the overall design of the project were altered over time, I don't think the the individual pushes were as clear, frequent nor as uniform as I would have wanted them to be. I would attribute this to a somewhat deviated planning process and will be something I will strive to work more closely upon in future development.

• Having deployed the site on Github pages upon completion, I was able to view it as intended in both large desktop viewpoint as well as a variety of mobile screen sizes, which, due to the media queries I implemented in the code rendered nicely as intended in these iterations.

• The user stories I outlined pertained largely to the functionality of the website and in its ability to provide for the user the necessary functions.

Deployment

This project was written in Cloud9 and was deployed via Github pages. There are no diffrences between the deployed version and the developed version. There are no deperate github branches either.

Credits

-The text used in the 'About' section was lifted from the Wikipedia of the Monkees.

-The MP4 file embedded in the site was taken from Github directory presented with the outline for the milestone project itself.

-The photos used in this site were obtained from google searches of the band as well as from the initial directory that the given with the project.

Carousel - Javascript used to control carousel slider taken from StackOverflow - https://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items/18633703