Your SlideShare is downloading. ×
  • Like
  • Save
フロントエンドの求めるデザイン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,823 views
Published

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

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

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

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,823
On SlideShare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
0
Comments
0
Likes
32

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. THIS TALK IS CALLED フロントエンド の 求めるデザイン FRONTREND IN FUKUOKA
  • 2. #frontrend_ff2b
  • 3. @pocotan001 Hayato Mizuno
  • 4. “ お弁当箱というものを考えるときに、まず箱と いう言葉に捕われないように注意しなくてはい けません。箱という概念にとらわれてア イディアが一辺倒なものになってしま うからです。四角くないとダメだ、キューブ じゃないとダメだと思ってしまいます。[...] - Jonathan Ive http://www.gizmodo.jp/2013/02/post_11717.html
  • 5. http://dribbble.com/shots/1280333-iWatch-Mock-Up
  • 6. アジェンダ Photoshopは死んだ? コンポーネントを管理する パフォーマンスチューニング
  • 7. “ 訳: @cssradar システムデザインとインタラクションについて考 えることなく、インタラクティブなビジュ アルデザインを考えることができないという のが私の意見だ。我々はグラフィックデザイン をしているのではない。我々はポスターをデザ インしているのでも、標識をデザインしているの でもないのだ。 - Paul Adams http://article.enja.io/articles/the-dribbblisation-of-design.html
  • 8. 1. ポストpsd?
  • 9. http://www.bohemiancoding.com/sketch/
  • 10. http://html.adobe.com/edge/reflow/
  • 11. http://macaw.co/
  • 12. http://facebook.github.io/origami/
  • 13. http://noflojs.org/
  • 14. http://goo.gl/a7C96j
  • 15. https://www.easel.io/
  • 16. Designing in the browser? (Deciding in the browser)
  • 17. https://speakerdeck.com/studiomohawk/designing-in-the-browser-ver-1-dot-0-rc
  • 18. vs Browser Photoshop
  • 19. vs Browser Photoshop
  • 20. RWDに対応しやすい インタラクションを備えている CSSフレンドリー vs デザインと開発が同時に進められる 一部の修正作業を効率良く行える Photoshopクラッシュする Browser Photoshop高すぎる Photoshop
  • 21. vs Browser Photoshop
  • 22. 創造的な探査に適している レイアウトの並び替えが楽 ブラシや不規則なシェイプを描く機能 カンプの提出が必要 vs 使い慣れている 会社で決められている Browser HTML, CSSは難しい Photoshop
  • 23. 2. Photoshopの拡張性
  • 24. http://glifo.uiparade.com/
  • 25. http://www.store.uiparade.com/
  • 26. http://bjango.com/mac/skalapreview/
  • 27. https://layervault.com/
  • 28. + Browser Photoshop
  • 29. アジェンダ Photoshopは死んだ? コンポーネントを管理する パフォーマンスチューニング
  • 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. 1. 成果物の再考
  • 32. http://www.bestpsdfreebies.com/freebie/appz-psd-theme/
  • 33. 2. スタイルタイル
  • 34. http://styletil.es/
  • 35. http://webdesign.tutsplus.com/tutorials/workflow-tutorials/style-tiles-an-alternative-to-full-design-comps/
  • 36. 3. エレメントコラージュ, スタイルプロトタイプ
  • 37. http://sparkbox.github.io/style-prototype/
  • 38. http://graphicburger.com/flat-design-ui-components/
  • 39. http://medialoot.com/item/free-flat-ui-design-kit/
  • 40. http://www.specctr.com/
  • 41. 4. スタイルガイド
  • 42. http://sfdc-styleguide.herokuapp.com/
  • 43. http://hughsk.io/kss-node/
  • 44. http://stylifyme.com/
  • 45. 5. プロジェクトハブ
  • 46. http://24ways.org/2013/project-hubs/
  • 47. 6. 一貫性・ルール
  • 48. http://www.slideshare.net/hiloki/high-performance-webdesign
  • 49. https://github.com/t32k/speed/blob/master/articles/gzip.md
  • 50. http://methodandcraft.com/videos/hack-smart-objects-to-create-dynamic-sprites
  • 51. http://bjango.com/articles/linkedsmartobjects/
  • 52. アジェンダ Photoshopは死んだ? コンポーネントを管理する パフォーマンスチューニング
  • 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. http://www.strangeloopnetworks.com/web-performance-infographics
  • 55. http://www.keynote.com/docs/reports/Keynote-2012-Mobile-User-Survey.pdf
  • 56. 1秒 ... http://www.usability.gr.jp/alertbox/20091005_timeframes.html
  • 57. http://mirucho.me/
  • 58. 1. ネットワーキング
  • 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. Chrome
  • 61. IE 9
  • 62. https://www.easel.io/
  • 63. 2. レンダリング
  • 64. HTML DOM 視覚部分を 表すツリー レンダーツリー CSSOM CSS paint
  • 65. 16.67ms ...
  • 66. http://jsbin.com/umimos
  • 67. gradient border-radius box-shadow filter: blur background position: fixed background-attachment: fixed … http://jsbin.com/umimos
  • 68. http://jsbin.com/ocihek
  • 69. CSSコストの検証 with ねこ36匹 https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu
  • 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.
  • 72. “ 「それも、いいじゃないか」は、 おもしろい人生のスローガン。 "Why not" is a slogan for an interesting life. - Mason Cooley
  • 73. Thank you