Android Apps Training - Day Four (Design)
Upcoming SlideShare
Loading in...5
×
 

Android Apps Training - Day Four (Design)

on

  • 1,251 views

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

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

Statistics

Views

Total Views
1,251
Views on SlideShare
816
Embed Views
435

Actions

Likes
5
Downloads
68
Comments
1

3 Embeds 435

http://vivekbhusal.com 379
http://www.vivekbhusal.com 54
http://localhost 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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) Android Apps Training - Day Four (Design) Presentation Transcript

  • 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 63px tvdpi
  • 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  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.      
  • 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.      
  • 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.      
  • 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)
  • 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.      
  • 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
  • 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