As part of the unveiling of our Historic Screenshot Archive, I made some fun images to post to our social media accounts. Making those images was tricky, because interfaces were much smaller in the pre-Retina era. Here is how big a screenshot and app icon from 2002 displays on a Retina screen of today:

Screen resolution has increased so much that a once full-sized app window is tiny on modern displays.

The above screenshot of Audio Hijack’s main window, at a bit over 400 pixels wide, is smaller than even app icons of today, which can be as large as 1024 pixels wide.

I needed to scale the screenshot up by many hundreds of percent to be a useful size for a social media post. Enlarging with interpolation, however, turned the pixels into an ugly blur:

Enlarged with Lanczos interpolation, usually great for photos, this screenshot is too blurry.

So instead, I did a two-step dance. First, I exported the screenshot enlarged to 1000% using blocky nearest-neighbour interpolation. Next, I dropped that in my design app and resized it down to the size I needed:

This is more like it!

To be clear, we only ran this process on the social media images, like this one:

The social image for Audio Hijack. The effect is hard to notice at this size, but at some of the larger sizes it makes a big difference.

The screenshots you’ll find in the actual archive are unmodified. But thanks to this little trick, I could display old screenshots in all their pixely glory, even on Retina screens.

Earlier this year, we shipped a massive upgrade to our flagship audio recorder, Audio Hijack. In addition to over 100 new features, Audio Hijack 4 also includes an overhauled design. Without a doubt, this was the biggest design project I’ve tackled as Rogue Amoeba’s designer, and probably in my entire career. Now that it’s out, I can take you behind the scenes and show you how we went from design goals and sketches to a polished app.

Multiple Design Goals

When considering what to do for the new version, I worked out some clear design goals. Audio Hijack 3 was originally released in 2015, and it provided a great foundation. However, I knew there were places we could improve.

Less Visual Clutter: While I loved design of Audio Hijack 3, fantastically executed by Rogue Amoeba’s previous designer Christa, I felt it could be made cleaner and simpler. Audio Hijack’s critical functionality is found in the custom setups called sessions, which users create to capture and manipulate audio. I wanted to make the rest of the interface deferential to each session’s audio grid.

A More Functional Sessions List: Audio Hijack sessions are reusable and saved automatically. The list of saved sessions serves as the starting point for the app, and I wanted to improve that window by showing more details about sessions, as well as allowing the user to access basic controls without having to open them.

Better Navigation: In the previous version of Audio Hijack, a session’s recordings and timers were kept in a separate window, rather than being closely tied to each session. I felt this was something I could make flow more logically.

A Brighter, More Kinetic App: Audio Hijack 3 had a somewhat muted look, and I wanted to brighten the new version. From day one, we knew we’d be adding a new “Light” theme, but I also sought to add splashes of colour throughout the app. Our apps have also been trending towards having more and more movement, so it made sense to liven things up by adding more animation.

New App Icon: Finally, I was excited to make a new icon for the new version.

Let’s look at some of the ways we accomplished these various goals.

Reducing Clutter and Adding Colour

The design of Audio Hijack 4 came together over a long period of time. The node-based UI introduced in version 3 was a huge success, so we knew we wanted to keep that general concept intact, while improving myriad facets of it. I dabbled with various ideas off and on for quite some time, while our amazing developer Grant worked on the underlying code and new features.

Early Mocks

This is the very first mockup that I could find for version 4:

It shows just two blocks, but the connecting wire is surprisingly similar to what we ended up shipping. I knew right away that I wanted curved wires, though I was unsure if they would be worth the development effort. I also experimented with small icons under the block titles. This was quickly axed, however, because it led to too many cases where we needed to split block titles onto two lines.

In this next mock, I tried having tiles snap directly together. It’s an idea I still like, but it hasn’t yet made it past this concept phase:

These first two mockups also show that the colour scheme was fluctuating wildly. Both contained Audio Hijack’s signature oranges and blues, but the feel wasn’t figured out yet.

Getting There

