Boutique product development company
It is amazing what you can accomplish when you have a client-centric team to deliver ...
Boutique product development company
It is amazing what you can accomplish when you have a client-centric team to deliver ...
Design Principles
Design Guidelines for Android Developers
Agenda
Style
•Devices And Display
•Supporting Multiple Screens
...
Design Principles
Devices and Displays
Android powers millions of phones, tablets, and other devices in a wide
variety of ...
Design Principles
Devices and Displays
Problem:
How to handle multiple devices
Qandil Tariq | Software Engineer
Design Principles
Devices and Displays
Solutions
•The ideal solution is to design the user interface of your application s...
Design Principles
Supporting Multiple Screens
Terms and concepts
•
Screen size
•
Actual physical size, measured as the scr...
Design Principles
Supporting Multiple Screens
Terms and concepts
•
Screen density
•
The quantity of pixels within a physic...
Design Principles
Supporting Multiple Screens
Terms and concepts
•
Orientation
•
The orientation of the screen from the us...
Design Principles
Supporting Multiple Screens
Density-independent pixel (dp)
•
A virtual pixel unit that you should use wh...
Design Principles
Devices and Displays
Android qualifiers that allow you to provide special resources for different
screen...
Design Principles
Devices and Displays
Relation between screen size and dpi.
Qandil Tariq | Software Engineer
Design Principles
Devices and Displays
Screen Sizes and Densities in market
Qandil Tariq | Software Engineer
Design Principles
Devices and Displays
Be flexible
Stretch and compress your layouts
Optimize layout
Create compound views...
Design Principles
Devices and Displays
Assets for all
l
Provide resources for different screen densities (DPI) to ensure t...
Design Principles
Devices and Displays
Alternative layouts
l
Provide alternative layouts for some of the different screen ...
Design Principles
Devices and Displays
What is the strategy
l
One approach is to work in the base standard (normal size an...
Design Principles
Supporting Multiple Screens
Best Practices
• Use wrap_content, fill_parent, or the dp unit for layout di...
Design Principles
Multi-pane layouts
Combining Multiple Views Into One

On smaller devices your content is typically divi...
Design Principles
Multi-pane layouts
Compound Views and Orientation Changes

Screens should strive to have the same funct...
Design Principles
Themes and styles
•Themes are Android's mechanism for applying a consistent style to an
app or activity....
Design Principles
Themes and styles
•Android gmail theme:
Qandil Tariq | Software Engineer
Design Principles
Themes And Styles
•Styles in Android share a similar philosophy to cascading style sheets
in web design
...
Design Principles
Themes And Styles
•A style is a collection of properties that specify the look and format for
a or windo...
Design Principles
Touch Feedback
• Be responsive to touches in a gentle way
• Let user know the app is "listening"
• Make ...
Design Principles
Touch Feedback
•Benefits of feedback:

Communication
When your objects react to more complex gestures, ...
Design Principles
Touch Feedback
l
Benefits of feedback:

Boundaries
When users try to scroll past the beginning or end o...
Design Principles
Metrics and Grids
48dp Rhythm
l
Touchable UI components are generally laid out along 48dp units.
•On ave...
Design Principles
Metrics and Grids
48dp Rhythm
Mind the gaps
•Spacing between each UI element is 8dp.
Qandil Tariq | Soft...
Design Principles
Metrics and Grids
l
Why 48dp?
If you design your elements to be at least 48dp high and wide you can
guar...
Design Principles
Iconography
l
Icons can convey intended message better than text
l
Design icons for every density range
...
Design Principles
Iconography
•Launcher

Should be descriptive, explanatory about your app

On Mobile Device – 48x48 dp ...
Design Principles
Iconography
•Action Bar
l
One of the most important design elements for Android app
l
Provides quick acc...
Design Principles
Iconography
•Action Bar

Use contractions. Pictographic, flat, not too detailed

Size for phone – 32x3...
Design Principles
Iconography
•Small Contextual Icons

Neutral, flat, simple

Use neutral colors

Size – 16X16 dp (MDPI...
Design Principles
Iconography
•Notification Icons

Flat and simple

Must be entirely white

Pictographic

Size – 24x24...
Design Principles
Iconography
•Design Tips
• Use vector shapes when possible
• Start with large artboards
• When scaling, ...
Design Principles
Your Branding
•Color

Use color for branding

High contrast color for emphasis
Lala Rukh | Software En...
Design Principles
Your Branding
•Logo

Using your logo for branding
Lala Rukh | Software Engineer
Design Principles
Your Branding
•Icons

Use personalized icons if your brand have them already
Lala Rukh | Software Engin...
Design Principles
Writing Style
•Keep it brief
•Put the most important thing first
Lala Rukh | Software Engineer
Design Principles
Writing Style
•Be friendly
•Focus on user's concern, not technical details
Lala Rukh | Software Engineer
Design Principles
Writing Style
•Describe only what's necessary, and no more
•Avoid repetition
If a significant term gets ...
Design Principles
Writing Style
•Words to avoid
Lala Rukh | Software Engineer
Design Principles
9-patch Images

name.9.png

1 pixel wide guides

Scale up
Lala Rukh | Software Engineer
Design Principles
Android Asset Studio

Launcher Icons

Action Bar and Tab Icons

Notification Icons

Generic icons

...
Design Principles
Questions
Qandil Tariq & Lala Rukh
Design Principles
Thank You
Qandil Tariq & Lala Rukh
Design Principles
References
Qandil Tariq & Lala Rukh
http://developer.android.com/design/index.html
http://android-ui-uti...
Upcoming SlideShare
Loading in …5
×

Design guidelines for android developers

1,081 views

Published on

Design guidelines for Android

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,081
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Design guidelines for android developers

  1. 1. Boutique product development company It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.
  2. 2. Boutique product development company It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products. Design Guidelines for Android Developers Qandil Tariq | Software Engineer Lala Rukh | Software Engineer
  3. 3. Design Principles Design Guidelines for Android Developers Agenda Style •Devices And Display •Supporting Multiple Screens •Multi-pane layouts •Themes and styles •Touch Feedback •Metrics and Grids •Iconography •Branding •Writing Style •9-patch Images •Android utilities Qandil Tariq | Software Engineer
  4. 4. Design Principles Devices and Displays Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and form factors Qandil Tariq | Software Engineer
  5. 5. Design Principles Devices and Displays Problem: How to handle multiple devices Qandil Tariq | Software Engineer
  6. 6. Design Principles Devices and Displays Solutions •The ideal solution is to design the user interface of your application so that it appears correctly on the widest possible range of devices •Create apps that gracefully scale from large tablets to smaller phones How to achieve this •The best way to achieve this is to design the user interface using layout managers that do not rely on absolute positioning Qandil Tariq | Software Engineer
  7. 7. Design Principles Supporting Multiple Screens Terms and concepts • Screen size • Actual physical size, measured as the screen's diagonal. For simplicity, Android groups all actual screen sizes into four generalized sizes: • Small • Normal • Large • Extra large Qandil Tariq | Software Engineer
  8. 8. Design Principles Supporting Multiple Screens Terms and concepts • Screen density • The quantity of pixels within a physical area of the screen • Usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen. • Android groups all actual screen densities into four generalized densities: • Low • Medium • High • Extra high Qandil Tariq | Software Engineer
  9. 9. Design Principles Supporting Multiple Screens Terms and concepts • Orientation • The orientation of the screen from the user's point of view. • There are two types of orientation: • Portrait • Landscape • Resolution • The total number of physical pixels on a screen. • Applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups. Qandil Tariq | Software Engineer
  10. 10. Design Principles Supporting Multiple Screens Density-independent pixel (dp) • A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way • The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen px = dp * (dpi / 160). Qandil Tariq | Software Engineer
  11. 11. Design Principles Devices and Displays Android qualifiers that allow you to provide special resources for different screen configurations. Link : https://developer.android.com/guide/practices/screens_support.html Qandil Tariq | Software Engineer
  12. 12. Design Principles Devices and Displays Relation between screen size and dpi. Qandil Tariq | Software Engineer
  13. 13. Design Principles Devices and Displays Screen Sizes and Densities in market Qandil Tariq | Software Engineer
  14. 14. Design Principles Devices and Displays Be flexible Stretch and compress your layouts Optimize layout Create compound views that combine multiple views Qandil Tariq | Software Engineer
  15. 15. Design Principles Devices and Displays Assets for all l Provide resources for different screen densities (DPI) to ensure that your app looks great on any device. l Almost every application should provide alternative resources to support specific device configurations. Qandil Tariq | Software Engineer
  16. 16. Design Principles Devices and Displays Alternative layouts l Provide alternative layouts for some of the different screen sizes l The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra large screen should go in layout-xlarge/ Qandil Tariq | Software Engineer
  17. 17. Design Principles Devices and Displays What is the strategy l One approach is to work in the base standard (normal size and MDPI) and scale it up or down for the other buckets l Another approach is to start with the device with the largest screen size, and then scale down and figure out the UI compromises you'll need to make on smaller screens. Qandil Tariq | Software Engineer
  18. 18. Design Principles Supporting Multiple Screens Best Practices • Use wrap_content, fill_parent, or the dp unit for layout dimensions • Do not use hard-coded pixel values in your application code • Do not use AbsoluteLayout • Use size and density-specific resources Qandil Tariq | Software Engineer
  19. 19. Design Principles Multi-pane layouts Combining Multiple Views Into One  On smaller devices your content is typically divided into a master grid or list view and a detail view. Touching an item in the master view opens a different screen showing that item's detail information.  But Tablets have more screen real estate than phones, you can use panels to combine the related list and detail views into a single compound view.  This uses the additional space more efficiently and makes navigating the app easier. Qandil Tariq | Software Engineer
  20. 20. Design Principles Multi-pane layouts Compound Views and Orientation Changes  Screens should strive to have the same functionality regardless of orientation.  If you use a compound view in one orientation, try not to split it up when the user rotates the screen.  There are several techniques you can use to adjust the layout after orientation change while keeping functional parity intact. Qandil Tariq | Software Engineer
  21. 21. Design Principles Themes and styles •Themes are Android's mechanism for applying a consistent style to an app or activity. • Pick the system theme that best matches the needs and design aesthetics for your app. • • Applying themes will go a long way in helping you to build apps that fit right into the general visual language of Android • Benefits: • It increase code re use ability. • It generalized the main theme of app in one place. • You can specify the color,font or any property related to some view at one place and use it on may places. Qandil Tariq | Software Engineer
  22. 22. Design Principles Themes and styles •Android gmail theme: Qandil Tariq | Software Engineer
  23. 23. Design Principles Themes And Styles •Styles in Android share a similar philosophy to cascading style sheets in web design •They allow you to separate the design from the content. •A Theme is a style applied to an entire or application, rather than an individual •Styles support inheritance. Qandil Tariq | Software Engineer
  24. 24. Design Principles Themes And Styles •A style is a collection of properties that specify the look and format for a or window.  Color  Height  Padding  Font size Qandil Tariq | Software Engineer
  25. 25. Design Principles Touch Feedback • Be responsive to touches in a gentle way • Let user know the app is "listening" • Make it subtle • Why its necessary? • Try to feel users their actions are very important for app. Qandil Tariq | Software Engineer
  26. 26. Design Principles Touch Feedback •Benefits of feedback:  Communication When your objects react to more complex gestures, help users understand what the outcome will be. Qandil Tariq | Software Engineer
  27. 27. Design Principles Touch Feedback l Benefits of feedback:  Boundaries When users try to scroll past the beginning or end of a scrollable area, communicate the boundary with a visual cue. Qandil Tariq | Software Engineer
  28. 28. Design Principles Metrics and Grids 48dp Rhythm l Touchable UI components are generally laid out along 48dp units. •On average, 48dp translate to a physical size of about 9mm (with some variability). Qandil Tariq | Software Engineer
  29. 29. Design Principles Metrics and Grids 48dp Rhythm Mind the gaps •Spacing between each UI element is 8dp. Qandil Tariq | Software Engineer
  30. 30. Design Principles Metrics and Grids l Why 48dp? If you design your elements to be at least 48dp high and wide you can guarantee that: •your targets will never be smaller than the minimum recommended target size of 7mm regardless of what screen they are displayed on. •you strike a good compromise between overall information density on the one hand, and targetability of UI elements on the other. Qandil Tariq | Software Engineer
  31. 31. Design Principles Iconography l Icons can convey intended message better than text l Design icons for every density range l Taking MDPI as baseline:  LDPI is MDPI x 0.75.  HDPI is MDPI x 1.5.  XHDPI is MDPI x 2.  XXHDPI is MDPI x 3. Lala Rukh | Software Engineer
  32. 32. Design Principles Iconography •Launcher  Should be descriptive, explanatory about your app  On Mobile Device – 48x48 dp (MDPI)  Google Play Store tile size – 512x512dp Lala Rukh | Software Engineer
  33. 33. Design Principles Iconography •Action Bar l One of the most important design elements for Android app l Provides quick access to more frequent actions l Supports consistent navigation and view switching withins app l A dedicated space to give your app an identity l General structure: 1) App Icon 2) View Control 3) Action Buttons 4) Action Overflow Lala Rukh | Software Engineer
  34. 34. Design Principles Iconography •Action Bar  Use contractions. Pictographic, flat, not too detailed  Size for phone – 32x32 dp (MDPI)  Icons matching with theme Lala Rukh | Software Engineer
  35. 35. Design Principles Iconography •Small Contextual Icons  Neutral, flat, simple  Use neutral colors  Size – 16X16 dp (MDPI) Lala Rukh | Software Engineer
  36. 36. Design Principles Iconography •Notification Icons  Flat and simple  Must be entirely white  Pictographic  Size – 24x24 dp (MDPI) Lala Rukh | Software Engineer
  37. 37. Design Principles Iconography •Design Tips • Use vector shapes when possible • Start with large artboards • When scaling, redraw bitmap layers as needed • Use common naming conventions for icon assets Lala Rukh | Software Engineer
  38. 38. Design Principles Your Branding •Color  Use color for branding  High contrast color for emphasis Lala Rukh | Software Engineer
  39. 39. Design Principles Your Branding •Logo  Using your logo for branding Lala Rukh | Software Engineer
  40. 40. Design Principles Your Branding •Icons  Use personalized icons if your brand have them already Lala Rukh | Software Engineer
  41. 41. Design Principles Writing Style •Keep it brief •Put the most important thing first Lala Rukh | Software Engineer
  42. 42. Design Principles Writing Style •Be friendly •Focus on user's concern, not technical details Lala Rukh | Software Engineer
  43. 43. Design Principles Writing Style •Describe only what's necessary, and no more •Avoid repetition If a significant term gets repeated within a screen or block of text, find a way to use it just once. Lala Rukh | Software Engineer
  44. 44. Design Principles Writing Style •Words to avoid Lala Rukh | Software Engineer
  45. 45. Design Principles 9-patch Images  name.9.png  1 pixel wide guides  Scale up Lala Rukh | Software Engineer
  46. 46. Design Principles Android Asset Studio  Launcher Icons  Action Bar and Tab Icons  Notification Icons  Generic icons  Android Action Bar Style Generator  Android Holo Color Generator Lala Rukh | Software Engineer
  47. 47. Design Principles Questions Qandil Tariq & Lala Rukh
  48. 48. Design Principles Thank You Qandil Tariq & Lala Rukh
  49. 49. Design Principles References Qandil Tariq & Lala Rukh http://developer.android.com/design/index.html http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html http://radleymarx.com/blog/simple-guide-to-9-patch/ http://developer.android.com/training/multiscreen/screensizes.html

×