Android Apps Training - Day Four (Design)

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



Android specifications on launcher icons for different screen densities



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



1

2

3

4

Adobe Fireworks

Sketch (Mac only)



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

Android Apps Training - Day Four (Design)

Technology

Transcript of Android Apps Training - Day Four (Design)