Under The Microscope


Author Archive

The Design of Loopback 2

When we shipped the first version of our audio routing tool Loopback in early 2016, its powerful technology was packaged into a somewhat stripped-down interface. Because we were uncertain how large the market for this tool would be, we chose not to devote too much time to the front-end of that initial release.


Loopback’s first design got the job done, but it was plain and not very intuitive.

By Loopback’s first birthday, it was clearly a hit with audio professionals and hobbyists alike. We knew it was time to begin planning how to flesh out the skeletal Loopback 1 into a much more refined version 2.

Initial Thinking

We knew we wanted users to have an easier time understanding and using Loopback, while also having access to even more functionality. Power and ease-of-use tend to be countervailing forces in interface design, so these requirements meant we had our work cut out for us.

The first step in our redesign was boiling down Loopback to its essential components. Loopback creates virtual audio devices, and these virtual devices consist of three logical parts: audio sources, output channels, and monitors. Our challenge was to determine how best to arrange and connect those parts, so configuration would be both easy to understand and extremely flexible.

Back in 2015, we brought an updated UI to our recording tool Audio Hijack. This block-based interface allows users to see how audio flows through their specific configuration, and it was very well-received.


Audio Hijack 3 shows audio flowing visually.

Knowing how well this “nodes and wires” concept had worked for Audio Hijack made it an early favourite for Loopback as well. However, we wanted to consider other options to see if a different design would suit Loopback better.

Failed Concepts

I often sketch out multiple ideas so we can do head-to-head comparisons, which tend to be a productive way of evaluating options. While these low-fidelity sketches are very rudimentary, they still helped us determine how we wanted to proceed.

Rejected Concept: Channel Checkboxes

This idea involved having each source channel on its own line, with output channel checkboxes available for that source. Above, you can see “iTunes L” (for iTunes’ left channel) and “iTunes R” (for iTunes’ right channel), with four output channel possibilities. Configuration isn’t too terrible with a small number of sources and output channels, but even slightly complex devices would quickly require dozens of checkboxes to configure. Worse, most devices would require a good deal of analysis to understand. This one didn’t really leave the drawing board, thank goodness.

Rejected Concept: Grid Outputs

Here, output channels would be represented by a space on the grid. You could drag sources to the output you wanted. Channels that were paired (like the left and right of most sources) would have a line between them to denote the link.

Even as I made this, I realized it had severe issues. It was very difficult to parse how audio would flow through a device, and monitoring would have required an additional step in the interface beyond this grid. The fatal flaw, however, was that splitting sources into multiple channels would require creating many copies of each source, which would quickly get out of hand.

Selecting Our Final Concept

The aforementioned concepts, and others like them, scaled poorly for complex devices and didn’t lend themselves to easy scanning. Eventually, we returned to our early idea of nodes and wires.


This very early sketch of Loopback 2’s wires isn’t too far off from what shipped.

This wire-based approach was our clear winner, working well for simple devices and complex ones. Importantly, this layout offered space to add monitors and volume controls, and provided an easy-to-understand look at how audio flows through each step of a virtual device in Loopback.

Refining the Design

Of course, determining the fundamental layout of the app was really only the beginning. There was still lots of additional work required to turn those rudimentary sketches into mockups representing a real app.

I used Apple’s Keynote presentation tool to rapidly test how the product would work, creating many quick prototypes. The sketch below helped visualize how wire connections would be created automatically when a new source was added to a virtual device:

Starting from my rough sketches, I began to create higher-fidelity mockups showing the application in action. Here’s the first serious iteration of what would become Loopback 2’s design:

This minty green mockup looks similar to what we eventually shipped, but we were still relatively early in our process. When I compare this against our final product, I can spot dozens of changes, big and small.

More Powerful Monitoring

Early on, it became obvious that our design offered very powerful mapping to output channels, but an underwhelming monitoring function. That above image shows a single monitor available in the bottom bar, with no channel adjustments possible. Our earlier wire sketch had shown a more robust monitoring column, and we determined that this was worth adding back.

Flexible monitors in Loopback 2

