Designing in the Browser ver. 1.0 RC

2013/09/14 (土) - 第15回リクリセミナー「Frontrend in Osaka」

Transcript

1. Frontrend in Osaka 2013.09.14 Yuya Saito in the Designing Browser in the ver. 1.0 RC
2. 1993.04.30
3. World Wide Web World Wide Web
4. info.cern.ch
5. Web has been changing constantly for 20 years. ͜ͷ೥ɺ 8FC͸ίϯελϯτʹมԽ͚͍ͭͮͯ͠·͢ɻ
6. www.nasa.gov
7. Web has been changing the world for 20 years. ݟํΛม͑Ε͹Web͸ੈքΛม͑ଓ͚͍ͯΔͱ΋ݴ͑·͢ɻ
12. Web will be changing. Web͸͜Ε͔Β΋มΘΓଓ͚͍ͯ͘͜ͱͰ͠ΐ͏ɻ
13. ## σβΠφ͸ίʔυΛॻ͘΂͖͔ ## ΢ΣϒσβΠϯͷݱࡏ ## Πϯϒϥ΢βσβΠϯɾϨγϐ Agenda Agenda
14. Should Designer Write Code? σβΠφ͸ίʔυΛॻ͘΂͖͔
15. ∞
16. σβΠφ͕ίʔυΛ ॻ͘΂͖Ͱ͸ͳ͍ཧ༝
18. Howard Gardner Developmental Psychologist
19. Logic Creative v.s. v.s.
20. Design is hard enough! σβΠϯ͸೉͍͠
21. 
22. Knowing Limitations Will Influence Design. ϓϩάϥϜଆͷݶքͷଘࡏ͕ σβΠϯʹӨڹ͢Δɻ
23. Alan Cooper Father of Visual Basic
24. ⚙ ࣮૷Ϟσϧ f ϝϯλϧϞσϧ
25. σβΠφ͕ίʔυΛ ॻ͘΂͖ཧ༝
26. Rise of Mobile Web
27. 
28. <table>
32. codepen.io/sol0mka/full/Jsyxq
33. Ωϟϯόε  ‖
34. HTML, CSS & JavaScript
35. Bret Victor Designer
36. An essential aspect of a painter's canvas and a musical instrument is the immediacy with which the artist gets something there to react to. ❞
37. A canvas or sketchbook serves as an "external imagination", where an artist can grow an idea from birth to maturity by continuously reacting to what's in front of him. ❞
38. Answer to Many Questions on Web is almost always: It depends Or 42
39. www.bohemiancoding.com/sketch
40. Workflow Needs to Adapt the Change.
41. What is ΢ΣϒσβΠϯͷࠓ Web Design Now?
42. 20 years old
43. 1997 - 2001 Dot Com Bubble
44. 2004 Web 2.0
46.   
47. ϓϥοτϑΥʔϜ
48.  ✉ 
49. www.nytimes.com/projects/2012/snow-fall
50. adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src
52. ৘ ใ ऩ ू ઃ ܭ σ β Π ϯ ։ ൃ ς ε τ  σ ϓ ϩ Π ϝ ϯ ς φ ϯ ε
53. Stephen Hay CEO of Zero Interface
54. The landscape has changed, but our workflows have not. We need to change that. ❞
55. ઃ ܭ σ β Π ϯ ։ ൃ
56. ։ ൃ σ β Π ϯ
57. ։ ൃ
58. ઃ ܭ σ β Π ϯ ։ ൃ
59. Andy Clarke Designer
60. One answer is to design a system, not a web page or site. ❞
61. Designing in the Browser might be the answer.
62. Prototype First, Photoshop Later.
63. A Recipe for Designing in the Browser Πϯϒϥ΢βσβΠϯɾϨγϐ
64. Design vs. Code ❌
65. Design and Code
66. Designing in the Browser
67. www.facebook.com/home
68. Quartz Composer
69. Julie Zhuo Product design director @ Facebook
70. The tools that kept you safe thus far, that you've mastered well enough to use in your sleep—those tools will not always be sufficient. […] So invest in new tools. ❞
71. Which way should We go?
72. Design a Card ΧʔυΛσβΠϯ͢Δ
73. What is Card!? Χʔυͬͯ
74. insideintercom.io/why-cards-are-the-future-of-the-web
76. Card Component Module ♥
77. Just enough  Information.
78. Pinterest
79. Chrome Web Store
80. Readability
81. ੪౻
    ༞໵ Front-end Developer Text T ext Text Text
84. Build a Foundation جૅ޻ࣄ
85. Typography λΠϙάϥϑΟ
86. Color Scheme ΧϥʔεΩʔϜ
87. UI Toolkit UIπʔϧΩοτ
88. topcoat.io
89. UI Toolkit is: Reference UIπʔϧΩοτ͸ ϦϑΝϨϯε
90. UI Toolkit is: Document UIπʔϧΩοτ͸ υΩϡϝϯτ
93. Build Your UI Toolkit UIπʔϧΩοτ͸૑Δ΋ͷ
94. html5boilerplate.com
95. getbootstrap.com
96. D.R.Y Don’t Repeat Yourself
97. Sir Jonathan Ive Senior Vice President of Design @ Apple
98. It’s very easy to be different, but very difficult to be better. ❞
99. Iterate on What’s Important. Fail Fast, Fail Often.
100. Tools
102. Requirement for Designing Cards
103. Partial Priority: High
104. Data Listing Priority: Middle
105. Boilerplate Priority: Middle
106. Data Model Priority: Low
107. Nice to Have Functions $44ϓϦϓϩηοαͷࣗಈίϯύΠϧ ϏϧτΠϯɾαʔό ࣗಈϒϥ΢βϦϩʔυ
108. Mixture
109. Roots
110. Middleman
111. github.com/jensimmons/designstarterkit
112. Recap
113. Should Designer Write Code? σβΠφ͸ίʔυΛॻ͘΂͖͔ R ecap
114. What is ΢ΣϒσβΠϯͷࠓ Web Design Now? R ecap
115. A Recipe for Designing in the Browser Πϯϒϥ΢βσβΠϯɾϨγϐ R ecap
116. Bret Victor Designer
118. The most dangerous thought you can have as a creative person is to think you know what you're doing. ❞
119. Learn tools, and use tools, but don't accept tools. Always distrust them; always be alert for alternative ways of thinking. ❞
120. Thank You! Follow me @ cssradar