Material Design

Three speakers talked about platform specific UI designing. Anjan shared his experience of designing in Andriod with special focus on Material Design during Ncell App Camp 2015.

Transcript

1. Material Design¬ .
2. h"ps://www.youtube.com/watch?v=Q8TXgCzxEnw   Introducing  Material  Design  
3. Material is the metaphor Bold, Graphic & Intentional + Motion gives meaning One adaptive design
4. Material is the metaphor Bold, Graphic & Intentional + Motion gives meaning One adaptive design
5. Material is the metaphor Motion gives meaning One adaptive design Bold, Graphic & Intentional +
6. Material is the metaphor One adaptive design Bold, Graphic & Intentional + Motion gives meaning
7. Material is the metaphor Bold, Graphic & Intentional + Motion gives meaning One adaptive design
8. Color
10. Primary Color Accent Color View Bio Prashant Shrestha @prashant_sh Cybernaut Creations Cybernaut Creations ASSOCIATED IDEAS Software Engineer Young Innovations Developer PROFESSION ORGANIZATION ROLE
11. https://www.google.com/design/spec/ style/color.html#color-color-palette
12. h"ps://www.youtube.com/watch?v=xYkz0Ueg0L4   Using  Color  Pale"e  
13. Pale"e  Library  
15. Typography
17. Who’s coming Anjan Shrestha Anjesh Tuladhar Ankur Sharma Chandan Gupta Bhagat Kailash Gyawali Co-Founder, V.P. Product Innovations, YoungInnovations Chief Innovations Officer, YoungInnovations Co-founder & UX, Expresiv Studios Cofounder, Solutions Architect, Yorbit Technologies Pvt. Ltd. Creative Head, F1Soft International Pvt. Ltd. Trainer Trainer Trainer Trainer Trainer
18. का # त % क आ सो मं बु ब - शु श १ २ ३ ४ ५ ६ ७ ८ ९ १० ११ १२ १३ १४ १५ १६ १७ १८ १९ २० २१ २२ २३ २४ २५ २६ २७ २८ २९ ३० १ २ ३ ४ ५ पा: ३ ४ फ ु लपाती/ नवप त्र ि का प्रवेश महाअष्टमी आज भो ल ि सप्तमी अष्टमी
20. Elevation & Shadows
23. Ncell App Camp 2015 UPCOMING EVENTS 4 July 2015 Ncell App Camp 2015 Press Conference Hotel Soaltee ALL IDEAS HEALTH No ideas posted here yet. BE THE FIRST! BE THE FIRST! ¯\_(
    )_/¯
24. Username Password Login LOGIN FORGOT PASSWORD REGISTER NOW If you are not a member yet, SUBMIT CANCEL Enter your Username or email Username or email Ncell App Camp 2015
25. https://www.google.com/design/spec/what-is-material/elevation- shadows.html#elevation-shadows-elevation-android-
26. Meaningful Motion
27. Responsive Surface
28. Meaningful Transition
29. Delightful Details
30. Quick Workflow to get you started
31. Pick your favourite tool!
32. Pick your favourite tool! (Mine is Sketch app)
33. Start with a new document
34. Start with a new document Width = 360px Height = 640px 360px 640px
35. Create a grid of 8px
37. Create a grid of 8px
38. Throw in Material Design’s GUI elements
40. Sketch has it inbuilt
43. Copy & Paste the app bar and status bar (if you want, navbar too) in your artboard
44. You may disable the grid to see what it looks like All
45. Be careful on the Metrics and Keylines J All
46. All 16px 72px
47. Change color to match your brand/ app style. Change text to match your screen’s title. Who’s coming
48. Start adding other elements Day - I Who’s coming Day - II Type something Type something Type something Type something Type something Type something Type something Type something Type something Type something Type something Type something
49. Again, make sure you get the spacing right J Day - I Who’s coming Type something Type something Type something Type something Type something Type something 48px 72px 72px 72px
50. Fill the placeholders with your app data Day - I Who’s coming Day - II Frances Powell Washington Julie Duncan Chesapeake Juan Daniels Birmingham Olivia Hudson Boston Terry Nelson Houston Samantha Holmes Henderson
51. Use prototyping tools to test your design Principle for Mac Pixate Flinto for Mac Origami
52. Handing off your design to developers
53. Provide Specs of your design with Zeplin http://zeplin.io
54. Provide Specs of your design with Avocode http://avocode.com
55. Export assets into 4 dimensions 24pxX24px 36pxX36px 48pxX48px 72pxX72px Day - I Who’s coming Frances Powell Washington 1.5x 2x 3x
56. Easy export options in Sketch
57. Resources
58. Material Design Guidelines https://www.google.com/design/spec/material-design/introduction.html
59. MaterialUp http://materialup.com
60. Sketch App TV https://www.youtube.com/channel/ UCSdp5logiFTM3SyLJrHabOQ
61. Follow these people in Google+ Roman Nurik Nick Butcher Chris Basha
62. Material Design Awards Pocket Weather Timeline Tumblr NY Times B&H Photo Video Pro Audio Pocket Casts
63. Material  Design  Award  Showcase   h"ps://www.youtube.com/watch?v=Xtu7ZOQScrI  
64. Follow the user And everything else will follow
65. Anjan Shrestha http://anjhero.me @anjhero