Giving monitoring its own column made it possible to fully map channels and add multiple monitoring devices. We also allowed users to hide the column entirely if they don’t need to monitor their device.

Connection Wires

The connection wires also received a lot of polish. While they started out as simple straight lines, they eventually became elegant curves, which were more visually pleasing. Even better, the curved wires create visual groups which make the mapping easier to follow.


Evolution of the wires from early mockup to shipping app

Many More Small Changes

Many other things were tweaked, adjusted, and refined as we tested and experimented. For instance, we opted to make channels appear in pairs, as we realized odd-channel devices are rare (and there’s no real downside to having an unused channel).

We moved the device’s on/off toggle to be more logically placed next to the device name. The “on” state was also toned down, because it needs less attention, while the “off” state was given more color to draw the eye.

As well, we de-mint-ified the app, removing the green background and other green elements. This provided better emphasis to the more important parts of the interface, where color was used in a more exacting fashion.

Going from that first high-fidelity mockup to the shipping version of Loopback 2 required quite a bit of time and effort. Getting the details right took many more iterations, before we could eventually call Loopback 2 finished.

Shipping It

The culmination of this work recently shipped as the completely re-thought Loopback 2. While this upgrade offers many new features, the most obvious change is of course the overhauled interface. Here’s a direct comparison between old and new:


The original Loopback 1 was powerful but extremely utilitarian in design.


While Loopback 2 is polished and refined, to provide both power and ease-of-use.

As you can see, Loopback 2 replaces the previous version’s spreadsheet-esque look with a more intuitive wiring-based interface. It’s now easier to understand how audio will flow through a virtual audio device, and this visualization makes Loopback easier to grasp as a whole. That should make Loopback accessible to even more users, all without sacrificing anything in the way of functionality.

The Future

To paraphrase a line often attributed to da Vinci, software is never finished, only shipped. Loopback 2.0.0 has now shipped, but there are still many more updates and enhancements we hope to make in the future. The new and improved design found in Loopback 2 should provide us with a solid base to build on for years to come.

Halloween Fun with Farrago and Airfoil

Before it was even October, my kindergartener son decided we ought to decorate for a truly spooky Halloween. Our concept: a scary cauldron which kids reach in to to retrieve their candy, complete with smoke and lights.

I took it upon myself to start on the (often overlooked) sound design. Spooky audio is an important component of any scary display or haunted house, and with today’s portable speakers, it’s easy to add. I’ll be placing a couple of small wireless speakers outside to play music and scary sound effects. As you might have guessed, I plan to use Rogue Amoeba apps to help.

Making Background Music

First up, we need some creepy ambient music. Finding something pre-made online is easy, but it’s even more fun to make this ourselves. I previously used GarageBand to make the example music loops we ship with our soundboard app Farrago, so I knew it would work well here too.

I started by making a new GarageBand project in a minor chord, and set the tempo to the slowest possible speed, five beats per minute (BPM). Then I added a bunch of loops and turned up the reverb. In about half an hour, I had made a pretty decent backing track. Almost everything sounds creepy at five BPM, so a little trial and error should be enough to arrive at something suitably unsettling.


Everything sounds eerie with these settings in GarageBand.

Samples like Bells, Choirs, Pads, Organs, and Vox all seem to work well. On top of that, the pitch-shift, echo, and reverb filters are useful to make them sound extra spine-chilling.

I encourage you to experiment and make your own audio, but you’re also welcome to use my audio file.

Here’s a short excerpt so you get the idea:

To get the whole file: Click to download (15 minutes, 11 MB)

Setting Up Sound Effects with Farrago

The music will serve as a backdrop, but I also want to be able to play spooky sound effects on demand. Here’s where our soundboard app Farrago comes in. I downloaded a bunch of sound effects from FreeSound.org and put them into a new set in Farrago.

First up, I added a bunch of on-demand effects. These are unsettling growls, howls, and cackles which I can play at random. I then added a bubble sound effect, to help sell my cauldron. Finally, I put in the spooky music file I made in the last step with GarageBand. I set the music and bubbles to loop, so they’ll provide he backing track and run continuously.

