Posted By Christa Mrgan on February 15th, 2012
Powerful and flexible enough for all kinds of tasks, Audio Hijack Pro has been the go-to application for audio recording and manipulation on the Mac for years. But with its power comes complexity, and we’ve long wanted to give people a streamlined way to record any audio on their Mac. More recently, we also wanted to test the waters of the Mac App Store. And so the idea for Piezo was born — we decided to make audio recording on the Mac simple and fun for everyone.
Grant had just joined our team, and Piezo was the first project we worked on together. It was also the first app I designed from the ground up here at Rogue Amoeba. Exciting! So here’s a rundown of how it progressed, from the early sketches to the final shipping product.
The very first interface was a work of programmer art, humble but functional. After coding up the application’s backend and getting things working in a basic state, Grant gave the GUI a working first pass:
Grant’s Primordial Piezo
As you can see, the title bar hints at Piezo’s origins. But “Simple Audio Hijack” was just a placeholder name, keeping the seat warm until the day our friendly support technician Chris suggested we call it “Piezo.” Anyway, that’s what the app looked like the very first time I used it. After playing with this tech demo a bit, the team got together and hashed out the scope and functionality for the true version 1.0.
We wanted the app to be obvious, convenient and fun. I knew from the beginning that I wanted it to have analog VU meters with bouncing needles, a clearly-labeled source selector, and a big, friendly record button. I also knew I did not want multiple buttons for simple recording options. A binary system was far preferable to the unnecessarily complicated array of options you see in, say, elevators in two-story buildings1.
The First Piezo Wireframe
I laid out everything in descending order of importance in a simple wireframe. From the top, there’s the audio source and big friendly record button, then the recording settings, recording name, and time counter. The VU meters are at bottom, along with stripes on the lower right which would eventually be speaker lines. These were a nod to the fantastic Braun radios designed by Dieter Rams, like the RT-20 which ultimately inspired Piezo’s black front panel and wooden frame:
After the initial wireframe was accepted, I started work on a more sophisticated rendering of the app. While searching for various examples of VU meters upon which to base my own, Grant suggested we move the meters to the top of the window, and I immediately agreed. It was such a simple and obvious idea; I had put them down below because it seemed the audio source and record button were the things to focus on, but looking at analog devices, I saw that the meters were consistently the most prominent feature. With the flow of the app shifted slightly, I also moved some other things around and began to play (haphazardly) with textures:
So now we had something that looked like Piezo. Of course,
cringing looking at this now, some problems immediately stand out to me:
The iterations continued, and I played with adding the wood frame and changing the color of the hours and minutes portion of the time counter:
This was closer, but this walnut texture was no good, coloring the “Hours:Minutes” section of the counter wasn’t working, and the rough texture I gave the plastic was all wrong. Next:
After a bit more fiddling with colors, textures and overall brightness, I was happy enough with this to ship it. Looking at it now, there are so many things I’d like to improve. I’d love to take another crack at the plastic texture, and I’d widen the counter (the numbers are just slightly off-center, due to differences in how OS X and Photoshop render text2). I also want to work with Grant on improving the settings popover, to better integrate it with the rest of the app. The great thing about software is that it’s never really finished, so I can keep tweaking these pixels for future updates.
I had to stop somewhere, though, and it was time to move on to the icon. I sketched some ideas and used a high-tech scanner (i.e. my iPhone’s camera) to pass them on to Paul, Quentin and Grant:
I still like the net-catching-soundwave idea on the left. With all of the audio capturing we do, I just might get to use it for another app some day, so don’t go stealing it. The middle one is a reference to the name “Piezo” (which comes from piezoelectricity) as well as Superman’s Fortress of Solitude. We decided the one on the right was the best for Piezo, though, and I set to work on it.
Umm…nope. Nuh-uh. These were definitely not good. This was a problem, because while we all liked the concept, for use on Mac OS X, the icon needed to approximately fit into a square, making the face way too tall (regardless of whether I emphasized the VU meter or the record button). Oy vey! I went back to the reference images I had originally collected, and realized what it needed:
The handle made all the difference. It totally solved the height problem while keeping the icon square. Success! After a few more tweaks, the final version looked like this:
With icon and interface finalized (for now!), we continued to test and tweak the app until it was ready for release.
So there it is, the process from programmer cut-and-paste art to a final, shipping app. Piezo was a super fun project, and I look forward to continuing to improve it – I have tons of ideas for it. For now though, I hope you’ve enjoyed this tour through the evolution of Piezo, and I can’t wait to show you our next project. Soon!
Until then, check out Piezo now!
1. If a building has only two floors, an elevator only ever has one travel option (to the floor opposite the current one), so why even bring the numbers “1” and “2” into it? Not to mention that the “Close” button never responds, “Open” is pointless – ARGH!
In Alice’s world, “the books would be nothing but pictures,” and in mine, elevators in two-story buildings would have no buttons at all. When passengers stepped in, the doors would close, the elevator would move to the opposite floor, and the doors would again open. I can see a case for keeping the button marked “Alarm”. Maybe. ↩
2. Why doesn’t Photoshop use OS X’s font-rendering? Who knows! ↩