HELLO
WE DESIGN FOR ANDROID TODAY
Anjan Shrestha
UX Lead,
YoungInnovations
5+ years in UI design and development
http://anjhero.me
A small
introduction to
Android UI
HOME

Screen	
  
ALL APPS

Screen	
  
RECENTS

Screen	
  
Status Bar

SYSTEM
BARS
Navigation Bar
THERE’S ONE TERMINOLOGY
THAT YOU MUST KNOW …
THERE’S ONE TERMINOLOGY
THAT YOU MUST KNOW …

SCREEN DENSITY
The number of pixels in a physical area of a screen.
The number of pixels in a physical area of a screen.

Measured as Dots Per Inch

DPI
ldpi

120

mdpi

160

hdpi

240

xhdpi

320

xxhdpi

480

tvdpi

213
WHY
SHOULD I

CARE?
Y

DI

E?

Well, you must deliver
images for each of these
guys!

ldpi

mdpi

hdpi

xhdpi

xxdpi

tvdpi
liver
these

Because visually,

48px in mdpi = 48px in hdpi

hdpi

vdpi

mdpi

hdpi
Defining layout in a density independent way …

DP
Density-independent Pixel
to the rescue
On an mdpi (160) screen,

1dp = 1px
That is probably why mdpi is also called the baseline screen in Android.
For other screen densities,

px*dpi/160
So a 48px icon in mdpi should be …

px*dpi/160
48*320/160
ie.

96px in xhdpi (320)
0.75x

1x

1.5x

2x

4/3x

36px

48px

72px

96px

63px

ldpi

mdpi

hdpi

xhdpi

tvdpi
Similarly, other icons as well
DP calculator
https://play.google.com/store/apps/
details?id=com.vivek.dpcalculator&hl=en
Naming these icons
Setting up workspace
LAUNCHER

ICONS
Android specifications on
launcher icons for different
screen densities

36px

48px

72px

96px

ldpi

mdpi

hdpi

xhdpi

6...
Launcher Icon for display on Google Play

ons on
different

96px

xhdpi

63px

tvdpi

512*512 px
Designing
the User
Interface
1
2
3
4

Write	
  down	
  the	
  objec/ve(s)	
  of	
  your	
  
applica/on.	
  
	
  
Draw	
  w...
Designing
the User
Interface
1
2
3
4

Write	
  down	
  the	
  objec/ve(s)	
  of	
  your	
  
applica/on.	
  
	
  
Draw	
  w...
Designing
the User
Interface
1
2
3
4

Write	
  down	
  the	
  objec/ve(s)	
  of	
  your	
  
applica/on.	
  
	
  
Draw	
  w...
Designing
the User
Interface
1
2
3
4

Write	
  down	
  the	
  objec/ve(s)	
  of	
  your	
  
applica/on.	
  
	
  
Draw	
  w...
Designing
the User
Interface
1
2
3
4

Write	
  down	
  the	
  objec/ve(s)	
  of	
  your	
  
applica/on.	
  
	
  
Draw	
  w...
Follow design patterns
No. of actions you can put in action bar
Navigation
with action bar

Utilize the main action bar
for displaying the current
view title and an up caret
for navigati...
Navigation
with

Navigation Drawer
Avoid Splash Screens

Get to content directly!
Use empty states for

TUTORIALS
Or

PRIMARY
ACTIONS
Use login from
popular social
media
for a faster and easier
login/ signup experience
Feedback on
actions
48dp

Touch Targets

48dp

48dp
Study Design Patterns for more
http://developer.android.com/design/patterns/index.html
See Building Blocks section for ready to
use elements
http://developer.android.com/design/building-blocks/index.html
For Stencils/ GUI elements
http://developer.android.com/design/downloads/index.html
For Android Design Videos
http://developer.android.com/design/videos/index.html
For Android Design/ Dev Videos
http://www.youtube.com/user/androiddevelopers
Device Art Generator
http://developer.android.com/distribute/promote/device-art.html
Android Asset Studio
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Design to solve
problems.
Design that don’t solve problems is only
decoration.
THAT’S ALL FOLKS!
WE’LL SEE YOU TOMORROW
Upcoming SlideShare
Loading in...5
×

Android Apps Training - Day Four (Design)

1,420

Published on

This is part of a Android App Training series held at YoungInnovations by Mobile Nepal.