Over time, my mockups moved closer to the app’s final form, and contained more and more of the eventual interface, as seen in the following mock:

This particular mockup is almost a halfway point between versions 3 and 4. The colours temporarily swung back towards version 3’s darker hues and the connecting wires have reverted back to straight. However, the sidebar on the right looks similar to the final product, with a reduction of the more ornate elements of the old UI.

Left: Version 3; Right: Version 4

The above screenshots zoom in on the shipping sidebars for version 3 and version 4. You can see the boxes around each group of blocks were removed, icons were enlarged, and the text was given more space. None of these were major changes, but together, they served to simplify the interface as a whole.

In this last mock, the app really started to look like what we eventually shipped, complete with the new “Light” theme:

This shot shows several ways we simplified the UI. The bottom bar in particular is a lot less complicated, and no longer extends all the way across the window. We also replaced multiple disparate views with tabs in the sidebar – more on that below. Even those great curved wires feel cleaner visually.

P3 Colours

One noticeable change between these early mocks and the shipping version is the implementation of brighter colours. The blues and oranges in Audio Hijack 4 dip into the territory of ‘P3’ colours, which display a little more vividly on newer monitors. Macs have shipped with P3 colour support for quite a few years, but this is the first time we felt it worth using throughout a whole app’s UI.

An approximation of the difference between standard sRGB color and brighter, more intense P3 colour.

You can only see P3 colour on a P3 monitor, but the above image gives an approximation of the relative difference. It’s subtle, but the non-P3 gradient on the bottom is less bright and dynamic than the P3 gradient on the top. Using the P3 colour system, we were able to make colours more intense than we could before.

To avoid overwhelming your eyes, these brighter colours are used sparingly, generally when we want to draw your attention. In our very basic array of colours, we use a bright orange to denote when something is “live”, and this extra pop of P3 intensity for the orange makes this important status just a little more eye-catching and harder to miss.

Enhanced Navigation via a More Powerful Session Sidebar

One of my biggest frustrations with Audio Hijack 3 was the navigational architecture of the app, which divided much of the content across different windows. For example, after you made a recording with a session, you then needed to open the Home window’s “Recordings” tab to access your audio. There, the recording was shown in a list with other sessions and their recordings. Schedules suffered from similar issues. It all worked, but the recordings and schedules for a session were not closely tied to the session itself, and I often found myself taking a few seconds to try and remember where to find them.

To improve this, we built out a much more powerful sidebar for the session window, one which incorporates these related items. The sidebar is already literally attached to the session, and thanks to the power of tabs, it now holds that session’s recordings, schedules, and even the newly-added scripting features. Sessions are now fully self-contained, and it works wonderfully.

An Improved Session List

Another element of the UI we wanted to improve was the list of reusable sessions. The previous Home window showed a rudimentary grid of saved sessions, with no indication of what was running.

The new session list in action, showing a quick summary of each session as well as which are active or inactive.

For Audio Hijack 4, we wanted to make the session list an active part of the interface. It’s now possible to start or stop a session, view and adjust the Auto Run setting, quickly scan sources, check audio levels, and see status. The new Session List window is now a much more powerful starting point for using the app. It’s also easily expanded-upon, and in the future, we’re planning to add even more.

Animations Abound

Audio Hijack 4 is a kinetic app, with subtle animations to aid in understanding. The tiles and wires move, meters bounce, and status icons pulsate to show when things are in action. I’m proud of all these animations, but there are two particular bits I want to call out.

First up are the amazing animations on the connecting wires. While the previous version’s wires could occasionally look somewhat soft, Audio Hijack 4’s wires are all drawn with vectors, so they’re super sharp. They’re also beautifully curved and feel incredibly snappy as you drag blocks around.

You may not have noticed, but these wires actually morph shape. When a device isn’t running, the wire is made of arrows showing the direction audio will flow. When you hit ‘Run’, however, each arrow changes into a pill shape, as it starts moving and bouncing to represent the audio levels of the sound passing through that wire. Hit ‘Stop’ and every single blip on the wire morphs back into an arrow.

