O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

connpass design at BPStudy #88

1.502 visualizações

Publicada em

BPStudy #88 で話した connpass Design まわりネタ
http://bpstudy.connpass.com/event/10139/

Publicada em: Design
  • Seja o primeiro a comentar

connpass design at BPStudy #88

  1. 1. connpass Design Yumi Hashizume / 20141215 / BPStudy #88
  2. 2. お前誰よIntroduction
  3. 3. 橋爪由美 @uniq 株式会社ビープラウド / Designer
  4. 4. デザインが好き 企画・ディレクションも好き コードを書くのも好き チーム開発が好き
  5. 5. connpassには 2013.07あたりからアサイン
  6. 6. 今回話すこと • connpassのデザインの作り方 • …からの~、connpassのデザイナーの役目とは • connpass運用しながらCSS設計がんばったよ • デザイン設計はCSS設計と一心同体
  7. 7. conppassのデザインの作り方
  8. 8. よくある分業制の流れ ディレクター 考える人 デザイナー 作る人 エンジニア 作る人 戦略策定 UI ビジュアルデザインを 決める 実装
  9. 9. connpassの流れ デザイナー エンジニア 戦略策定 デザイナー エンジニア 気になる画面は 朝会ついでに わいわい確認して デザイン決定 デザイナー or デザイナー エンジニア ワイヤーフレーム作成・確認 各自作ってくる or みんなでホワイトボード ビジュアルデザイン作成 (たいていhtml状態)
  10. 10. みんなで考えて みんなで作る
  11. 11. 戦略策定ブレストをレコーディング ホワイトボードに皆でわいわい
  12. 12. しゃちょうの すごい要求分析つりー
  13. 13. ワイヤーフレーム作成 Balsamiq markups ラフな感じなので、デザインに左右されずにワイヤーフレーム検討できる エンジニアも作る
  14. 14. ワイヤーフレーム作成 ホワイトボードに手書き。みんなでわいわい。
  15. 15. 印刷してペーパープロトタイプのテスト ちょっと乱暴ですが、ホワイトボード等をそのまま印刷 してペーパープロトとして遷移テスト
  16. 16. 良い点
  17. 17. みんな戦略を理解している! • 漏れに早く気づく • 認識のズレが少ない • 実装・テストしながら、不適切な箇所に気づ きやすい
  18. 18. 手戻りロスの減らせる!
  19. 19. 独りよがりのデザインにならない • 気付きがたくさんある • デザインのテストをみんなでやってる感じ • ビジュアルデザインは、たいていHTMLで作る ので、実際に近い状態でテストできる
  20. 20. つまりconnpassの Designerって?
  21. 21. • みんなのデザインに関する意見・その理由をファ シリテーターとして聞き出す、整理する • デザイナーとしてベストだと思うデザインを理論 的に説明する • 最終的に何がベストかデザイナーとして判断する • 1人歩きできるところは1人歩きでデザイン作る
  22. 22. 色々と模索中
  23. 23. connpass運用しながら CSS設計し直した話
  24. 24. 最初に言っておきたいことが あります
  25. 25. コードを憎んで 人を憎まず コードは時とともに腐っていくもの
  26. 26. 以前のconnpassのCSS
  27. 27. • reset.css • common.css • base.css • ページ毎のcss
  28. 28. connpassってどんなサービスになるんだろう…? …という時代だったので、これはこれで何とか なってた
  29. 29. connpass改善フェーズに突入
  30. 30. mission • 使いにくいところを使いやすくする • 不便なところを便利にする • 明確に決まった戦略を後押しするデザインに する • => connpassのブランディングが必要
  31. 31. ブランディングに必要なもの 雰囲気の共通化 パーツの共通化 connpassというテーマを明確に 個性をもつ
  32. 32. module化されたCSSが必要 共通化されたブランドイメージ
  33. 33. そうだ、CSSを設計し直そう
  34. 34. common.css • 共通で使える文字色 • important, notice… • 共通で使えるmarginのclass • 共通で使えるcolumn
  35. 35. 他はmodule.cssにお引っ越し
  36. 36. module系css • ボタン、リスト、フォーム、テーブル等 • いったんmodule.cssに詰め込む • button.css, list.css, form.css, label.css などに 分ける
  37. 37. 共通パーツを意識することによって… デザインにテーマが出来る!
  38. 38. 危険なCSSを設計し直そう
  39. 39. 例えば .btn_red { background-color:#f00; color:#fff; font-size:24px; font-weight:bold; padding:10px 20px; }
  40. 40. これよりも小さい赤いボタン を作りたい時はどうすれば?
  41. 41. 新しいclass追加 .btn_red_small { background-color:#f00; color:#fff; font-size:12px; padding:3px; }
  42. 42. 赤くて大きいボタンの名前が .btn_red .btn_red {/* 赤いボタンといいつつ、大きいボタンでもある。class名として良くな い */ background-color:#f00;/* 色の表現。共通化できる */ color:#fff;/* 色の表現。共通化できる */ font-size:24px;/* 大きさの表現 */ font-weight:bold;/* 大きさの表現 */ padding:10px 20px;/* 大きさの表現 */ } .btn_red_small { background-color:#f00;/* 色の表現。共通化できる */ color:#fff;/* 色の表現。共通化できる */ font-size:12px;/* 大きさの表現 */ padding:3px;/* 大きさの表現 */ } 赤くて小さいボタンの名前が .btn_red_small
  43. 43. 例えばこう直す .btn_red { background-color:#f00;/* 色の表現 */ color:#fff; } .btn_black {/* 色の表現 */ background-color:#000; color:#fff; } .btn_large {/* 大きさの表現 */ font-size:24px; font-weight:bold; padding:10px 20px; } .btn_black_small {/* 大きさの表現 */ font-size:12px; padding:3px; }
  44. 44. 様々な表現が可能になる! 赤い大きいボタン= .btn_red.btn_large 赤い小さいボタン= .btn_red.btn_small 黒い大きいボタン= .btn_black.btn_large 黒い小さいボタン= .btn_black.btn_small …
  45. 45. デザインに幅ができる!
  46. 46. bootstrapやfoundationなど 既存のCSSフレームワークが参考 になる
  47. 47. おまけ
  48. 48. djangoのテンプレートを書く ために… DesignerだけどPython
  49. 49. http://www.slideshare.net/ yumi-uniq-ishizaki/ pyladies-141025-uniq
  50. 50. {% for p in event.user|slice:":3" %} <img src=“user_icon.png”> {% endfor %} ここがPythonだった!
  51. 51. djangoテンプレートあわあわ書いて、 Pythonよちよち勉強中
  52. 52. まとめ
  53. 53. まとめ • いいデザインをチームみんなで模索しながら やってるよ • デザインのメリットになるCSS設計をするよ • Pythonよちよちやってます
  54. 54. よりよいconnpassをユーザーの皆さんへ! ご清聴ありがとうございました ~次へ~

×