I’d like to start off with this fun fact: Ambie’s code is 100% open-source. If you’re a developer or you’re simply curious to dive straight into the code, check out the GitHub repository here: https://github.com/jenius-apps/ambie. Take your time and enjoy the experience.
I’m not a designer, but I put a lot of thought into Ambie 4.0. I wanted to document some of those thought processes in this article just for fun. I don’t know if it helps anyone, but at the very least I will look back at this and see what I was thinking. Hope you like it, too.
The Shell
Ambie’s design has evolved drastically since it launched three years ago. The focus on Ambie 4.0 was timeless design. I wanted something that can look modern, native, and refined for years. I didn’t want to chase a trend that might sputter out in a few months. Grounded with this principle, I decided to implement my own shell instead of using the built-in NavigationView that Microsoft provided.
Ambie’s shell is comprised of a Mica-backed panel on the left hosting the primary navigation buttons and an opaque content panel on the right that will host the app’s various pages. When you shrink the window, the menu panel doesn’t collapse into a hamburger menu. I felt this was a vestigial feature — a remnant of the days when we use to build apps for the best phone OS I’ve ever used, Windows Phone. Collapsing to a hamburger menu was necessary to support phone-like screens. But today, Windows PCs tend to have wide screens with plenty of horizontal space. There’s no need to completely collapse the left panel.
I’m not a designer, so I have no idea what I’m talking about. But this feels clean. It’s simple yet flexible. It’s stylish due to Mica, yet refined. Comparing with Ambie 3.0, I felt this layout was the foundation of my timeless aspirations.
The Menu
The first layer on top of the shell is the navigation menu. This starts with the Ambie logo at the top, followed by the search bar, primary navigation items, and finishing with the footer items.
When selected, the navigation items display your machine’s accent colour, which was inspired by GitHub’s notifications page. This was a contentious decision; I received some feedback that the selected item’s design is not consistent with WinUI’s design pattern. Again, I’m not a designer. But my instinct told me that this new shell and layout was overtly simple, so it needed an element to pop out — something to act as a bold, visual anchor point. A fully accented navigation item felt right.
The Now Playing bar
The Now Playing bar shows the playback controls for Ambie, which includes the play button, the volume slider, the list of active sounds, and some buttons that related to playback.
This was probably the most difficult component to design for Ambie 4.0. It went through numerous iterations, with a temporary belief that each one was the final design and then having to scrap it again. Here were the requirements for the Now Playing bar:
- It must always be visible, no matter what is displayed in the content page
- It must be compact, yet provide all the necessary information of active sounds
- It must not fully obstruct the content
For most music players, the playback controls are in a bar at the bottom of the app. I wasn’t a fan of this design for Ambie primarily because Ambie’s had the playback controls at the top of the app for years now. To make a drastic change and move it to the bottom without doing due diligence would lead to a poor upgrade experience for Ambie’s loyal customers. More importantly, it just doesn’t look good at the bottom.
I eventually arrived at this compact design after being inspired by Apple Podcasts on macOS. While not intentional, I also arrived at the same translucent design which partially shows the content underneath as you scroll. The translucency is achieved with Acrylic material.
The Content
Last but not least, the content pages had a few changes. The home page looks the same as before at face value. But the sound cards are smaller, letting you see more content. Higher information density was one of the design goals, and I feel Ambie 4.0 has addressed that well.
As you hover over the sound cards, you’ll be greeted with an animation that will display the play or pause button. You can click on these buttons to perform the action, or you can click on the entire card. I wanted make sure people knew how to start playing a sound, so showing a play button on hover solves that. However, it’s also intuitive to click on the entire card. So I ensured that clicking the entire card and clicking the button performs the same action. Together, this implementation is intuitive and informative.
As you play sounds, you’ll notice a new circle in the bottom right corner of the sound card. This is meant to mimic a breathing animation. It’s a small indicator to tell you that this card is actively playing. I will be using this breathing animation in more places in the future, and I wanted to introduce it here first.
So that’s a slice of the design thoughts that went into Ambie 4.0. I’m hoping I achieved my timeless design aspirations, but only time will tell.
Still want to read more? Check out the next article: Architecting Ambie 4.0.
