As a long-time guitarist, and curious about no-code web development which started to gain traction around the time of this project, I set out to create a visually appealing and informative website to teach readers about the fascinating evolution of the guitar over time. I would research the instruments which led to the guitar’s development, research design patterns used when teaching information online, and create my own website using Webflow iterating from design to launch.
As a long-time guitarist, and curious about no-code web development which started to gain traction around the time of this project, I set out to create a visually appealing and informative website to teach readers about the fascinating evolution of the guitar over time. I would research the instruments which led to the guitar’s development, research design patterns used when teaching information online, and create my own website using Webflow iterating from design to launch.
Aside from the vast history of the guitar, there are also many instruments which are lost to time or are unsupported from primary sources. A strictly primary-source supported explanation for the guitar’s ancestors could only reach back so far, to around the time of the Oud and its possible ancestral instruments.
Additionally, many of the resources for information on the history of the guitar were not built as visual webpages that were easy to decipher or telling cohesive stories, but rather research papers and historical articles.
I decided to build a responsive webpage that could exhibit the history of guitar, allowing users to scroll through a timeline of its ancestral instruments that led to its creation. I wanted to decipher the best way to display the information I had learned, making it both novel and engaging. Using information design principles, web animations, and a single UI to keep the experience light and engaging, I designed the screen similar to browser games, unveiling information in popups and keeping the screen visual-first.
I first created moodboards to compare the designs of timelines and interactive designs, their use of color and typography, and how simple web animations enhance user experience and allow for interaction with information.
In creating low-fidelity prototypes, I considered allowing users to scroll through a revolving carousel of instruments, any of which they could click to learn more about. I also considered image-hover animations with information pop-ups, animated timelines linked to the user’s scroll progress, and even a guitar-shaped interactive timeline.
Utilizing the colors from the color of the book from the original pen-and-paper business model, we created a color palette. From there, we chose fonts, designed a logo, and created UI elements to make our design system.
My first designs utilized the concept of an interactive timeline, which here I conceptualized as a carousel of instruments along a timeline which the user can scroll between.
Aside from the carousel, I also designed horizontal and vertical timelines which users could click through as well as scroll through.
Given the limitations of the no-code website builder I was using, I ended up utilizing a minimalist design without a timeline. This clean design focuses more on the guitar’s chronology, rather than dates, using the right-menu to encourage user interaction.
To limit information overload, while detailing every instrument, I implemented click-to-reveal animation buttons for the user to read more. This interaction keeps the design minimal and focuses on the advancements rather than the specifics.
In testing my designs for usability via user interviews and observational testing, I discovered that the majority of users found my designs both easy to understand and effective learning tools.
After some trial and error with implementation on Webflow and HTML/CSS, I completed the project and received further feedback from a panel of three design professors at USC.
The feedback I received was overwhelmingly positive, affirming my belief that my designs would be minimal yet usable and could be an effective design for teaching the subject in a simplified manner.
I think my designs in this project were a good start for an effective learning platform, teaching a broad subject in a simplified yet effective way. The right-hand menu gives users a good idea of the extent of the reading available, while the minimalist design and the hidden information overflow gives users who aren’t interested in reading more a good overview of the topic.
Given further time, I would like to expand upon the scope of this project, adding more instruments and designing a “bigger-picture” mode where users can find chronologies of other related instruments; this can include another interactive visual, similar to a family tree, where users can choose a path to follow and learn about the evolution of instruments and their interconnectivity.
Overall, I enjoyed this project and learned a lot about information architecture and user interaction in a minimalist design setting. The skills I learned in HTML/CSS and Webflow also helped me to create this portfolio, which I update every year to continue to develop my skills. You can continue to visit the site by clicking the link here.
I'd love to help with your next project and I'm always available for a chat. If you have any questions or you'd like to get in touch, feel free to contact me.
