UI / UX

audiovisualizer

TOOLS | Javascript, p5 Sound, HTML5, CSS, Github

DELIVERABLES | Interactive Interface

LINK | Mood Visualizer

THE CHALLENGE

Build an application ground up, taking into account effective principles of user interface design and best practices in web development.

The interface allows users to play music and customize the visual aspects of their music player: they can select from different colors, control the type of visuals (waves, circles, bars), and upload their own audio file as well (which is a function that is underway). The interface is intended as a tool for relaxation, creative enjoyment, and a way to recreate the experience of listening to music.

DATE

Apr. 2018

SERVICES

Rebranded Graphic Identity, New Interface Design

Visual Research & Concepts

I wanted to create a very sleek, modern, and clean aesthetic for the project and use futuristic, fluid shapes and bright vibrant colors and my moodboard reflects that: I found a variety of dynamic and vibrantly colored graphics - I sought to find a variety of different shapes including circular shapes, waveforms, and abstract blob-like forms.

Wireframes
(mobile + desktop)

Though the final interface is designed only for desktop view, I plan to continue improving upon the project and eventually develop it into a mobile application. The following wireframes show various different pages & layouts from the interface.