#501research

[itsdangold]

ixd501 index

ixd501

All Posts

Research

Milestones

Wireframes

Code experiments

[itsdangold]

ixd501 - Octapads

The Roland Octapad is another feature I’d love to include in the project. The main interface is fairly straightforward to incorporate and translate into a digital product. essentially there are 8 pads, that when hit or pressed trigger any programmable sound.

What’s interesting with this type of avenue is you can setup the pads to trigger a MIDI output. This output can then in turn be used to even create visuals if I wanted to. For example, creating 3D animations or light shows based on the pad hit.

[itsdangold]

ixd501 - Sequencers

Following on from the dive into the Synthesizer, I thought it would also be worth looking at Sequencers, and how they can translate into interface design.

In essence, sequencers take an audio input which can then be looped. There are many ways of programming in the loops. Typically though users can manually punch in the individual notes to be played per bar. Another method of looping allows users to record for a set time, and will then automatically play back the recording.

Shifting this into the UI and product design for my project; creating a simple sequencer interface would be a pretty interesting challenge. The sequencer would work really well as a minimal interface, perhaps using keyboard shortcuts to trigger each node/square.

[itsdangold]

ixd501 - Synthesizers

Looking into the technical aspects of the product as I start to look at the core features, it’s worth taking a look at what synthesizers actually are, and how they work.

In essence, synthesizers create audio waves. They collect an audio input, most commonly from either a keyboard, a MIDI file, or a sequencer. The synthesizer then takes this input and quite literally “synthesizes” the sound using filters and sound wave controllers.

Synths can be used to produce sounds and effects that can’t ordinarily be made from a regular keyboard.

Taking the concept of this into my product, the main idea is that you get a sound input from the user, then you synthesize the sounds with controls and sliders on the screen, which then in turn displays an audio-visual output.

[itsdangold]

ixd501 - Code research

Aside from looking at products and industry profiles, I think it’s important to fully understand what is available on the web for me to use to build my project. It’s all well and good designing something, but if I can’t fully realize the designs in build then that would be extremely disappointing.

WebAudioAPI

In my research I came across the WebAudioAPI, which is a native web interface for creating and interacting with sounds in the browser. Among the research I’ve found a plethora of useful articles and tutorials on getting started with the WebAudioAPI, which I intend to look at this semester.

https://meowni.ca/posts/metronomes/

https://blog.paul.cx/post/metronome/

https://www.smashingmagazine.com/2016/06/make-music-in-the-browser-with-a-web-audio-theremin/

https://medium.com/jit-team/how-to-create-a-musical-instrument-with-no-notes-using-javascript-ec6a83333aa4

ReactJS and Next

Aswell as the API for creating the sounds, I’ll also need to create a performant web-app to house the entire product, since there will be a lot of interactive and moving parts. This leads me to ReactJS, which is a popular Javascript library used for creating webapps. I’ve plenty of experience using React over the past year of work experience, so I won’t have any trouble getting it up and running.

I also intend to use NextJS, which is a React framework that can create static sites.

Hosting and Netlify

Hosting the project will be a breeze by making use of Netlify, a cloud hosting platform. Netlify enables me to host projects within minutes, and has built in features such as build commands and subdomain branching, which will be perfect for housing separate parts of the site.

[itsdangold]

ixd501 - Research takeaways and finding a niche

After looking at a vast amount of products and people within the design and tech space, I’ve come to a conclusion with where I can position myself and my project.

The key takeaways from the the research is that there’s plenty of room for more experimental audio and graphic experiences. In addition, I don't have to position myself to market this for the masses, and I’ll be happy to just make this as a creative piece for myself. This is something I thought from the beginning, but reaffirming this from research is very helpful.

I think as long as I carve out a space in the web that is uniquely *me*, that’s all that matters personally.

[itsdangold]

ixd501 - Product Benchmarking: Physics of Beauty

https://physicsofbeauty.art/

Another fantastic example of combining audio with graphics is the Physics of Beauty micro-site.

The site features a range of songs, with each one containing an interactive animation that complements the track.

The monochrome minimal aesthetics of the site really do it favours to not distract from the audio experience, and rather enhances the sounds.

[itsdangold]

ixd501 - Product Benchmarking: Teenage Engineering

https://teenage.engineering/products