My other favorite animations are the various status badges which show what a given session is doing. Much like a photo on a cereal box, here they’ve been enlarged to show texture (I’ve also slowed them down):

In app, these animations are infinitely-looping, vector-based, and very cool.

Marketing Too

Animations also found their way into the app’s product marketing. Animated versions of the interface can be found on the main product marketing page for Audio Hijack, as well as the welcome window we show on first launch. Using still images just didn’t do justice to the dynamic app we’ve made. Getting these various videos working required a decent amount of troubleshooting, and a bit more file bandwidth. The extra work was well worth it, however, to show off the app in motion.

A New App Icon

One final thing I’d like to discuss is Audio Hijack’s new icon. App icons serve as the most recognizable symbol for a product, and Audio Hijack 4’s icon took a long time to nail down. It seems almost nothing is as prone to endless discussion and debate as icons.

Audio Hijack 3’s bottle icon was attractive and well drawn, but the “audio in a bottle” metaphor was a bit oblique. I did briefly try to modernize the bottle concept with my own take on it:

The original bottle icon on the left, with my sketch of a refresh on the right.

Ultimately, though, this never left the early sketch stages. I next tried using some abstract shapes as a base. I still love many of the designs I created. This page of my sketchbook is particularly pleasing:

Those sketches eventually led to more refined mockups, like this one:

I was very into both abstract patterns and this particular colour gradient, which does partly mirror the orange and blues of the app’s UI. However, while this waveform-inspired look was tangentially related to audio, it lacked a strong visual link to the rest of the app.

So it was that the slanted wavy pattern was tilted to vertical and changed to orange on a darker background, to match the meters inside the app. Finally, I added a physical microphone to more clearly communicate the concept of ‘audio’.

Many of us inside Rogue Amoeba lament the recent “flattening” of app icons on the Mac, and the attendant loss of personality. While I did feel we needed to somewhat conform to the new tile design paradigm, I wanted to overlay a bit of 3D to help differentiate the shape (see also: SoundSource).

Above is my first rendition of the concept with a 3D microphone. This icon is a lot more visually tied to the actual app it represents. Once I got here, we were close, though there was still plenty of tweaking and refining. Perhaps most interestingly, the final icon actually features two small Easter eggs: the waveform is based on a recording of me saying the word “Hijack”, and the mic reads RA 2002, representing the year Rogue Amoeba was founded¹. Now you know!

Conclusion

I hope you enjoyed this peek at the design process for Audio Hijack 4. I was fortunate to work alongside a development team that was happy to spend time creating a wonderfully dynamic interface, one which shows off the useful new features and the rock-solid backend. I’m very pleased with how it all turned out.

However, I’ve only scratched the surface of all the new things you’ll see in Audio Hijack 4. I didn’t even mention major new features like manual pipeline connections or the new Global window. If you’ve used Audio Hijack before, be sure to give the “What’s New” page a look. Of course, if you’ve never used Audio Hijack, you ought to check out Audio Hijack 4 right here.

---

Footnotes:

1. Hey, that was 20 years ago! What a pleasingly round number. I doubt it will come up again anytime soon.↩︎

Not so long ago, I wrote about the design of SoundSource 4. That version marked SoundSource’s transition from a simple audio device selector into a much more powerful app. Recently, we released the new SoundSource 5, featuring many improvements, both technical and in terms of design.

Getting Better All the Time

When I think of the design process for SoundSource 5, a single word comes to mind: refinement. We revisited every part of the user interface, to deliver an update that goes well beyond the sum of its parts. The new interface both looks better and works better.

In this article, I’ll go over some of the refinements we implemented to make SoundSource 5 both useful and delightful.

Compact View

SoundSource 4 started out very small and compact, but as features were added, the main window grew. While it wasn’t massively oversized, we knew we wanted to find ways to slim things down.