One great advanced feature of Farrago is MIDI triggering, which I’ll use to avoid the need to carry my 27” iMac to the front door of the apartment. The iMac can instead remain on my desk, running all the audio behind the scenes, while I control it remotely with an iOS MIDI trigger app on my phone.

I’ve set up an app called TouchOSC to control Farrago, though most any MIDI app should work. If you need help getting your iOS device talking to your Mac, this link should help.

Sending to Speakers with Airfoil

Farrago isn’t the only Rogue Amoeba tool I’ll be using. I’m also going to use our home audio streamer Airfoil to wirelessly send the desired audio from my Mac to speakers set up outside my front door.

The two speakers I’m going to use for this are my HomePod and a bluetooth speaker. Airfoil is a big help here, as it can send in sync to both bluetooth and AirPlay.

I plan to set up my speakers around the entrance to my house, and then set them as outputs in Airfoil, with Farrago as the source. Streaming audio using Apple’s AirPlay introduces a slight lag, but it should be plenty speedy enough to get some good jump scares.

In Airfoil, I just select Farrago as my source, and then click the Transmit buttons next to my desired outputs.

Audio is now streaming to my HomePod and Bluetooth speakers – perfect!

Getting It All Together

At this point, I have everything I need for the 31st. When the time comes, I’ll set my custom creepy music and bubbles playing on a loop, and use the MIDI app on my phone to trigger sound effects remotely. The sound coming from multiple sources in sync creates a very cool effect, like the sound is coming from everywhere, and is going to help sell the creepy vibe. A smoke machine, coloured lights, and creepy decorations from my son will bring it all together and make good creepy fun for all the neighbourhood kids.

Happy trick or treating!

Animating CSS Gradients, One Frame at a Time

While working on the recent launch of Airfoil 5.8 (with Sonos support!), I wanted to visually convey the idea of wireless broadcasting by using the tried-and-true pattern of concentric circles. To really sell the effect, I wanted these circles to animate when the mouse cursor was hovering over them. This took some doing, but a bit of inspiration from my childhood got us where we wanted to be.

Getting Started with Gradients

The easiest way to display concentric rings is a simple radial gradient, done in CSS. CSS gradients are a lightweight way to add all sorts of visual patterns to the web. This means not just the smooth gradual changes between colours generally associated with the word “gradient”, but also lots of other repeating patterns.


This is the desired look, but I really wanted these radial circles to move.

Gradients are super useful, but they’re usually about as animated as a Moai. Unlike many other web elements, you can’t just set the start and end states, then have the browser interpolate out a smooth animation. I expect this will one day work in the major browsers, but for the moment it’s not supported.1

Stop Motion Inspiration

To get the animation I was after, I reached back into my childhood. Long ago, in the days of VHS, I made stop-motion animations with my family’s clunky camcorder. I would painstakingly build a tiny set and characters out of clay, then move it all very slightly, to animate a scene one fraction of a second at a time. It was arduous, but much like CSS now, I had to work with what I had.


A still frame of an unlucky Play-Doh guy getting hit in the head with a snowball, circa 1992 or so. Sorry Pixar, I went into software design instead of animation.

I realized we could put a new twist on that old stop-motion technique, by writing out CSS to create one frame at a time, then using the animate function to cycle through them. It would work a lot like those old animations I used to make, but with the “frames” created from code instead of images.

Animating with CSS

Doing this in CSS requires two steps. We first defined our frames using the @keyframes function. After that, we applied the animation to our banner with the Animate function, which defines how the frames will play.

Step 1: Defining The Necessary Frames

The good thing is that the CSS needed to generate each frame of our animation was relatively straightforward, though quite repetitive. We simply incremented the progress count by 2%, and the radius of the ring portion of the gradient by 1px each frame. My co-worker Lee made a quick script to brute-force generate the 51 frames in our loop, which we then placed in the related CSS file.2

I won’t show all the frames here, as there are too many, but here are the first two frames as an example. One thing worth noting is that we actually built the animation with the rings radiating outward, because the math was slightly easier. In the second step, that animation is reversed, to get the desired effect.

Here’s the first (0%) frame of an animation I’m naming waves:

