almost 7 years ago from Benoit Massé, Designer - Motion, Web, UI, Graphic
Hey design community, I was just a friend's house, he is a musician and use all kind of midi controllers to speed up and customize his work. So I thought, why don't we have that as designers ?
Do any of you use or saw something like this ? Custom keyboard for designers ?
We all must be coming to the same conclusion.
The current inputs (keyboard + mouse/ trackpad) for the design workflow are primitive.
I design all day, every day in Sketch.
The right hand is on the mouse, and is the navigation system. Zooming in, zooming out, selecting and panning between artboards.
The left hand is on the keyboard, and is the function system. Contorting in a myriad of positions to execute shortcut commands. In particular, there is a heavy reliance on the command key, which is a dinky key that is in a bad place.
This arrangement was destroying my body.
Specifically my left hand, which is contorting to perform these shortcuts on Apple's vain, bauhaus keyboard.
I know about programmable gamer keypads, special gamer keyboards, fancy mice with programmable buttons. I know about a stylus and tablet and find the range of motion and flow clumsy.
I've seen those snap together Palete controllers and to be honest, they look cheap and junky. I wouldn't want to stare at that mess or use it on my desktop.
I DJ for fun and fool around in Ableton, and a friend turned me onto the Novation Launchpad, midi-controller.
I picked one up here for $150 bucks. This thing is a no brainer. It's super fun for playing music. It has programmable lights. It's just an incredible value.
https://global.novationmusic.com/launch/launchpad#
You all may be surprised, but in my personal opinion, Microsoft makes one of the absolute best ergonomic keyboards out there. The specific one I have is the Microsoft Sculpt Desktop. It's sturdy, it's beautiful, the key arrangements (specifically command and control keys) are spot on.
https://www.microsoft.com/accessories/en-us/products/keyboards/sculpt-ergonomic-desktop/l5v-00001
I have no pain in my right hand, and am completely addicted to Apple’s Magic Mouse. I am not willing to give up that touch aspect of my workflow.
This is far from an ergonomically sound setup, but it’s getting there.
We are setting up a new office in November and will build out everything custom from the desks to the interior. I plan on having a system to contain all that cable garbage. :/
I live in Vietnam and it’s cheap to get things made here. I’m making my own version of Grovemade’s monitor stands, which will be finished soon:
https://grovemade.com/product/walnut-monitor-stand/?initial=64
It will cost me about $5 here. :)
With the monitors raised, this will free up real estate on the desktop to build a proper rack for the midi-controller. I will be building a rack, which will have the Launchpad at an angle and ergonomic wrist supports.
On the right hand side where the mouse is at, I am planning on building more controls and an “Intelligent Mouse Pad” - I will have touchpad controls there, still sticking with the mouse (for now) and I plan on integrating a few more midi-controls for navigation, selection and zooming.
Further, on this point.
As we get deeper into designing for AR/ VR, as our work necessitates more and more interactive prototyping, we will need new inputs and controls for design.
I plan on eventually having a touchpad/ tablet as part of this setup, where I can pick up a stylus and draw paths on the fly. Dials to rotate scenes and so forth.
This is a work in progress and a test.
I am using Bome Midi Translator software for mapping Sketch shortcuts to the Launchpad:
https://www.bome.com/products/miditranslator
Additionally, I am using BetterTouchTool to get the most from my keyboard and further optimize the design workflow.
At the moment, I have the Launchpad (64 pads) setup in quadrants with banks of functions. I am still experimenting with the optimal setup. The commands I tend to use the most are associated with editing and arranging layers. Grouping and ungrouping.
You can program the Launchpad with custom light configurations. I have not dove that deep into the rabbit hole yet, but I will.
The actual workflow - it feels right. It feels more comfortable. I feel like I’m onto something that makes sense for me. It’s a test.
Yes, yes, I know - this “could be” a Kickstarter. I know others have tried to do this before. I believe this is a pretty niche product (though, it could be released more generally) with a fairly small addressable market. And, I’m not a hardware guy.
That said, I am headed to Shenzhen next Tuesday and I have a components shopping list.
It so happens, I have a friend who is a hardware prototyping, circuits kind of guy. Further, my customer in Shenzhen is going to IPO in the fall, and we are discussing a partnership whereby, who knows, maybe this becomes a real thing and is in the mix.
We are going to prototype this product and further tailor it to design.
Imagine designing full blow Atomic, in Sketch, you build your kits. There is a profile for the hardware inputs that is tailored for this stage of the design process.
When you begin the process of designing your layouts, you load a new profile for the inputs, which are better suited for this stage of the process.
So on and so forth for interactive prototyping, and so on.
I am envisioning motorized dials, which react to the attributes of elements you select in Sketch. You could “dial up” or “dial down” the opacity for example. Sliders for certain types of functions. The pads on the controller adapt to the functions you need them to, they glow and give feedback. There could be a display on this hardware for colors, you get feedback from the controller when things are misaligned.
On and on.
I’ll keep you all posted on the progress.
Cheers.
Dude! Thanks for the writeup and keep us posted on how the progress develops, would be super interested if new hardware would come to life.
A few questions though:
Does that Microsoft keyboard have the same "feel" as the Apple one you got with your Mac? I don't really like those mechanical big ones, but this one seems like a flat/laptop style, even though it's "ergonomic". Also, is stays the mapping of cmd, alt and crtl keys stay in the same position as on the one from Apple (maybe a noob question but I haven't plugged in a PC keyboard to a Mac in years :D)
Are you using the Launchpad for automation (exporting, predefined settings...) or do you use for more simple commands (zoom, changing tools...)? It seems a bit tall/beefy for my hand to rest on (like my Akai also does), is it comfortable?
Great questions.
You know, it's funny, Sketch is not perfect, but it's so damn good, that my design workflow flys fast to a fault.
The hardware inputs cannot keep up with my brain and input actions.
On the first question of keyboard feel and the differences between the Apple and Microsoft keyboards.
No, the Microsoft keyboard does not have the same feel as the Apple keyboard.
And, that's a good thing.
My issues with the Apple keyboard:
I believe this was a large contributor to the pain I was beginning to experience in my left hand/ arm. In particular, the left pinky finger (I'm right handed) is often used (given correct hand placement) - to execute many two and three fingered keyboard shortcut commands. We are basically tapping those fingers on re-enforced, stiff aluminum all day.
I'm sure this keyboard will look great on display someday in the Museum of Modern Art. Then again, decades from now, perhaps future generations will look back upon this keyboard and see it as an ancient torture device akin to say, foot binding.
My body, hands and fingers have simply adopted and made affordances for the actual ergonomics and configuration of Apple's keyboard.
Ok, first off, I'm not gonna lie, I felt a little tinge of dizziness when considering this keyboard, I mean, Microsoft.
What I like about the Microsoft Keyboard:
This is a sturdy product, which has been well thought out. In particular, the hand placement. You are indeed, resting your hands in a more sound ergonomically positive position. I'm not sure if you can see it, but the molded rubber piece on the keyboard supports the hands/ wrists nicely.
There's a tendency for off-market keyboards to have almost cartoonish keys. Further, if you go full-mechanical, the key action gives you the decided air and sound of a 90s hacker movie where somebody is trying to "hack into" some computer system.
The Sculpt has well considered sized, placed and configured keys. Some care, science and research (shocker) to best support the user has to be in play.
Wow, putting the user first, what an incredible concept, Apple.
Further, the keystroke and strike does not feel clumsy. It's balanced. It's response, appropriately distanced, but not muddy or spongy like a mechanical keyboard. Nor you don't feel like your tapping on aluminum.
I have seen the other Microsoft ergonomic keyboard. It's junk in the trunk, they should toss it and go all out on the Sculpt.
It's a beauty.
In this case, for now, I'm not going to to make my own keyboard, it doesn't make sense.
For now.
You are correct. It's honestly not ideal for this use case by a long shot.
Indeed, I am configuring it to execute batch commands and running tests to identify the right configurations, the right flows and right oscillations and coordinations of controller, mouse and keyboard and how I as a user conduct the symphony of the design workflow.
The Launchpad's pads are not well suited for this use case.
Further, it's not an ergonomically smart design. It's not supposed to be.
It was not intended for this situation.
It's great for playing and composing music.
As I mentioned, I will design and build a custom rack for it, it will sit on an incline, and I will seek to mimic the ergonomic supports of the Sculpt.
Then, I will continue my tests as I build the hardware prototype that may replace it.
--
I'll keep you all posted on the progress here. I'll be in Shenzhen next week stocking up on components so we can prototype this controller.
I'm not sure this is the best place to keep track of the progress. Suggestions of where and how to share the story are welcome.
Thanks for asking! :)
Thanks Jon! Really appreciate you took the time to share all of this !
You're right about the primitive side of the keyboard and mouse... I never even thought about it before, just trying to improve over it.
Is there a reason why you went for that launchpad ? Cause one physical input I think would be cool is knobs for precision (instead of arrows and typing the value).
I have a stupid question for your keyboard ergonomic : what if you have your right hand on the mouse, and you want to let's say hide a layer in Sketch : cmd+shift+h. With the Apple keyboard that's doable without leaving you mouse, but with the microsoft keyboard it seems not reachable.. no ?
Hi Jon. Would you be interested in doing a blog post about this setup for us on blog.iconfinder.com ?
Yes, I would love to do a write up. It's almost midnight here in Vietnam right now. I'll message you in the morning when I get into the office.
Thank you!
I agree this would result in a niche product, but a great one.
I would suggest you to pivot from limited tracking motorised knobs to infinite dials with with a led crown, so they would be as much as adaptable with a smaller cost and less problematic components.
Regarding buttons, e-ink is what I would look into, because for an adaptable system I would see as a must to convey the meaning of a pad dinamically... and with the latest improvements to the technology it's becoming the most sensible solution.
I'd love to see this grow into reality, it's among our plans to "go hardware" and work on something similar to this, but being utterly honest since I see that step still distant would be great to know someone is realising it.
I'd be glad to offer my feedback whenever you may need some, good luck in the meantime!
I came across this software/app called Quadro recently that uses your iPad or iPhone in a similar way. Basically you can create custom shortcuts and commands for different software and use the device to trigger them.
I have not tried this out myself but I am pretty intrigued by it. Similar to MIDI in theory I guess, but MIDI would be cool. Some motion studio had mentioned it in their workflow, but I can't remember where. Interested to hear if anyone has used it.
I actually played a bit with this a couple of months ago and it was pretty cool. It felt responsive enough. But I didn't kept using it cause you still have to open your phone/pad, find the app, open the app, etc. etc.
I'm more interesting in having a physical keyboard like the flow Igor suggested and the Framer flow mentionned.
I'm also interested in using those knobs and slider for changing properties like type size, or opacity, positions, rotations, etc...
Hey thanks for mentioning Quadro Ryan. For fellow designers who would like to test it out, we just published a template for Figma and one for Sketch, the latter of which is accompanied by a pretty extensive in-depth article.
Sketch: http://bit.ly/2e7mI6F Figma: http://bit.ly/2dhb5JF
Any feedback is appreciated!
Hey Benoit!
We've got you covered → https://blog.framerjs.com/posts/midi.html . Let me know if you have any questions.
That is brillant! I wish I had more time to learn framer though ;) I would like this concept for whatever app I use often like Sketch, Principle, After effect,etc..
Hey Krijn, do you know if the midi controller you use (Korg) would also work with different app ?
I don't know any other design tools with midi support. They do need to implement it on the product side so sadly enough it won't work I guess.
Some really cool examples here. Not quite a midi controller, but this dial-swipe-touch Kickstarter gadget seems to have finally made it out of development: https://www.senic.com/computer
This look really cool!
Funny, but I've been playing with the thought of using a MIDI controller for shortcuts for some days now (had the idea long before but didn't write it down, stupid me).
From what I found till now:
midiStroke(free) is a little macOS app that can convert MIDI notes and/or values to a specific keystroke or a combination of those. So you could for example map a note to a shortcut in an app you use most and so automate things or just bring shortcuts to one place. It looks and feels a bit old school, but it does its job really well and is really responsive (I haven't seen any lag). What I couldn't figure out is how to keep the settings the next time it opens...there are instructions and it saves it in your user library, but I just haven't had the time to properly test it out yet. What you will need with this one is to figure out which pad/key triggers which note, to do so download MIDIMonitor(free) and start tapping on the controller, the note numbers will display in the console (if they show up like D3, go to settings and set "Note format" to "Decimal number").
QuicKeys($59.95) is little more complex, but it offers what midiStroke is lacking -> you can set your MIDI controller to trigger a specific shortcut in a specific app. What it essentially means is that if you're in Sketch, the controller notes will have your predefined shortcuts, but when you switch to Photoshop, the same controller keys will trigger different shortcuts. The app is really good at detecting which app is currently active and triggers shortcuts with no lag, from what I've tested so far.
I bet there are other apps out there that do similar things, but those two are the ones that resonated with me most. Having said that, both apps are simple enough for most people to figure out and set up, but it will take some time for you to input all of your shortcuts in manually, especially if you have multiple apps you want to use it with, but I guess if you set up your environment once really well, it could be beneficial to your design process. I am currently testing on an Akai NPK mini mkII, but because it is fairly big and it's hard for me to reach the pads I just ordered a used Korg nanoPAD (since I don't need the sliders and knobs, as in Krijn's example with Framer), and will try to test it out even further, but it would be really cool to have some dedicated hardware for design.
I hope this answers some of your questions and points you in the right direction. Have fun experimenting!
Thanks Igor, super helpful!
Sure thing! Keep me (and I guess us) posted if you try some of those or if you discover some cool workflow for using MIDI, it's a really interesting topic.
This isn't for design per se, but there is a project on Github that allows you to map midi to Adobe Lightroom, which is pretty rad. I use it whenever I have a bunch of editing to do and I enjoy the workflow. I sent the developer an OS X app icon and he used it! I was pumped. Check it out if you're a Lightroom user.
As others have mentioned, BetterTouchTool is a really fantastic companion app. I don't have a MIDI input device - just using my keyboard and trackpad until my Sensel arrives (fingers crossed) but you'd be amazed at how much you can speed up workflows by even just mapping certain key combinations and unused gestures to common actions. I use custom swipe gestures for all of my alignment in Illustrator and it is MAGIC.
I'm surprised nobody has posted a link to this: https://palettegear.com/
Sounds pretty much what you're asking for (I think). Saw it on kickstarter a few years back, appears to be in production now. Never used these myself, but seems like they could be pretty handy to work with.
I mentioned them above. Looks cheap and flimsy, imo.
WASD keyboard mapped to type in Dvorak. Gonna build/buy a custom keyboard that I can program for common hotkeys like align, save for web, etc.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now