Your SlideShare is downloading. ×
Material Design on Goolge material desing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Material Design on Goolge material desing

331
views

Published on

material design

material design

Published in: Technology, Art & Photos

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
331
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PRESENTING • Momotaz Begum Panna • 4th Year 1st Semester
  • 2. PRESENTATION ON MATERIAL DESIGN
  • 3. TOPICS:  STYLE: • Color • Typography • Icons • Imagery
  • 4. COLOR: • Color is inspired by bold color statements with muted environments. • Emphasize bold shadows and highlights. • Introduce unexpected and vibrant colors.
  • 5. COLOR(CONT..) Contents: I. UI Color Palette II. UI Color Application III. Themes
  • 6. COLOR(CONT..) i. UI Color Palette : • The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. • The primary colors are the 500 range.
  • 7. COLOR(CONT..) ii. UI Color Application : • We can limit our choice of colors by choosing three color hues in the primary and one accent color in the secondary palette. • To effectively convey the hierarchy of information, use alpha values for grey text, icons, and dividers , like the standard alpha value for text on a white background is 87% (#000000). • The vibrant accent color are used for primary action buttons as well as components such as switchers or sliders.
  • 8. COLOR(CONT..) iii. Themes • Themes are a way to apply a consistent tone to an app. The style specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements.
  • 9. TYPOGRAPHY • The Android design language relies on traditional typographic tools such as scale, space, rhythm, and alignment with an underlying grid. • Successful deployment of these tools is essential to help users quickly understand a screen of information. Contents: i . Roboto ii. Standard Styles
  • 10. TYPOGRAPHY(CONT..) i. Roboto : • To support such typography, Ice Cream Sandwich introduced a new type family named Roboto , created specifically for the requirements of UI and high-resolution screens. • Roboto has been the standard typeface for Android. In this version, Roboto has been refined extensively to work across the wider set of supported platforms. ii. Standard Styles : • Too many type sizes and styles at once can wreck any layout. A typographic scale is a limited set of type sizes that work well together, along with the layout grid.
  • 11. TYPOGRAPHY(CONT..) ii. Standard Styles :(cont..) • Text should maintain a minimum contrast ratio of at least 4.5:1 for legibility. • Type sizes are specified with SP ( scaleable pixels). • Dynamic type sizes enable large type in cases where the length of the text in a layout is unknown. Dynamic sizes are selected from a typographic scale based on available space and letter size estimates. • There should have around 60 characters per line if we want a good reading experience
  • 12. ICONS: Contents: i . System Icons
  • 13. ICONS(CONT..) i.System Icons: • A system icon, or UI icon, symbolizes a command, file, device, or directory. • Shapes of icons are bold and geometric in execution. • Two sets of shapes with varying sizes are available for icons in our app: The Status Bar and Contextual Icon set and the Action Bar and Desktop icon set. • A play on round corner and sharp corners can be applied to square and rectangular shapes that have a protrusion or indentation. All stroked icons have sharp corners.
  • 14. ICONS(CONT..) • i.System Icons:(cont..) • Consistency is important. Use the existing system icons whenever possible and across different apps. • Icons are nestled in the 24 dps bounding box determined by the grid.
  • 15. IMAGERY • In material design, imagery—whether illustration or photography—is constructed but never contrived, magical but never overproduced. • The principles of imagery support the goal of purposeful, thoughtful, beautiful UIs. Contents: I. Principles II. Best Practices III. UI Integration
  • 16. IMAGERY(CONT…) i.Principles: • When using illustration and photography to enhance the user experience, choose images that express personal relevance, information and delight. • Incorporate logic to ensure images are dynamic, context-intelligent, and context-relevant. ii.Best Practices: • Both illustration and photography can live within the same product. • Photography automatically implies a degree of specificity and should be used to showcase specific entities and stories. • Illustration is effective for representing concepts and metaphors where specific photography might be alienating.
  • 17. IMAGERY(CONT…) ii.Best Practices:(cont..) • Create an immersive story and a sense of context. • Maintain the original integrity of the image. Don’t apply heavy filters or gaussian blurs to imagery, especially when trying to hide degradation.
  • 18. IMAGERY(CONT…) iii.UI Integration: • Make sure our images are appropriately sized for their containers and across platforms. • To make typography legible on imagery, add text protection scrims. • Hero images are images that are usually anchored in a prominent position, above the fold, such as a banner at the top of the screen. • Gallery images are bold visual hero images within homogeneous layouts in either a grid or as a single image.
  • 19. THANK YOU ALL