Earlier this spring, we shipped the second major version of Farrago. For this update, we really worked to improve every single facet of the product. The app remains extremely recognizable when compared with the first version, but from looks to features to ease of use, it’s better in every way.

As we have often done for major upgrades, I’d like go over many parts of our process, and discuss how we went about making all of these improvements and refinements.

Tiles

Let’s start with the most fundamental interface element Farrago has: sound tiles. They’re the foundational element of the app, with each tile representing one sound that’s available for playback. The functionality of tiles is largely unchanged in version 2, but visually, they’re greatly improved.

The update brings much better resizing to allow larger tiles when needed, as well as crisper colours and some small layout tweaks. The most obvious difference, however, is the new presence of emoji on the tile face.

From early on, we planned to include some sort of images on tiles. As a general rule of thumb, a combination of text and visual icon is easier for a user to identify quickly than just text or an icon alone. However, we weren’t sure how best to accomplish this. My earliest designs allowed any image file at all to be added to a tile, but we found that even with well-chosen images, the interface quickly got cluttered and hard to read.

Eventually, I came to another idea: emoji! Apple’s emoji are very well drawn, and even better, there’s a uniformity that makes all the emoji work well with each other. This made them a great choice to provide on-tile artwork. Farrago now allows for up to five icons to be added to each tile, so you can make combinations like 💥🚙 for car crash. These optional emoji add a really nice visual flair to the app, while feeling uniform and not overwhelming.

Now Playing LCD

The Now Playing LCD is the display at the top of Farrago’s main window, and it got a big overhaul. This space summarizes everything currently playing in Farrago. For version 2, we increased the size of controls while moving others outside the LCD. We also added some new features to this area.

The bubbles now display the sound’s emoji, information about playback options (looping or solo), and importantly, include a stop button to quickly halt playback with one click. Clicking elsewhere on a bubble also highlights the tile in the relevant set, so you can make further adjustments. Lastly, VU meters help you keep track of sound levels and check to see if audio is too loud.

Playback and volume controls were moved out of the Now Playing area to create clearer differentiation between groups of controls. We also moved several window navigation controls into the bottom bar. With these changes, the fairly utilitarian look of Farrago 1 has been made much more attractive.

The Inspector

The details pane on the right side of the app’s main window is called the Inspector, and it’s home to many important settings. We gave it a substantial visual refresh:

Comparing side-by-side, you can see that the contents of the Inspector are largely the same in terms of functionality. There are some new controls, like adding/removing emoji and the Edit button (more on that below), as well as a new Automation section. By and large, however, version 2’s Inspector should be quite familiar to users of Farrago 1. The Loop, Solo, Pausable, and Hold controls remain, now converted from basic checkboxes to button toggles with artwork. The size of most controls and labels has been increased, while still maintaining efficiency of space, a repeating theme for this release.

A Popover Detour

One direction we tried for the Inspector was using popovers instead of a pane on the main window. Early in our design process, I had the thought that this could work much as it does in Audio Hijack for block settings. I imagined that getting rid of the inspector would free up much more space for large tiles and give the app a cleaner feel.

However, while popovers are great for many tasks, they generally can’t hold very much without needing complicated sub-navigation like tabs or expanding sections. After some experimentation, it eventually became apparent that popovers wouldn’t be a good fit for Farrago. The sub-navigation became overly complicated, negating the advantages popovers might give us. We soon reverted to an inspector pane, with a few space-saving refinements brought back from the popover experiment.

The Edit Window

The built-in audio editor is something completely new to this version of Farrago. While Farrago 1 offered very minimal fade in and fade out controls, we’ve now added more powerful fading, as well as cropping and audio removal.

The editor went through quite a bit of back and forth as we contemplated two different directions: something very basic, similar to QuickTime’s trimming or a more robust editor, closer to our fully-featured editor Fission.

The first, more basic option would have offered draggable in and out points as well as draggable fade lengths, but not much else. It was essentially a larger version of the editing adjustments offered in Farrago 1, mixed with QuickTime’s Trim function, and it was very confined.

The second option, of a more fully-featured editor akin to Fission approach, is much more powerful. You can really do a lot with it, including multiple fades in any direction and cutting to get down to the exact audio you want. You can zoom in or out to really see what you’re doing, and there are helpful Undo and Redo controls too. For many tasks, no additional editor will be needed at all.

This latter option became the obvious choice for us. Farrago doesn’t offer all the features of Fission, but it can do a lot more than QuickTime’s basic Trim function.

The App Icon

The app icon didn’t change too much between versions, but we did tweak it. In addition to beautifying the look, we also made it better match Apple’s new icon design paradigm.

You may remember that in MacOS 11 (Big Sur), Apple ushered in a major design change for app icons on the Mac. Instead of having many varying shapes (something which aids in recognition), Apple decided that all app icons would have the same squircle shape as iOS icons. While I understand the desire for uniformity behind this move, I find it makes app icons look too similar. Icon shape is an important tool we designers had to differentiate our icons, and that’s been lost.

