03 Jun Making droids look good

It’s always a huge leap for a designer to come up with designs for a platform you’re not familiar with. I remember feeling extremely uncomfortable at first when I designed my first iPhone icons and interfaces, and while the iPad was a logical extension of the iPhone UI, it still felt like a significant step to take.

Androids and doubleTwist

Imagine how I felt when I was sitting at my desk, Nexus One in one hand and pen in the other, after being asked to design doubleTwist’s media player for Android. Android doesn’t have a very nice media player in terms of design (I’m carefully picking my words here – I don’t want to offend the undoubtedly hard working people at Google) and it was easy to just go the way some developers go: make an iPhone app, shoehorn it into Android, and call it a day.

We wanted something that actually advanced the state of the art. I sure as hell wasn’t going to use an entirely new platform for months just to ape another. It was a mixed blessing to have so little limitations on what constituted a ‘native’ user interface.

Android has its guidelines, but most apps (even the Google-sanctioned Twitter app) have a very ‘custom’ appearance. We opted for a look that works well on the various devices and custom ‘shells’ (notably, HTC’s terrible “Sense” interface) and arrived at this muted, native-looking yet polished visual scheme, which also helps users navigate the app in direct sunlight, where OLED screens like the Nexus One’s tend to be hard to read. Subtle usage of textured surfaces in the application also help prevent color banding on the color-limited OLED screens.

I’m happy to have this in the hands of Android users. It’s sometimes depressing to read comments on tech websites of people exclaiming: “Why would you even care about how a media player looks or works? You play music and turn off the screen!”, but I am sure there’s a lot of people who will appreciate the thought and details that went into this app. And that makes it all worth it.

The player is available on the Android Marketplace for free for a limited time.

Related:

    My dream browser.

    I got inspired by the iTunes sidebar today to mock up a browser interface that I had thought about for the last few weeks. In iTunes, a 'hub...

    Plot Twist

    On March 30, I raised quite a few questions on Twitter when I changed my handle from the old @cocoia to @sdw -- a shorthand for my full name,...

    Designing Warships

    Warships, a game designed by me and developed by the Canadian Edovia is now available on the App Store. It's a great, simple game of naval...

    Designing Classics

    I didn’t intend to write a single letter on my blog before the impending redesign of all my websites, but here I go anyway; today, Phill...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

