Shared publicly  - 
 
Seems a lot of people are having their issues with the new Instagram app for Android. +Michael Novak and +Juhani Lehtimäki for example point out technical issues with urls and intents.

From my point of view, the biggest issue is the UI, obviously. Did the designers/developers even bother to have a look at Google Android guidelines? I noticed a lot of popular apps coming to Android lately, being just lame iOS ports without respecting the operating system's interaction and presentation rules. Just think about a nicely crafted OSX app on a windows desktop or vice versa. It would be a disaster.

I mocked up an Instagram screen this morning, trying to incorporate as many of Android's design principles as possible. I like the idea of sliding through the colorful, branded tabs, and having that color reflected at the bottom.

What do you think? Is this more like what Instagram should look and feel like on Android?
219
125
Bibhas Debnath's profile photoFrantišek Hejl's profile photojake wang's profile photoAbhilash Kuduvalli's profile photo
61 comments
 
Thank you for a good demonstration what a good designer can do!

Can I use this image on a blog post (with credit to you of course)?
 
Just a remark on the mock up: You are using the ActionBar to navigate back to HomeScreen, as ICS guideline suggest, great.
But the tab at the top is maybe redundant with this feature.. shouldn't it be removed and replaced by a dashboard?
 
Thanks guys. +Christophe Versieux , you're right. A dashboard might be a solution, but I assume that Instagram users want to dive right into the content - therefore the tabs. The actionbar is important for further navigation - compare the Youtube app. But I should have remove the carrot to the left - just a habit ;-)
 
Much closer, but honestly, I'm really hating that brown.

We should start a Dribbble playoff for this.
 
+Guenther Beyer I actually have 1 left. Are you already a prospect? Reply with your URL and I'll be happy to "draft" you. :)
 
Oh, and don't get me wrong: Instagram is a very beautifully designed app. It just feels very out of place on Android, especially ICS.
 
Love everything except the brown theme though I totally get that you're taking it from the icon. Hopefully something like that comes in an update not too far off.
 
+Guenther Beyer why the brown instead of keeping their blue? I feel like if they want it to be blue since it's their branding, it should be blue, but flat like you mocked up.

Overall, excellent mockup and much better than Instagram on Android currently.
 
+Tor Ivan Boine right, I know where it came from, but I'm wondering why. Their branding definitely includes the classic blue heading. Rather than changing the color for the sake of change, I think it's look even better (and more recognizably +Instagram) if it were their blue.
 
to differentiate it from iphone. And I agree, the brown looks better. The blue has an ios-vibe too it.
 
+Tor Ivan Boine differentiating their product between platforms is exactly what brands don't want to do. :P I think the flat blue in the overall Holo-themed app would look nice. The UI metaphors themselves make it feel right on the platform, the color really doesn't have anything to do with it.
 
I think they've done a fairly decent job of it, to be honest. The Android action bar has actually been adapted to look more Android native - gradients should be okay if variations like the YouTube app action bar are okay too. Apart from that, if they moved the tabs to the top and added the Holo swipe system, I think it would look quite beautiful.

At the moment, it seems like they valued their already powerful brand and UI recognition to keep the experience similar across platforms. They simplified the gradients and got rid of any iOS glossiness, it looks pretty great on my Galaxy Nexus! Simple gradients should be fine if the Google Play Music app is anything to go by.
 
It's not possible to have the "nomal" action bar + the "split" action bar
 
FYI: you can do a partial split by placing a LinearLayout with ActionBar.LayoutParams gravity right as the custom navigation view and giving its children the action item style. When split it will remain at the top while real action items go to the bottom and when not split (landscape, tablet) it will fall in line with and be indistinguishable from the normal action items (except maybe by divider inconsistency).

When doing something like that you have to be very careful about the number of real action items versus custom ones and ensure that you're not overloading the action bar visually. I think this app and 99.9% of all apps should be able to get away without using this technique, however. I just wanted to make it known that it is possible.
 
+Michael Novak great point. I agree that +Android doesn't need to point out every app that complies with their design principles. I'm just suggesting that they should be more selective in regards to design when selecting apps for "Staff Picks" and other featured lists. The Android team, to a large extent, controls user app discovery through those lists, especially in categories where there are more entrenched apps that bury newer/better apps. By prioritizing design as a factor in selecting featured apps, the Android team can shape user perceptions of what a great app should look and feel like.
 
Wow, thanks everybody, thanks +Paul Burke. +František Hejl, it's a mockup, you can use it for whatever you want to ;-)
 
Dude, this is fantastic, simply as a reference resource to show how to translate an iOS app to Android properly. Thanks for doing it. Bookmarked!
 
Fantastic work Guenther! Great work on the clean Android design and love the comparison between iOS and Android.
 
Looks amazing. In fact, I logged in just to tell you that!
 
