Designing in the Browser ver. 1.0 RC

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
September 15, 2013

Designing in the Browser ver. 1.0 RC

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

September 15, 2013
Tweet

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͸ੈքΛม͑ଓ͚͍ͯΔͱ΋ݴ͑·͢ɻ

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

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

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

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

  16. None
  17. Howard Gardner Developmental Psychologist

  18. Logic Creative v.s. v.s.

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

  20. 

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

  22. Alan Cooper Father of Visual Basic

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

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

  25. Rise of Mobile Web

  26. <table>

  27. None
  28. None
  29. None
  30. codepen.io/sol0mka/full/Jsyxq

  31. Ωϟϯόε  ‖

  32. HTML, CSS & JavaScript

  33. Bret Victor Designer

  34. 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. ❞
  35. 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. ❞
  36. Answer to Many Questions on Web is almost always: It

    depends Or 42
  37. www.bohemiancoding.com/sketch

  38. Workflow Needs to Adapt the Change.

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

  40. 20 years old

  41. 1997 - 2001 Dot Com Bubble

  42. 2004 Web 2.0

  43. None
  44.   

  45. ϓϥοτϑΥʔϜ

  46.  ✉ 

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

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

  49. None
  50. ৘ ใ ऩ ू ઃ ܭ σ β Π ϯ

    ։ ൃ ς ε τ  σ ϓ ϩ Π ϝ ϯ ς φ ϯ ε
  51. Stephen Hay CEO of Zero Interface

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

    need to change that. ❞
  53. ઃ ܭ σ β Π ϯ ։ ൃ

  54. ։ ൃ σ β Π ϯ

  55. ։ ൃ

  56. ઃ ܭ σ β Π ϯ ։ ൃ

  57. Andy Clarke Designer

  58. One answer is to design a system, not a web

    page or site. ❞
  59. Designing in the Browser might be the answer.

  60. Prototype First, Photoshop Later.

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

  62. Design vs. Code ❌

  63. Design and Code

  64. Designing in the Browser

  65. www.facebook.com/home

  66. Quartz Composer

  67. Julie Zhuo Product design director @ Facebook

  68. 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. ❞
  69. Which way should We go?

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

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

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

  73. None
  74. Card Component Module ♥

  75. Just enough  Information.

  76. Pinterest

  77. Chrome Web Store

  78. Readability

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

  80. None
  81. None
  82. Build a Foundation جૅ޻ࣄ

  83. Typography λΠϙάϥϑΟ

  84. Color Scheme ΧϥʔεΩʔϜ

  85. UI Toolkit UIπʔϧΩοτ

  86. topcoat.io

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

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

  89. None
  90. None
  91. Build Your UI Toolkit UIπʔϧΩοτ͸૑Δ΋ͷ

  92. html5boilerplate.com

  93. getbootstrap.com

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

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

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

    be better. ❞
  97. Iterate on What’s Important. Fail Fast, Fail Often.

  98. Tools

  99. None
  100. Requirement for Designing Cards

  101. Partial Priority: High

  102. Data Listing Priority: Middle

  103. Boilerplate Priority: Middle

  104. Data Model Priority: Low

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

  106. Mixture

  107. Roots

  108. Middleman

  109. github.com/jensimmons/designstarterkit

  110. Recap

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

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

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

  114. Bret Victor Designer

  115. None
  116. The most dangerous thought you can have as a creative

    person is to think you know what you're doing. ❞
  117. Learn tools, and use tools, but don't accept tools. Always

    distrust them; always be alert for alternative ways of thinking. ❞
  118. Thank You! Follow me @ cssradar