Published in: Technology, Art & Photos
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,420
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
77
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide
  • Now one more dpi = xxxhdpi (640dpi)
  • Other navigations/actions – Spinners, Contextual menus
  • Branding is important. But try to use the action bar for that purpose.
  • Android Apps Training - Day Four (Design)

    1. 1. HELLO WE DESIGN FOR ANDROID TODAY
    2. 2. Anjan Shrestha UX Lead, YoungInnovations 5+ years in UI design and development http://anjhero.me
    3. 3. A small introduction to Android UI
    4. 4. HOME Screen  
    5. 5. ALL APPS Screen  
    6. 6. RECENTS Screen  
    7. 7. Status Bar SYSTEM BARS Navigation Bar
    8. 8. THERE’S ONE TERMINOLOGY THAT YOU MUST KNOW …
    9. 9. THERE’S ONE TERMINOLOGY THAT YOU MUST KNOW … SCREEN DENSITY The number of pixels in a physical area of a screen.
    10. 10. The number of pixels in a physical area of a screen. Measured as Dots Per Inch DPI
    11. 11. ldpi 120 mdpi 160 hdpi 240 xhdpi 320 xxhdpi 480 tvdpi 213
    12. 12. WHY SHOULD I CARE?
    13. 13. Y DI E? Well, you must deliver images for each of these guys! ldpi mdpi hdpi xhdpi xxdpi tvdpi
    14. 14. liver these Because visually, 48px in mdpi = 48px in hdpi hdpi vdpi mdpi hdpi
    15. 15. Defining layout in a density independent way … DP Density-independent Pixel to the rescue
    16. 16. On an mdpi (160) screen, 1dp = 1px That is probably why mdpi is also called the baseline screen in Android.
    17. 17. For other screen densities, px*dpi/160
    18. 18. So a 48px icon in mdpi should be … px*dpi/160 48*320/160 ie. 96px in xhdpi (320)
    19. 19. 0.75x 1x 1.5x 2x 4/3x 36px 48px 72px 96px 63px ldpi mdpi hdpi xhdpi tvdpi
    20. 20. Similarly, other icons as well
    21. 21. DP calculator https://play.google.com/store/apps/ details?id=com.vivek.dpcalculator&hl=en
    22. 22. Naming these icons
    23. 23. Setting up workspace
    24. 24. LAUNCHER ICONS
    25. 25. Android specifications on launcher icons for different screen densities 36px 48px 72px 96px ldpi mdpi hdpi xhdpi 63px tvdpi
    26. 26. Launcher Icon for display on Google Play ons on different 96px xhdpi 63px tvdpi 512*512 px
    27. 27. Designing the User Interface 1 2 3 4 Write  down  the  objec/ve(s)  of  your   applica/on.     Draw  wireframes  (start  with  sketching   on  paper),  get  feedback,  refine.     Pick  your  favorite  design  tool.  Mine  is   Adobe    Fireworks  and  Sketch  (mac   only)     Start  designing  based  on  your   wireframe.      
    28. 28. Designing the User Interface 1 2 3 4 Write  down  the  objec/ve(s)  of  your   applica/on.     Draw  wireframes  (start  with  sketching   on  paper),  get  feedback,  refine.     Pick  your  favorite  design  tool.  Mine  is   Adobe    Fireworks  and  Sketch  (mac   only)     Start  designing  based  on  your   wireframe.      
    29. 29. Designing the User Interface 1 2 3 4 Write  down  the  objec/ve(s)  of  your   applica/on.     Draw  wireframes  (start  with  sketching   on  paper),  get  feedback,  refine.     Pick  your  favorite  design  tool.  Mine  is   Adobe    Fireworks  and  Sketch  (mac   only)     Start  designing  based  on  your   wireframe.      
    30. 30. Designing the User Interface 1 2 3 4 Write  down  the  objec/ve(s)  of  your   applica/on.     Draw  wireframes  (start  with  sketching   on  paper),  get  feedback,  refine.     Pick  your  favorite  design  tool.  Mine  is   Adobe  Fireworks  and  Sketch  (mac   only)     Start  designing  based  on  your   wireframe.       Adobe Fireworks Sketch (Mac only)
    31. 31. Designing the User Interface 1 2 3 4 Write  down  the  objec/ve(s)  of  your   applica/on.     Draw  wireframes  (start  with  sketching   on  paper),  get  feedback,  refine.     Pick  your  favorite  design  tool.  Mine  is   Adobe    Fireworks  and  Sketch  (mac   only)     Start  designing  based  on  your   wireframe.      
    32. 32. Follow design patterns
    33. 33. No. of actions you can put in action bar
    34. 34. Navigation with action bar Utilize the main action bar for displaying the current view title and an up caret for navigating up a hierarchy Use tabs for navigating through different views. Use the bottom bar for displaying actions
    35. 35. Navigation with Navigation Drawer
    36. 36. Avoid Splash Screens Get to content directly!
    37. 37. Use empty states for TUTORIALS Or PRIMARY ACTIONS
    38. 38. Use login from popular social media for a faster and easier login/ signup experience
    39. 39. Feedback on actions
    40. 40. 48dp Touch Targets 48dp 48dp
    41. 41. Study Design Patterns for more http://developer.android.com/design/patterns/index.html
    42. 42. See Building Blocks section for ready to use elements http://developer.android.com/design/building-blocks/index.html
    43. 43. For Stencils/ GUI elements http://developer.android.com/design/downloads/index.html
    44. 44. For Android Design Videos http://developer.android.com/design/videos/index.html
    45. 45. For Android Design/ Dev Videos http://www.youtube.com/user/androiddevelopers
    46. 46. Device Art Generator http://developer.android.com/distribute/promote/device-art.html
    47. 47. Android Asset Studio http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
    48. 48. Design to solve problems. Design that don’t solve problems is only decoration.
    49. 49. THAT’S ALL FOLKS! WE’LL SEE YOU TOMORROW
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×