Designing in the Browser ver. 1.0 RC

Transcript

1. 1.

   Frontrend in Osaka 2013.09.14 Yuya Saito in the Designing Browser

   in the ver. 1.0 RC
2. 2.

   1993.04.30

3. 3.

   World Wide Web World Wide Web

4. 4.

   info.cern.ch

5. 5.

   Web has been changing constantly for 20 years. ͜ͷ೥ɺ 8FC͸ίϯελϯτʹมԽ͚͍ͭͮͯ͠·͢ɻ

6. 6.

   www.nasa.gov

7. 7.

   Web has been changing the world for 20 years. ݟํΛม͑Ε͹Web͸ੈքΛม͑ଓ͚͍ͯΔͱ΋ݴ͑·͢ɻ

8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

    None
12. 12.

    Web will be changing. Web͸͜Ε͔Β΋มΘΓଓ͚͍ͯ͘͜ͱͰ͠ΐ͏ɻ

13. 13.

    ## σβΠφ͸ίʔυΛॻ͘΂͖͔ ## ΢ΣϒσβΠϯͷݱࡏ ## Πϯϒϥ΢βσβΠϯɾϨγϐ Agenda Agenda

14. 14.

    Should Designer Write Code? σβΠφ͸ίʔυΛॻ͘΂͖͔

15. 15.

    ∞

16. 16.

    σβΠφ͕ίʔυΛ ॻ͘΂͖Ͱ͸ͳ͍ཧ༝

17. 17.

    None
18. 18.

    Howard Gardner Developmental Psychologist

19. 19.

    Logic Creative v.s. v.s.

20. 20.

    Design is hard enough! σβΠϯ͸೉͍͠

21. 21.

    

22. 22.

    Knowing Limitations Will Influence Design. ϓϩάϥϜଆͷݶքͷଘࡏ͕ σβΠϯʹӨڹ͢Δɻ

23. 23.

    Alan Cooper Father of Visual Basic

24. 24.

    ⚙ ࣮૷Ϟσϧ f ϝϯλϧϞσϧ

25. 25.

    σβΠφ͕ίʔυΛ ॻ͘΂͖ཧ༝

26. 26.

    Rise of Mobile Web

27. 27.

    

28. 28.

    <table>

29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

    codepen.io/sol0mka/full/Jsyxq

33. 33.

    Ωϟϯόε  ‖

34. 34.

    HTML, CSS & JavaScript

35. 35.

    Bret Victor Designer

36. 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. 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. 38.

    Answer to Many Questions on Web is almost always: It

    depends Or 42
39. 39.

    www.bohemiancoding.com/sketch

40. 40.

    Workflow Needs to Adapt the Change.

41. 41.

    What is ΢ΣϒσβΠϯͷࠓ Web Design Now?

42. 42.

    20 years old

43. 43.

    1997 - 2001 Dot Com Bubble

44. 44.

    2004 Web 2.0

45. 45.

    None
46. 46.

      

47. 47.

    ϓϥοτϑΥʔϜ

48. 48.

     ✉ 

49. 49.

    www.nytimes.com/projects/2012/snow-fall

50. 50.

    adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src

51. 51.

    None
52. 52.

    ৘ ใ ऩ ू ઃ ܭ σ β Π ϯ

    ։ ൃ ς ε τ  σ ϓ ϩ Π ϝ ϯ ς φ ϯ ε
53. 53.

    Stephen Hay CEO of Zero Interface

54. 54.

    The landscape has changed, but our workflows have not. We

    need to change that. ❞
55. 55.

    ઃ ܭ σ β Π ϯ ։ ൃ

56. 56.

    ։ ൃ σ β Π ϯ

57. 57.

    ։ ൃ

58. 58.

    ઃ ܭ σ β Π ϯ ։ ൃ

59. 59.

    Andy Clarke Designer

60. 60.

    One answer is to design a system, not a web

    page or site. ❞
61. 61.

    Designing in the Browser might be the answer.

62. 62.

    Prototype First, Photoshop Later.

63. 63.

    A Recipe for Designing in the Browser Πϯϒϥ΢βσβΠϯɾϨγϐ

64. 64.

    Design vs. Code ❌

65. 65.

    Design and Code

66. 66.

    Designing in the Browser

67. 67.

    www.facebook.com/home

68. 68.

    Quartz Composer

69. 69.

    Julie Zhuo Product design director @ Facebook

70. 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. 71.

    Which way should We go?

72. 72.

    Design a Card ΧʔυΛσβΠϯ͢Δ

73. 73.

    What is Card!? Χʔυͬͯ

74. 74.

    insideintercom.io/why-cards-are-the-future-of-the-web

75. 75.

    None
76. 76.

    Card Component Module ♥

77. 77.

    Just enough  Information.

78. 78.

    Pinterest

79. 79.

    Chrome Web Store

80. 80.

    Readability

81. 81.

    ੪౻
    ༞໵ Front-end Developer Text T ext Text Text

82. 82.

    None
83. 83.

    None
84. 84.

    Build a Foundation جૅ޻ࣄ

85. 85.

    Typography λΠϙάϥϑΟ

86. 86.

    Color Scheme ΧϥʔεΩʔϜ

87. 87.

    UI Toolkit UIπʔϧΩοτ

88. 88.

    topcoat.io

89. 89.

    UI Toolkit is: Reference UIπʔϧΩοτ͸ ϦϑΝϨϯε

90. 90.

    UI Toolkit is: Document UIπʔϧΩοτ͸ υΩϡϝϯτ

91. 91.

    None
92. 92.

    None
93. 93.

    Build Your UI Toolkit UIπʔϧΩοτ͸૑Δ΋ͷ

94. 94.

    html5boilerplate.com

95. 95.

    getbootstrap.com

96. 96.

    D.R.Y Don’t Repeat Yourself

97. 97.

    Sir Jonathan Ive Senior Vice President of Design @ Apple

98. 98.

    It’s very easy to be different, but very difficult to

    be better. ❞
99. 99.

    Iterate on What’s Important. Fail Fast, Fail Often.

100. 100.

     Tools

101. 101.

     None
102. 102.

     Requirement for Designing Cards

103. 103.

     Partial Priority: High

104. 104.

     Data Listing Priority: Middle

105. 105.

     Boilerplate Priority: Middle

106. 106.

     Data Model Priority: Low

107. 107.

     Nice to Have Functions $44ϓϦϓϩηοαͷࣗಈίϯύΠϧ ϏϧτΠϯɾαʔό ࣗಈϒϥ΢βϦϩʔυ

108. 108.

     Mixture

109. 109.

     Roots

110. 110.

     Middleman

111. 111.

     github.com/jensimmons/designstarterkit

112. 112.

     Recap

113. 113.

     Should Designer Write Code? σβΠφ͸ίʔυΛॻ͘΂͖͔ R ecap

114. 114.

     What is ΢ΣϒσβΠϯͷࠓ Web Design Now? R ecap

115. 115.

     A Recipe for Designing in the Browser Πϯϒϥ΢βσβΠϯɾϨγϐ R ecap

116. 116.

     Bret Victor Designer

117. 117.

     None
118. 118.

     The most dangerous thought you can have as a creative

     person is to think you know what you're doing. ❞
119. 119.

     Learn tools, and use tools, but don't accept tools. Always

     distrust them; always be alert for alternative ways of thinking. ❞
120. 120.

     Thank You! Follow me @ cssradar