@-webkit-keyframes waves {
0% {
background: repeating-radial-gradient( 15% 50%, circle, #E5F8FF, #E5F8FF 0px, #B8DDED 0px, #B8DDED 2px, #E5F8FF 0px, #E5F8FF 52px);
}

This code may be a little complicated to the uninitiated. It sets the repeating background gradient we want, with the size of the inner ring at 0px, and a total width of 52px. We need to increment the radius of the inner ring by 1px for each frame, to make the rings move a single pixel outward (remember, we’ll reverse it later). So, the second frame looked like this:

2% {
background: repeating-radial-gradient( 15% 50%, circle, #E5F8FF, #E5F8FF 1px, #B8DDED 1px, #B8DDED 3px, #E5F8FF 0px, #E5F8FF 52px);
}

There are another 49 frames, omitted here in the name of brevity, which increment the ring size by one pixel per frame until we hit 100%.

Step 2: Making Those Frames Move

The above code creates the individual frames which will result in our desired animation. However, we still have to define how they will animate. HTML and CSS keeps the animation and the definition of how it plays separate in the name of reusability. Making this animation apply to our banner was then as simple as adding the following bit of CSS of our banner element:

.banner:hover {
animation-name: waves;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: reverse;
}

This last bit of code is equivalent to the playback controls, and defines aspects such as speed, iteration count, and direction. By separating the actual animation elements (the frames and instructions), from the playback controls, you could very easily apply the same animation to different elements, but with different playback parameters.

A good example of how this separation is useful is that our animation frames are built in the opposite direction of how we wanted them to run, so we’ve specified in the playback controls for them to run in reverse. If I wanted it to run the other way, or even ping-pong back and forth, I wouldn’t have to define a whole new animation, I’d just edit these playback controls.

Our End Result

Here’s a slightly modified version of the banner which appeared on our front page. To better show the effect, this version doesn’t require hover to animate:

Stream to Sonos

Airfoil now sends to Sonos’s
AirPlay-compatible speakers

As you can see, our CSS animation got us what we wanted. The concentric rings draw via CSS, and are then animated inward, representing audio streaming to these devices. CSS gradients and animation allowed me to achieve the effect I wanted, while remaining very lightweight. The frames are only about 15KB in total, a pittance for an animation in today’s world of overweight web pages.

I’m very happy with this result. This was an effect I’ve wanted before, but I hadn’t previously figured out the right approach. There’s a good chance you’ll see this technique used again before too long on our site. Perhaps you can make use of it yourself as well!


Footnotes:

  1. Surprise kudos to Microsoft, because the current version of Edge does support this type of animation. ↩︎

  2. 60 frames would have been ideal, to fit into the 60 frames per second most computers display. However, CSS keyframes are defined as percentages, which makes it difficult to define keyframes that don’t fit easily into 100. A bit more math may have made it possible to get the animation to take exactly 60 frames, but 51 frames wound up working quite well, with less work. ↩︎

A Celebration of Maximalism

Despite this post’s title, I’m going to start by talking about minimalism.

I’ve been at least a partial follower of the minimalist Steve Jobs/Jony Ive school of design since I was a teenager. Early on, Jobs famously lived in a mostly-empty home (as seen below), and he eventually minimized his wardrobe to the same bespoke turtleneck, Levi’s jeans, and New Balance sneakers. I looked up to Steve as a pioneer of interface design, and took on some of his minimalist ideals.


Steve probably wasn’t the best host for a movie night with friends.

Photo credit: Diana Walker

Being the son of an auto mechanic, however, I likely have a less high-minded approach to design than Steve had. I see minimalism as more of a tool than a religion. I also like to have furniture in my house.

From 1x to 2x

Minimalism in UI design most recently came into vogue shortly after the adoption of ultra-high resolution (“Retina”) displays. Decorative elements had less appeal when everything on screen looked so nice and crisp. Like many designers, I followed Apple’s lead on iOS 7, and purged my work of textures, drop shadows, and glossy finishes.


Flatter app icons in the style of iOS 7

Photo by William Hook on Unsplash

I’ve mostly maintained these minimalist ideals in my designs, but outside of work, I’ve increasingly found myself drawn to things that are complicated, chaotic, and full of surprises.

So I’d like to take a couple minutes to celebrate some great things that shun the idea that less is more.

The Sagrada Família

Seeing Antonio Gaudí’s sublime church, the Sagrada Família, in Barcelona is what first made the idea of maximalism pop into my head. I thought “I’m always trying to pare things down, but this place does the exact opposite, and it’s wonderful”.

Partial tours are available of the cathedral, which has been under construction since 1882, and at best will be completed in 2026.

One small corner of the massive church

Photo by Rutger Lanser on Unsplash

The Sagrada Família is decidedly not an exercise in removing every unnecessary thing until the platonic ideal of a cathedral remains. Instead, it is the chaotic addition of more and more, until every space is overloaded with surprises. Every single crevice of this building, inside and out, is filled with carvings, statues, stained glass, engravings, and shafts of coloured light. Exploring the building puts one in a constant state of discovery and delight.

Gloomhaven

Next is the ridiculously epic tabletop combat game Gloomhaven, which is one of the best games I’ve ever played. Gloomhaven comes in a 20+ pound box, and takes 100+ hours to complete. The total number of figures, cards, and pieces in the game is in the neighbourhood of 2000. It’s not without elegance, but it is definitely not minimal.

Some of what comes in the Gloomhaven box. This isn’t even all of it.

Photo by Darcy Pennell on Board Game Geek

Gloomhaven is the first game I’ve tried that’s worthy of the word “epic”. It will realistically take me years to finish, and even then I’ll probably only ever see a small percentage of the content in that mammoth box. Knowing there’s so much in there I’ll probably never see is actually part of its appeal.

RuPaul’s Drag Race


There is nothing subtle about this show.

I don’t much care for fashion or makeup, and my wardrobe is a muted rainbow of drab colours and earth tones. So I’m as surprised as anyone that a television show about people dressing up in gaudy outfits and garish makeup is one of my very favourites.

“RuPaul’s Drag Race” is basically an outright rejection of subtlety, with one judge even outright stating that he “hates minimalism”. It’s unabashedly over-the-top. I’m a sucker for watching skilled people do their thing, whatever it is, and this show is packed with exactly that.

Drag Race miraculously takes what could be flaws and turns them into strengths. Endless corny jokes, over-acting, and garish colours are woven into a uniquely compelling extravaganza.

Maximalism as a Tool

All these maximalist things use their expansiveness for different effects. For the Sagrada Família, maximalism creates a sense of wonder. In Gloomhaven, it gives the world an epic feel. RuPaul’s Drag Race uses maximalism to create a sense of celebration. The idea that minimalism, or any other style, is superior to all other aesthetics is silly—all of these things would be much worse if done in a minimalist style. The style of something should follow its goals.

Where Apple’s Minimalism Has Gone Wrong

While thinking about maximalism, I also got to thinking about Apple’s recent excesses of minimalism. Apple deserves tons of praise for their transformative design work, but recently, it’s seemed as though the company has forgotten why they’re pursuing things. There has been a great deal of pushback on recent designs, most notably with the finicky keyboards and lack of ports on their recent laptops, as well as a lack of progress on their pro-level Macs. There are undoubtedly many reasons for these issues, but it seems to me that part of the problem is that Apple is more concerned with making their products minimal than making them useful.

Apple is a company with strong design in their DNA. Since the days of Steve Jobs, they’ve sought to make tools that are as simple as possible, while still enabling the user to accomplish their goals. Recently, however, it seems like they’re making things simpler at the expense of being able to get the job done. It increasingly feels like Apple is following the path of minimalism because it’s something they’ve done in the past, and not because of a clear understanding of how that minimalism actually helped people work.

Similarly, Apple’s obsession with getting manufacturing tolerances ever more exact seems to have moved beyond the point of it actually bringing any benefits. A few years ago, making parts out of precision glass and aluminum led to rugged and well-wearing products. Adding an additional decimal point to their manufacturing precision seems only to have resulted in keyboards that can be rendered unusable by the tiniest speck of dust.


Apple’s recent MacBooks Pro famously cut ports and computing power in exchange for being smaller and simpler.

Photo by Bram Naus on Unsplash

I applaud their pursuit of progress in design and manufacturing, but minimalism in itself is an empty pursuit—helping people work or play should be the goal. Relentlessly cutting features, size, and especially ports for its own sake eventually leads to negative returns. People, especially professionals, have the capacity to handle complexity. We need look no farther than the wonderful maximalist examples previously mentioned to prove that.

Apple’s relentless pursuit of minimalism for its own sake was perhaps best lampooned in The Onion’s video: “Apple Introduces Revolutionary New Laptop With No Keyboard“. It was posted in 2009, but it has never felt more relevant than now.

In Closing

As far as my own design inspirations go, I still love simple things like a beautiful Dieter Rams-designed radio, or a wabi-sabi inspired garden. I live in a small apartment and try to minimize the quantity of stuff I own, while striving to keep things of high quality. Still, it’s good to recognize that not everything needs to be simple, minimal, or elegant. There is also a place for the big, the bold, and the over-the-top.

Behind the Scenes of Farrago’s Launch Video

The intro video for our new soundboard app Farrago has been very well received, so I thought I’d discuss how we made it. If you haven’t seen the video yet, take just 73 seconds to watch it, then read on.

When we decided to make a video to accompany the release of Farrago, the concept we began with was very different from what we wound up with. The original video featured a montage of mostly still screenshots, with animations between them. A great deal of time was spent making ultra-high detail vector screenshots of the app, then compositing them in Apple’s Motion app.

A screenshot of the original video being animated

Unfortunately, though the resulting video looked gorgeous in 4K, I couldn’t shake the feeling that it was overly flat, even lifeless. Much work went into making Farrago a lively app that’s full of subtle motion, and the video simply wasn’t doing it justice.

Thankfully, a better idea arrived in an unexpected flash of inspiration. While I was assembling the video’s soundtrack, it struck me that the layout of my GarageBand-based project looked rather like Farrago itself, with coloured sound file blocks showing waveforms. I wondered how the video’s audio track would look if I actually brought it in to Farrago.

A screenshot of GarageBandThe GarageBand project that inspired the concept

After spending just a few minutes porting the audio over, I knew I could make a much more dynamic and effective video by simply recording my screen while I ran through a sequence of steps live in Farrago. Instead of disjointed screenshots, the new video would have a continuous flow from one feature to the next, with no cuts or editing. Crucially, it would show exactly how the app works.

I created a rough abstract for the team to review, and everyone was immediately on board with the new concept. I unceremoniously dumped most of the work from the first video and started fresh. While we kept the voiceover largely unchanged, I had to decide what exactly we would show. I took inspiration from the classic first level of Super Mario Bros., deciding that the video would slowly reveal different parts of the app. As the video builds on previous items step by step, the viewer gains a solid understanding of the whole product.

To do this, Farrago became something of an instrument, and I had to practice over and over to get the desired sequence just right: Click this tile, wait five seconds, drag in a new file, and so on. Every mouse movement and key press was deliberate, and when I messed up, I’d start again. I ran through the entire flow at least 50 times before I was ready to create the actual recording to use in the final video.

Amusingly, when I set up my screen recording software, I realized I had an audio issue. I needed to get Farrago’s audio into my screen recorder, which only accepted audio from an input device like a microphone. Thankfully, Rogue Amoeba’s own software helped me work around this in mere seconds. Using Loopback, I was able to route audio from Farrago right into my screen capture app. With that solved, I was ready to record.

A Loopback setup to get audio from Farrago into the screen-recorder appLoopback saves the day!

Once I had my raw recording, I dove back into Motion to assemble everything. I added zooming and panning to emphasize different parts of the app, but nothing else was changed. Everything in the video is a real action, done in real time, in one long shot. It took many takes to get it right, but it was worth it to get the final result.

In the end, I think it was our willingness to throw away the effort we had already expended on the first concept that helped the video turn out as well as it did. When an obviously superior idea came along, we were willing to pursue it, even though it meant additional work. The end result is a video that vividly shows how the app works, rather than just telling, and viewers have responded to that.

Our Software