The most obvious way SoundSource 5 accomplishes this is with the new Compact view. As you can see below, when SoundSource is switched to its Compact view, many text labels are removed. This significantly reduces the width of the main window, which is particularly handy if you leave SoundSource pinned open. Clarity in the Compact view is somewhat reduced, but toggling back to the Standard view quickly restores it.

The Compact view also removes text from the device selector, cutting it down to a fraction of its standard length. The device icons which remain work particularly well if you have a small number of devices attached to your Mac, as most users do. To create consistency, we also added those icons to the Standard view, where they serve as a secondary visual cue.

Animation

SoundSource does most of its work while in the background, with its only visible part showing in the menu bar. When it is open, we wanted the app to feel snappy and vibrant. One of the ways we accomplished that was by adding subtle animations throughout. This is most noticeable in the toolbar at the top of the main window, where each icon subtly moves between states.

Here are two of the animations from the toolbar:

The size and pin toggle animations, enlarged and slowed to show details

All of these animations are native CoreAnimation assets, built with a tool called Kite Compositor. Kite builds pre-packaged animation archives, which allowed me to iterate super quickly on the animations. I could open, tweak, and re-export animations without much work from the developer.

Reducing Visual Clutter

Before starting work on SoundSource 5, I took some time away from version 4. When I came back with fresh eyes, I noticed a busier interface than I wanted. The bubbles within bubbles within bubbles were logical, but visually cluttered. The best example of this was the nesting that occurred with effects.

Effects were nested two levels in

We knew we could do better. In SoundSource 5, we cleaned this up significantly, and un-matryoshka’ed those nesting shapes. The selection indicator became full width, which rid us of the bubble around individual effects. We also moved the full version of our built-in 10-band equalizer into a popover, matching the way Audio Units are loaded. This enabled us to make the entire Effects area much more uniform. Moving the EQ’s advanced controls out of the main window also allowed it to fit better in the Compact view.

SoundSource 5, with fewer nested shapes

Overly-nested interface elements are harder to parse, so this new design is a big win for readability.

Accent Colours

For many years, MacOS has made it possible to adjust the hue used for all kinds of standard controls, such as sliders, buttons, and checkboxes. Changing the accent colour setting in the General System Preference lets the OS color those controls in many applications.

Though Rogue Amoeba’s applications use many standard controls, some also use what we call a “key colour”, which overrides the system’s accent colour. For example, our soundboard app Farrago has a purple theme, and many of its controls are thus tinted purple.

Farrago’s purple key colour in action

In a similar fashion, SoundSource 4 used its green key colour on almost all the elements in the UI. For version 5, we toned this down quite a bit. SoundSource now uses neutral greys and blacks in many places, and its remaining green elements can all be re-coloured programmatically:

The default tint

This change allowed us to also provide a new appearance preference. When the “Follow System Accent Color” checkbox is turned on in SoundSource’s preferences, the interface will respect the system’s accent setting, adjusting controls to use the selected colour. Here’s a composite, showing all the system tints SoundSource can take on:

Sorry, this trippy rainbow mode is not available in the app.

These changes should make the app feel at home in almost any setup. And of course, all of these tints look great in both light and dark mode.

Big Sur’s Influence

At the virtual WWDC 2020, Apple announced MacOS 11 (Big Sur), which will bring a wholesale redesign of MacOS. Development of SoundSource 5 was nearly complete when Big Sur was first shown off, so these changes didn’t cause much in the way of updates. Fortunately, many of our design choices for SoundSource 5 already aligned quite well with Apple’s new design guidelines.

However, we did make one change specifically as a result of Big Sur. You may have seen that one of the most talked-about changes in the new OS is its updated style of app icon:

Big Sur’s updated icon style

We don’t plan to rush out updates to all of our app icons to match this style. However, SoundSource’s icon adapted rather easily, so we updated to the new, boxier style for SoundSource 5.

The impact on SoundSource’s icon

We’re hard at work on updates for Big Sur (watch our Status page and social media for more), so this new icon will fit in nicely on Big Sur soon.

Handling Applications

