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.
lconography
with Material Design
6 +Swapn/ '/B0

j
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...
I W ‘I link?   in-i‘l‘im-. i , ::. r-.4": -.4“ = :-. f

1. First Interaction a User has with your Product.
'1l‘5‘, 'A'* -ii:  _l: -ioinri : -ioi_| _Ii '1]-| |.oI’(‘-I (I:  C‘. oI:1!I'-IT!  '-l_I_I*i-I‘—‘ ~
2. Defines what your Pr...
3. Contributes to the whole OS Experience. 

30

‘AG/ «G »'Fl)‘uVRV Aliiienisinl; : mmzon Show

we

IJD’. ‘MIIySllV, iw Ca...
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. 

 

UXploration Logo UXp/ oration Material
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. Ideating 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 Ideating phase and lconography prin...
Creating Material Design Icons

3. Choosing a Keyline shape to follow. 

Circle

Diameter:  176dp

Square

Height:  152dp
...
Creating Material Design Icons

 

4. Geometry

 

‘ ‘
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
2. Material Background
3. Material Foreground

4. Color

 

5. Shadow
Understanding Anatomy of Icons

 

1. Finish . 
2. Material Background
3. Material Foreground .  if . a;5_

4. Color

°/ 
...
Let's get our hands dirty! 

 

These were the basics of lconography using Material Design. 

There are more things to kee...
Upcoming SlideShare
Loading in …5
×

Iconography with Material Design (Workshop)

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. Generally Developers and Designers tend to stick a logo with a little shadow to call it an icon, but that's not it.

Iconography is far more complex especially when we talk in terms of it being WRT Material Design. Material design takes inspiration from Ink and Paper to use their physical properties such as cuts, folds and light to emulate icons as paper itself.

We skim through the basic thing to keep in mind while creating icon prototypes with Material Design with an actual physical first of it's kind workshop involving how to cast shadows, tints, shades, Z axis elevation and a lot of Craft and Origami.

This was conducted in SPIT College, Andheri on 22-08-15, courtesy of TechVed Consulting, where participants created beautiful material design icons on paper.

  • Be the first to comment

Iconography with Material Design (Workshop)

  1. 1. lconography with Material Design 6 +Swapn/ '/B0 j
  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.
  4. 4. I W ‘I link? in-i‘l‘im-. i , ::. r-.4": -.4“ = :-. f 1. First Interaction a User has with your Product.
  5. 5. '1l‘5‘, 'A'* -ii: _l: -ioinri : -ioi_| _Ii '1]-| |.oI’(‘-I (I: C‘. oI:1!I'-IT! '-l_I_I*i-I‘—‘ ~ 2. Defines what your Product/ App does. L i”‘”’ [I _ J _, Solid Explorer PowerGrasp File Manager File Manager
  6. 6. 3. Contributes to the whole OS Experience. 30 ‘AG/ «G »'Fl)‘uVRV Aliiienisinl; : mmzon Show we IJD’. ‘MIIySllV, iw Calculator CdI1Ll‘, ‘CUllS ‘ (lean Master Ciouukluqic Calm incl: -v
  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 wan «mun mi fiitfii rm r‘u, ii. w‘. . irri ' M: Yin W I M , [H J“ i. i.. i.. an , iIlii. lllJ. !(_v
  8. 8. Logos v/ s Icons They are not the same. UXploration Logo UXp/ oration Material
  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. Ideating your logo as paper. Each icon is cut, fold and lit as paper would be.
  11. 11. Creating Material Design Icons 2. Creating a Sketch and a Paper Prototype Use the Ideating phase and lconography 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
  13. 13. Creating Material Design Icons 4. Geometry ‘ ‘ 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.
  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.
  15. 15. Understanding Anatomy of Icons 1. Finish 2. Material Background 3. Material Foreground 4. Color 5. Shadow
  16. 16. Understanding Anatomy of Icons 1. Finish . 2. Material Background 3. Material Foreground . if . a;5_ 4. Color °/ 5. Shadow 6/ Constructive
  17. 17. Let's get our hands dirty! These were the basics of lconography 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

×