Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
ICONOGRAPHY
With Material Design

presented by
SWAPNIL BORKAR

G T%s. !2.v. ed. ..$.9.v. §i: .!, :Jn9
How do Icons contribute to Experience? 

Discuss
How do Icons contribute to Experience? 

 

1. First Interaction a User has with your Product. 
2. Defines what your Produc...
ivu ‘I iris  iii-i‘iiiii-. i , ::. r-.4": -.iii = :-. f

1. First Interaction a User has with your Product.
", 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...
How do icons contribute to Experience? 

  

~     .    ' "l V 
 .   .3El  «ll ». ..’'‘»‘~ 0
are   .  -: -4.. . i'2.TIf£[-...
4. Distinguishes your icon while maintaining
consistency. 

AU» '2 1 1020

 

Productivity Apps

   

Flynx - Read th. . 5...
Logos v/ s Icons

 

They are not the same. 

 

UXp/ oration Logo UXp/ oration Material

OT€shve9Cew'~= !§. %wa
TLDR;  Material Design

 

Material is a metaphor which is inspired by the theory
of Paper and Ink,  yet technologically a...
Creating Material Design Icons

 

1. ldeating your logo as paper. 
Each icon is cut,  fold and lit as paper would be. 

 ...
Creating Material Design Icons

 

2. Creating a Sketch and a Paper Prototype

Use the / dealing phase and iconography pri...
Creating Material Design Icons

3. Choosing a Keyline shape to follow. 

Circle

Diameter:  176dp

Square

Height:  152dp
...
Creating Material Design Icons

 

4. Geometry

 

l ‘
l

 

Preset standards have been determined for specific keylines:  ...
Creating Material Design Icons

 

5. Product Icon Grid

The product icon grid has been
developed to facilitate consistenc...
Understanding Anatomy of Icons

 

1. Finish O
2. Material Background Q
3. Material Foreground

4. Color

 

5. Shadow

OI...
Understanding Anatomy of Icons

 

1. Finish ‘
2. Material Background
3. Material Foreground . 

4. Color

‘/ 
5. Shadow e...
Let's get our hands dirty! 

 

These were the basics of iconography using Material Design. 

There are more things to kee...
Nächste SlideShare
Wird geladen in …5
×

Iconography with Material Design

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.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×