The last big change I’ll touch on is how SoundSource handles configuring per-application audio control. In the previous version, controlling an application’s audio required you to manually add the app to SoundSource. We overhauled this rather dramatically with SoundSource 5. Now, when an app produces sound, it automatically appears in SoundSource’s main window. It’s then immediately ready for adjustment, with less setup required.

This improved behavior seems very natural now that it’s implemented, but it didn’t occur to us for SoundSource 4. Sometimes you arrive at a new solution to a problem, and it’s so obvious that other solutions no longer make sense. That was very much the case here.

Try It Yourself

One of the major areas we focused on for SoundSource 5 was doing existing things better. The update is faster, smarter, and takes up less space on your screen. Overall, it’s a tremendous leap forward in quality, and we couldn’t be more pleased.

If you’re new to SoundSource, learn more on the main SoundSource page. For existing users, we have a helpful “What’s New in SoundSource 5” page available. SoundSource has become an indispensable tool for controlling audio on our Macs, and we hope you’ll find it similarly useful.

I’m going to take a quick break from my usual posts about audio software design to talk about about a special personal side project I’m launching today: Everywhere School.

Everywhere School is a real-time web directory of educational live streams for kids stuck at home during the Covid-19 pandemic. The site shows a live chronological list of upcoming streams from artists, musicians, authors, and more. I’m adding streams each day, and will keep adding more as this isolation period goes on. Submissions are welcome.

I limit screen time for my kid, but these live streams have given our long days a much-needed combination of education, entertainment, and just plain seeing another gosh darn real person in real time.

The night before last, my family watched a live concert, after which we tuned in to a short talk on astronomy. That stream included a telescope tour of the moon’s Sea of Tranquility, as well as guidance for watching as the International Space Station orbited over our city. We managed a tour of outer space, all while keeping in strict isolation.

Everywhere School was built in a week or so of spare time in partnership with a web developer. In this difficult time, we hope it can give some relief to both bored children and stressed parents.

Introduction

When I start a design project, one of the very first things I do is come up with a colour scheme. For me, this is a limited set of colours which will be used for all the elements in our interface, including backgrounds, icons, and text. I think it may be helpful for others to see the thought that goes into this, so I’m going to walk through each step of my process.

General Strategies

Before I get into specifics, let’s cover some good general strategies for making a colour scheme.

Limit Your Number of Colours

To start, you should limit the colour set as much as you can. Using more colours than needed can make an app look sloppy and haphazard. A good interface should be consistent, and in most cases uncluttered. Having a set of colours, established at the outset, saves us from picking random colours each time we need one.

Understand Each Colour’s Job

Think about the job each colour will be performing. Perhaps one colour will be used to show activity or status, so it should be relatively high-contrast. Some colours provide secondary information, which can subtly fade into the background. For the rare colour that’s used to alert us to problems, something stark and eye-catching is needed. Each colour should have a well-understood role in your interface, and that role should guide your selection.

Break the Rules When You Have To

There aren’t any hard and fast rules that must be followed. It’s wise to follow sensible guidelines, but if you need to bend or break a rule, or come up with your own, go for it.

Selecting Our Base Colours

Ok, time to pick some actual colours. I generally start my colour systems with a set of three primary colours, which form my base. These colours are:

• Key/branding colour

• Primary content colour

• Primary background colour

We’ll need more colours than that, but we’ll obtain additional colours by mixing these base colors.

Getting Inspiration

I could just start picking random colours I like, but I usually like to begin by viewing existing color sets. A site like Color Collective is a fantastic resource for this. However, I also like to look to the real world for inspiration.

For example, I have a shirt I like that mixes orange, green and white. I’m going to use it as a base for doing a quick experimental re-colouring of Airfoil Satellite for iOS.

Here’s the shirt:

And here’s what Airfoil Satellite for iOS looks like currently:

I’m going to combine this mockup of Airfoil Satellite with the colours from the shirt, and we can see what happens. I should note that the orange and green I’ve chosen don’t traditionally go together, but I’m going to demonstrate how we can still make them work.

