読み込み中...

まとめ-Before/After比較 | UI PATTERN 入門 | BONO

UI PATTERN 入門

UI PATTERN 入門

1

パターンを出す方法を知ろう

シリーズの進め方：UIのパターン作りを実践しながら学ぼう

なぜパターンを出した方が良いのか

パターンの出し方

マテリアルデザインで基本パーツを知る

参考UIの調べ方

2

ホームUIをパターン作成でカイゼン

ホーム画面パターン作成ヘッダー

ホーム画面フィルター

ホーム画面コンテンツ

ホーム画面パターンからUIを作成

ダメな店舗選択UIをリデザインしよう

3

店舗選択UIをパターン作成でリデザイン

カイゼン要素を出そう

検索の基本UIを知ろう

参考を元に検索UI作成

店舗選択部分をカイゼン

UIパターンを作成しよう

店舗選択のリストUI作成

UIを統合、完成させる

4

商品詳細・カート・確認UIをリデザイン

STEP4で作るものを確認

「商品詳細」画面の改善

「カート導線」を改善

「カート」画面を改善

「確定/履歴」画面を改善

5

UI PATTERN まとめ

まとめ-Before/After比較

UI PATTERN 入門

UI PATTERN 入門

1

パターンを出す方法を知ろう

シリーズの進め方：UIのパターン作りを実践しながら学ぼう

なぜパターンを出した方が良いのか

パターンの出し方

マテリアルデザインで基本パーツを知る

参考UIの調べ方

2

ホームUIをパターン作成でカイゼン

ホーム画面パターン作成ヘッダー

ホーム画面フィルター

ホーム画面コンテンツ

ホーム画面パターンからUIを作成

ダメな店舗選択UIをリデザインしよう

3

店舗選択UIをパターン作成でリデザイン

カイゼン要素を出そう

検索の基本UIを知ろう

参考を元に検索UI作成

店舗選択部分をカイゼン

UIパターンを作成しよう

店舗選択のリストUI作成

UIを統合、完成させる

4

商品詳細・カート・確認UIをリデザイン

STEP4で作るものを確認

「商品詳細」画面の改善

「カート導線」を改善

「カート」画面を改善

「確定/履歴」画面を改善

5

UI PATTERN まとめ

まとめ-Before/After比較

1. まとめ-Before/After比較

クエスト5: UI PATTERN まとめ

動画を見た/手を動かして気づいたことなどはブログなどにまとめておきましょう。
言語化するとデザインをコントロールする力が上がります。

□ 改善前のUI
https://figma.fun/kGe3Ki

□ 改善後のUI
https://figma.fun/f8YLPV