フロントエンドの求めるデザイン

4,122 views

Published on

Frontrend in Fukuoka -(2014年1月25日開催)で使用したスライドです。

デバイスの多様化はとどまる所を知らず、Webデザインは複雑化するばかり。 960pxで固定された従来のカンプは、現在のWebを効率よくデザイン出来ているとは言えません。 本セッションでは、デザイナーとディベロッパーのギャップを埋めるべく、フロントエンド指向のWebデザインについてお話し出来ればと思っています。 特に、柔軟なデザインプロセス、パフォーマンスチューニングなどについて焦点を当てていきます。

Published in: Design
0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,122
On SlideShare
0
From Embeds
0
Number of Embeds
1,138
Actions
Shares
0
Downloads
0
Comments
0
Likes
40
Embeds 0
No embeds

No notes for slide

フロントエンドの求めるデザイン

  1. 1. THIS TALK IS CALLED フロントエンド の 求めるデザイン FRONTREND IN FUKUOKA
  2. 2. #frontrend_ff2b
  3. 3. @pocotan001 Hayato Mizuno
  4. 4. “ お弁当箱というものを考えるときに、まず箱と いう言葉に捕われないように注意しなくてはい けません。箱という概念にとらわれてア イディアが一辺倒なものになってしま うからです。四角くないとダメだ、キューブ じゃないとダメだと思ってしまいます。[...] - Jonathan Ive http://www.gizmodo.jp/2013/02/post_11717.html
  5. 5. http://dribbble.com/shots/1280333-iWatch-Mock-Up
  6. 6. アジェンダ Photoshopは死んだ? コンポーネントを管理する パフォーマンスチューニング
  7. 7. “ 訳: @cssradar システムデザインとインタラクションについて考 えることなく、インタラクティブなビジュ アルデザインを考えることができないという のが私の意見だ。我々はグラフィックデザイン をしているのではない。我々はポスターをデザ インしているのでも、標識をデザインしているの でもないのだ。 - Paul Adams http://article.enja.io/articles/the-dribbblisation-of-design.html
  8. 8. 1. ポストpsd?
  9. 9. http://www.bohemiancoding.com/sketch/
  10. 10. http://html.adobe.com/edge/reflow/
  11. 11. http://macaw.co/
  12. 12. http://facebook.github.io/origami/
  13. 13. http://noflojs.org/
  14. 14. http://goo.gl/a7C96j
  15. 15. https://www.easel.io/
  16. 16. Designing in the browser? (Deciding in the browser)
  17. 17. https://speakerdeck.com/studiomohawk/designing-in-the-browser-ver-1-dot-0-rc
  18. 18. vs Browser Photoshop
  19. 19. vs Browser Photoshop
  20. 20. RWDに対応しやすい インタラクションを備えている CSSフレンドリー vs デザインと開発が同時に進められる 一部の修正作業を効率良く行える Photoshopクラッシュする Browser Photoshop高すぎる Photoshop
  21. 21. vs Browser Photoshop
  22. 22. 創造的な探査に適している レイアウトの並び替えが楽 ブラシや不規則なシェイプを描く機能 カンプの提出が必要 vs 使い慣れている 会社で決められている Browser HTML, CSSは難しい Photoshop
  23. 23. 2. Photoshopの拡張性
  24. 24. http://glifo.uiparade.com/
  25. 25. http://www.store.uiparade.com/
  26. 26. http://bjango.com/mac/skalapreview/
  27. 27. https://layervault.com/
  28. 28. + Browser Photoshop
  29. 29. アジェンダ Photoshopは死んだ? コンポーネントを管理する パフォーマンスチューニング
  30. 30. “ 私たちはページをデザインしているの ではない、コンポーネントのシステム をデザインしているのだ。 We're not designing pages, we're designing systems of components. - Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  31. 31. 1. 成果物の再考
  32. 32. http://www.bestpsdfreebies.com/freebie/appz-psd-theme/
  33. 33. 2. スタイルタイル
  34. 34. http://styletil.es/
  35. 35. http://webdesign.tutsplus.com/tutorials/workflow-tutorials/style-tiles-an-alternative-to-full-design-comps/
  36. 36. 3. エレメントコラージュ, スタイルプロトタイプ
  37. 37. http://sparkbox.github.io/style-prototype/
  38. 38. http://graphicburger.com/flat-design-ui-components/
  39. 39. http://medialoot.com/item/free-flat-ui-design-kit/
  40. 40. http://www.specctr.com/
  41. 41. 4. スタイルガイド
  42. 42. http://sfdc-styleguide.herokuapp.com/
  43. 43. http://hughsk.io/kss-node/
  44. 44. http://stylifyme.com/
  45. 45. 5. プロジェクトハブ
  46. 46. http://24ways.org/2013/project-hubs/
  47. 47. 6. 一貫性・ルール
  48. 48. http://www.slideshare.net/hiloki/high-performance-webdesign
  49. 49. https://github.com/t32k/speed/blob/master/articles/gzip.md
  50. 50. http://methodandcraft.com/videos/hack-smart-objects-to-create-dynamic-sprites
  51. 51. http://bjango.com/articles/linkedsmartobjects/
  52. 52. アジェンダ Photoshopは死んだ? コンポーネントを管理する パフォーマンスチューニング
  53. 53. “ 訳: @cssradar 私はパフォーマンスを機能であると考えている。 [...] この競争の多いインターネットの世界で知って おくべきレッスンがあるとしたら、この世には2種 類のWebサイトしかない: 早いか、死んでいるかの どちらかだ。 To me, performance is a feature, [...] I think there's also a lesson to be learned here about the competitive landscape of the public internet, where there are two kinds of websites: the quick and the dead. - Jeff Atwood http://www.codinghorror.com/blog/2011/06/performance-is-a-feature.html
  54. 54. http://www.strangeloopnetworks.com/web-performance-infographics
  55. 55. http://www.keynote.com/docs/reports/Keynote-2012-Mobile-User-Survey.pdf
  56. 56. 1秒 ... http://www.usability.gr.jp/alertbox/20091005_timeframes.html
  57. 57. http://mirucho.me/
  58. 58. 1. ネットワーキング
  59. 59. HTTP Request Structure Set TCP Connection Send Data Complete Server ISP Client DNS Look up First Connect First HTTP Request DNS Lookup Connecting Waiting Receive Data Complete Receiving http://t32k.me/mol/log/reduce-http-requests-overview/
  60. 60. Chrome
  61. 61. IE 9
  62. 62. https://www.easel.io/
  63. 63. 2. レンダリング
  64. 64. HTML DOM 視覚部分を 表すツリー レンダーツリー CSSOM CSS paint
  65. 65. 16.67ms ...
  66. 66. http://jsbin.com/umimos
  67. 67. gradient border-radius box-shadow filter: blur background position: fixed background-attachment: fixed … http://jsbin.com/umimos
  68. 68. http://jsbin.com/ocihek
  69. 69. CSSコストの検証 with ねこ36匹 https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu
  70. 70. (none) 31.33 ms shadow+dotted 126.35 ms box-shadow 102.66 ms shadow+radius 649.71 ms border-radius 146.07 ms radius+dotted 3099.11 ms dotted-border 39.29 ms all mix!! 3651.06 ms ※あくまでDebugger上の数字であり、実際のブラウザではもっと早く処理されます
  71. 71.
  72. 72. “ 「それも、いいじゃないか」は、 おもしろい人生のスローガン。 "Why not" is a slogan for an interesting life. - Mason Cooley
  73. 73. Thank you

×