Key Colour

The key colour is going to be the main colour for anything I want to denote as interactive. It’s not usually going to make up the majority of pixels in any interface, but it’s the colour most closely tied to the identity and branding of the app. For example, the key colour of our soundboard app Farrago is purple.

This colour will generally be used to show status or activation, often on things like checkboxes and sliders. It will probably also be featured prominently in the app icon.

I’m going to use a bright peachy orange, inspired by the shirt, for the key colour.

Primary Content

The primary content colour I’ll use for the most important content, like text. It’s generally less intense than what we used for the key colour.

The white from the shirt for this is a good choice for this, as it’s solidly neutral.

Primary Background

Finally, the primary background needs to contrast strongly with the primary content. It might not be obvious at first, but the primary background colour will actually be the colour that makes up most of the app on a pixel to pixel comparison.

For this, I’ll start with the green colour from the shirt. However, it needs to be darkened to get a background colour that contrasts with the other primary colours we’ve chosen. This gives us a very deep green, which I like.

Picking Utility Colours

The above three selections provide a good base of colours to work with, but even the most minimal app will need more. With that in mind, I’ll also select some utility colours

Warning/Alert Colour

When something goes wrong, the user often needs to be alerted of something they need to look at. Like a poisonous frog in the jungle, I want to make sure this colour stands out from everything else.

My Airfoil Satellite mockup doesn’t show error states, but most apps will need them at some point. I selected it both because it’s bright and because it will stand out from the key orange colour.

Disabled Colour

Elements in our key colour also often require an alternate “disabled” mode. For this, I generally use a moderately-desaturated version of the key colour, rather than a flat grey. It’s related to the key colour, but slightly washed-out.

For this, I’ve taken the key colour and desaturated it from a bright peachy orange to a more muted tan.

Choosing Alternate Colours

The above is a good base of five main colours, but this interface requires additional options.

Secondary And Tertiary Content Colours

These next colours will be used for supplementary bits of text, icons, and a few other things. In the app’s hierarchy of content, these colours will be used for the less essential, but still important, elements in the design. This is content that should be legible when focused on, but it should also slightly fade into the background, rather than calling attention to itself.

To make these colours, I combine my base colours somewhat like a painter mixes paint. I usually do this by literally putting one colour over the other, and reducing the opacity of the overlaid colour until I get a hue and brightness I like.

This is functionally the same as selecting a colour on a gradient between two primary colours. Here are secondary and tertiary content colours presented on a gradient that goes between two of our primary colours:

Alternate Background Colour

This design will also need a colour to use in the background in places where elements should be subtly grouped together. This colour should be close to the primary background colour, but different enough that people can differentiate it.

For this, I’ve taken the primary background colour and brightened it by about 10%-15% for use as the alternate background colour.

A Colour Mixing Note

One important note here: If you’re mixing with desaturated colours (including black or white), you might find the result looks a little less colourful than desired. I often find that I need to boost the saturation of the resulting mixed colour manually.

In Sketch, my design app of choice, colours farther to the right in the colour picker are more saturated, and colours to the left are less saturated. If your initial result is a bit dull, pick something a little to the right of it instead.

Trying it Out

We’ve now got a comprehensive set of colours, which should handle just about any job, at least for this app. Let’s look at all of our colours together:

Even though orange and green might be expected to clash, this entire group looks relatively harmonious, mostly because it was all derived from just three primary colours.

This gives us our final colour looks when applied to Airfoil Satellite for iOS.

And there we go, a solid re-colouring of our existing interface. Not all the colours I selected are visible in this screenshot, but when designing an entire app, it’s very helpful to have them picked out ahead of time. We’re not currently planning on actually overhauling Airfoil Satellite, but the above provides a great example of how colours that might seem to clash can work harmoniously.

Give It a Go Yourself

The process I’ve outlined can be used when designing an app, a website, or almost anything. I find starting with a colour scheme makes the rest of the design process much easier. I hope it helps you with your own work.