Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

プログラマがWebデザインについて考えてみた

7 126 vues

Publié le

Creator's village in EHIMEの資料

  • Soyez le premier à commenter

プログラマがWebデザインについて考えてみた

  1. 1. プログラマが Creator’s village in EHIME Vol. 2Webデザインについて 考えてみた
  2. 2. 自己紹介アイムービック勤務Webシステム作ってますGDG四国(旧四国GTUG)所属 bornknow108
  3. 3. 話すことプログラマ Vs WebデザイナWebデザイナに歩み寄ってみるプログラム + デザイン =?
  4. 4. プログラマ VSWebデザイナ
  5. 5. Webデザインについて 考える前に
  6. 6. Webデザイナーを 理解しよう
  7. 7. まずはいろいろ調べてみよう!
  8. 8. Googleさんに 聞いてみる
  9. 9. Webデザイナーはプログラマの敵らしい
  10. 10. WebDesigners VSWebDevelopers一昔前に、話題になったインフォグラフィック。
  11. 11. VS Part.1
  12. 12. WebデザイナーおしゃれWebデベロッパー非おしゃれ
  13. 13. VS Part.2
  14. 14. Webデベロッパーが圧倒!
  15. 15. VS Part.3
  16. 16. Webデザイナはデータベース、PC、Perl etc...Webデベロッパーはサーバークラッシュ、EPSファイルプログラムのわからない上司 etc...ともに、女性は苦手
  17. 17. けっこう、似てる?
  18. 18. ただ、デザインに 関して考えると
  19. 19. Webデザイナーのデザインを プログラマが見ると
  20. 20. プログラマは こう思ってるなんかすげーセンスだよね色使いがきれいだなー1pxの余白、1pxのシャドウ、はぁ? (私の主観のみで構成されています。)
  21. 21. プログラマのデザインを Webデザイナが見ると
  22. 22. Webデザイナは こう思ってる?すっきりしてるよねなんでもセンタリング?色彩感覚・・・ (私の主観のみで構成されています。)
  23. 23. Webデザインの分野では 勝てるはずがない
  24. 24. だから、相容れない
  25. 25. でも、仲良くしたい
  26. 26. じゃあ、どうしようか?
  27. 27. Webデザイナに歩み寄ってみる
  28. 28. Webデザイナに歩み寄るには、どうする?
  29. 29. プログラマはデザインがわからない
  30. 30. デザインはセンスだと思ってる
  31. 31. 直感的?
  32. 32. すぐに身につくわけでもないし
  33. 33. プログラマって
  34. 34. 論理的に考えるのはそれなりに得意なはず?
  35. 35. じゃあ、論理的にデザインを理解してみよう
  36. 36. 理解するためには
  37. 37. 勉強してみた
  38. 38. これで→ノンデザイナーズ・デザインブックRobin Williams 著
  39. 39. デザイナさんは既知の事かもしれませんが
  40. 40. 気付かされることばかり
  41. 41. せっかくだから 伝えたい
  42. 42. デザインの原則は4つ!
  43. 43. 「近接」
  44. 44. 関連する項目をまとめて グループ化すること
  45. 45. 関連する項目 をまとめて
  46. 46. 「整列」
  47. 47. すべての項目が他のものと 視覚的に関連すること
  48. 48. 視覚的につながる
  49. 49. 「反復」
  50. 50. 特徴を全体を通して 繰り返すこと
  51. 51. 一体化と視覚的楽しさ
  52. 52. 「コントラスト」
  53. 53. 2つの項目が、同じでない なら、異ならせること
  54. 54. はっきりちがうよう
  55. 55. 「近接」「整列」「反復」 「コントラスト」
  56. 56. デザインはセンスだけじゃなかった
  57. 57. 理論付けされた技術のかたまりだった
  58. 58. Webデザイナーさん すごいっす!!
  59. 59. この技術プログラムにも活かしたい
  60. 60. プログラム +デザイン = ?
  61. 61. デザインの技術ってプログラミングにも使える
  62. 62. 例えば
  63. 63. FizzBuzz問題1から100までの整数を表示ただし、3の倍数の時は「Fizz」、5の倍数の時は「Buzz」と表示公倍数なら「FizzBuzz」と表示
  64. 64. これをPHPで書くと
  65. 65. <?phpfor ($number = 1; $number < 100; $number++) {if($number % 15 === 0) {echo ‘FizzBuzz’;} else if ($number% 3 === 0) {echo ‘Fizz’;} else if ($number % 5 === 0) {echo‘Buzz’;} else {echo $number;}}
  66. 66. 見づらいので4つの原則を 適用してみる
  67. 67. 「近接」
  68. 68. <?phpfor ($number = 1; $number < 100; $number++) {if ($number % 15 === 0) {echo ‘FizzBuzz’;} else if ($number % 3 === 0) {echo ‘Fizz’;} else if ($number % 5 === 0) {echo ‘Buzz’;} else {echo $number;}}
  69. 69. 「整列」「反復」
  70. 70. <?phpfor ($number = 1; $number < 100; $number++) { if ($number % 15 === 0) { echo ‘FizzBuzz’; } else if ($number % 3 === 0) { echo ‘Fizz’; } else if ($number % 5 === 0) { echo ‘Buzz’; } else { echo $number; }}
  71. 71. 「コントラスト」
  72. 72. <?php/******************************************* * FizzBuzz問題 *******************************************// 1から100まで繰り返すfor ($number = 1; $number < 100; $number++) { // 3と5の最小公倍数の場合 if ($number % 15 === 0) { echo ‘FizzBuzz’; // 3の倍数の場合 } else if ($number % 3 === 0) { echo ‘Fizz’; // 5の倍数の場合 } else if ($number % 5 === 0) { echo ‘Buzz’;
  73. 73. どうですか?
  74. 74. きれいじゃないですか?
  75. 75. よみやすくないですか?
  76. 76. プログラム + デザイン =
  77. 77. さいこー!!
  78. 78. さいごに
  79. 79. 人に伝えるということは 同じ
  80. 80. すべての人にわかりやすく 伝えていきたい
  81. 81. デザイナーさん仲良くしてネ
  82. 82. ご清聴ありがとうございました

×