During a recent update to our site’s footer, we fell backwards into a fun little easter egg. It’s easy to miss, so I thought I’d draw a little attention to it here.

When I finished mocking up the site’s new footer, the rightmost column just happened to be shorter than the others, leaving an empty space and making the design look a little off balance. To fill the space, I added an existing drawing of our mascot Ammo. This was intended as a placeholder, but it turned out that everyone liked Ammo there. He made it through the design process to go live on the site.

That wasn’t the end of the story, however, as we were soon led on a fun little diversion by an offhand comment: “He should be dressed up for holidays”. Almost as soon as the words were spoken, a bit of PHP code was implemented to automate swapping images, and I found myself drawing a couple dozen variations of Ammo for a wide variety of calendar events.

One of my favorites is the Saint Patrick’s Day Ammo. My first draft had our mascot dressed as a leprechaun. I was quite satisfied with the drawing, which was relatively detailed for something so small. But after finishing it, I was struck by some inspiration. Just like the Chicago river being dyed green, I realized that as an amoeba, the mostly-water based Ammo could also go green. I threw out my more detailed drawing in favour of a quick colour shift, making an emerald Ammo for St. Patty’s day.

I’ve included a few of the special Ammos in this post, but there are many more for you to spot on various holidays and cultural events. As I post this, the gold medal-winning Olympics Ammo is visible in the footer. Watch our footer over the course of time to see more.

When I began working at Rogue Amoeba in 2015, the company’s mascot Ammo the Amoeba was front and centre on our website. He served as the logo, and sat in the site navigation at the top of every single page.

The next year, we introduced our more subtle current logo as part of a rebranding and Ammo took a step back from the limelight. Even though he is no longer seen on every page of our site, Ammo hasn’t gone away entirely. As readers of this blog or our mailing list may recognize, he continues to pop up in various forms. He’s also served a role on the 404 error page that appears if you try to visit a page on our site which doesn’t exist.

Over the years, I’ve had fun making many iterations of Ammo:

Ammo is also alluded to frequently in our documentation, in the form of “Ammo’s <Device>” in documentation screenshots. In fact, I was using the name so much when taking screenshots that I literally just changed the names of my own devices. Now, my main Mac and iPhone are called “Ammo’s Mac” and “Ammo’s Phone”, respectively. That’s only a little ridiculous.

The truly eagle-eyed might even have noticed the appearance of the name “Ammette” in a few spots in our documentation. She’s quite rare, but she has been pictured at least once. You’ll have to find that yourself.

One of my personal favourite forms of Ammo is the real-world plush version created way back in 2005. My gigantic 90-pound Bernese mountain dog Aji usually tears apart dog toys in seconds, with a ferocity matched only by his love of pie. When it comes to Ammo, however, he must understand how much the plushie means to me. Aji gently carries it around like a little baby, slobbery but otherwise unharmed.

With Ammo appearing in so many different fun forms, we thought it would be neat to collect as many of them as we could find and put them into a single gallery. That’s now a special exhibition in our Historic Screenshot Archive. To check out all the amoeba-y goodness that is our mascot Ammo, click the priceless works of art below:

Here at Rogue Amoeba, we recently completed an overhaul of the first-run experience of our audio capture apps. Until just a few months ago, the process for installing Airfoil, Audio Hijack, Loopback, Piezo, and SoundSource was much more complex than we wanted, due to changes made by Apple in 2020. In fact, our walkthrough document for the process contained 20 discrete steps, which was certainly not ideal.

Luckily, we’ve replaced that difficult first-run experience with a far friendlier setup window, one which needs no separate documentation at all. It’s a huge improvement, keeping our users informed while also maintaining the approachability we want our apps to have.

This change provides a dramatically improved experience, and we wanted to bring it to the attention of folks who had been scared off by the previous process. But how exciting, really, can you make a permissions window?

I have a little design game I sometimes play when I’m stuck on something. Instead of thinking “What is the best way to do something?” (which is sometimes not that clear) I instead think “What would be the worst way to do this?”. Exploring the negative often helps expose a useful contrast, and it can sometimes lead me to the best way to do something. I decided to apply that little mental exercise to how we’d show off our new and much improved setup experience. As a child of the 80’s, I immediately thought that the worst way to install our software would be via floppy disk —the install medium that existed when I first started using computers. The floppies would of course come in a box, and be purchased in person a retail computer store.

As you can see above, I started by mocking up just the boxes. Soon, though, I got carried away reimagining as many different antiquated installation mediums as I could. This brought some genuine heartfelt nostalgia.

In roughly reverse chronological order, we start with SoundSource on CD-ROM:

Loopback on 3.5” floppy (requiring 25 disks):

Audio Hijack on 5.25” floppy (requiring 181 disks):

Airfoil on cassette:

And most silly of all was Piezo on about 150,000 punch cards:

I really enjoyed rendering each of these retro mediums in detail. Each was painstakingly hand-rendered as a 2D vector-based image. The stickers, boxes, and labels were first rendered out into flattened image files, and then passed through a halftone pattern filter to create a genuine printed look, before being brought back into my vector drawing app. It can be hard to see this detail from images used on social media, so here’s a zoomed-in view of the SoundSource CD:

As lovably retro as these installation mediums would be, they certainly wouldn’t be convenient. I’m grateful that the new much-simplified setup window is paired with incredibly simple download buttons on our site.

Exactly 21 years ago today, Rogue Amoeba shipped its very first product: Audio Hijack 1.0. In a small nod to our birthday, I thought it would be fun to take a look back at our app icons over the years. Below, I’ve lined up the icons for all the Mac apps Rogue Amoeba has sold since the beginning:

As you can see, our icons have changed quite a bit over two decades. This is due in part to shifts in broad design trends on the Mac, which we follow to some degree. It also reflects the reality of Rogue Amoeba having multiple designers over time. My own tenure here began in 2015, and several talented designers did icon work before me.

Early Rogue Amoeba icons, like Audio Hijack’s original audio thief and Nicecast’s satellite dish, were very detailed. This was a response to the then-massive 128×128 pixel canvas size of Mac OS X, which represented a huge size increase from the previous 32×32 icon size. Icons have recently grown even larger, up to 1024 pixels square on Retina screens. The original Macintosh’s entire screen was only 512×342, which means it couldn’t show even a quarter of a modern-day icon (and it would be in black and white to boot).

Check out this comparison of app icon sizes in 1984, 2002, and present day:

Over time, the excitement of being able to make photorealistic icons wore off, and Apple toned down their skeuomorphism. This led us to shift our icons to simpler shapes, which often include bolder colours.

Apple’s 2020 decision to switch the MacOS app icon standard to an iPhone-esque squircle shape also led to major changes. I’ve previously bemoaned the recent loss of distinct icon shapes, and Rogue Amoeba hasn’t followed Apple’s change rigidly. That said, we don’t want to clash with other app icons. We’ve updated many of our icon designs to fit in well on the Mac, while still maintaining some individuality.

In a way, this above image is more than just a timeline of icons, it’s a timeline of the apps themselves. Early on in Rogue Amoeba’s existence, there was a fair amount of churn in the product line. More recent years have been a lot more stable. I think this is a product of both our maturity as a company and of the Mac platform as a whole.

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.