The app also has functionality issues. You cannot move it to SD card and it doesn't clear the cache automatically. So you keep it installed and it just keeps your internal memory(which is little short in most android devices) keeps filling up. Thats just sad.
 
Couldn't agree more with your post Guenther. Someone send this to instagram.
 
I totally agree, the app would be much better with your mock up. I downloaded it just to try it out and have it handy just in case I feel like using it some day. But really my first impressions were that I have been able to do this for a long time with many other camera apps on android that were designed much better and had a share function that used the built in share dialog instead of a pre-programmed share dialog with only networks of their choosing. I realize part of the design of the app it to incorporate it into it's own network which is fine but I would like to see better options for the standard way of sharing and saving locally without sharing.
 
FWIW, that iOS screenshot is from an older version on Instagram. The current iOS app looks a lot more like the current Android app.

Even on iOS I think there is plenty of room for improvement.
 
There is no need for Instagram on my SGS, there is really good camera in this phone, it does not need any effects to make nice shots.
 
+Bat Lapin you can use your own camera app. Instagram is good if you want to make your photos more social.
 
what i like about instagram is that it seems to be better than all the other picture sharing apps on android, what i mean is that it seams to load stuff quicker.
 
Am I allowed to disagree with all of you? Why is such a big deal if the taps are on top or bottom? Honestly, unless the app is badly designed overall, I just don't care where they are positioned.

I look at the original Instagram and your mockup and they are both fine to me, in a general way. However, there are details on the original design that I prefer over your mockup and vice-verse.

For instance, I dislike the flat look on your mockup, I just don't like it. For the same reason I don't like Holo. In my personal opinion, it just makes the design looks boring. That's the reason I really don't care about Windows Phone, those tiles and the flat look it's just fugly. And also the reason I'll probably never buy a Nexus phone.

The brown ActionBar is not my cup of tea either, I would prefer it blue, like in the original. And I also believe branding is important. I would never design an app with different coloring on different devices. Assuming the app was unique on Android, I wouldn't mind the brown if it was not flat.

But I do like what you did on your mockup with the colorful tabs, I think it's a really nice touch. Specially since they reflect Instagram's branding/icon.

But this is just me. I know I'm in the minority and I'm not here trying to convert any of you to my point of view. I just wanted to share my opinion. I don't mind apps like Instagram (design wise) as long as they are well designed and functional.

For instance, take a look at the Foodspotting app:
• iOS: http://itunes.apple.com/us/app/foodspotting/id350727118?mt=8
• Android: https://play.google.com/store/apps/details?id=com.foodspotting

I don't know if this app's functionality and usability are any good, I haven't installed it. I'm judging it's design by the screenshots.

They clearly look the same app and use the same design elements on both OSes. Is that a bad thing? I don't think so. In my opinion, the app looks gorgeous on each OS. I think there are elements here and there on each version that distinguishes the app from each OS.

Is Foodspotting really that bad on Android? I would assume most of you think so, judging by the comments here and everywhere else. Well, I don't. I think it's a pretty well designed app and I which Android had more apps as polished as this one.

To finish, and I can't stress enough that this is my opinion of course, if there's anything wrong with badly designed apps in the Android community they are not apps like Instragram or Foodpostting. But things like below:

https://play.google.com/store/apps/details?id=com.shawei.favespot.activity
https://play.google.com/store/apps/details?id=com.mseven.msecure

It's because of things like these that Android is constantly compared to iOS and not the other way around. Overall app quality in iOS is pretty good, Android not so much. You guys are fighting pointless battles with tabs on top vs bottom instead of fighting that ugly trend on Android. Where most apps are just fugly.

Again, this is just me. And sorry for the long comment...
 
+Ricardo Amaral It's less about what the app looks like, and more about the fact that Instagram basically ignored all Android Design conventions and guidelines. And you're right, in that, they are not the only ones.
 
By having an action bar, AND tabs, AND controls along the bottom, you've increased administrative debris while reducing space left to display content -- the photos.
 
+Cassidy James Differentiating your product on Android and iOS shouldn't be something companies put so much effort into NOT doing. I don't have any specific data to back this up but I'd say less than 10% of people ever use both Android and iOS on a daily basis. Users don't care how it works on iOS, they care how it works on Android. If I am constantly using UI's like this in other smaller less-funded apps, seeing an app like Instagram have iOS copycat tabs is ridiculous.

I'm kind of sick of hearing from companies who want to design their Android app EXACTLY like their Apple-enforced design on iOS. Go back to 2008 or hire someone like +Guenther Beyer who understands what a good design can do for you brand on Android.
 
Do you know how to implements?
 
I really like your Instagram makeover, except the move to a brown theme. That makes so much more sense than the actual Instagram UI. Nice work.
 
How would you envisage this looking on a tablet? I am currently studying Android design and have noticed that in landscape / tablet view the action bar are merged, what are the best solutions for joining different looking action bars together? 
Add a comment...