O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Iconography with Material Design (Workshop)

833 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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