未来へ繋ぐ奥别产系デザイン思考
?
27 likes?5,179 views
WebSig1日学校2013 で使用したスライド。 Web の本質をおさらいしつつ、パソコンやスマートフォンといった特定のデバイスに捕われない Web サイト?アプリ設計の基礎を解説しました。
未来へ繋ぐ奥别产系デザイン思考
- 1. Future ProofDesign 未 来 へ 繋 ぐ W e b 系 デ ザ イ ン 思 考 WebSig １日学校 2013年10月5日長谷川恭久 @yhassy
- 2. 長谷川?恭久 ハ セ ガ ワ ヤ ス ヒ サ ウェブデザインに関わる仕事人 企画?制作?コンサルティング ライター?スピーカー
- 10. 模擬 ウ ェ ブ サ イ ト Web
- 15. 模擬 ウ ェ ブ サ イ ト Web スクリーンサイズ ハードウェア ソフトウェア 利用環境 文脈
- 16. 模擬 マ ル チ タ ッ チ 向 け Multi-touch
- 17. 2011年当时のスマホサイト
- 18. 模擬 マ ル チ タ ッ チ 向 け Multi-touch 指とデバイスの関係 安定しない回線 フォーカスしていない
- 20. by NickyColman Age of Tablet 2015年にはパソコンの年間販売台数を超える Tablet shipments forecasted to outpace PCs by 2015
- 21. 1980 1990 2000 2011 Windows Apple iPhone Android
- 22. 総務省 2013
- 23. Android Fragmentation Visualized (July 2013)
- 27. 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”3” ノート デスクトップ スマートフォン タブレット
- 33. by Sólveig Zophoníasdóttir あなたにとって Web はどのような存在ですか？ What is Web to you?
- 35. Web for All HTML5 CSS3 SVG SMIL API JavaScript
- 37. Designer デ ザ イ ナ ー 厳密に見た目をコントロールしたい 順序通りに画面を見てもらいたい 画像?映像を楽しんでもらいたい
- 39. Designer デ ザ イ ナ ー コントロール 柔軟性 グラフィック タイポグラフィ レイアウト 共有しやすさ 操作の自由度 フォールバック
- 40. Designer デ ザ イ ナ ー コントロール 柔軟性 グラフィック タイポグラフィ レイアウト 共有しやすさ 操作の自由度 フォールバック
- 41. 模擬 Designer デ ザ イ ナ ー コントロール優先 固定サイズ 見た目先行 独自表現 アクセシビリティ 可変サイズ 使い勝手 Webを支える様々な技術
- 42. by Martin Fisch Progressive Enhancement プ ロ グ レ ッ シ ブ ? エ ン ハ ン ス メ ン ト
- 44. ボックス ＋角丸
- 45. ＋グラデーション ＋シャドー
- 46. Mac + Chrome Windows XP + IE7 半透明の背景 立体感のある演出 角丸アニメーション 各サービスへのアクセス ニュース観覧 キーワード検索
- 47. Mac + Firefox Windows XP + IE7 キーワード検索 結果の絞り込み 十分な検索結果 利用できないアプリ 観覧のみ可能なアプリ
- 48. Designer デ ザ イ ナ ー コントロール 柔軟性
- 49. Designer デ ザ イ ナ ー コントロール 柔軟性
- 52. display: flex flex-direction 要素をどの方向に並べていくか justify-content 要素の横間隔をどのように空けるか 要素の縦間隔をどのように空けるかalign-content order 要素を表示させる順番
- 53. flex-direction
- 54. justify-content
- 55. align-content
- 56. order
- 58. by Sólveig Zophoníasdóttir あなたにとって Web はどのような存在ですか？ What is Web to you?