Review + Interview: Artist Info and Johnny Westlake

Enjoy a great Metro-inspired app that compliments your music experience

When Microsoft released the Zune HD, it was lauded for its sleek design, stellar audio quality, and, most notably, its user interface. Eschewing excessive chrome for a flat design with gorgeous typography and svelte animations, the design language, code-named “Metro,” has since served as a very important thread in the unification of Microsoft’s products, particularly Windows Phone and the upcoming Windows 8.

What makes “Metro” unique is the focus on content rather than gaudy aesthetics. There is no faux leather, fake wood paneling, or replica torn paper design elements that distract from the content the app is presenting to the user. When a developer get the Metro UI design philosophy right, the outcome can be quite visually pleasing, as is the case with a new app from developer Johnny Westlake, “Artist Info”.

Artist Info brings to Windows Phone a faithful reproduction of the beloved screensaver feature from the Zune HD, which Microsoft sadly omitted when they adapted the Zune player software for their phone devices. When listening to music on your Windows Phone, launching the screen saver feature of Artist Info sends you into a full-screen experience of scrolling typography and moving imagery, much like the now-playing experience in the desktop Zune software, on the Zune HD devices, and on the Xbox 360. While the music plays, typographic metadata about the artist, album, and song that you’re listening to is combined with a series of full-bleed background artist imagery, producing an enjoyable way to experience the music you’re listening to.

However, this is only the beginning. Artist Info has even more features for the music lover. Tapping into Last.FM’s treasure trove of artist biographies, tour dates, related artists and photos, you can easily learn more about your favorite artists, save them to a pivot on the main page, and even jump directly to similar artists in Zune. The app is also fully Mango-ready, allowing you to pin the screensaver feature to the Windows Phone Start screen for easy access. There is also a music browser (beta) that allows you to browse and play your own music collection synced to the phone directly from within the app, so, in a sense, Artist Info can completely replace the built-in Zune music player as your default player interface. It’s that good.

The developer, Mr. Johnny Westlake, did an incredible job getting the animations to run smoothly which he stated took quite a bit of technical work on his part. Also, his adherence to the Metro UI design guidelines helped ensure that this app as gorgeous as it is functional. This isn’t just true for Artist Info, but for his other apps as well. At the time of this writing, Mr. Westlake has 11 apps in the Marketplace, including some useful tools such as Bing Image Search, which I use a lot since, for some reason, you can’t save images without going to the website when using the built in Bing image search functionality in Windows Phone. He also developed an app called Springy, which is a Formspring client.

A particularly gorgeous app by Mr. Westlake is Nibbbles, which pulls content down from the Dribble.com website – a staple of graphic artists and designers.

Mr. Westlake was kind enough to grant us an interview, where he shed some insight on his apps, design philosophy, and thoughts on being a Windows Phone developer. He will be graduating university soon and we here at Glance and Go Radio wish him the brightest future. We have no doubt great things are coming his way.

Interview with developer Johnny Westlake

1. Can you tell us a little bit about yourself? Are you a university student?

I’m a University student at City University London, studying Computer Science with Games Technology, though since I’ve started the course I’ve taken interest in a lot of Human Computer Interaction and Data Visualization modules.

2. How long have you been a developer?

Well, the first program I ever properly distributed was Springy! at the launch of Windows Phone 7, so about 15 months?

3. Why did you choose to develop for Windows Phone? What has the experience been like using the tools and have you developed for other platforms?

I used to play about animating user interfaces in Expression Blend before WP was announced, using Silverlight and WPF, so I was certainly familiar with playing around the user interface side, so it seemed like a good idea. I’ve always found Blend pretty great at creating UI’s, and Visual Studio’s intellisense and debugging tools make creating and understanding how the framework works pretty easy. It helps that there’s so much documentation out there too.

4. You have an excellent eye for design and aesthetics that is evident throughout your apps. What is it that you love most about Microsoft’s design language code named “Metro”?

I like most that I don’t have to spend too much time drawing thing’s to be honest! I’m a terrible artist, and drawing icons or images just isn’t my thing. Thankfully you can get away from that pretty easily with WP, you just have to spend a lot of time experimenting with font weights and colours.

I actually prefer the Zune HD style rather than Windows Phone’s Metro – I’ve always found the animations more natural and the fonts and little personality touches come together better in the Zune, so I like to try and bring some of that to Windows Phone too. (Random aside: I wrote a lot of the original Metro design language Wikipedia page, although it’s mostly been replaced / hacked up now)

5. I especially love the look and feel of your app “Nibbbles”. How do you approach designing your apps and adding the code infrastructure to make it all work?

Nibbbles was a funny one – I went from waking up with a design idea but no actual app to put into it in the morning, to having completely finished and submitted the application to the marketplace in the evening.

Typically I start by designing – I open up Microsoft Expression Design, and then try and create *anything* that looks good. I don’t usually have much in mind, other than something “different”. Unless I’m making a really simple tool, I don’t usually like sticking with the kind of “default” Metro style (or if I do, I like to do it really well) – to be completely honest I don’t think it’s that great – at least compared to the older Zune HD style (which I actually borrow quite a bit from in a lot of apps to make them look nicer).

With Nibbbles, I was looking at iPhone applications the day before and seeing how nice they work with a bit of chrome around things, and I wanted to replicate that with Windows Phone, but still keeping with something that was clearly meant to be on Windows Phone. The Metro guidelines advise to drop chrome, but to be honest, there are times where chrome just looks nicer, or it’s more helpful, and it still fits in with the design. There’s just not a lot of good reasoning for always dropping chrome – and the guidelines are just guidelines – developers shouldn’t feel scared to go out and experiment.


So I just spent an hour in Expression Design drawing up simple designs that use a bit of chrome (in fact, I came up with two designs here – the other is used in my Imgur Uploader app, which I also think looks very nice). Once I had the basic look, I went out to find a simple web API that I could this design for. I’d made the design, but I had no use for it. After a little bit of searching I came across Dribbble, and had a look through its API which was delightfully simple. Then, thanks to how great and simple the design tool combination of Expression Blend & Visual Studio are, it only took about three hours to hook up the whole thing.

• «Previous Post
• Next Post »