Android Apps Training - Day Four (Design)
-
Upload
anjan-shrestha -
Category
Technology
-
view
104 -
download
2
description
Transcript of 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
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