Sostenuto Strings repurposes old instrument strings. I designed their brand and website using Figma, HTML, CSS, and Javascript.
This summer I was asked to create a website for Sostenuto Strings, a budding non-profit that would donate used violin, viola, and cello strings to underfunded music programs. Being a musician myself, I was interested in this project and readily agreed to build them a website!
Who Are the Users? What Are They Looking For?
Sostenuto Strings is for musical individuals who have old strings that they don’t use anymore, orchestra or musical organizations who are able to collect old reusable strings, and communities who are looking for affordable ways to support their budding musicians. I settled on three things that the website should be for its visitors.
Mission
“Show audiences what our goals are and why we want to serve.”Informative
“It should be clear to visitors, particularly musicians, what steps they can take to be part of our project.”Friendly and welcoming
“The brand feel and logo should show the musical, environmental, and community aspects of the non-profit.”
Branding
I decided to first tackle the logo. Having little experience with brand design, I figured that the feel of the website would have to match the logo. The final logo I settled on has four arcs that represent the four strings of an instrument, and a brand colors that could be associated with environmentalism (greens!). Lastly, the four green arcs overlap and lock into place a complete circle, even though they aren’t directly connected to each other. I thought this would well-represent how musical communities across the country could all be part of Sostenuto Strings’ mission.
Building the Site
After showing my logo and color scheme to the client (they loved it! It got them excited, seeing their non-profit start to come to life), I began to flesh out the body of the website.
Website Flow and Information Hierarchy
Should I make it a single-page or multiple-paged website? After mapping out a small architecture tree for the website, I realized that everything needed for could fit on a single page. I wanted the site to be simple and easy for users, and putting all the content on a single page would diminish the number of clicks needed.
Content Strategy
The About page gives a brief but deeper look into the why the non-profit was founded and the founder’s own connection with music. This, along with the calming greens, immediately helps users to feel that the site is personable and thus, trustworthy.
The Ways to Donate (formerly “How it Works”) page gives visitors instructions for how to be a part of Sostenuto Strings’ efforts, so that they have a concrete idea for how the non-profit plans to operate.
The Partners (formerly “Donors/Recipients”) page provides the non-profit more credibility by showing that they are working with music schools and orchestras to collect and send strings.
Usability
Although the total length of the website was fairly short, I used Javascript to code a sticky header that would follow the user as they scrolled so there would be slim chance for getting lost.
In addition, users can efficiently click on the nav bar links in order to immediately get to the desired page, without having to scroll and look for the title.
The overall design is simple and minimalistic, highlighting what is truly important with no excess whistles and bells. However, I did add a soft green stripe to the background, so that it wouldn’t be too plain. Balance is key!
Next Steps
Sostenuto Strings is brand-new non-profit, so they are still figuring out some minor logistics and continually updating me with changes they would like to make to their site. For example, the Partners page is still a work-in-progress, as they are gathering support from music schools and programs.
But in the meantime, check out their site!
(And if you are a musician, consider donating your strings through Sostenuto Strings!)
Takeaways
I was excited to tackle this project with Sostenuto Strings. It’s always thrilling to watch an idea come to life, and I am grateful that I could be a part of their sprouting business by exercising my flexbox and JS skills.
I particularly like the beauty of the single-page format; it was a great reminder to keep designs simple, and I will keep it in mind for future projects. Working with Sostenuto Strings was a close partnership, where I got to even work through the wording of their content with them and watch ideas develop and come to fruition.
Hello friend — thanks for reading! Follow me if you’re interested in keeping up with my design projects. :) Drop a comment, leave a suggestion or some feedback, or say hello below!