DiscoLizer

Webbased application - Sound/Light

-- Illustrator --Photoshop --Axure

Mission

Create a web based application to control sound and lights in the browser

Discolizer was a assignment in school where we had to design our own web based application, and the theme was fun. We had some direction and were all given different fields, mine was in this case "Sound / Light".

Since the assignment was very free, other than complying with the intended theme I got to decide what I needed. I was everything in this project...

"A fun based application to control light and sound in the browser"

Process

Since I had to work with sound and light as the given theme, and fun was the keyword, I decided to make a prototype of a virtual DJ controller in where the user could manipulate the sound and lights that were displayed. The thought was to give a user a chance to play like a DJ while browsing the web.

My initial work started with doing research on DJ equipment and what they did, as well as laying out the key functions that should be included.

Decisions

Further I sorted out the functions and organized them in adaptiveness and actual implantability into this application. In real life a DJ has almost full control and in this case it was suppose to be more of a toy and fun to use. So some functions had to be taken out in order to make it work under the given timespan.

Design

In this case the design was rather obvious since I was mimicing a real life product. But I still had to find a good way of implementing the extra features of controlling light and therefore the fold out panels where added, they were retractable to not take up to much screenspace when a function had been triggerd and the user wanted to see the result.

Prototype

The final prototype was made in Axure, since the assignment said that was the software to use for this. Down below you can try it out for yourself!
Try ctrl + k/h/s do make a live drum performance!

Learnings

This was a fun assignment where in I could really try a lot. I tried multiple variations and had to re-design to make it even nearly useable, although still quite messy! But the imagination part was what really had me going and at the end I saw some potential use out of this little idea.

I will not, if not necessary, use Axure. It has a weird interface and not at all as fluent as Figma. Although supports a lot more functionality for trickier interactions. I also take with me the joy of exploring which was the main part of this assignment for me.