36 Responses

  1. 1
    Jerome 

    Very nice design. Didn’t think Android could even house a nice looking app :)

  2. 2
    LKRaider 

    Would be great to see more Android apps that look as good as this one!

  3. 3
    Tuomas 

    That’s some very slick UI design right there. Love the subtle gradients and icons.

    This app (+ doubleTwist for Mac) has caused me to actually think whether my next phone really should be an iPhone. With doubleTwist offering seamless media sync, there are even fewer reasons to choose the iPhone over an Android phone.

  4. 4
    Ryan 

    Great work, Sebastiaan.

    This sort of fit and finish is a rarity amongst Android apps. Quite an achievement.

  5. It’s interesting that you mentioned shoehorning an iPhone app onto Android. My first impression of the playback screen was decidedly iTunes-like from the icon buttons to diamond scrobbler. The interface clearly isn’t Apple-native but the style is, and it looks very good. Curious that the design had to compensate for the Nexus One’s flawed display.

  6. Android should evolve its own taste and style. If I want an iPhone, I buy one.

  7. It looks fantastic, congrats! You’ve definitely set the bar of design quality for Android apps.

  8. 8
    Long 

    Just wondering exactly why do you think HTC’s “Sense” interface is terrible? The “Sense” music player looks quite similar to what you’ve just designed with the black – transparent gradients.

  9. 9
    Fergus 

    Superb!
    The second well designed Android app (pipped by Radiotime).

    Huge thanks.

  10. Awesome work!

  11. 11
    Jeremy 

    I always thought I loved Apple and was an Apple fanboy. Lately I’ve been realizing that I’m a design fanboy. This app and its design is amazing. I was using a competing third party (is there a third party with Android?) music app and hated having to tap through 5 windows just to play a quick song while I brush my teeth. I know this is kind of counter to you point of designing an Android app as an Android app, but man would I love this thing for my iPad. Splitting up videos, video podcasts, and audio was a huge mistake by Apple. I love doubleTwist more and more as I use it.

  12. 12
    James 

    It looks great, but it is very reminiscent of the iPhone’s music app and QuickTime on OS X.

  13. I don’t even own an Android device at this time, but I really appreciate all the trouble you took to make this design. It really is gorgeous! I’d keep my screen on just to gawk at it.

  14. 14
    Darwin 

    The Sense player is pretty good. It has a bar on the left you can press to bring up your whole music list which this one lacks. Requires you to use the back soft button instead which is not as good an interface. DoubleTwist is very much a beta product. Don’t think for a second it will replace the integration between iTunes and an iPhone. Very far from doing that.

  15. 15
    Chrigi 

    Finally! An Android app with a user interface someone actually thought about!! :D It’s really awesome that you even took some of the OLED restrictions into account.

  16. 16
    Kevin Newman 

    I’m interested in checking this out, but the Android app doesn’t list any of the music that is currently on my HTC Incredible. I’m launching doubletwist on my Mac now, but it takes at least five minutes for the program to launch, and then it uses 99% of the CPU just idling, so it might be awhile before I can tell if the Android app is any good. I’m going to go ahead and guess that it doesn’t feature any sort of EQ for the audio.

  17. I’m not familiar with Android’s interface so I don’t know which elements are your design and which are default but at first glance this interface reminds me of the iPhone’s iPod controls.
    Still, good job.

  18. 18
    John Smith 

    Apple should hire you to work on iTunes/iPad/iPod UI. Brilliant job!

  19. 19
    Eric Burke 

    Your “color banding on the color-limited OLED screens” comment is an unfortunate misunderstanding. Resorting to dithering to fix the banding seen on the Nexus One is the wrong approach. Instead, set the Window’s format to ARGB_8888:

    public class MyActivity extends Activity {
    @Override
    public void onAttachedToWindow() {
    super.onAttachedToWindow();
    Window window = getWindow();
    window.setFormat(PixelFormat.RGBA_8888);
    }
    }

    Alternately, you can use a custom theme and set the window background in that theme. Just make sure the window background has an alpha channel, for example #feffffff, and this seems to trigger the correct color format.

    Once you use the right color format, the banding will go away and you guys can move away from dithering, resulting in a far more polished UI.

  20. Superb work. Congrats on going the extra (200) miles. Martin

  21. 21
    Manu 

    Hey Sebastiaan! It was good to meet you in SF when we went to Latin American. A freind just fwded me this link as I jus switched to the N1. Suprised and more so glad to see that this is your work! Amazing job on the layout. There is one quip I have though (and it is also in the default player). I really like to Browse by Genre and seems like there is no way to do that. Do you expect that to show up in a future version?

    The other feature which I saw MixZing implement was to enable the player controls and artwork to show up when the phone is locked up. This is a huge addon especially when using the app while driving. Miss it dearly from the iphone :)

    In any case, congratulations on a fantastic job done. Let me know when you are in SF again or else I’ll just run into you at Slightglass – haha!

    Cheers,
    Manu

  22. 22
    sebastiaan 

    Thanks for the comments, guys! I (and the rest of the team) really appreciate it.

    Good seeing you post, Manu. I’ve forwarded your feedback to the team, and we’re certainly eager to get stuff like widget / lockscreen playback going.

    I’ll be here until the end of the WWDC week.

  23. 23
    ab 

    “I sure as hell wasn’t going to use an entirely new platform for months just to ape another.”

    That’s funny, because your visual design is an almost complete clone of Apple’s iPod interface on the iPhone. Seriously — you couldn’t get much closer to Apple’s design if you tried. The icons for ‘loop’ and ‘shuffle’ not only look almost exactly the same, but they’re positioned on the screen in the same place, and they even have the same shade of glowing blue when highlighted. The five white stars — same. The shaded translucent black motif. The ‘elapsed time’ and ‘remainin time’ — same white on black, same position on the screen, same relative size, nearly the same font. The progress bar — okay, well, you’re using a diamond instead of a circle, which actually is a nice improvement IMO.

    Maybe you don’t even realize how unoriginal this is because you’ve just come to expect that the way Apple does it is the way a music player should be. But all these little details are NOT necessary to the good design of a music player. They are just some good choices Apple made. I’m sure there are other, completely novel approaches out there just waiting to be discovered. Not by you though, it seems.

    I don’t really care (too much) that you are “borrowing” from a briliant design — people do it all the time. But doing so and then trumpeting how original and awesome your design is in a post where you trash other designers just makes you look like an ass.

  24. Aggressive but elegant. I do like it.

  25. 25
    sebastiaan 

    ab: That’s an interesting flame and a series of fantastically exaggerated statements, but I suggest you take a Nexus One with the app in one hand and iPhone in the other and start checking your facts.

    Also, thank you for posting completely anonymously, so I can’t actually address your comment properly.

  26. 26
    Willy 

    @sebastiaan: address him anyway, he brings up some good points.

  27. I don’t think ab’s statements are fantastically exaggerated.

    Some graphic metaphors really can’t be changed without losing legibility (shuffle, repeat), conventions are well set in this field and should be observed imo.

    The overall look of the interface really brings to mind the iPhone’s though. As I said earlier I don’t know which elements are Android’s default and which are totally new but the black scheme with the soft white gradients is Apple’s look.

    The pictograms for Albums, Songs etc are variations on Apple’s own and the position of the controls also evokes the iPhone’s iPod app.

    I wouldn’t call this interface totally innovative therefore but I refrain from further judgement because I can’t use the app and compare it with the iPhone.

    Nothing wrong with taking hints from Apple but surely a lot more could have been done to create an original interface. This one, though, might be exactly what the app needed and might blend perfectly with the other apps on the phone.

  28. 28
    davbak 

    @sebastiaan

    Would love to hear what is so horrible about the “Sense” interface and/or music player. My main grip with the Sense music app is that it can be sluggish, but I really think that might have more to do with a slow and fragged SD card. Defragging the card on occasion seems to help most of the music apps I’ve tried, including DoubleTwist.

    BTW, I’ve tried so many music apps but I almost always end up coming back to the default Sense app.

  29. 29
    foljs 

    Actually it DOES look an awful lot like iPhones player, at least the controls screen.

    And the “black with subtle gradient highlight on top” panels are as Apple as “liquid aqua” buttons once were…

  30. 30
    Fill 

    Thankx for the great app for android. I was finding for a long time android player with cool design, and now its here.
    By the way, why you think that htc sense is terrible? Thought that its shiney dark and very “applesque” look

  31. 31
    Alex Buga 

    In my oppinion it could have looked exactly like the iPhone. But I think this one looks cooler, and I am an ex iPhone user.

    I find it really cool that someone has gone all the trouble and created a cool app for Android, because all the Android apps look very crappy.

    Keep up the good work Sebastian!!!

  32. 32
    Bram de Vogel 

    Hi Sebastiaan!

    Since I have been an Android user for a few months (HTC Desire, so yes, the Sense UI..) I really needed a good music player for when my iPod wasn’t around. Now there were a few alternatives for iTunes syncing to Android, but this app looked so good I couldn’t resist it :)
    Haven’t regretted this for a second, everything looks awesome and functions well! So, thanks a lot!

    (Actually, I would be delighted if you could spice up some more Android apps. The platform deserves some design love!)

  33. 33
    Oliver 

    I googled “double twist desginer” just to find out who designed this amazing looking app. In my mind its still the best looking Android app around. Nice job!

  1. [...] Cocoia Blog » Making droids look good [...]

  2. [...] be done with a minimal set of guidelines, and no sticky concerns about duplication of functions. [Cocoia Blog] Thanks, [...]

  3. 36
    REVIEW IT BEFORE YOU BUY IT!!! (via Trackback)

    **YOUTUBE VIDEO REVIEWS ON THE HOTTEST ELECTRONICS OUT**…

    #1 SITE FOR THE LATEST REVIEWS ON THE HOTTEST TECHNOLOGY HITTING THE MAINSTREAM!…

Trackbacks

  1. Download This: doubleTwist Player | Best Android Apps
  2. A Boy And His Android » Why the doubleTwist Android app looks so good
  3. REVIEW IT BEFORE YOU BUY IT!!!
Leave a Reply