Vinyl Exchange Club is a website dedicated to LP aficionados, who are looking to engage with other vinyl collectors. The website will be targeted at people who own vinyl records, so these like-minded people can meet, explore new music, genres, artists, and bands - all sustainably - swapping their record collection amongst each other during events/meetups.
Visit the live project here
- Create a community in which vinyl fans are able to connect with each other and exchange music (through meetups/events).
- Provide a sociable and sustainable platform for music fans (through events/meetups) so they can grow their collections and potentially make new friends.
- Anyone who has a vinyl record collection.
- Music fans who want to learn more about vinyl and meet like-minded people.
- As a user, I want to understand what the website is about.
- As a user, I want to navigate the website with ease, so I am able to find the information I am looking for easily.
- As a user, I want to find the website's socials at the footer.
- As a user, I want to find out the website's mission/ethos.
- As a user, I want to see pictures of the website's events/meetups.
- As a user, I want to be able to contact Vinyl Exchange Club easily to join the club.
The mockups below were done with the help of Balsamiq (for both desktop and mobile screens), these were useful to help visualise the project.
-
Desktop:
- Home page
- Photos page
- Contact page
- Home page
-
Mobile pages:
-
The colour scheme was inspired by a combination of ideas from this article and also by the hero image (picking colours from the image using the Eye Dropper extension) - the contrast was also validated, please refer to the Testing section for the screenshots.
-
Google Fonts was used for the website's fonts, some inspiration on the choice of fonts (Crimson Text & Open Sans) came from mixed ideas of this blog post. Crimson Text (a serif font inspired by old-style typefaces) for the headings, combined with Open Sans (modern sans-serif), gives a combination of tradition and modernity.
-
Navigation Bar
- Navigation is a fully responsive feature on all three pages, it includes links on the site's Logo (displaying to the left within the bar), Home, Photos and Contact pages.
- It looks the same in each page to allow for easy navigation (without the user having to use the ‘back’ button), taking the user through a logical journey.
- This section makes it easy for the user to learn more about the site's different sections and contents.
-
Hero image/cover text
- Landing page/hero image features a picture of a vinyl record and needle, including a cover text overlay to welcome the user and let them know in a sentence what the site is about.
- It also features a backwards animation aiming to catch the user's attention.
-
Mission/Intentions Section
- The mission section is going to clarify to the user the perks/gains of joining the Vinyl Exchange Club community.
- This section should inspire the user to contemplate engaging with the site's community, as they could potentially make new friends, hear new music, and save money, all sustainably.
-
Footer
- The footer area consists of five social links of the club (Instagram, Facebook, Spotify, Mixcloud and Soundcloud - all of them, if clicked, open on a separate tab).
- Like the navigation section, the footer looks the same on each page (and features on all of the pages) to allow for easy navigation, taking the user through a logical journey.
-
Photos Page
- The photos page features a series of high quality images, which will provide the users an idea of how the club hang-outs are.
- Users may find this section particularly beneficial, as they will have a visual idea of what the club appears to be and how members engage.
-
Contact Page
- The contact page is going to present the user with the opportunity to contact the club to join the Vinyl Exchange Club and hear more about future meetups/events.
- The contact form features three fields, two mandatory ("Name" and "Email Address") and an optional one ("Mobile"), as well as a submit button.
-
Spotify iFrame
- The Spotify iFrame section precedes the footer section on the contact page.
- This section features an inline frame where the user will have the opportunity to initiate the action of playing music (only if they click on the play button) from the club's Spotify playlist that is embedded.
-
Hamburger menu
- Implementing a hamburger menu/icon for mobile devices would be a positive future addition to perhaps keep in mind, in case the number of pages within the website grow (as in that case the current header navbar might become too busy without a hamburger icon).
-
Forum/Members Area
- Implementing a forum/members area in the future could be really beneficial for the Vinyl Exchange Club community, so the users would be able to post vinyl records that they are willing to exchange and also let other users know which records they'd be looking for.
- Balsamiq
- Balsamiq was used to make desktop/mobile mockups in order to visualise the project.
- Git & Gitpod
- Git was used for version control via the Gitpod terminal in order to commit to Git and push to GitHub.
- GitHub
- GitHub was used for hosting the project and version control.
- Google Fonts
- Google Fonts was used to import both the Crimson Text & Open Sans fonts which are used on the website.
- Font Awesome
- Font Awesome was used to add icons to improve the design of the website.
- "As a user, I want to understand what the website is about."
- Upon entering the website, users are greeted by the landing page/hero image, including a cover text overlay to welcome the user and let them know in a sentence what the site is about (the user can also see the website's logo clearly displayed at the top left corner).
- "As a user, I want to navigate the website with ease, so I am able to find the information I am looking for easily."
- The navigation bar can be found at the top of all the pages (common website convention), taking the user through a logical journey.
- "As a user, I want to find the website's socials at the footer."
- All social links/icons can be found at the footer of all the website's pages.
- "As a user, I want to find out the website's mission/ethos."
- The user will find the website's mission/ethos right below the hero image on the landing page.
- "As a user, I want to see pictures of the website's events/meetups."
- The photo gallery showing pictures from the club's previous events can be found on the photos page (easily accessible through the navigation bar).
- "As a user, I want to be able to contact Vinyl Exchange Club easily to join the club."
- There's an easy to use contact form which can be seen on the contact page, giving the user an opportunity to contact the club.
-
HTML
- No errors/warnings were returned when passing through the official W3C validator
-
CSS
- No errors were found when passing through the official (Jigsaw) validator
- Google's Lighthouse was used for measuring the quality of the pages.
-
Index Page (desktop) result:
-
Index Page (mobile) result:
-
Photos Page (desktop) result:
-
Photos Page (mobile) result:
-
Contact Page (desktop) result:
-
Contact Page (mobile) result:
-
- a11y Color Contrast Accessibility Validator was used to analyse the contrast of the pages and make sure it complies with website accessibilities regulations.
-
Index Page result:
-
Photos Page result:
-
Contact Page result:
-
- Am I Responsive?
- This design tool was used to show how responsive the website is and looks across 4 different viewports (Desktop, Laptop, Tablet and Mobile):
- This design tool was used to show how responsive the website is and looks across 4 different viewports (Desktop, Laptop, Tablet and Mobile):
- The Vinyl Exchange Club website was tested on several devices/environments (without any issues), including:
- MacBook Air 13.3" M1 2020 (macOS Big Sur 11.5.2)
- Lenovo 5i i5 15" (Windows 10 64x)
- iPad 8th generation
- iPhone 6
- Xiaomi Mi A3 (Android 11)
- The Vinyl Exchange Club website was tested on several browsers (without any issues - across different devices), including:
- Google Chrome (92.0.4515.159 (Official Build) (arm64))
- Mozilla Firefox (91.0.2 (64-bit))
- Safari (Version 14.1.2 (16611.3.10.1.6))
- Microsoft Edge
- Brave (Version 1.28.106 Chromium: 92.0.4515.159 (Official Build) (arm64))
- Vivaldi (4.1.2369.21 (Stable channel) (arm64))
-
Navigation bar:
- The navbar can be found at the top of all pages (common website convention) and is fully responsive on all viewports.
- All links were tested on every single page by clicking on them (making sure no broken links are found).
- The menu links are displayed under the logo on tablet/mobile devices.
-
Gallery:
- The photo gallery is fully responsive (the column count for laptop/desktop is three photos, tablets is two pictures and for mobile just one photo).
-
Contact Form:
- The contact form has validation for the email and mobile fields.
- The submit button sends a post request to Code Institute's form dump (https://formdump.codeinstitute.net/).
-
Spotify iFrame:
- The Spotify iFrame doesn't auto-play music and is fully responsive on all viewports.
-
Footer:
- The footer can be found at the bottom of all pages (common website convention) and is fully responsive on all viewports.
- All links were tested making sure they are correct and open on a new tab.
-
Footer icons had disappeared from Photos page:
- I had accidentally deleted the Font Awesome kit script from the page's source code, the issue was fixed once I implemented the script again (footer icons reappeared).
-
Background image disappeared from the Contact page once website was deployed:
- I hadn't noticed I was using an absolute file path as opposed to a relative one for that image in particular, once I deployed the site I couldn't see the contact page's background image, this was fixed once I changed the file path to a relative path.
-
iFrame code embed validation issue:
- When passing the contact page code through W3C validator, initially I had received a few error messages regarding the iFrame code snippet I copied from Spotify, these were fixed once I read the error messages from the validator and removed the width, frameborder and allowtransparency attributes from the code snippet.
-
Photos page validation warning:
- When passing the photos page code through W3C validator, initially I had received a warning message "Section lacks heading", this was fixed adding a h2 to the pics section and then setting a style rule to display none.
- The website was deployed to GitHub pages, the steps were:
- Log into my GitHub account.
- Select the relevant repository from the far left menu richardreiter/vinyl-exchange-club
- Select the "Settings" option.
- Hover down to the GitHub pages section heading.
- See the text: "Pages settings now has its own dedicated tab! Check it out here!" (click on "Check it out here!").
- Select "main" under Source Branch.
- Click "Save"
- A success message appears stating the site has been published at https://richardreiter.github.io/vinyl-exchange-club/
- The footer icons were taken from Font Awesome.
- Font inspiration ideas were taken from this blog post.
- The colour scheme was inspired by this article.
- The instructions on how to fix the navigation bar text aligning backwards were taken from this Stack Overflow post.
- The instructions on how to reset/remove the latest Git commit from a repo were taken from this Github Gist.
- The instructions on how to centre a form submit button were taken from this Stack Overflow post.
- The instructions on how to fix the iframe showing error on validation were taken from this Stack Overflow post.
- This Stack Overflow blog post about best practices for writing code comments inspired me, when leaving code comments/references.
- This Youtube video that taught me more about User Stories.
- A huge thank you to Anna Greaves and Code Institute for the Love Running Walkthrough project which was a great reference, inspiration and example.
- The home page's hero image was taken from Unplash.
- All the Photos page gallery images were taken from Pexels.
- The sign up page's background image was taken from Pexels.
- The contact page's iFrame music player is by Spotify.
- Many thanks to my mentor, Gerry McBride, for his guidance and feedback.