Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

最近のUIデザインプロセス

60,232 views

Published on

最近自分が仕事でやってるUIデザインプロセスについてまとめました。

Published in: Design

最近のUIデザインプロセス

  1. 1. 最近の UIデザインプロセス UXデザインチーム 勝島真悟
  2. 2. 1.話を聞きながら ラフを描く
  3. 3. 1.話を聞きながら ラフを描く • その場で描く(席に持ち帰ったらだめ) • あのゲームのあの画面みたいな? • アイデア出し的な感じで雑に描いて決める • これは?じゃあこれは?と矢継ぎ早に描く • 決定したら写真撮ってグループチャットにアップ
  4. 4. 2.ペーパー プロトタイピング
  5. 5. 2.ペーパー プロトタイピング • なんか気分が盛り上がる(^o^) • 画面遷移はどんな感じで? • 画面に入るか • 実装可能か • 時間内にできそうか • 何回でも簡単に作り直せる
  6. 6. 3.Prottで
 フィードバックをもらう
  7. 7. 3.Prottで
 フィードバックをもらう • まさかり飛んでくる • 使い勝手はどう? • メンバーに聞きたいこと • エンジニア:実装可能?実装コストは高い? • ディレクター:企画の意図通りになってる? • デザイナー:絵のレギュレーションは大丈夫? • 運営:コンプライアンス問題ない? • QA:ユーザーから問い合わせ来そうなのはどこ? • グラフィックを描き進めたらProttを更新する(常にProttを一元情報として共有)
  8. 8. 4.Sketchで ワイヤーフレームを描く
  9. 9. 4.Sketchで ワイヤーフレームを描く • 画面を俯瞰で見れるから情報設計も同時に • 詳細を詰める • ボタンの大きさ、グリッドなどを決める • 文字、画像が入るか
  10. 10. 6.Photoshop で モックを描く • Skala Preview 便利
 http://bjango.com/mac/skalapreview/ • Web書き出しアクションをつくる • 誰でも編集可能なpsdにする(しないやつを叩く) 
 http://photoshopetiquette.com/
  11. 11. 8.実装する • HTML & SCSS で書く • KSS スタイルガイドにパーツを追加する
  12. 12. 気をつけていること • 隣にいる人によく見てもらう(1時間に2∼3回) • 「どう?かっこ良くない?」「ださい?」 • 途中でも見せる(やる気がもたない) • 絶対にPCで見せずにスマホで見てもらう
 (主にProttにあげてから) • 共有するときは決定権のある人にまず見せる

×