Learning Framer 02: Whise
I admire the open office concept for many reasons. The ability to see interact with colleagues in a "free-range" environment provides accessibility and sparks collaboration. When in my own open office, I often enjoy the soundtrack of conversations around me: lively, cheerful and humorous banter. This soundtrack is a constant reminder of the talented minds I I work with and the fact that they are deeply invested in what they do and one another.
There are times when a design challenge requires complete focus, compelling me to fade out my surroundings. To do this, I summon my precious noise-cancelling headphones and drown the audible world in white noise. Finding a choice of good quality, long duration, and an appropriate vibe is frequently a challenge. The search through YouTube and all my subscribed music platforms breaks my connection with the task at hand. When I finally do settle on a track, it takes a bit more time to get back into the original "flow."
The scenario described above inspired my next Framer JS project: an app concept called "Whise" (short for "White Noise"). The core functionality of "Whise" is to curate the best white noise options based on your preferences. The Framer prototype below demos the core interaction of "Whise," which is choosing and playing a noise track. I decided this task should be incredibly quick, allowing the user to swiftly return to their task.
You may download the Framer JS prototype here.
Though this was mainly an exercise in learning Framer JS, I chose to put some thought and effort towards the UX and UI of the prototype (it's often hard not to!). I chose a layout of a 2x2 grid to offer few options that could be quickly identified, compared, and selected but the user. Though the audio tracks would hypothetically come from various Internet sources, I felt that fact should be hidden from the Guest. Harmoniously individual colors and descriptive hieroglyphic icons identify each track with a consistent look and feel.
Sketching helped me narrow down the symbols I'd use in the prototype.
Other visualizations of "Whise," which I originally dubbed "10 Hours of White Noise." Man, that's a lot of white noise....
CODE NOTES:
This exercise built upon my practice of integrating JSON data into a Framer JS prototype. This time, I blended hard-coded data (stuff that I typed) and live data (urls from the Web) to create something a bit more dynamic.
I also used this as an exercise to get better at using "for" loops to apply a single instance of properties and behaviors to multiple objects. After many iterations—and some help from the awesome Framer Facebook community—I was able to keep my code DRY! Each white noise track object is following the same interaction and UI template (with a few overrides such as symbol and identifying color). This is a technique I expect to use in countless future prototypes, particularly ones that echo games and other robust interaction patterns!