Touch Bar with Brightness Control

I have yet to try a Touch Bar in real life, but the concept of having a new interaction input with direct visual feedback on macOS sounded too exciting for me not to do something about it.

After I tried the Touch Bar simulator in Xcode I felt the brightness control would behave differently than it did, and then I tried to recreate what I imagined would happen using Framer.

The prototype should work well on desktop and on the iPad.
http://share.framerjs.com/ifu3dmxsw9zp

If you tap the button it shows the progress bar, and you can drag the knob to wherever you want. But the next time you open the panel, the knob will always coincide with the current value in the progress bar, meaning that if you're at 0% brightness, you can only go to the right.

It may seem strange at first because we're not used to this type of behavior, but if you simply focus on your intent to slide the button to the left or right to get decreased or increased brightness, I think it feels natural.

The whole keyboard and MacBook Pro was also created completely in code.

Posted on Nov 14, 2016

More by Henrique Gusso

View profile