Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

Submitted on
January 25, 2012
Image Size
822 KB
Resolution
1600×2000
Link
Thumb
Embed

Stats

Views
12,658 (4 today)
Favourites
49 (who?)
Comments
20
Downloads
875

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×
Twitter for Android - with ICS Theme by ghost301 Twitter for Android - with ICS Theme by ghost301
01|MAY|2012 - Made a Revision 1 of the initial design. Took some of the comments into consideration for Revision 1.

What is changed:
1. Noise effect in the top bar is slightly improved, and removed the gradient effect
2. Added virtual menu button
3. Resized the Twitter logo to slightly smaller
4. Removed the shadow on the Twitter logo in Search mode
5. New Compose UI. No longer a compose window.

--------------------------------

I loved the Holo theme in Ice Cream Sandwich. That’s the reason I made the Android ICS GUI Design Kit in PSD for Android Designer to design high quality app with stock UI elements in mind. But I am also curious how well can the UI elements in Holo theme for ICS can be applied to the currently available apps, so I decided to start with the official Twitter Android app, which is an easy one I think.

I have tried to apply stock UI elements as many as possible to show that they can be used to design high quality app and preserve the user experience (UX) that is consistent and predictable with the stock ICS. During the design, I also try to improve the UX of the app for better usability.

    Stacked Tabs - For the main tabs, I have decided to use Stacked Tabs instead of Scrollable Tabs. Scrollable Tabs can work well in this case, however, for 4 tabs, Stacked Tabs is suitable. This will allow the user to tap on the wanted tab, and also allow the user to scroll through the tabs using horizontal gesture.

    You will notice that the selected tab will have a highlighted effect at the bottom of that tab (which is a stock tab behavior). For the unselected tabs, the grey indicates that it is not selected and there is no update for that tab. The blue highlight for unselected tabs indicates that there is some unchecked updates.

    Refresh button - To be honest, I am not a fan of ‘Pull down to refresh...’ feature in the Twitter app. Call me old school, but I still prefer a Refresh button on the Action Bar.

    Search button - I have also added a Search button on the Action Bar. In the official Twitter app, a Search button (but looks like a text field) is placed on top of the content (both in Connect and Discover tab), so if you scrolled down to the very bottom of the page, you will have to scroll all the way back to the top to access it. I am aware that we have a hardware Search button, but I think it will still be easier if the user can initiate the search within the app.

    Grid Lists - The Discover tab is a good example to show how the Grid Lists can be used in the app, other than the stock Gallery app.

    Mentions Only switch at Connect tab - In the official Twitter app, the bottom bar consists of two tabs, Interaction and Mentions, which in my opinion, is redundant and confusing. So instead I have made it a switch to turn on/off Mentions Only mode for the Connect tab.


It is really interesting to see how well an app can be enhanced only with the stock UI elements in ICS and of course, well in-line with the Android Design Guideline. Let’s hope with the released Android Design guideline meant for ICS, there will be more good quality app in the Android Market.

Don’t hesitate to comment/criticize my UI concept, this is where we can learn our mistake and do better for the next one.

Android UI/UX
Add a Comment:
 
:iconticoticox:
Ticoticox Featured By Owner Nov 11, 2012
eres la verga deberias trabajar con twitter y facebook y google joder!
Reply
:icontintinytdj:
Tintinytdj Featured By Owner Oct 16, 2012  Hobbyist Digital Artist
I really liked the tweet lanes idea of a contextual tweet bar, would love to see that here.
Reply
:iconwasteandwanting:
Wasteandwanting Featured By Owner Aug 28, 2012
Great work.
Reply
:iconghost301:
ghost301 Featured By Owner Aug 29, 2012  Hobbyist Interface Designer
Thanks! Glad you like it! :)
Reply
:iconjamespurnama1:
jamespurnama1 Featured By Owner Jul 15, 2012  Student Photographer
Love It! Just wondering how would you apply the theme, just to replace twitter app/use patch/etc?
Reply
:iconghost301:
ghost301 Featured By Owner Jul 16, 2012  Hobbyist Interface Designer
Hey, thanks for the love! Unfortunately, it can't be just the skin of it, it has to be an new app entirely. There are already some Twitter app in the Play Store using the Holo skin, you can check them out if you looking for something similar. :)
Reply
:iconjscreativer:
JSCREATIVER Featured By Owner May 12, 2012  Hobbyist Interface Designer
Good! Is very similar G+ Interface!
Reply
:iconghost301:
ghost301 Featured By Owner May 15, 2012  Hobbyist Interface Designer
Thanks! Indeed, I did use G+ as one of the reference. :)
Reply
:iconjscreativer:
JSCREATIVER Featured By Owner May 15, 2012  Hobbyist Interface Designer
Yes! :D
Reply
:iconjjexperto:
jjexperto Featured By Owner May 11, 2012
Great design skills, im working on an app for android and need someone to work on the ui design, are you freelance designer?
Reply
Add a Comment: