Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Iconography with Material Design

628 views

Published on

Icons are normally considered to be just visual when designing an application and aren't given much priority, whereas they are the first element of your product a user interacts with.
This slides take you through the basic things you need to keep in mind while creating icon prototypes with Material Design.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Iconography with Material Design

  1. 1. ICONOGRAPHY With Material Design presented by SWAPNIL BORKAR G T%s. !2.v. ed. ..$.9.v. §i: .!, :Jn9
  2. 2. How do Icons contribute to Experience? Discuss
  3. 3. How do Icons contribute to Experience? 1. First Interaction a User has with your Product. 2. Defines what your Product/ App does. 3. Contributes to the whole OS Experience. 0m
  4. 4. ivu ‘I iris iii-i‘iiiii-. i , ::. r-.4": -.iii = :-. f 1. First Interaction a User has with your Product.
  5. 5. ", l‘5‘_'l“ -ii: _i: -iiain: :-ioi_i_li ', lf-| |.. i’(‘-A (1: C‘. .I:1!i'-i; ".i '-i_i_i~: -i'—‘ ~ 2. Defines what your Product/ App does. . ‘T’ T‘ _ J _, Solid Explorer PowerGrasp File Manager File Manager ‘ T‘E<. ?“'? .f? .C? [‘§}". §.i"9
  6. 6. How do icons contribute to Experience? ~ . ' "l V . .3El «ll ». ..’'‘»‘~ 0 are . -: -4.. . i'2.TIf£[-} : - . r9i; itins T, /i«v, ,_r_“ : '_"x~': f= . .1 r__~. . .7?‘ ‘T: aria‘ 9. o zsiiisém 54 . _,l is: g__ Lsiitiililfiiisit‘ tr-trims rams est-iii; -sis 1 . . ( ‘i ll
  7. 7. 4. Distinguishes your icon while maintaining consistency. AU» '2 1 1020 Productivity Apps Flynx - Read th. . 5 ClearFocus: P. . 3 Wrike - Project. 5 Q nun = ei: i «mun mi fiitfii rm r‘u, ii. w‘. . irri ' mi sin W I .1‘ . [H J“ M. .. an . i.ii. ..iii. .i_. GTe<. i-ve_. d=‘
  8. 8. Logos v/ s Icons They are not the same. UXp/ oration Logo UXp/ oration Material OT€shve9Cew'~= !§. %wa
  9. 9. TLDR; Material Design Material is a metaphor which is inspired by the theory of Paper and Ink, yet technologically advanced. 8 It has it's own Rationalized space and is grounded in Tactile Reality. Surface and Edges provide visual cues that are grounded in reality. Flexibility of the Material creates affordances on Tactile feedback that helps create new affordances.
  10. 10. Creating Material Design Icons 1. ldeating your logo as paper. Each icon is cut, fold and lit as paper would be. 0Ie. s!: xe. e<.9i= .=.2'3.ins
  11. 11. Creating Material Design Icons 2. Creating a Sketch and a Paper Prototype Use the / dealing phase and iconography principles to create a paper prototype
  12. 12. Creating Material Design Icons 3. Choosing a Keyline shape to follow. Circle Diameter: 176dp Square Height: 152dp Width: 152dp Rounded: 12dp Vertical rectangle Height: 176dp Width: 128dp Rounded: 12dp Horizontal rectangle Height: 1 28dp Width:1 76dp Rounded: 12dp Oisstxseéeesetins
  13. 13. Creating Material Design Icons 4. Geometry l ‘ l Preset standards have been determined for specific keylines: circle, square, rectangle, orthogonals, and diagonals. This small palette of universal and simple elements has been devel- oped to unify product icons and systemize their placement on the grid. 0"%! .‘. '.3!. —C. ‘.>. .'. '.5«. *'. '.5.i. t-*3
  14. 14. Creating Material Design Icons 5. Product Icon Grid The product icon grid has been developed to facilitate consistency and establish a clear set of rules for the positioning of graphic elements. Results into a flexible, coherent system. O'| ‘3s, t-y; _d. _C, c2_p, s,_-. gIat, i,ng u. ..-U. .. .
  15. 15. Understanding Anatomy of Icons 1. Finish O 2. Material Background Q 3. Material Foreground 4. Color 5. Shadow OIe. s!2xs9.<.9r. =.s: :'3.ins
  16. 16. Understanding Anatomy of Icons 1. Finish ‘ 2. Material Background 3. Material Foreground . 4. Color ‘/ 5. Shadow e, Constructive gTg, _5,, ,,, ,g_. .m, c‘. .,, _,_. ‘,.1,‘. ".V. ,,g
  17. 17. Let's get our hands dirty! These were the basics of iconography using Material Design. There are more things to keep in mind when designing them virtually: 1. Shaded Edges 2. Tinted Edges 3. Do's and Don’ts 4. Pixel Perfect Guidelines https: //goo. gl/ EoUBci Otesexeeseiew. -im

×