In the modern era of visual design for web sites and applications, designers are often opting for a flat design over the the old days of heavy and clutter-filled skeuomorphic design. Although skeuomorphic design is not a popular trend – there are still areas where they are very useful and one of those areas are audio software and plugins that emulate vintage gear.
Universal Audio makes some of the world’s best emulations that “faithfully reproduce classic analog recording equipment”, and there is no doubt about it.
The Problem
The problems that I often find with skeuomorphic UI is that they are full of clutter. Drop shadows on top of visual elements are also very common. Hundreds of images of various knob and slider positions add to the size of a plugin . (even bigger if they are trying to support multiple resolutions). Last but not least, accessibility is often ignored in favor of aesthetics.
The Solution
Redesign the user interface to get rid of the skeuomorphism while modernizing the controls for a more digital experience. I plan to achieve my goals through the following steps:
-
-
- Ideation
- Create a component-based design system
- Generate designs based on components
-
Inspiration
I drew inspiration from a few plugin developers with modern non-skeuomorphic interfaces. I drew further inspiration from infographic design patterns as well as neumorphism UI design. Some words to describe my design philosophy are Modern, Modular, Clutter-Free, Bold Colors, Easy to Use.
Sketches
I did some early rough sketches to visualize some of my concepts. I wanted to make the controls visually simple as possible but also wanted to explore new alternatives to some of the controls.
Faders / Slider Sketches
Dual Rotary Knob Concepts
Range EQ Layout
Glyphs and Icons
Controls & Components
As I was thinking through how I would approach my design interations, I thought I would do an inventory of all the controls you can find on varous 1073 designs. Breaking down the system by components would allow me to focus on the visual possibilities of each control.
I used Adobe Illustrator for creating my assets
Explorations
Creating a component system with base visuals allowed me to iterate on concepts more rapidly. The challenge were mostly in making adjustments that would be unique to each concept. Below are some of the concepts along with a blurb about my thinking for each one.
Takeaway
Designing audio interfaces can be much more complex. I can imagine having to design a channel strip or a much more complex equalizer would present more challenges. I’ve always wanted to get into designing audio interfaces and now I have a design system I can build on over time to do more of this work.
