LUXOR Synthesizer Design

This is Vital, a free synthesizer with features that easily contend with the some of the most premium synths on the market. Visit Vital's website.

This is Serum, a paid synthesizer widely considered to be one of the best (if not the best) synths on the market. Visit Serum's website.

I love both of these synths, but there are many facets of one I find more favorable than the other. For example, let's look at...

Layout

In terms of simplicity, Serum takes the cake. The top half is dedicated to the oscillators (the production of sound), while the bottom half is exclusive to envelopes and LFOs (the modulation of that sound).

The only exception is the filter on the right-hand side of the upper section. That filter is not intuitively position or styled, as it does not produce sound, but rather filters the frequency spectrum of a sound.

That said, Serum's workflow is much more optimized compared to that of Vital's:

Therefore, I replicated Serum's workflow and integrated it into LUXOR's UI.

The top half is for the production of sound, while the bottom is dedicated to modulating/filtering that sound.

Oscillators

Oscillators produce sound waves; They're the bread & butter of every synth. Therefore, the oscillator should be very well-optimized in layout and input functionality. Notice the differences between Vital's horizontal layout with a variety of input types, and Serum's vertical layout composed mostly of knobs.

Serum's knobs are repetitively cluttered, not offering much in terms of visual context, hierarchy, and separation of concerns.

On the other hand, Vital's oscillator is visually cleaner, with a clear hierarchy, the controls of which are divided into sections; however, the hierarchy isn't intuitive, and the layout is spread across a long horizontal width, making the user traverse a greater surface area when tweaking.

Here is my solution:

Unison and Phase are physical/audible attributes of the wave itself, so those are positioned directly below the wave visualizer, and are most similar to Vital in their design.

The left-hand side is an intentionally ordered column with pitch controls at the top, followed by the Level (volume) and Pan (left / right) knobs, as well as the signal output selector at the bottom.

Similar to both Vital & Serum, LUXOR has a wave preset selector at the top above the wave visualizer, where the user can open a menu and select a variety of wave types. All other options and one-time interactions can be found within the oscillator menu (hamburger icon).

Serum provides this sub oscillator in addition to their two standard oscillators, while Vital provides three standard oscillators:

You may think Vital wins this round since Serum's sub oscillator is limited in comparison to a standard oscillator, and while that is true, nearly every patch I've ever worked with either uses the third oscillator as a sub, or doesn't use it at all. Take the patch, depicted above, above as an example; see the third oscillator at the bottom? Yep, it's just a sub.

I opted for my synth to follow Serum's lead, so this is my sub oscillator:

Did you notice the controls are purple, as opposed to my standard oscillator's pinkish tone? This provides a little visual separation while still maintaining color consistency. Let's dive deeper into...

Color

Take another look at the default User-Interfaces for these synths:

I personally find Serum to have a more pleasing color palette, however, it's not intuitive in the slightest. It uses two primary colors: green and blue. The oscillators appropriately use green, but everything else is blue, including the UI for the synth itself.

I can't deny, Serum has style, but the colors don't clearly indicate any separation between the different sections of the synth.

This is why I chose a luxurious gold color for my UI components, pink & purple for the oscillators, then a blue-teal-green gradient for the remaining sections.

And while both Serum & Vital allow you make custom skins, I'm judging them based on how they come right out of the box. Another good thing about my design is that you can easily change the color palette with minimal parameters. For example, I only changed 3 parameters to make this variation:

and if I develop this synth in the future, it will ship with several theme presets, including presets for users with color blindness.

User Experience

One of the biggest benefits to using any of these synths is the use of macros. You can think of a macro as an argument sent to one or more controls, to automatically modify those controls through a single knob. I think Vital does macros better than Serum, so let's take a peek at how it works before I show you my design.

We have a macro knob on the left named "Cutoff".

This macro is tied to the Decay knob inside Envelope 2, indicated by the small green pie chart below the macro knob. The value of the pie chart tell us the direction and intensity of the macro's total influence.

See how Envelope 2's Decay knob has a slight extension beyond its current value? That's the macro doing its job!

But notice the box below the cutoff macro (the one containing the word 'cutoff' and the green pie chart). That box also acts as a handle where the user can click and drag the macro onto another control, such as the Decay knob. My problem with that is that it takes up just as much real estate as the knob itself.

To address this, here's what I did with my design:

See that pink pie chart below the Macro 1 knob? Based on just the color, that tells us the macro is controlling the parameter of a synth. But which parameter?

This is where Vital falls short. Using Vital, the only way to know is by hovering over the pie chart with your mouse; however, in my design, you can clearly see that the macro is controlling the level of Oscillator 2, because the level knob has a gold dot above it, regardless of the macro's value.

Also, I've replaced Vital's bulky handle with a diamond above the knob. When you see a diamond, you can click and drag to apply the signal to nearly any parameter, just like Serum & Vital.

If, for example, an envelope were to control the level, both the dot and the glowing line would be blue; and the best part is, when you hover over that dot, it acts just like the pie chart, so you can modify the macro's influence from both the source and receiver.

Conclusion

My design aims to be as intuitive and simple as possible; abstracting and minimizing the redundancy of not-so-common features of the best synths on the market.

It's approachable for beginners, and feels familiar to seasoned producers with broad experience using synthesizers.