読み込み中...

1.作る前にUIを調べよう | ゼロからはじめるUI情報設計 | BONO

ゼロからはじめるUI情報設計

ゼロからはじめるUI情報設計

1

1.シリーズ全体像と手順

どんなシリーズ？

シリーズをやるメリット

要件をUIに反映するデザインの流れ

【補足】おすすめの道具:紙とペン

2

2.要件内容を把握する

お題を把握する-デザインの前に始めること

補足：内容がわからない時は1人で考えない

3

3.UIの要件定義をしよう

UIの要件定義をトレースしよう

【重要】UIの要件を整理する意味あります？

トレースするUI要件定義の完成形をチェック

①ユースケース：UIを人がいつ使うか整理しよう

②行動フロー : UIで必要なアクションの整理

③オブジェクト：表示する情報を書き出そう

④タスク：UIで必要なアクションを整理する

4

UIのリサーチをしよう

1.作る前にUIを調べよう

UIリサーチの方法：同じカテゴリーのものを調べる

UIリサーチ：まずは構造から参考にしよう

UIの見た目よりまずは、構造を参考に仕様

5

UIのVer1.0をデザインする

UI制作スタート:手書きで情報設計

UI情報構造のデザインをトレースで実践学習

6

1.0を壊して自分で改善する

UI情報設計をブラッシュアップするには？ - Ver.1で終わるのはハーゲンダッツ

ラフをデザインしたら、叩いてアイデアを出そう

「フィッシュボーン図」で課題解決のアイデアを効率よく考える

優先度を付ける。UIアイデアをパターンでデザインしていこう

UIの質の上げ方：テーブルUIをデザインする

配色はアクションからUIに指定していく

UIをブラッシュアップする方法：詳細ページの完成UIを紹介

7

お疲れ様でした！

おわりに：ゼロからはじめる情報設計

ゼロからはじめるUI情報設計

ゼロからはじめるUI情報設計

1

1.シリーズ全体像と手順

どんなシリーズ？

シリーズをやるメリット

要件をUIに反映するデザインの流れ

【補足】おすすめの道具:紙とペン

2

2.要件内容を把握する

お題を把握する-デザインの前に始めること

補足：内容がわからない時は1人で考えない

3

3.UIの要件定義をしよう

UIの要件定義をトレースしよう

【重要】UIの要件を整理する意味あります？

トレースするUI要件定義の完成形をチェック

①ユースケース：UIを人がいつ使うか整理しよう

②行動フロー : UIで必要なアクションの整理

③オブジェクト：表示する情報を書き出そう

④タスク：UIで必要なアクションを整理する

4

UIのリサーチをしよう

1.作る前にUIを調べよう

UIリサーチの方法：同じカテゴリーのものを調べる

UIリサーチ：まずは構造から参考にしよう

UIの見た目よりまずは、構造を参考に仕様

5

UIのVer1.0をデザインする

UI制作スタート:手書きで情報設計

UI情報構造のデザインをトレースで実践学習

6

1.0を壊して自分で改善する

UI情報設計をブラッシュアップするには？ - Ver.1で終わるのはハーゲンダッツ

ラフをデザインしたら、叩いてアイデアを出そう

「フィッシュボーン図」で課題解決のアイデアを効率よく考える

優先度を付ける。UIアイデアをパターンでデザインしていこう

UIの質の上げ方：テーブルUIをデザインする

配色はアクションからUIに指定していく

UIをブラッシュアップする方法：詳細ページの完成UIを紹介

7

お疲れ様でした！

おわりに：ゼロからはじめる情報設計

1. 1.作る前にUIを調べよう

クエスト4: UIのリサーチをしよう