A few months ago I stumbled upon an Ableton Live skin that I promptly dubbed the best of 2016 (so far). It just looked stunning. Not only that, but there weren’t any coloring issues when using Live. That is where most nice user-made skins run into problems. They look nice, but in some situations the colors get in the way of each other and cause an adverse effect on functionality. Not with the skin mentioned above though.
After posting about it on my website, I discovered from a friend that the designer of the skin wasn’t just some guy messing about. It was the man who designed Serum’s GUI. And, whether or not you’ve actually used Serum, you’ve undoubtedly seen a picture. It is a visual masterpiece.
Discovering that set me on the path to getting in touch with the designer. His name is Lance Thackeray, also known as PureAV. On top of my favorite Live skin and Serum, he designed a skin for Sylenth. A skin so good in fact, that it was packaged with official updates of the VSTi.
Below you can find a short interview I did with PureAV about his experiences working with Steve Duda and designing the Serum GUI as well as graphic design for VST & VSTi in general.
Check out PureAV on Deviant Art to see all his work. There you can download the Ableton Live skin as well. The Sylenth skin is packaged with the VSTi as stated earlier.
Q. How did you get involved with designing Serum’s GUI in collaboration with Steve Duda?
A. I met Steve in 2011 at a deadmau5 show in L.A. after winning a contest to design a mau5head (the cheese one…) It was secretly my cunning plan all along to meet Steve, so I was incredibly lucky for it all to fall into place! Before I had a chance to sell myself, he asked if I’d be interested in collaborating on a new project. Hands were bitten.
Q. What were some obstacles that you faced while working on the project? How were they overcome? Which takes precedence: the back or the front end if/when a challenge arises?
A. Honestly, there really weren't any major obstacles at all, at least on the collaboration front. There were often delays due to my availability, but during those times, Steve would add a bunch of new features while waiting. On my side of things, I found myself redesigning the GUI multiple times over the years as graphics can quickly become stale and outdated. If it wasn’t for all of the delays, though, Serum wouldn’t be half the synth it is today if it was released by deadline #1.
It’s definitely a balance of front and back when dealing with dilemmas. Of course something has to function as intended, but it has to be easy to use with as little confusion as possible.
Q. How important is knowing the back end, code-wise, when designing the user interface? Meaning, in the digital realm things are a bit more manageable, than say a piece of hardware and how it can be wired.
A. Knowing how the software is made isn’t as valuable as knowing how it’s used. I have no real use for the intricate DSP behind a powerful effect unit when deciding on how it’s interacted with. The only code you encounter with GUI design is fairly simple, such as positioning, sizes, colors, etc. It’s rare that you would be required to delve any deeper into code than that with a front end role. Some basic knowledge of reading/editing code will certainly help. I personally do take interest in the deeper stuff because I’m genuinely interested, but not because it holds any importance.
Q. What is the most valuable lesson that you learned while working on Serum. Whether that be from customer feedback, beta testing, or Duda himself.
A. Serum was the first time I had worked with a VST dev, and the biggest lesson I took from that was how fast this breed of human works! Front end design is a much more casual workflow in comparison, and to this day I still find it hard to keep up with the speed of which devs can churn out new ideas. I’ll spend hours interacting and toying with various layouts of a few components to find the optimal workflow, often to then have a new feature thrown into the mix just when I think I’ve nailed it.
On a personal level, Serum was also the first project in which I had freedom over layout. It’s something I’ve practiced for years on small skins but I was nervous about tackling something this complex. Learning from mistakes is always the hot topic, but discovering what you do well is just as powerful, especially if you’ve been unsure for so long. The public response was very validating.
Q. Functionality or aesthetics? If it looks good will people work with idiosyncrasies in layout?
A. Fashion vs. function is an endless debate with never a clear winner. Personally, I don’t think there’s any reason why any function or feature can’t be made to look and feel good. That said, I see a lot of GUIs which have been blatantly designed for attention with bright vibrant colors and shiny stuff. What those designers neglect is the possibility of fatigue. With audio software in particular, users will be staring at the same visuals for hours on end and all that high contrast vibrancy quickly becomes painful on the eyes. Layout and workflow will always trump everything else, though. When a user tweaks one parameter and intuitively knows where to move next, the GUI is a success.
Q. When designing the interface, who decides what parameters should be available to the user and how they should function?
A. Usually there will just be a list of parameters a dev supplies which need to be displayed somehow. I’ll hear “I need this data to be displayed and be editable”, so then it’s just a case of deciding what graphic element best suites that data.
Q. What is some advice for people looking to get into GUI design? What kind of programs should they be good with? Computer programming languages? Or anything else you would like to share.
A. The biggest must is to use and have a solid knowledge of the software you want to be involved with. You may be starting with great design talent under your belt, but it’s essential that you play the role of the user too.
Most software will have the graphic resources accessible somehow, so I’d recommend dissecting them and learning how individual parts are exported. Also, Xion Media Player is a fantastic app to work with as its skins are quite literally a .psd (Photoshop) file so no coding is required. You can freely experiment with parameter design without the restrictions of skinning something rigid and pre-built. Use whatever design package you’re most comfortable with. I’m a Photoshopper myself.
Q. Do you have anything lined up that you would like to share with us?
A. Other than Serum updates and my day job with poker software, I’ll be aiming to bring some new life into more popular VSTs. I have skins in the making for NI Massive, FM8, and Absynth 5, which have all been mistakenly considered to be unskinnable for years. I also really need to pick up where I left off with Sylenth and Dune 2 designs. Finally, I’ll soon be starting live streams of whatever I’m working on in hopes of inviting people into the process, answering questions, and generally trying to fill the void that is lack of GUI design resources out there. Should be fun!