HELLO WE DESIGN FOR ANDROID TODAY

Anjan Shrestha UX Lead, YoungInnovations

http://anjhero.me

5+ years in UI design and development

A small introduction to Android UI

HOME Screen  

ALL APPS Screen  

RECENTS Screen  

SYSTEM BARS

Status Bar

Navigation Bar

THERE’S ONE TERMINOLOGY THAT YOU MUST KNOW …

SCREEN DENSITY

THERE’S ONE TERMINOLOGY THAT YOU MUST KNOW …

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

Measured Dots Per Inch

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

Measured as Dots Per Inch

DPI

120 ldpi

160 mdpi

240 hdpi

320 xhdpi

480 xxhdpi

213 tvdpi

WHY SHOULD I

CARE?

WHY SHOULD I

CARE?

Well, you must deliver images for each of these

guys!

ldpi mdpi hdpi

xhdpi xxdpi tvdpi

Well, you must deliver images for each of these

guys!

ldpi mdpi hdpi

xhdpi xxdpi tvdpi

Because visually,

mdpi hdpi

48px in mdpi = 48px in hdpi

Defining layout in a density independent way …

Density-independent Pixel

DP

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)

ldpi mdpi hdpi xhdpi tvdpi

48px 36px 72px 96px 63px

1x 0.75x 1.5x 2x 4/3x

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

ldpi mdpi hdpi xhdpi tvdpi

48px 36px 72px 96px 63px

Android specifications on launcher icons for different screen densities

ldpi mdpi hdpi xhdpi tvdpi

48px 36px 72px 96px 63px

Launcher Icon for display on Google Play

512*512 px

Designing the User Interface

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.                  

1

2

3

4

Designing the User Interface

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.                  

1

2

3

4

Designing the User Interface

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.                  

1

2

3

4

Designing the User Interface

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.                  

1

2

3

4

Adobe Fireworks

Sketch (Mac only)

Designing the User Interface

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.                  

1

2

3

4

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 navigating up a hierarchy

Use tabs for navigating through different views.

Use the bottom bar for displaying actions

Navigation

with Navigation Drawer

Get to content directly! Avoid Splash Screens

TUTORIALS Or PRIMARY ACTIONS

Use empty states for

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