Background
It was around the time I began dabbling in HTML-CSS web development that we got ourselves a new vinyl record player. The next logical step was to buy ourselves a few records, and googling "record stores near me" brought up the following page.
Both CD Trader and Sloth Records seemed like established businesses with well-maintained websites, but clicking on the website tab of 'Turn It Up!' records took me to their Facebook page instead of a dedicated online platform.
Now, I knew that as somebody who's only just learning the ropes of web development, I would not be able to create a full-fledged website with back-end capabilities, but the temptation to fulfill an actual market requirement was too tough to resist. And this was how the seed for the Jimmy Eat Vinyl website was first planted.
​
It should also be noted that as this was my first ever HTML-CSS project, I did not make it responsive enough for use on mobile phones or tablets. The priority was to put my newly acquired web development skills into practice through the creation of a simple but attractive static website well-rooted in the principles of User Experience design.
​
For a more responsive experience, do view my 'A Certain Church' website (my second HTML-CSS project) or my porfolio homepage itself.
Research
Next, I spoke to a few friends who frequent local record stores in search of the occasional good deal. It was from their responses that I was able to zero in on the functions that such a website would be required to fulfill for the user as well as stakeholder.
User Objectives
-
Figure out everything the store has to offer, whether it's new stock, bargains, or what's selling the most.
-
Be able to check out vinyl records by genre, at the click of a mouse, as well as their condition and price.
-
Procure information on how they can sell their own used records and equipment to the store.
-
If you're a new customer, get a sense of the mood and merchandise in the record store through a photo gallery.
Stakeholder Objectives
-
Turn the store into a well-established brand by providing users with an online rallying point.
-
Enhance customer footfall to the store through frequent updation of the website.
-
Increase dissemination of information on the purchase as well as sale of merchandise.
Constituent Pages
After some consultation as well as perusal of existing websites, these are the pages I decided to include in the platform.
-
Homepage: Where the customer first lands. This page provides a glimpse of everything on offer.
-
Monthly special: A page dedicated to the artiste of month, accessible through the homepage banner.
-
Just Arrived: To showcase the new additions to the record store's repertoire.
-
Bestsellers: The most-in demand records, so clients know to get one before the shelves run dry.
-
Great Bargains: Records with the best deals going on them.
-
Equipment & Accessories: Miscellaneous items such as vinyl players, recievers, posters, and related merchandise.
-
Genres: Instead of a navigation bar dropdown, I decided to create a simple genre page from which to access different music categories.
-
Product pages: These would contain a short description of the album/audio equipment as well as related information.
-
Purchase page: As record stores also buy used vinyls and equipment, I decided it was necessary to create a page where the purchase information is provided. I titled this page 'We Buy Vinyls'.
Limitations
It was also necessary to acknowledge that as I was just embarking on my web development journey, the website would have certain limitations. These pertained to:
-
Uploading of new content: As the website lacked back-end technology and was essentially a static website, the only way to add information on new additions to the stock was to tamper with the code. Definitely not an ideal solution.
-
Responsiveness to different screen sizes: As mentioned before, the priority at the time was to put my skills into practice, not create the perfect website that can be accessed through different devices. However, I did prioritize responsiveness in my later creations.
-
Purchase of products: Due to lack of advanced back-end technology, I could not put in place a system to make online purchases. Instead, I decided that each product page should include contact information through which users can ask the store to hold the sale of their desired merchandise until the end of day (by when they would be required to pick up the item).
-
No searchbar: For the same reason cited above, the website could not have a search function.
Website Design
As this was my first HTML-CSS project, I strove to keep the website design as simple as possible. The initial wireframes were created on Figma.
Lo-Fi Wireframes
Fonts & Colour
Now that the wireframes were in place, it was time to add some colour. The 'Turn It Up' logo was primarily black and brick red, so I decided to retain the same colour palette for the website - with the addition of yellow highlights. The colours I decided to use on the website are represented in this spectrum.
And the three sans-serif font styles I chose for the website were: Saira Condensed for the navigation bar and buttons, New Amsterdam for the main headline and sub-headlines, and Karla for bodytext.
Hi-Fi Wireframes
The next step involved stylizing the wireframes with the chosen font styles and colours. The finished wireframes looked like this, and I was finally ready to start developing them in code.
Conclusion
This being my first attempt at creating a website, I wanted to keep it simple. While writing the code on Phoenix Code, I restricted myself to using just HTML and CSS, setting aside more advanced features such as slideshows and dropdowns for a time when I would have mastered Javascript. I also did not bother with making it responsive, mostly because I didn't want to be creating a convertible before I had figured out the wheel.
​
The website currently works on desktop screens, but could look a little squidgy on laptops. Mobile and tablet screens are a definite no-no.
You may access the Jimmy Eat Vinyl HTML website here.