Gibson Guitars

Jordan Cecil
5 min readApr 26, 2021

--

This was really fun. And this was the first project that I had everything laid out and was certain on what I wanted early on. When I thought of creating an interactive catalog I immediately wanted to do something regarding audio. Audio is rarely isolated and used without a visual, like a video, to go along with it, but can be of extreme benefit, especially for those in the music industry. Right away I knew I wanted to do guitars. But what company to represent? I didn’t do too much research on companies because I loved the idea of doing something really classic, almost bougie even. I started exploring the Gibson guitars website, selecting guitars, and doing research. I wanted to catalog my favorite Gibson guitars. After I chose my guitars I went on the hunt to find audio samples for each. I wanted at least two for every guitar showcasing the different tones the guitar could provide. I found videos of people playing the guitars, and edited them in premier into mp3 file clips. Then I collected all my images of each specific guitar, and any images of it’s specifications — since I really didn’t want to write all of them out, but also find them to be essential information for the consumer!

Once I felt like I had all of my assets collected and well organized in files, I started to problem solve how I wanted navigation to go. I took a look at the gibson guitars official site, since we’re supposed to maintain their branding and style and I loved the idea of using their navigation because it’s so simple.

I used the same coloring they had, but I wanted to include some of my own flair. A lot of the homepage of the catalog I created was different images I found online. Some features I wanted to put on the homepage would be the same style as their homepage.

The aesthetic of these images I used the way they were presented on the homepage of the actual gibson website, along with this feature. I loved the way this gallery was presented, and I wanted to use it to create a clean and crisp aesthetic.

I wanted to include shop by category on the homepage because I wanted it to be as simple as possible for users to access the guitar catalog. I’m a big believer in simplicity. Once I finished my homepage, I started to explore the guitar pages themselves.

I wanted to maintain the simplicity for users, but also provide all the essential information they needed. I presented the guitars in the same way they did on the site, but I wanted to be sure to incorporate an audio feature so that users could hear the actual guitar being played before their purchase without having to look it up on YouTube.

I also should mention that for some reason, I had read that this was to be created for iPad website dimensions, so I specifically made it for an iPad, only to find out I probably should’ve been more geared towards app like features. So one lesson that became really clear as I finished this project was that I needed to read the instructions fully and completely, maybe even more than once before I decided to embark on an exciting journey with no return.

I started collecting images for my guitars. I knew I wanted to present them in a vertical image like the site did for their individual pages so I decided to show them horizontally on the menu for the collections. I wanted to stick to the aesthetic but try to gear my design to an iPad user who may enjoy scrolling through images of them right off the bat. They can see the guitar and what it’s called, and then click to hear the guitar and see its specs.

I used the same presentation as the website, but added an area for the sound and made the add to cart button larger and more prevalent. I want to make sure my user feels informed about their purchases. Gibson guitars are incredibly expensive and I know that the more information I can provide a user about a purchase so large, the better.

These were some of my design decisions. I think I effectively created something simple, and completed the goal of ease of use for users, however, I wish I could’ve made the interactivity a little bit more obvious and actually functional. I also think I would’ve designed my homepage and even individual spec pages differently had I had been in the mindset of creating more of an app catalog than I did for an iPad website viewer. Definitely some bummer moments, but overall a really fun project. Check it out, and hopefully you’ll feel inspired to learn to play the guitar while you’re at it! See My Project

--

--