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.

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

59.715 visualizações

Publicada em

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

Publicada em: Design
  • Seja o primeiro a comentar

最近の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にあげてから) • 共有するときは決定権のある人にまず見せる

×