With these concerns in mind, we have not fully embraced this new style across our line. That said, we have bent towards it in some places. Loopback adheres to the suggested shape, but that was a small conceit, as its existing icon was already almost this shape anyhow. We simply tweaked it from one squircle shape to another, so it wouldn’t fall into an uncanny valley of being close but not quite the same. Meanwhile, our updated squircle icons for Audio Hijack and SoundSource, seen at the right, have added a three dimensional element to help with differentiation.

Farrago’s icon is a bit different. From the beginning, it consisted of tile shapes stacked on top of each other to represent our multitude of sound tiles. I realized it would be possible for us to follow the spirit of the changes, without matching them exactly. I modified the tile shapes to align with the standard tile shapes, so there is uniformity. But I also shrunk, stacked, and rotated the tiles to give it a unique shape. I think this is a good happy medium, which looks good alongside the other app icons, but which also gives it its own unique character.

Marketing

Rogue Amoeba is a small company, which means that my work is not limited to just the design of the app itself. I also handle marketing, creating a cohesive visual look for each app on our website.

Web Page

For Farrago’s main web page, I tried going with a look that was a lot more busy and maximalist than I have for previous apps.

There is a lot of colour, repeating patterns, visual depth, and animations. In short, I aimed for more fun, injecting a feeling of play and experimentation into the visual design.

Homepage Banner

We place a banner at the top of our homepage for major news, and the banner for Farrago 2 was the most elaborate yet. The banner is shown as a static image below, but on the homepage, it rotated through multiple new features.

It also included the app icon, a screenshot of the app, an infinitely-scrolling background (which took some time to get moving as smoothly and slowly as I wanted), and a complicated loading animation. This was my most ambitious banner yet, requiring a lot of web code and design work to come together in just the right way. I was very pleased with the final result.

Overview Video

Over on Daring Fireball, John Gruber called Farrago 1’s marketing movie “one of the best intro videos I’ve ever seen”. For version 2, we built on the original concept and made something more polished and a bit more elaborate. As before, the video is really just a screen capture of me playing sounds back in real time. The video was created with Farrago, Screenshot.app, and no small amount of patience.

The soundtrack was made in GarageBand, which allowed me to perfectly time it to the spoken words. GarageBand is truly a magical piece of software. It let me make a decent music track, despite having no musical experience. Having the voice and music match perfectly was very important, and my process benefitted greatly by GarageBand making it easy to iterate and get the timing just right. The video took literally hundreds of attempts to get it to something that was simple enough to follow, yet visually interesting, but the end result is worth it. It provides a great overview of the product, all in under 90 seconds.

After we were satisfied with the raw video, we ran it through a machine learning-based tool to increase the resolution so we could zoom in as far as I wanted. Finally, I composited it with Apple’s Motion app to pan and zoom to direct focus, and add in some basic overlays and titles while at it. The most difficult thing was actually adding the scrolling background pattern, which had to be done with a green screen-like chromakey tool. It was worth it for the visual flair.

Despite not being a video pro by any means, the amazing tools available let me make the video almost single-handedly.

In Conclusion

We work hard to make applications that are easy to use the first time you open them, and still powerful enough to do everything you need the hundredth time you launch the app. That work can be very time-consuming. My first sketch for Farrago 2 was made around March of 2021, over two years before the app’s eventual release. It was well worth it though, because Farrago 2 adds a level of polish, refinement, and fun to an already-established app. The upgrade let us rethink every part of the app and make it better.

One of the things I cherish about doing design for Rogue Amoeba is knowing our tools assist tens of thousands of users with their own creative projects. Helping people make great things is extremely rewarding, and I never get bored of hearing about the many ways that people use our software for their theatre shows, podcasts, streams, and more. If you’ve done something great with Farrago, tell us all about it.

Apple has just announced a new version of the Mac’s operating system: MacOS 14 (Sonoma). We’re already hard at work on new versions of our products to support Sonoma, which will be arriving this fall. We intend to have official updates in time for Apple’s public OS release later this year.

Our Status page is now updated with basic info for Sonoma, and we’ll post further updates there in the coming months, including test releases when they eventually become available.

For now, however, our products are not yet supported on beta versions of Sonoma, and most will not run at all.¹ We strongly encourage you to stick with MacOS 13 (Ventura) or lower for the time being, avoiding Apple’s beta OS releases.

For additional details, please see our knowledge base article on beta versions of MacOS. Beyond that, stay tuned for more news late this summer.

Footnotes:

1. Our soundboard app Farrago and our audio editor Fission will run, once you bypass a warning screen. The rest of our apps require an update to the backend Audio Capture Engine (ACE), and do not yet provide any access to functionality whatsoever. ↩︎