Atomic Design at WordCamp Nagpur 2017

Transcript

1. Atomic Design @jaymanpandya WordCamp Nagpur 2017
2. WordCamp Nagpur 2017
3. WordCamp Nagpur 2017
4. WordCamp Nagpur 2017
5. WordCamp Nagpur 2017
6. WordCamp Nagpur 2017
7. WordCamp Nagpur 2017
8. Actual photo of a Hydrogen Atom WordCamp Nagpur 2017
9. Actual photo of a Hydrogen Atom Comical visualisation of Oxygen Atom WordCamp Nagpur 2017
10. Why are we discussing this? Isn’t this a WordCamp!!! WordCamp Nagpur 2017
11. Chuck that… Tell me do you guys scope your projects on the basis on # of pages? WordCamp Nagpur 2017
12. Screens do not have pages… Then why do we use the term “pages”? WordCamp Nagpur 2017
13. Do any of you recognise him? WordCamp Nagpur 2017
14. Do any of you recognise him? WordCamp Nagpur 2017 Sir Tim(othy) Berners Lee Inventor of World-Wide Web
15. WordCamp Nagpur 2017 But… Are pages the best way to scope projects?
16. WordCamp Nagpur 2017 This is just the beginning - Image Credits - BradFrost
17. Disruption will only accelerate. The quantity and diversity of connected devices — many of which we haven’t imagined yet — will explode, as will the quantity and diversity of the people around the world who use them. Our existing standards, workflows, and infrastructure won’t hold up. Today’s onslaught of devices is already pushing them to the breaking point. They can’t withstand what’s ahead. WordCamp Nagpur 2017 - The Future Friendly manifesto
18. WordCamp Nagpur 2017 Modularity
19. What is Modularity? WordCamp Nagpur 2017
20. WordCamp Nagpur 2017
21. WordCamp Nagpur 2017
22. WordCamp Nagpur 2017
23. It’s not necessarily about using Bootstrap, but rather creating tiny Bootstraps for every client. WordCamp Nagpur 2017 - Dave Rupert
24. WordCamp Nagpur 2017
25. Actual photo of a Hydrogen Atom Comical visualisation of Oxygen Atom WordCamp Nagpur 2017
26. WordCamp Nagpur 2017
27. WordCamp Nagpur 2017 ATOMS
28. WordCamp Nagpur 2017 ATOMS MOLECULES
29. WordCamp Nagpur 2017 ATOMS MOLECULES ORGANISMS
30. WordCamp Nagpur 2017 ATOMS MOLECULES ORGANISMS TEMPLATES
31. WordCamp Nagpur 2017 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
32. WordCamp Nagpur 2017 ATOMS Test Site 0 New Howdy, Jayman
33. WordCamp Nagpur 2017 MOLECULES Test Site 0 New Howdy, Jayman
34. WordCamp Nagpur 2017 ORGANISMS Test Site 0 New Howdy, Jayman
35. WordCamp Nagpur 2017 TEMPLATES
36. WordCamp Nagpur 2017 PAGES Test Site 0 New Howdy, Jayman Dashboard Home Updates Posts Media Pages Comments Appearance Plugins Users Tools Settings Collapse menu Thank you for creating with WordPress. Version 4.8 Drag boxes here Dashboard At a Glance 1 Post WordPress 4.8 running Twenty Seventeen theme. Search Engines Discouraged 1 Comment 1 Page All (1) | Pending (0) | Approved (1) | Spam (0) | Trash (0) Activity Recent Comments Recently Published Jun 12th 7:21 pm From A WordPress Commenter on Hello World! Hi, this is a comment. To get started with moderating, editing, and deleting comments, please visit the Comments screen in… Hello World! WordPress 4.8 “Evans” WPTavern: WordCamp Europe 2017 Draws 1900 Attendees from 79 Countries Matt: 4.8 and What’s Coming Meetups WordCamps News WordPress Events and News Attend an upcoming event near you. Mumbai, India Saturday, Jun 17, 2017 4:00 pm How to Edit Your Articles? Mumbai, India Sunday, Nov 5, 2017 WordCamp Nashik Title What’s on your mind? Safe Draft Quick Draft Screen Options Help
37. WordCamp Nagpur 2017 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
38. WordCamp Nagpur 2017 ATOMS MOLECULES ORGANISMS TEMPLATES PAGES abstract concrete
39. Enough of gyaan WordCamp Nagpur 2017
40. Let’s see how should we implement Atomic Design WordCamp Nagpur 2017
41. It’s People WordCamp Nagpur 2017
42. Again gyaan… Sorry… WordCamp Nagpur 2017
43. Interface Inventory WordCamp Nagpur 2017
44. WordCamp Nagpur 2017 Don't take all the work on yourself
45. WordCamp Nagpur 2017 The unexpected tool
46. Interface Inventory WordCamp Nagpur 2017
47. Capture categories like WordCamp Nagpur 2017 GLOBAL ELEMENTS
48. Capture categories like WordCamp Nagpur 2017 GLOBAL ELEMENTS HEADINGS
49. Capture categories like WordCamp Nagpur 2017 NAVIGATION GLOBAL ELEMENTS HEADINGS
50. Capture categories like WordCamp Nagpur 2017 NAVIGATION GLOBAL ELEMENTS BLOCKS HEADINGS
51. Capture categories like WordCamp Nagpur 2017 NAVIGATION IMAGE TYPES GLOBAL ELEMENTS BLOCKS HEADINGS
52. Capture categories like WordCamp Nagpur 2017 NAVIGATION IMAGE TYPES GLOBAL ELEMENTS BLOCKS LISTS HEADINGS
53. Capture categories like WordCamp Nagpur 2017 NAVIGATION IMAGE TYPES ICONS GLOBAL ELEMENTS BLOCKS LISTS HEADINGS
54. Capture categories like WordCamp Nagpur 2017 NAVIGATION IMAGE TYPES ICONS GLOBAL ELEMENTS BLOCKS LISTS INTERACTIVE COMPONENTS HEADINGS
55. Capture categories like WordCamp Nagpur 2017 NAVIGATION IMAGE TYPES ICONS FORMS GLOBAL ELEMENTS BLOCKS LISTS INTERACTIVE COMPONENTS HEADINGS
56. Capture categories like WordCamp Nagpur 2017 NAVIGATION IMAGE TYPES ICONS FORMS GLOBAL ELEMENTS BLOCKS LISTS INTERACTIVE COMPONENTS MEDIA HEADINGS
57. Capture categories like WordCamp Nagpur 2017 NAVIGATION IMAGE TYPES ICONS FORMS GLOBAL ELEMENTS BLOCKS LISTS INTERACTIVE COMPONENTS MEDIA HEADINGS COLORS & ANIMATIONS
58. WordCamp Nagpur 2017 Best things in the world are not longer than 90 minutes
59. WordCamp Nagpur 2017 Brew your Maggi.
60. What questions are to be answered? WordCamp Nagpur 2017 WHICH PATTERNS SHOULD STAY? WHAT TERMINOLOGY TO USE?
61. Go on and develop a full-fledged design system document WordCamp Nagpur 2017
62. These can be: WordCamp Nagpur 2017 STYLE TILES ELEMENT COLLAGES
63. How to maintain? WordCamp Nagpur 2017
64. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it
65. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it APPROACHABLE
66. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it ADAPTABLE APPROACHABLE
67. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it ADAPTABLE APPROACHABLE VISIBLE
68. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it ADAPTABLE MAINTAINABLE APPROACHABLE VISIBLE
69. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it ADAPTABLE MAINTAINABLE APPROACHABLE VISIBLE BIGGER
70. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it ADAPTABLE MAINTAINABLE CROSS-DISCIPLINARY APPROACHABLE VISIBLE BIGGER
71. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it ADAPTABLE MAINTAINABLE CROSS-DISCIPLINARY APPROACHABLE VISIBLE BIGGER CONTEXTUAL
72. How to maintain? WordCamp Nagpur 2017 OFFICIAL Make it ADAPTABLE MAINTAINABLE CROSS-DISCIPLINARY APPROACHABLE VISIBLE BIGGER CONTEXTUAL LAST
73. If possible, get the final elements made in HTML/CSS for faster implementation. WordCamp Nagpur 2017
74. WordCamp Nagpur 2017
75. Thank You! WordCamp Nagpur 2017