Download to read offline
Uploaded byIstiaque Reza
ANDROID DESIGN GUIDELINES
The document outlines Android design guidelines and best practices, emphasizing material design principles such as the use of natural lighting, meaningful motions, and bold colors. It specifies layout structures, typography, and component styles while advising against skeuomorphism and merging UI elements from other operating systems. The guidelines stress responsive design for optimal user experience on various devices.
More Related Content
ANDROID DESIGN GUIDELINES
- 1. ANDROID DESIGN GUIDELINES& BEST PRACTICES - Istiaque Reza ( UI/UX Designer @ MCC LTD )
- 2. 32 DESIGN DESIGN GUIDELINES(L) DON’T ! 1
- 3. 32 DESIGN GUIDELINES (L)DON’T ! DESIGN 1
- 4.
- 5. DPI vs PX 2.0x(96px) 1.5x (72px) 1.0x (48px) BASE 48px 0.75x (36px) xhdpi hdpi mdpi ldpi Inch = pixel / dpi
- 6.
- 7.
- 8. Natural lighting andshadow Elements have depth An Emphasis on User actions MATERIAL DESIGN Meaningful motions !
- 9.
- 10.
- 11. b. RESPONSIVE INTERACTION ANIMATION DON’T a SURFACEREACTION MATERIAL RESPONSE RADIAL ACTION c d
- 12. DON’TDO c. MEANIGFUL TRANSITION ANIMATION b VISUALCONTINUITY da
- 13.
- 14. d. DELIGHTFUL DETAIL ANIMATION bc ACTIONS THAT DELIGHT THE USER AND BRING THEM JOY !
- 15. a. COLOR STYLE Bold colorstatements juxtaposed with muted environments Accent color are used for your primary action buttons as well as components such as switchers or sliders.
- 16. b. ICONOGRAPHY STYLE PERPENDICULAR Bold & Geometric ROUNDEDICONS Consistency
- 17. c. IMAGERY STYLE PERPENDICULAR PHOTOGRAPHIC + NO TOSTOCK DON’TDO
- 18. d. TYPOGRAPHY STYLE The allNew ROBOTO RROBOTO OLD NEW
- 19. a. PRINCIPLE LAYOUT PAPERCRAFT In materialdesign, every pixel drawn by an application resides on a sheet of paper.
- 20. a. PRINCIPLE LAYOUT PAPER TOOLBAR DON’TDO
- 21. a. PRINCIPLE LAYOUT DIMENTIONALITY (SHADOW) Shadowsconsist of two layers: a top shadow for depth and a bottom shadow for definition.
- 22. b. METRICS ANDKEYLINE LAYOUT TOUCH TARGET SIZE
- 23. c. STRUCTURE LAYOUT ACTION BAR APPBAR FLOATING ACTION BUTTON
- 24.
- 25. c. STRUCTURE LAYOUT MENUS Overlaps the AppBar Not An Extension Of App Bar
- 26. a. BOTTOM SHEETS COMPONENTS Shouldslide up from the edge of the device
- 27. b. BUTTONS COMPONENTS Floating Action Button(FAB) Raised button Flat Button
- 28.
- 29. c. CARDS COMPONENTS Rounded corner( 2dp ) Use Only when necessary don’t mix-up with list Good option for responsive layout
- 30. d. DIALOGS COMPONENTS Preferably useflat button Do Not use FAB
- 31. e. DIVIDERS COMPONENTS FULL BLEEDINSET Use inset dividers when anchoring full bleed dividers for sections
- 32. f. GRID COMPONENTS GRID TILESIN CELL Lists: Optimized for reading comprehension. Used for homogeneous data type, typically images. Cards: Used for content with inconsistent formatting.
- 33. g. LISTS COMPONENTS LIST TILES IN ROW Usedfor homogeneous data type OR sets of data types
- 34. h. SUB HEADER COMPONENTS LISTGRID Should be Left Aligned 48dp, 16dp (left)
- 35.
- 36. j. TABS COMPONENTS Extended Appbar + Tab bar Inset search + App bar + Tab bar Default App bar + Tab bar
- 37. j. TABS COMPONENTS Default Appbar +Scrollable Tab bar BEAUTIFUL TAB INTERACTION
- 38.
- 39.
- 40. UI ELEMENTS OFOTHER OS Don’t merge UI elements of other OS into Android
- 41. DESIGN PRINCIPLE No toSKEUOMORPHISM Yes to MATERIAL DESIGN LOGO No gradients OR exact depiction of real world objects (like leather or stitch)
- 42. NO SPLASH SCREEN It’spreferred not to use the splash screen Load directly the app screen on open LOGO
- 43. APP ICON NOT PREFFERED Shouldmake you feel like you are viewing it from the top PREFFERED
- 44. RESPONSIVE Try to makethe app responsive so that it does look great on tablets as well as on mobile See to it that the experience is not affected
- 45.