Vem Cantar

Vem Cantar (โ€œCome Singโ€) is a website that incorporates karaoke dynamics to promote interactions between people and their voices in an online environment, making it possible to sing together even if geographically far apart. It is also a tool to draw using the voice, transforming melody the user sings into customised drawings.

Users can watch recordings by other people, and add their own layer of voice and drawings. This way, they can visualise not only their own melody individually, but also how it harmonises with other people’s.

Vem Cantar shapes a network of visual and sound interactions between people, starting with the fun act of singing together.

Read full thesis (in Portuguese)

Storyboard and wireframes

The first step was to define the product’s goals, which sounded simple, but was actually a time-consuming process of telling stories, defining features and reducing the scope to fit in the time available.

Storyline 1: Priscila (red) enters the website. She finds a song she loves and she starts singing along to it. As she sings, the software makes drawings according the her pitch and volume in a colour she chooses. She e-mails the recording to Pedro (blue), her best friend, who also likes the song. Pedro opens the message and watches the video. He clicks “sing together” and adds his own layer of voice and drawings, as if he was singing with Priscila.

Storyline 2: Fernanda (purple) enters the website, chooses a song and publishes it openly to the public. Bia (green), one week later, is browsing other people’s recordings. She finds Fernanda’s recording and sings together. They don’t know each other in person, but they sing together to a song they both love.

Drawing sound

The next challenge was to define how the sound could be translated into image. There could be thousands of possibilities! I decided to make it so that the user could choose a shape and a colour to represent their voice. This shape would grow according to how long the user sustained the note. I made some tests mapping two different songs: Because (The Beatles) and Seasons of Love (from the musical Rent).

Images: overlapping 3 voices in Because; translating soprano and tenor in Seasons of Love; overlapping 5 voices in Seasons of Love (female soloist, male soloist, soprano, alto and tenor)

Final layouts

You can see the final project here:

This project was developed during my graduation on Graphic Design under the academic orientation of professor Noni Geiger.