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
   

   View Slide

2. 1993.04.30
   

   View Slide

3. World
   Wide
   Web
   World
   Wide
   Web
   

   View Slide

4. info.cern.ch
   

   View Slide

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

   View Slide

6. www.nasa.gov
   

   View Slide

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

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. ∞
    

    View Slide

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

    View Slide

17. View Slide

18. Howard Gardner
    Developmental Psychologist
    

    View Slide

19. Logic
    Creative
    v.s.
    v.s.
    

    View Slide

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

    View Slide

21. 
    
    

    View Slide

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

    View Slide

23. Alan Cooper
    Father of Visual Basic
    

    View Slide

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

    View Slide

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

    View Slide

26. Rise of
    Mobile Web
    

    View Slide

27. 
    

    View Slide

28. 
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. codepen.io/sol0mka/full/Jsyxq
    

    View Slide

33. Ωϟϯόε
    
    ‖
    

    View Slide

34. HTML,
    CSS &
    JavaScript
    

    View Slide

35. Bret Victor
    Designer
    

    View Slide

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.
    ❞
    

    View Slide

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.
    ❞
    

    View Slide

38. Answer to Many Questions on
    Web is almost always:
    It depends Or 42
    

    View Slide

39. www.bohemiancoding.com/sketch
    

    View Slide

40. Workflow
    Needs to
    Adapt the Change.
    

    View Slide

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

    View Slide

42. 20 years old
    

    View Slide

43. 1997 - 2001
    Dot Com Bubble
    

    View Slide

44. 2004
    Web 2.0
    

    View Slide

45. View Slide

46. 
    
    
    
    

    View Slide

47. ϓϥοτϑΥʔϜ
    

    View Slide

48.  ✉ 
    

    View Slide

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

    View Slide

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

    View Slide

51. View Slide

52. ৘
    ใ
    ऩ
    ू
    ઃ
    ܭ
    σ
    β
    Π
    ϯ
    ։
    ൃ
    ς
    ε
    τ
    
    σ
    ϓ
    ϩ
    Π
    ϝ
    ϯ
    ς
    φ
    ϯ
    ε
    

    View Slide

53. Stephen Hay
    CEO of Zero Interface
    

    View Slide

54. The landscape has changed, but our
    workflows have not.
    We need to change that.
    ❞
    

    View Slide

55. ઃ
    ܭ
    σ
    β
    Π
    ϯ
    ։
    ൃ
    
    

    View Slide

56. ։
    ൃ
    σ
    β
    Π
    ϯ
    

    View Slide

57. ։
    ൃ
    

    View Slide

58. ઃ
    ܭ
    σ
    β
    Π
    ϯ
    ։
    ൃ
    
    

    View Slide

59. Andy Clarke
    Designer
    

    View Slide

60. One answer is to design a system,
    not a web page or site.
    ❞
    

    View Slide

61. Designing
    in the
    Browser
    might be
    the answer.
    

    View Slide

62. Prototype First,
    Photoshop Later.
    

    View Slide

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

    View Slide

64. Design vs. Code
    ❌
    

    View Slide

65. Design and Code
    

    View Slide

66. Designing
    in the Browser
    

    View Slide

67. www.facebook.com/home
    

    View Slide

68. Quartz Composer
    

    View Slide

69. Julie Zhuo
    Product design director
    @ Facebook
    

    View Slide

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.
    ❞
    

    View Slide

71. Which way should
    We go?
    

    View Slide

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

    View Slide

73. What is Card!?
    Χʔυͬͯ
    

    View Slide

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

    View Slide

75. View Slide

76. Card
    Component
    Module
    ♥
    

    View Slide

77. Just enough
    
    Information.
    

    View Slide

78. Pinterest
    

    View Slide

79. Chrome Web Store
    

    View Slide

80. Readability
    

    View Slide

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

    View Slide

82. View Slide

83. View Slide

84. Build a Foundation
    جૅ޻ࣄ
    

    View Slide

85. Typography
    λΠϙάϥϑΟ
    

    View Slide

86. Color Scheme
    ΧϥʔεΩʔϜ
    

    View Slide

87. UI Toolkit
    UIπʔϧΩοτ
    

    View Slide

88. topcoat.io
    

    View Slide

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

    View Slide

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

    View Slide

91. View Slide

92. View Slide

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

    View Slide

94. html5boilerplate.com
    

    View Slide

95. getbootstrap.com
    

    View Slide

96. D.R.Y
    Don’t Repeat Yourself
    

    View Slide

97. Sir Jonathan Ive
    Senior Vice President of Design
    @ Apple
    

    View Slide

98. It’s very easy to be different,
    but very difficult to be better.
    ❞
    

    View Slide

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

    View Slide

100. Tools
     

     View Slide

101. View Slide

102. Requirement for
     Designing Cards
     

     View Slide

103. Partial
     Priority: High
     

     View Slide

104. Data Listing
     Priority: Middle
     

     View Slide

105. Boilerplate
     Priority: Middle
     

     View Slide

106. Data Model
     Priority: Low
     

     View Slide

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

     View Slide

108. Mixture
     

     View Slide

109. Roots
     

     View Slide

110. Middleman
     

     View Slide

111. github.com/jensimmons/designstarterkit
     

     View Slide

112. Recap
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

116. Bret Victor
     Designer
     

     View Slide

117. View Slide

118. The most dangerous thought you can
     have as a creative person is to think
     you know what you're doing.
     ❞
     

     View Slide

119. Learn tools, and use tools, but don't
     accept tools. Always distrust them;
     always be alert for alternative
     ways of thinking.
     ❞
     

     View Slide

120. Thank You!
     Follow me @ cssradar
     

     View Slide