From the perspective of aesthetics and product micro-details, every project by Teenage Engineering is the platinum standard to aim for.

Combining functionality with minimal, well-thought out controls; one of my main goals for this major project is to have the same level of consideration and finish as the aforementioned products.

[itsdangold]

ixd501 - Product Benchmarking: Playtronica

https://shop.playtronica.com/playtron

During my research of physical products, I came across Playtronica. Looking into the possibilities of MIDI outputs, the Playtron can be connected to literally any object, which can trigger the device to create MIDI sounds. What I love about this is the seemingly very simple and accessible setup. The world of electronics and audio is extremely daunting, and products that lower the barrier to creative entry seem like a fantastic thing.

Regarding my project, I think an interesting area to consider is creating something that can be controlled in real life, which could then interact with a screen, perhaps creating animations and audio?

[itsdangold]

ixd501 - Product Benchmarking: Adobe Patterns

https://creativecloud.adobe.com/quick-actions/pattern/make

Looking at the generative art side of things, I stumbled upon this micro-site from Adobe, to create kaleidoscopic patterns. Whilst there aren’t many options to change and choose from, it’s an interesting example of using web technology and SVG to create complex graphics.

Aesthetically speaking though it’s not the most interesting, and just doesn’t have any interesting details or interactions at all.

[itsdangold]

ixd501 - Product Benchmarking: Zupiter

https://z.musictools.live/#72

The Zupiter synthesizer is a very intriguing webapp, and really pushes the boundaries of what’s possible on the web.

The core functionality revolves around draggable synthesizing nodes, which apply different effects to the audio.

As a purely technical piece the site is great, although the barrier to entry is extremely high, with a lot of domain knowledge needed to jump right in.

Regarding aesthetics, the product is extremely uninviting and uninspiring. There’s a massive space that could be filled to compete with a product like this on the web. I also doubt this piece of software is the most accessible thing to navigate. 

[itsdangold]

ixd501 - Product Benchmarking: Shape Your Music

https://shapeyourmusic.dev/

Whilst conducting my research, I’ve come across yet another mightlity impressive webapp that really stretches what you can build natively on the web today.

This product ‘Shape Your Music’ provides you with a  canvas to draw on and create shapes.

The dots within the shapes loop around the perimeter, generating sounds corresponding to the X and Y coordinates.

This project is fascinating from both the interactions and technical side of things.

The initial experience of the product was very frustrating to use, but after giving it some time blossomed into a fun experience. What certainly helped retain my attention were the colours and minimal UI design.

[itsdangold]

ixd501 - Product Benchmarking: FL Studio

https://www.image-line.com/fl-studio/

Aside from purely web experiences, I thought it would be useful to look at traditional household-name music making programs. One of the more complex programs is FL Studio, which requires a lot of experience and domain knowledge to use properly.

What I absolutely love in this product is the unapologetic see of skeaumorphic UI controls throughout. I feel for audio creation and surrounding software, having tangible controls really adds weight and a touch of polish to the experience,

[itsdangold]

ixd501 - Product Benchmarking: Melodics

https://melodics.com/

Melodics is an education platform to learn how to play instruments, using MIDI outputs.

The core interface is extremely stripped back and minimal, which works well for this type of product, as information overload wouldn’t work too well for a learning environment. The micro-interactions when hitting notes adds a layer of delight to the app, which almost gamifies the product in a sense.

[itsdangold]

ixd501 - Product Benchmarking: Ableton Live

https://www.ableton.com/en/products/live-lite/

A big name in music creation, Ableton’s audio software provides a simple interface to easily connect physical hardware.

Responsiveness of the product is very snappy, and provides obvious affordances for all the controls.

However, not much good can be said about the aesthetics and UI design, which doesn’t feel nice to interact with over a long timespan. There’s no clear hierarchy, and information gets muddied very easily.

[itsdangold]

ixd501 - Product Benchmarking: Beadz

https://heydon.github.io/beadz-drum-machine/

A fantastic example of utilising the Web Audio API to a great degree is Heydon ickering’s Beadz Drum Machine.

The program is minimal in nature, and allows users to create polymetric drum patterns. The monochromatic style of the UI works great for this app, and really emphasises the core functionality.

Accessibility is also a major cornerstone of this project, with a solid HTML structure and navigability of all elements on screen.