Android UI Design Trends

38
http://gplus.to/antonioleiva [email protected] Leiva Gordillo @lime_cl Android UI Design Trends

Transcript of Android UI Design Trends

Page 1: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

Android UI Design Trends

Page 2: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

http://limecreativelabs.com http://goo.gl/iEUPpH

http://gigigo.com

Page 3: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

ICE CREAM SANDWICH (HOLO)

Page 4: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

Page 5: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

Android UI/UXhttp://androiduiux.com/free-design-resources/

Android UI Patternshttp://www.androiduipatterns.com/

Android Design in Actionhttp://goo.gl/EQpcGd

Page 6: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

BANDHOOK PROTOTYPE

Page 7: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

KEY IDEAS ABOUT DESIGN

Screen fragmentation

Page 8: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

KEY IDEAS ABOUT DESIGN

Modular structures

Page 9: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

KEY IDEAS ABOUT DESIGN

Modular structures

Page 10: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

KEY IDEAS ABOUT DESIGN

Modular structures

Page 11: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

KEY IDEAS ABOUT DESIGN

Design patterns

Page 12: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

KEY IDEAS ABOUT DESIGN

Page 13: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

PLAY MUSIC (OLD DESIGN)

Page 14: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

PLAY MUSIC (CURRENT DESIGN)

Page 15: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

PLAY MUSIC (CURRENT DESIGN)

Page 16: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

DESIGN PATTERNSAction BarNavigation Drawer

Popup Menu

Sliding up panel

Cards UI

Pin progress

Page 17: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

ACTION BAR

•Native (11+): http://developer.android.com/guide/topics/ui/actionbar.html•ActionBarCompat (7+): http://antonioleiva.com/actionbarcompat-how-to-use/•ActionBarSherlock: http://actionbarsherlock.com/

1. App Icon 2. View Control

3. Action Buttons 4. Overflow menu

Page 18: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

ACTION BARFading Action Bar

https://github.com/ManuelPeinado/FadingActionBar

Page 19: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

ACTION BARGlass Action Bar

https://github.com/ManuelPeinado/GlassActionBar

Page 20: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

ACTION BARNot Boring Action Bar

http://flavienlaurent.com/blog/2013/11/20/making-your-action-bar-not-boring/

Page 21: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

NAVIGATION DRAWER

http://developer.android.com/training/implementing-navigation/nav-drawer.html

Page 22: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

NAVIGATION DRAWER

Page 23: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

NAVIGATION DRAWER

Page 24: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

END/RIGHT DRAWER

Page 25: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

SLIDING PANE

http://www.limecreativelabs.com/sliding-pane-layout/

Page 26: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

SLIDING UP PANEL

Page 27: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

SLIDING UP PANEL

https://github.com/umano/AndroidSlidingUpPanel

Page 28: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

YOUTUBE SLIDING VIDEO

http://flavienlaurent.com/blog/2013/08/28/each-navigation-drawer-hides-a-viewdraghelper/

Page 29: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

PIN PROGRESS

https://code.google.com/p/romannurik-code/source/browse/misc/pinprogress/

Page 30: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

CARDS UI

CardsLib: https://github.com/gabrielemariotti/cardslibCardsUI: https://github.com/Androguide/cardsui-for-android

Page 31: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

POPUP MENU

http://developer.android.com/design/patterns/selection.html

Page 32: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

POPUP MENU

PopupMenu (11+): http://developer.android.com/reference/android/widget/PopupMenu.htmlPopupWindow (1+): http://developer.android.com/reference/android/widget/PopupWindow.htmlPopupMenuCompat: https://github.com/Taig/PopupMenuCompat

Page 33: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

TAB STRIP

https://github.com/astuetz/PagerSlidingTabStrip

Page 34: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

SWIPE TO DISMISS

SwipeListView: https://github.com/47deg/android-swipelistview

Page 35: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

UNDO

EnhancedListView (with undo): https://github.com/timroes/EnhancedListView

Page 36: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

PULL TO REFRESH

https://github.com/chrisbanes/ActionBar-PullToRefresh

Page 37: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

• Designing awesome apps is easy using common design patterns– They are proved to work– Well known by users

• Good design is essential for an app to succeed• It’s really easy to replicate most used patterns– Included in SDK– Tons of libraries ready to use

Page 38: Android UI Design Trends

http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo@lime_cl

Antonio Leiva GordilloAndroid Developer at Gigigo

http://www.limecreativelabs.comhttp://www.antonioleiva.com

http://gplus.to/antonioleiva

@lime_cl

http://es.linkedin.com/in/antoniolg

[email protected]